CODEWITHSUNDEEP
angulartypescriptjasminekarma-jasmine
Vinicius Lustosa
Vinicius Lustosa

Reputation: 64

How to mock MAT_DIALOG_DATA with properties

I need to test a component that has MAT_DIALOG_DATA, I can even mock it but I have a problem with the properties received on data.

I believe the mock was done correctly, but I don't know exactly how to put the properties on the variable data.

*notifications-edit.component.spec.ts

fdescribe('NotificationsEditComponent', () => {
  let component: NotificationsEditComponent;
  let fixture: ComponentFixture<NotificationsEditComponent>;
  let dialogMock: jasmine.SpyObj<any>;
  let dialogRefMock: jasmine.SpyObj<any>;
  
  beforeEach(waitForAsync(() => {

    dialogRefMock = jasmine.createSpyObj('MatDialogRef', [
      'close',
    ]);

    TestBed.configureTestingModule({
      imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        AppModule,
        MatDialogModule,
        MatFormFieldModule,
        MatInputModule,
      ],
      declarations: [ NotificationsEditComponent ],
      providers: [
        { provide: MatDialogRef, useValue: dialogMock },
        { provide: MAT_DIALOG_DATA, useValue: {} },
      ]
    })
    .compileComponents();
  }));

*notifications-edit.component.ts

  constructor(
    public dialog: MatDialog,
    public dialogRef: MatDialogRef<NotificationsEditComponent>,
    @Inject(MAT_DIALOG_DATA) public notification: any
  ) {}

  ngOnInit() {
    this.form = new FormGroup({
      frequency: new FormControl(),
      topic: new FormControl(),
      title: new FormControl(),
      time: new FormControl(),
      day: new FormControl(),
      body: new FormControl()
    })
    this.form.setValue({
      frequency: this.notification.frequency,
      topic: this.notification.topic,
      title: this.notification.payload.notification.title,
      time: this.notification.time.seconds,
      day: this.notification.day.day,
      body: this.notification.payload.notification.body
    })
  }

error

TypeError: Cannot read property 'notification' of undefined
    at NotificationsEditComponent.ngOnInit (http://localhost:9876/_karma_webpack_/webpack:/src/app/modules/notifications/pages/notifications-edit/notifications-edit.component.ts:108:23)
    at callHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:2521:1)
    at callHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:2492:1)
    at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:2443:1)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:9429:1)
    at renderComponentOrTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:9528:1)
    at tickRootContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:10754:1)
    at detectChangesInRootView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:10779:1)
    at RootViewRef.detectChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:22792:1)
    at ComponentFixture._tick (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.js:141:1)

Upvotes: 1

Views: 2884

Answers (1)

vazsonyidl
vazsonyidl

Reputation: 471

Have you tired create a mock for your MAT_DIALOG_DATA? As I see, you need some properties, so you should give a shot for

const notificationMock = {
  frequency: yourmockvalue,
  topic: yourmockvalue,
  payload: {
   notification: {
      title: yourmockvalue,
      body: yourmockvalue
   }
  },
  time: {
    seconds: yourmockvalue
  },
  day: {
    day: yourmockvalue
  },
}

For the first guess, I think your component recieves a {} as a mock, that is why it can not read properties from that.

And now you can use in your testing setup.

{ provide: MAT_DIALOG_DATA, useValue: notificationMock }

Could you please try mocking this way?

And my last suggestion: use the ? operator on ngOninit when reading the properties, because in production your code will break the same way as it did now if does not receive the correct MAT_DIALOG_DATA.

Elvis operator

Upvotes: 2

Related Questions