mercredi 20 mai 2020

Unit testing in angular snackbar

I am making a simple snackbar for which code as follows,

app.component.ts:

  ngOnInit(){
    this.dataService.valueChanges.pipe(
        filter((data) =>data=== true),
        switchMap(() => {
          const snackBarRef = this.matSnackBar.open(
            'A new value updated',
            'OK',
            {
              duration: 3000
            }
          );

          return snackBarRef.onAction();
        })
      )
      .subscribe(() => {
        this.window.location.reload();
      });
  }

app.component.spec.ts (Including mock data for service)

describe('AppComponent', () => { 
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let matSnackBarSpy: jasmine.SpyObj<MatSnackBar>;

  let a = "";
  let b = "";
  let c = "";

  const mockDataService = {
    valueChanges: of(true)
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({

    a = "Test";
    b = "X";
    c = "suc";
    matSnackBarSpy = TestBed.get<MatSnackBar>(MatSnackBar);

 })
}))

  describe('#ngOnInit()', () => {

    it('should call MatSnackBar.open()', async(done: DoneFn) => {
      const error = new HttpErrorResponse({ error: 'Some error' });

      component.ngOnInit();

      expect(mockDataService.valueChanges).toBeTruthy();
      expect(matSnackBarSpy.open(a,b,c)).toBeTruthy();

      done();
    });
  });

})

data.service.ts

import { Observable } from 'rxjs';

export class DataService {
  valueChanges: Observable<boolean>;
}

Explanation:

-> I am having a service which has the property valueChanges with type as Observable<boolean> .

-> In component.ts, I am getting the value change as like mentioned above and end result I receive is boolean value true and also snackbar gets opened and everything is working fine.

-> Now I am into implementation of test cases for the above like in compoenent.spec.ts,

      expect(mockDataService.valueChanges).toBeTruthy();
      expect(matSnackBarSpy.open(a,b,c)).toBeTruthy();

This results in success case but I am forever receiving this below output in chrome.

enter image description here

-> But I have tried this with ref to Mocking MatSnackBar in Angular 8 & Jasmine but it doesn't helps.

I am new in angular testing world so any expertise here please help me. I am stuck with this for very long time and everything is blocked and I am unable to wrap my head over it.

Requirement: Need to cover all the tests that currently shows warning/indication of not covered in the above image..

Aucun commentaire:

Enregistrer un commentaire