由于动画中的 query() 调用导致 Angular 单元测试失败

Question

我有一个入口组件，其中包含登录表单和注册表单(每一个都是它们自己的组件)。入口组件包含一个变量，说明是显示登录组件还是注册组件，这是使用模板中的元素进行切换的。

当切换此变量时，包装子组件的容器会随着它从登录 => 注册(反之亦然)的变化而动画化。

当我在单元测试中单击此元素以切换到注册表单时，测试失败，因为我需要在单击切换后调用 fixture.detectChanges() 以便与注册表单实例。对 fixture.detectChanges() 的调用会导致以下错误。

Error: Unable to process animations due to the following failed trigger transitions @entryModeTransition has failed due to: 

- `query("app-login-form > form")` returned zero elements. (Use `query("app-login-form > form", { optional: true })` if you wish to allow this.)

在 beforeEach() block 中还有一个 fixture.detectChanges() 调用。

我已确保在测试设置中包含 NoopAnimationsModule，但这似乎并不能阻止动画触发(我认为 NoopAnimationsModule 可以).

我可以简单地将 { optional: true } 选项添加到动画定义中的 query() 调用中，但是我不喜欢添加这个的想法贯穿整个动画，当它们只是为了防止测试失败时。

在相关的情况下，使用 ng-mocks 模拟登录和注册表单组件。

有什么方法可以阻止动画在单元测试中运行？

Answer 1

为了防止其他人遇到这个问题，我最终通过在规范设置中构建组件时覆盖动画来解决这个问题。

这样我仍然可以像在现有测试中一样模拟子组件，并且也不需要调整动画定义。

覆盖是通过将 animations 元选项设置为一个数组来完成的，该数组包含一个与导致错误的动画同名的空触发器定义。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [EntryComponent, MockComponents(LoginFormComponent, RegisterFormComponent)],
      imports: [NoopAnimationsModule, ...other imports omitted],
      providers: [...providers omitted]
    })
      .overrideComponent(EntryComponent, {
        set: {
          animations: [trigger('entryModeTransition', [])]
        }
      })
      .compileComponents();
  }));

如果许多测试需要此解决方法，甚至可以将空触发器的创建移至实用程序函数，这可以整理覆盖:

.overrideComponent(EntryComponent, {
  set: {
    animations: mockAnimations(['entryFormTransition, 'someOtherTransition'])
  }
})