Angular 4 + Jest-Preset-Angular: Testanimation auf Host mit Trigger aus Datei importiert

Question

Ich habe ein Problem bei der Ausführung von Tests mit Jest-Preset-Angular auf einer Komponente, die eine Animation auf Host-Element aus einer separaten Datei importiert hat (so kann in einer anderen Komponente wiederverwendet werden).

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

Tatsache ist, dass, wenn ich copy-paste den Abzug in die animations Eigenschaft die @Component Dekorator mein Test weitergeben ... sonst scheitert es, da es scheint, die Animationsdeklaration nicht zu finden.

Irgendwelche Ideen?

Answer 1

Ich werde meine eigene Frage beantworten, wenn irgendein Körper jemals das gleiche Problem haben wird.

Es gibt ein Problem here angeben, dass Sie die animations Eigenschaft vor die styleUrls Eigenschaft im @Component Dekorateur setzen müssen.

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

Und voila!