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 { }

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

有什么想法吗？

Answer 1

如果有任何身体出现同样的问题，我会回答我自己的问题。

问题here指定您需要在animations装饰器中的styleUrls属性之前放置@Component属性。< / p>

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：使用从文件导入的触发器在主机上测试动画

1 个答案: