test(ivy): re-enable passing animation tests (#27997)

PR Close #27997
This commit is contained in:
Kara Erickson 2019-01-08 12:41:28 -08:00
parent a0840242d7
commit 1a7f92c423
1 changed files with 62 additions and 66 deletions

View File

@ -817,43 +817,40 @@ const DEFAULT_COMPONENT_ID = '1';
}); });
describe('host bindings', () => { describe('host bindings', () => {
fixmeIvy('unknown').it( it('should trigger a state change animation from state => state on the component host element',
'should trigger a state change animation from state => state on the component host element', fakeAsync(() => {
fakeAsync(() => { @Component({
@Component({ selector: 'my-cmp',
selector: 'my-cmp', template: '...',
template: '...', animations: [trigger(
animations: [trigger( 'myAnimation',
'myAnimation', [transition(
[transition( 'a => b',
'a => b', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
[style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])], })
}) class Cmp {
class Cmp { @HostBinding('@myAnimation')
@HostBinding('@myAnimation') exp = 'a';
exp = 'a'; }
}
TestBed.configureTestingModule({declarations: [Cmp]}); TestBed.configureTestingModule({declarations: [Cmp]});
const engine = TestBed.get(ɵAnimationEngine); const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(Cmp); const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance; const cmp = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
engine.flush(); engine.flush();
expect(getLog().length).toEqual(0); expect(getLog().length).toEqual(0);
cmp.exp = 'b'; cmp.exp = 'b';
fixture.detectChanges(); fixture.detectChanges();
engine.flush(); engine.flush();
expect(getLog().length).toEqual(1); expect(getLog().length).toEqual(1);
const data = getLog().pop() !; const data = getLog().pop() !;
expect(data.element).toEqual(fixture.elementRef.nativeElement); expect(data.element).toEqual(fixture.elementRef.nativeElement);
expect(data.keyframes).toEqual([ expect(data.keyframes).toEqual([{offset: 0, opacity: '0'}, {offset: 1, opacity: '1'}]);
{offset: 0, opacity: '0'}, {offset: 1, opacity: '1'} }));
]);
}));
// nonAnimationRenderer => animationRenderer // nonAnimationRenderer => animationRenderer
fixmeIvy('unknown').it( fixmeIvy('unknown').it(
@ -2720,44 +2717,43 @@ const DEFAULT_COMPONENT_ID = '1';
expect(elm.innerText.trim()).toEqual(''); expect(elm.innerText.trim()).toEqual('');
})); }));
fixmeIvy('unknown').it( it('should trigger a state change listener for when the animation changes state from void => state on the host element',
'should trigger a state change listener for when the animation changes state from void => state on the host element', fakeAsync(() => {
fakeAsync(() => { @Component({
@Component({ selector: 'my-cmp',
selector: 'my-cmp', template: `...`,
template: `...`, animations: [trigger(
animations: [trigger( 'myAnimation2',
'myAnimation2', [transition(
[transition( 'void => *',
'void => *', [style({'opacity': '0'}), animate(1000, style({'opacity': '1'}))])])],
[style({'opacity': '0'}), animate(1000, style({'opacity': '1'}))])])], })
}) class Cmp {
class Cmp { // TODO(issue/24571): remove '!'.
// TODO(issue/24571): remove '!'. event !: AnimationEvent;
event !: AnimationEvent;
@HostBinding('@myAnimation2') @HostBinding('@myAnimation2')
exp: any = false; exp: any = false;
@HostListener('@myAnimation2.start', ['$event']) @HostListener('@myAnimation2.start', ['$event'])
callback = (event: any) => { this.event = event; } callback = (event: any) => { this.event = event; }
} }
TestBed.configureTestingModule({declarations: [Cmp]}); TestBed.configureTestingModule({declarations: [Cmp]});
const engine = TestBed.get(ɵAnimationEngine); const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(Cmp); const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance; const cmp = fixture.componentInstance;
cmp.exp = 'TRUE'; cmp.exp = 'TRUE';
fixture.detectChanges(); fixture.detectChanges();
flushMicrotasks(); flushMicrotasks();
expect(cmp.event.triggerName).toEqual('myAnimation2'); expect(cmp.event.triggerName).toEqual('myAnimation2');
expect(cmp.event.phaseName).toEqual('start'); expect(cmp.event.phaseName).toEqual('start');
expect(cmp.event.totalTime).toEqual(1000); expect(cmp.event.totalTime).toEqual(1000);
expect(cmp.event.fromState).toEqual('void'); expect(cmp.event.fromState).toEqual('void');
expect(cmp.event.toState).toEqual('TRUE'); expect(cmp.event.toState).toEqual('TRUE');
})); }));
it('should always fire callbacks even when a transition is not detected', fakeAsync(() => { it('should always fire callbacks even when a transition is not detected', fakeAsync(() => {
@Component({ @Component({