如何为 Angular 代码编写单元测试用例

Question

我正在尝试为我的角度项目编写测试用例。我使用的是角度版本 16。 下面是我的代码。 在我的代码中，我没有在测试用例中获取 component.appRuleList 和 component.appRuleOptions 值。两者都变得像未定义。如何在spec.ts文件中获取这些值

app.component.ts：

public appRuleOptions:string[] = [];
public appRuleList:any[] = [];
public selectedName = 'test';
public private:Subject<boolean> = new Subject<boolean>();

public ngOnInit(): void {
    this._store$
        .pipe(takeUntil(this.destroy), select(applicationRows))
        .subscribe((userIdentificationPart: IApplicationRule) => {
            if (userIdentificationPart && userIdentificationPart.applicationRule) { 
                this.appRuleList = userIdentificationPart.applicationRule || [];
                this.appRuleOptions = userIdentificationPart.applicationRule.map(
                    (x: IApplicationMainRules) => this.selectedName + '/' + x.name,
                );
                
            }
        });
}
 

app.component.spec.ts：

 it('should subscribe to the store and update appRuleList and appRuleOptions on ngOnInit', () => {
const applicationRule = [
 
  {
      "name": "ui",
      "place": "usa"
  }
 ];

component.selectedName = 'test';
(component['_store$'].pipe as jasmine.Spy).and.returnValue(of(applicationRule));

component.ngOnInit();

fixture.detectChanges();


expect(component.appRuleList).toEqual(applicationRule); //Getting error
expect(component.appRuleOptions).toEqual([
  "power/testing" 
]);


});

我期待 app.component.spec.ts 文件中的 component.appRuleList 和 component.appRuleOptions 值。

Answer 1

首先将

provideMockStore

添加到测试模块的providers数组中。

beforeEach(async () => {
  await TestBed.configureTestingModule({
    providers: [provideMockStore()],
  }).compileComponents();
});

然后获取这个模拟商店来模拟返回值。

beforeEach(() => {
  store = TestBed.inject(MockStore);
  fixture = TestBed.createComponent(App);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

获取store并存储后，我们可以使用

overrideSelector

来配置返回值。

beforeEach(() => {
  store = TestBed.inject(MockStore);
  mockBooksSelector = store.overrideSelector(selectBooks, [
    {
      name: 'ui',
      place: 'usa',
    },
  ]);
  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

完整代码：

import {
  TestBed,
  ComponentFixture,
  waitForAsync,
  fakeAsync,
  flush,
} from '@angular/core/testing';
import { MockStore, provideMockStore } from '@ngrx/store/testing';
import { AppState, App, selectBooks } from '../main';

describe('AppComponent', () => {
  let component: App;
  let fixture: ComponentFixture<App>;
  let store: MockStore<AppState>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      providers: [provideMockStore()],
    }).compileComponents();
  });

  beforeEach(() => {
    store = TestBed.inject(MockStore);
    fixture = TestBed.createComponent(App);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should subscribe to the store and update appRuleList and appRuleOptions on ngOnInit', fakeAsync(() => {
    const applicationRule = [
      {
        name: 'testing',
        place: 'usa',
      },
    ];

    component.selectedName = 'power';
    mockBooksSelector = store.overrideSelector(selectBooks, {
      applicationRule,
    } as any);

    component.ngOnInit();
    flush();
    expect(component.appRuleList).toEqual(applicationRule); // Getting error
    expect(component.appRuleOptions).toEqual(['power/testing']);
  }));
});