测试角小吃吧

Question

我正在制作一个简单的snackbar，代码如下，

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 中收到以下输出。

• 但我已经尝试使用 ref 到 Mocking MatSnackBar in Angular 8 & Jasmine 进行此操作，但没有帮助。

要求：需要涵盖当前显示警告/指示上图中未涵盖的所有测试..

以上测试用例正在运行，但当我们打开组件的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
  });

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