parent
a0840242d7
commit
1a7f92c423
|
@ -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({
|
||||||
|
|
Loading…
Reference in New Issue