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

Question

I am having an issue issue when running tests with Jest-Preset-Angular on a component that has an animation on host element imported from a seperate file (so it can be reused in another component).

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

The fact is that if I copy-paste the trigger into the animations property of the @Component decorator my test pass ... otherwise it fails as it doesn't seems to find the animation declaration.

Any ideas?

Answer 1

I will answer my own question if any body ever have the same problem.

There is an issue here specifying that you need to put the animations property before the styleUrls property in the @Component decorator.

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

And voila!