Question

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

切换此变量后，随着子元素从login =>寄存器更改（反之亦然），包装子组件的容器会设置动画。

当我单击此元素以切换到单元测试中的注册表时，该测试失败，因为我需要在单击切换开关之后调用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.)的调用会导致以下错误。

fixture.detectChanges()

在beforeEach（）块中还有一个NoopAnimationsModule调用。

我已经确保在测试设置中包含NoopAnimationsModule，但是这似乎并不能阻止动画的触发（我认为{ optional: true }会这样做）。

我可以在动画定义内的query()调用中简单地添加ng-mocks选项，但是我不喜欢在整个动画中都添加此选项以防止测试失败的想法。

如果相关，则使用{{1}}模拟登录和注册表单组件。

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

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'])
  }
})

由于动画中的query（）调用，导致角度单元测试失败

1 个答案: