使用 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。
• 完成这项工作的关键是模拟在组件的构造函数中注入的 ObservableMedia 依赖项。请注意 mockFlex 设置，并且它在提供程序数组中被替换为 ObservableMedia 的 TestBed。
• 另请注意，在设置changeMqAlias 之前，不会调用fixture.detectChanges()。原因是fixture.detectChanges() 将调用ngOnInit() 并且您需要提前设置此变量以通过IF 语句控制路径。详情见official documentation。
• 请随意将这个 Stackblitz 分叉到您自己的帐户中并使用它。如果您将来还有其他问题，那么制作一个展示实际问题的 Stackblitz 会极大地帮助其他人快速分析您的问题并提供解决方案。