测试 angular 零食

Question

我正在制作一个简单的小吃店，其代码如下，

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（包括服务模拟数据）

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

解释：

我正在使用属性 valueChanges 类型为 Observable<boolean> 的服务。
在 component.ts 中，我得到了如上所述的值更改，我收到的最终结果是布尔值 true 并且小吃店也打开了，一切正常.

现在我正在为上面的 compoenent.spec.ts、

实施测试用例

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

这导致成功案例，但我永远在 chrome 中收到以下输出。

但是我已经尝试过参考 Mocking MatSnackBar in Angular 8 & Jasmine 但它没有帮助。

要求: 需要涵盖当前显示的所有测试 warning/indication 或上图中未涵盖的..

上面的测试用例是运行但测试覆盖率仍然显示 function not covered 并且 statement not covered warning when we打开组件的 index.html。

Answer 1

因此，您基本上应该测试 matSnackBar 方法是否被正确调用。 matSnackBar 的测试行为不是单元测试。

尝试

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

}

在 component.spec 文件中

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

我建议您看一下 this collection of articles 与使用 jasmine 和 karma 进行单元测试相关的内容。有一篇文章介绍如何使用存根和间谍。我希望这会有所帮助

测试 angular 零食

Test angular snackbar

unit-testing

jasmine

typescript

karma-jasmine

angular