Angular 单元测试中的 changeDetection() 后输入值未更改

Question

我使用这个组件代码：

HTML:

<app-input [model]="model" field="name"></app-input>

打字稿：

@Component({
  selector: 'app-post-create-edit',
  templateUrl: './post-create-edit.component.html',
  styleUrls: ['./post-create-edit.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PostCreateEditComponent {
  model: new Post();
}

在我的 spec.ts 文件中：

describe('PostCreateEditComponent', () => {
  let fixture: ComponentFixture<PostCreateEditComponent>;
  let component: PostCreateEditComponent;
  const datas = POSTS_CREATE_EDIT_DATASET;
  const model: PostInterface = new Post([datas[0]);

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [...],
      providers: [...],
      declarations: [PostCreateEditComponent]
    })
    .compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(PostCreateEditComponent);
      component = fixture.componentInstance;
      debugElement = fixture.debugElement;
      component.model = model;
      fixture.detectChanges();
    });
  });

  describe('general', () => {
    it('create-edit component test', () => {
      fixture.whenStable().then(() => {
        const container = context.debugElement
          .queryAll(By.css(`app-input[field="name"]`));
        const input = container[0].queryAll(By.css(context.input.type));

        expect(input[0].nativeElement.value).toEqual(model.name);
      });
    });
  });
});

它说 Error: "name" input element: Expected 'First post title' to equal ''.

我不明白为什么在调用 changeDetection() 后不更改输入字段的值。

我该如何解决这个问题？我想念什么？

Answer 1

我认为问题与您的想法相反。 Jasmine 断言首先给出“找到的”值，其次给出期望值。它期待 '' 但发现 'First post title'.

我觉得。 Jasmine 断言响应总是让我感到困惑 ^^

Angular 单元测试中的 changeDetection() 后输入值未更改

Input value does not change after changeDetection() in Angular unit test

testing

unit-testing

angular2-changedetection

angular