typescript - Testa Angular snackbar

Jag gör en enkel snackbar för vilken koden är som följer,

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 (Inklusive mockdata för tjänst)

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>;
}

Förklaring:

• Jag har en tjänst som har egenskapen valueChanges med typ Observable<boolean>.

• I component.ts får jag värdeförändringen som nämnts ovan och slutresultatet jag får är booleanvärdet true och även snackbar öppnas och allt fungerar bra.

• Nu är jag inne på implementering av testfall för ovanstående, som i component.spec.ts,

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

Detta resulterar i ett lyckat fall men jag får hela tiden följande utdata i Chrome.

• Men jag har försökt detta med avseende på att mocka MatSnackBar i Angular 8 & Jasmine men det hjälper inte.

Krav: Behöver täcka alla tester som för närvarande visar varning/indikation på att de inte är täckta i bilden ovan..

Ovanstående testfall körs men testtäckningen visar fortfarande funktion täcks inte och även uttryck täcks inte varning när vi öppnar index.html för komponenten.

Svar #1

Så, du bör i princip testa om matSnackBar-metoderna kallas på rätt sätt eller inte. Att testa beteendet hos matSnackBar är inte en enhetstestning.

Försök

class MatSnackBarStub{
  open(){
    return {
      onAction: () => of({})
    };
  }

}

i component.spec-filen

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [SomeComponent],
      providers: [{provide: MatSnackBar , useClass: MatSnackBarStub}]
    }).compileComponents();
  }));

  it('should create', () => {
    spyOn(component.matSnackBar,"open").and.callThrough();
    component.ngOnInit();
    expect(component.matSnackBar.open).toHaveBeenCalled();
    // you can also use ".toHaveBeenCalledWith" with necessary params
  });

Jag skulle föreslå att du tar en titt på denna samling artiklar relaterade till enhetstestning med Jasmine och Karma. Det finns en artikel om hur man använder stubs och spioner. Jag hoppas att detta skulle vara till hjälp.