it('should re-focus trigger element when dialog closes', fakeAsync(() => {
// Create a element that has focus before the dialog is opened.
let button = document.createElement('button');
button.id = 'dialog-trigger';
document.body.appendChild(button);
button.focus();
let dialogRef = dialog.open(PizzaMsg, {
viewContainerRef: testViewContainerRef
});
viewContainerFixture.detectChanges();
flushMicrotasks();
expect(document.activeElement.id)
.not.toBe('dialog-trigger', 'Expected the focus to change when dialog was opened.');
dialogRef.close();
tick(500);
viewContainerFixture.detectChanges();
flushMicrotasks();
expect(document.activeElement.id)
.toBe('dialog-trigger', 'Expected that the trigger was refocused after dialog close');
}));
it('should open multiple overlays', fakeAsyncTest(() => {
let pizzaOverlayRef: OverlayRef;
let cakeOverlayRef: OverlayRef;
overlay.create().then(ref => {
pizzaOverlayRef = ref;
pizzaOverlayRef.attach(componentPortal);
});
flushMicrotasks();
overlay.create().then(ref => {
cakeOverlayRef = ref;
cakeOverlayRef.attach(templatePortal);
});
flushMicrotasks();
expect(overlayContainerElement.childNodes.length).toBe(2);
expect(overlayContainerElement.textContent).toContain('Pizza');
expect(overlayContainerElement.textContent).toContain('Cake');
pizzaOverlayRef.dispose();
expect(overlayContainerElement.childNodes.length).toBe(1);
expect(overlayContainerElement.textContent).toContain('Cake');
cakeOverlayRef.dispose();
expect(overlayContainerElement.childNodes.length).toBe(0);
expect(overlayContainerElement.textContent).toBe('');
}));
it('should overwrite previously applied positioning', fakeAsyncTest(() => {
strategy.centerHorizontally().centerVertically().apply(element);
flushMicrotasks();
strategy.top('10px').left('40%').apply(element);
flushMicrotasks();
let elementStyle = element.style;
let parentStyle = (element.parentNode as HTMLElement).style;
expect(elementStyle.marginTop).toBe('10px');
expect(elementStyle.marginLeft).toBe('40%');
expect(elementStyle.marginBottom).toBe('');
expect(elementStyle.marginRight).toBe('');
expect(parentStyle.justifyContent).toBe('flex-start');
expect(parentStyle.alignItems).toBe('flex-start');
strategy.bottom('70px').right('15em').apply(element);
flushMicrotasks();
expect(element.style.marginTop).toBe('');
expect(element.style.marginLeft).toBe('');
expect(element.style.marginBottom).toBe('70px');
expect(element.style.marginRight).toBe('15em');
expect(parentStyle.justifyContent).toBe('flex-end');
expect(parentStyle.alignItems).toBe('flex-end');
}));
it('should listen on start and done on the animation builder\'s player', fakeAsync(() => {
@Component({
selector: 'ani-cmp',
template: '...',
})
class Cmp {
@ViewChild('target') public target: any;
constructor(public builder: AnimationBuilder) {}
build() {
const definition =
this.builder.build([style({opacity: 0}), animate(1000, style({opacity: 1}))]);
return definition.create(this.target);
}
}
TestBed.configureTestingModule({declarations: [Cmp]});
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
fixture.detectChanges();
const player = cmp.build();
let started = false;
player.onStart(() => started = true);
let finished = false;
player.onDone(() => finished = true);
let destroyed = false;
player.onDestroy(() => destroyed = true);
player.init();
flushMicrotasks();
expect(started).toBeFalsy();
expect(finished).toBeFalsy();
expect(destroyed).toBeFalsy();
player.play();
flushMicrotasks();
expect(started).toBeTruthy();
expect(finished).toBeFalsy();
expect(destroyed).toBeFalsy();
player.finish();
flushMicrotasks();
expect(started).toBeTruthy();
expect(finished).toBeTruthy();
expect(destroyed).toBeFalsy();
player.destroy();
flushMicrotasks();
expect(started).toBeTruthy();
expect(finished).toBeTruthy();
expect(destroyed).toBeTruthy();
}));
it('should set the element width', fakeAsync(() => {
strategy.width('100px').apply(element);
flushMicrotasks();
expect(element.style.width).toBe('100px');
}));
it("stores translation when promise got resolved", fakeAsync(() => {
translateComponent.key = "TEXT";
flushMicrotasks();
expect(translateComponent.translation).toBe("This is a text");
}));
it('should set the element height', fakeAsync(() => {
strategy.height('100px').apply(element);
flushMicrotasks();
expect(element.style.height).toBe('100px');
}));
it('should make the element position: static', fakeAsyncTest(() => {
strategy.apply(element);
flushMicrotasks();
expect(element.style.position).toBe('static');
}));
it('should default the element to position: absolute', fakeAsyncTest(() => {
strategy.apply(element);
flushMicrotasks();
expect(element.style.position).toBe('absolute');
}));
it('should reset the vertical position and offset when the height is 100%', fakeAsync(() => {
strategy.centerVertically().height('100%').apply(element);
flushMicrotasks();
expect(element.style.top).toBe('0px');
expect(element.style.transform).toBe('');
}));
