单元测试，尝试触发 ngOnchange 方法 Jasmine

Question

我正在这里测试这个功能：

ngOnChanges(): void {
    if (this.isCustomer) {
      let sectionCopy = [...this.sections];
      this.sectionsNotFilled = sectionCopy.find(section => section.filled === false);
...
    }
}

我在很多资源上看到为了触发 ngOnChanges，我必须使用fixture.detectChanges();，但我仍然无法测试并且在我的测试中得到了错误的结果：

...
let component: XXX;
let fixture: ComponentFixture<XXX>;
...
const sections = [
  {
    key: 'SECTION1',
    name: 'Section 1',
    filled: true
  },
  {
    key: 'SECTION2',
    name: 'Section 2',
    filled: false
  }
];

...

it('should do test', () => {
    const sectionsMock = {...sections};
    component.sections = sectionsMock;
    component.isCustomer = true;

    console.log(component.sections); => section are here
    //trigger

    fixture.detectChanges();

    console.log(component.sectionsNotFilled);

    expect(component.sectionsNotFilled).toBe(true); => return false :/
  });

有什么想法吗？我是不是做错了什么？

Answer 1

很抱歉发布到旧线程。我的回答很可能不再与 PO 相关，但希望对其他有类似问题的人有所帮助。

通过在每次测试之前重新配置testBed，我设法让ngOnChanges 响应fixture.detectChanges：

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: ...,
      providers: ...,
    }).compileComponents();

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

如果有更好的解决方案，将很高兴听到。

Answer 2

ngOnChanges 在第一个 fixture.detectChanges() 而不是后续的触发。

beforeEach(() => {
  fixture = TestBed.createComponent(XXX);
  component = fixture.componentInstance;
  const sectionsMock = {...sections};
  component.sections = sectionsMock;
  component.isCustomer = true; // set isCustomer = true here
  fixture.detectChanges(); // call fixture.detectChanges() here to go to ngOnChanges()
                           // and the line above will ensure that it goes inside of the if block

});

it('should do test', () => {
  expect(component.sectionsNotFilled).toBeTruthy(); // I think you need toBeTruthy() here
                                                    // because I think sectionsNotFilled resolves into an object.
});