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

Question

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

例子.animation.ts

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

export const ExampleAnimationHost = { '[@example]': '' };
export const ExampleAnimationTrigger = trigger('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 { }

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

有任何想法吗？

Answer 1

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

这里有一个问题，指定您需要将属性放在装饰器中的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 { }

瞧！