Angular 4 + Jest-Preset-Angular : 使用从文件导入的触发器在主机上测试动画

Question

当运行在一个组件上使用 Jest-Preset-Angular 进行测试时，我遇到了一个问题，该组件在从单独文件导入的主机元素上有动画（因此它可以在另一个组件中重复使用）。

example.animation.ts

import { trigger } from '@angular/animations';

export const ExampleAnimationHost = { '[@example]': '' };
export const ExampleAnimationTrigger = trigger('example', []);

example.component.ts

import { Component } from '@angular/core';
import { ExampleAnimationHost, ExampleAnimationTrigger } from './example.animation';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  animations: [ExampleAnimationTrigger],
  host: ExampleAnimationHost,
})
export class ExampleComponent { }

事实是，如果我将触发器 复制粘贴 到 @Component 装饰器的 animations 属性中，我的测试就会通过。 ..否则它会失败，因为它似乎没有找到动画声明。

有什么想法吗？

Answer 1

如果有人遇到同样的问题，我会回答我自己的问题。

有一个问题 here 指定您需要将 animations 属性放在之前 styleUrls 属性在 @Component 装饰器中。

import { Component } from '@angular/core';
import { ExampleAnimationHost, ExampleAnimationTrigger } from './example.animation';

@Component({
  animations: [ExampleAnimationTrigger], // must be place before styleUrls
  host: ExampleAnimationHost,
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent { }

瞧！

Angular 4 + Jest-Preset-Angular : 使用从文件导入的触发器在主机上测试动画

Angular 4 + Jest-Preset-Angular : testing animation on host with trigger imported from file

angular

jestjs

angular-animations