测试有角小吃吧 [英] Test 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 (包括用于服务的模拟数据)

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

说明:

• 我正在使用属性为valueChanges且类型为Observable<boolean>的服务.

在component.ts中，我得到了如上所述的值更改，并且我收到的最终结果是布尔值true，还打开了快餐栏，并且一切正常.

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.

现在我要像上述compoenent.spec.ts，

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

这将导致成功案例，但是我将永远在chrome中得到以下输出.

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

• 但是我已经尝试使用在Angular 8&中模拟MatSnackBar进行了尝试.茉莉花，但没有帮助.

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

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

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

上面的测试用例正在运行，但是当我们打开组件的index.html时，测试覆盖率仍然显示功能未覆盖和声明未覆盖的警告.

Above test cases are running but test coverage shows still function not covered and also statement not covered warning when we open index.html of the component.

推荐答案

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

So, you basically should test whether matSnackBar methods are called properly or not. Testing behavior of matSnackBar is not a unit testing.

尝试

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

我建议您看看

I would suggest you to take a look at this collection of articles related to unit testing using jasmine and karma. There is one article on how to use stubs and spies. I hope this would help

这篇关于测试有角小吃吧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！