javascript - 使用 Karma 和 Jasmine 测试订阅中的 IF

Question

我在 Angular 6 中进行单元测试，但我在测试这个 IF 分支时遇到了问题。我用它来观察屏幕有多大，从而决定要显示多少列。我正在努力解决如何在 ngOnInit() 中的订阅内部进行测试。

这个

 this.watcher = this.media.subscribe((change: MediaChange) =>....

代码覆盖显示它没有进入这些服务的 if 和 else。这是我能做的最好的。 Media Change 服务不断查看屏幕大小，以决定它在表格中显示多少列

  ngOnInit() {
        this.watcher = this.media.subscribe((change: MediaChange) => {
          this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
          this.changeMqAlias = change.mqAlias;

          if (this.changeMqAlias == this.changeSize.XS) {

            this.displayedColumns = ['job', 'name', 'totalValue'];
          } else {
            this.displayedColumns = ['internalId', 'DateOfPublication', 'alias', 'job', 'name', 'totalValue'];
          }
          return change.mqAlias;
        });
      }

文件测试

it('should create', () => {
                fixture.whenStable().then(() => {
                  
                  expect(component).toBeTruthy();
                });
              });

              it('should create which 3 columns in mat table', () => {
                fixture.whenStable().then(() => {
                  component.changeMqAlias = 'xs';
                  expect(component).toBeTruthy();
                });
              });
             
            });

Answer 1

您可以通过不同的方式来解决这个问题。在订阅内部进行测试的关键是您必须模拟 ObservableMedia 服务，以便它返回一个可观察对象。然后，您可以将 component.changeMqAlias 的值更改为不同的值，并查看您的“if”是否正确解析了两种方式。

我已经设置了一个 Stackblitz向您展示一种测试给定功能的方法。这是来自 Stackblitz 的 describe:

describe('app testing', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    const mockFlex = of({ // create an Observable that returns a desired result
        mqAlias: 'xs',
        mediaQuery: 'test mQ'
    });

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [ MatTableModule /* Other imports needed */ ],
            declarations: [ MyComponent ],
            providers: [
                { provide: ObservableMedia, useValue: mockFlex }
            ]
        }).compileComponents();
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.debugElement.componentInstance;
    }));

    it('should create', () => {
        expect(component).toBeTruthy();
    });
    it('should have 3 columns in mat table when changeMqAlias === "xs"', () => {
        component.changeMqAlias = 'xs';
        fixture.detectChanges();
        expect(component.displayedColumns).toEqual(['job', 'name', 'totalValue']);
    });
        it('should have 6 columns in mat table when changeMqAlias !== "xs"', () => {
        component.changeMqAlias = 'xl';
        fixture.detectChanges();
        expect(component.displayedColumns.length).toEqual(6);
    });

});

一些注意事项:

• 您从未指定组件的名称，所以我只是将其命名为 MyComponent。
• 完成这项工作的关键是模拟注入(inject)到组件构造函数中的 ObservableMedia 依赖项。请注意 mockFlex 设置，并且它在 providers 数组中被替换为 ObservableMedia 的 TestBed。
• 另请注意，在设置 changeMqAlias 之后，才会调用 fixture.detectChanges()。这是因为 fixture.detectChanges() 将调用 ngOnInit() 并且您需要提前设置此变量以控制通过您的 的路径IF 语句。详情在official documentation .
• 随时将此 Stackblitz fork 到您自己的帐户并试用它。如果您将来有其他问题，那么制作一个 Stackblitz 来展示实际问题可以极大地帮助其他人快速分析您的问题并提供解决方案。