ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(overlays): make positioning tests consistent on all environments

Browse source
This commit is contained in:
Mikhail Bashkirov 2019-07-18 09:58:06 +02:00 committed by Thomas Allmer
parent 6321777ec7
commit b925fff44f
1 changed files with 73 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
packages/overlays/test/LocalOverlayController.test.js
View file

@ -198,14 +198,12 @@ describe('LocalOverlayController', () => {
describe('positioning', () => { describe('positioning', () => {
it('creates a popper instance on the controller when shown, keeps it when hidden', async () => { it('creates a popper instance on the controller when shown, keeps it when hidden', async () => {
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
contentTemplate: () => contentTemplate: () => html`
html` <p style="width: 80px; height: 20px;"></p>
<p>Content</p> `,
`, invokerTemplate: () => html`
invokerTemplate: () => <button style="width: 100px; height: 20px;"></button>
html` `,
<button>Invoker</button>
`,
}); });
await controller.show(); await controller.show();
expect(controller._popper) expect(controller._popper)
@ -220,14 +218,12 @@ describe('LocalOverlayController', () => {
it('positions correctly', async () => { it('positions correctly', async () => {
// smoke test for integration of popper // smoke test for integration of popper
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
contentTemplate: () => contentTemplate: () => html`
html` <p style="width: 80px; height: 20px;"></p>
<p>Content</p> `,
`, invokerTemplate: () => html`
invokerTemplate: () => <button style="width: 100px; height: 20px;"></button>
html` `,
<button>Invoker</button>
`,
}); });
await controller.show(); await controller.show();
@ -239,14 +235,11 @@ describe('LocalOverlayController', () => {
it('uses top as the default placement', async () => { it('uses top as the default placement', async () => {
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
contentTemplate: () => contentTemplate: () => html`
html` <p style="width: 80px; height: 20px;"></p>
<p>Content</p> `,
`,
invokerTemplate: () => html` invokerTemplate: () => html`
<button style="padding: 16px;" @click=${() => controller.show()}> <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
Invoker
</button>
`, `,
}); });
await fixture(html` await fixture(html`
@ -261,15 +254,12 @@ describe('LocalOverlayController', () => {
it('positions to preferred place if placement is set and space is available', async () => { it('positions to preferred place if placement is set and space is available', async () => {
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
invokerTemplate: () => html` contentTemplate: () => html`
<button style="padding: 16px;" @click=${() => controller.show()}> <p style="width: 80px; height: 20px;"></p>
Invoker `,
</button> invokerTemplate: () => html`
<button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
`, `,
contentTemplate: () =>
html`
<p>Content</p>
`,
popperConfig: { popperConfig: {
placement: 'left-start', placement: 'left-start',
}, },
@ -287,14 +277,11 @@ describe('LocalOverlayController', () => {
it('positions to different place if placement is set and no space is available', async () => { it('positions to different place if placement is set and no space is available', async () => {
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
contentTemplate: () => contentTemplate: () => html`
html` <p style="width: 80px; height: 20px;"></p>
<p>Content</p> `,
`,
invokerTemplate: () => html` invokerTemplate: () => html`
<button style="padding: 16px;" @click=${() => controller.show()}> <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
Invoker
</button>
`, `,
popperConfig: { popperConfig: {
placement: 'top-start', placement: 'top-start',
@ -313,6 +300,12 @@ describe('LocalOverlayController', () => {
it('allows the user to override default Popper modifiers', async () => { it('allows the user to override default Popper modifiers', async () => {
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
contentTemplate: () => html`
<p style="width: 80px; height: 20px;"></p>
`,
invokerTemplate: () => html`
<button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
`,
popperConfig: { popperConfig: {
modifiers: { modifiers: {
keepTogether: { keepTogether: {
@ -324,13 +317,6 @@ describe('LocalOverlayController', () => {
}, },
}, },
}, },
contentTemplate: () =>
html`
<p>Content</p>
`,
invokerTemplate: () => html`
<button style="padding: 16px;" @click=${() => controller.show()}>Invoker</button>
`,
}); });
await fixture(html` await fixture(html`
<div style="position: absolute; left: 100px; top: 50px;"> <div style="position: absolute; left: 100px; top: 50px;">
@ -348,14 +334,14 @@ describe('LocalOverlayController', () => {
it('updates popperConfig even when overlay is closed', async () => { it('updates popperConfig even when overlay is closed', async () => {
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
contentTemplate: () => contentTemplate: () => html`
html` <p style="width: 80px; height: 20px;"></p>
<p>Content</p> `,
`,
invokerTemplate: () => html` invokerTemplate: () => html`
<button style="padding: 16px; margin: 200px;" @click=${() => controller.show()}> <button
Invoker style="width: 100px; height: 20px; margin: 200px;"
</button> @click=${() => controller.show()}
></button>
`, `,
popperConfig: { popperConfig: {
placement: 'top', placement: 'top',
@ -378,14 +364,11 @@ describe('LocalOverlayController', () => {
it('positions the popper element correctly on show', async () => { it('positions the popper element correctly on show', async () => {
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
contentTemplate: () => contentTemplate: () => html`
html` <p style="width: 80px; height: 20px;"></p>
<p>Content</p> `,
`,
invokerTemplate: () => html` invokerTemplate: () => html`
<button style="padding: 16px;" @click=${() => controller.show()}> <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
Invoker
</button>
`, `,
popperConfig: { popperConfig: {
placement: 'top', placement: 'top',
@ -400,7 +383,7 @@ describe('LocalOverlayController', () => {
await controller.show(); await controller.show();
let contentChild = controller.content.firstElementChild; let contentChild = controller.content.firstElementChild;
expect(contentChild.style.transform).to.equal( expect(contentChild.style.transform).to.equal(
'translate3d(14px, -58px, 0px)', 'translate3d(10px, -60px, 0px)',
'Popper positioning values', 'Popper positioning values',
); );
@ -408,24 +391,27 @@ describe('LocalOverlayController', () => {
await controller.show(); await controller.show();
contentChild = controller.content.firstElementChild; contentChild = controller.content.firstElementChild;
expect(contentChild.style.transform).to.equal( expect(contentChild.style.transform).to.equal(
'translate3d(14px, -58px, 0px)', 'translate3d(10px, -60px, 0px)',
'Popper positioning values should be identical after hiding and showing', 'Popper positioning values should be identical after hiding and showing',
); );
}); });
it('updates placement properly even during hidden state', async () => { it('updates placement properly even during hidden state', async () => {
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
contentTemplate: () => contentTemplate: () => html`
html` <p style="width: 80px; height: 20px;"></p>
<p>Content</p> `,
`,
invokerTemplate: () => html` invokerTemplate: () => html`
<button style="padding: 16px;" @click=${() => controller.show()}> <button style="width: 100px; height: 20px;" @click=${() => controller.show()}></button>
Invoker
</button>
`, `,
popperConfig: { popperConfig: {
placement: 'top', placement: 'top',
modifiers: {
offset: {
enabled: true,
offset: '0, 10px',
},
},
}, },
}); });
await fixture(html` await fixture(html`
@ -437,7 +423,7 @@ describe('LocalOverlayController', () => {
await controller.show(); await controller.show();
let contentChild = controller.content.firstElementChild; let contentChild = controller.content.firstElementChild;
expect(contentChild.style.transform).to.equal( expect(contentChild.style.transform).to.equal(
'translate3d(14px, -58px, 0px)', 'translate3d(10px, -62px, 0px)',
'Popper positioning values', 'Popper positioning values',
); );
@ -446,32 +432,37 @@ describe('LocalOverlayController', () => {
modifiers: { modifiers: {
offset: { offset: {
enabled: true, enabled: true,
offset: '0, 32px', offset: '0, 20px',
}, },
}, },
}); });
await controller.show(); await controller.show();
contentChild = controller.content.firstElementChild; contentChild = controller.content.firstElementChild;
expect(controller._popper.options.modifiers.offset.offset).to.equal('0, 32px'); expect(controller._popper.options.modifiers.offset.offset).to.equal('0, 20px');
expect(contentChild.style.transform).to.equal( expect(contentChild.style.transform).to.equal(
'translate3d(14px, -82px, 0px)', 'translate3d(10px, -72px, 0px)',
'Popper positioning Y value should be 32 less than previous, due to the added 32px offset', 'Popper positioning Y value should be 10 less than previous, due to the added extra 10px offset',
); );
}); });
it('updates positioning correctly during shown state when config gets updated', async () => { it('updates positioning correctly during shown state when config gets updated', async () => {
const controller = new LocalOverlayController({ const controller = new LocalOverlayController({
contentTemplate: () => contentTemplate: () => html`
html` <p style="width: 80px; height: 20px;"></p>
<p>Content</p> `,
`,
invokerTemplate: () => html` invokerTemplate: () => html`
<button style="padding: 16px;" @click=${() => controller.show()}> <button style="width: 100px; height: 20px;" @click=${() => controller.show()}>
Invoker Invoker
</button> </button>
`, `,
popperConfig: { popperConfig: {
placement: 'top', placement: 'top',
modifiers: {
offset: {
enabled: true,
offset: '0, 10px',
},
},
}, },
}); });
await fixture(html` await fixture(html`
@ -483,7 +474,7 @@ describe('LocalOverlayController', () => {
await controller.show(); await controller.show();
const contentChild = controller.content.firstElementChild; const contentChild = controller.content.firstElementChild;
expect(contentChild.style.transform).to.equal( expect(contentChild.style.transform).to.equal(
'translate3d(14px, -58px, 0px)', 'translate3d(10px, -62px, 0px)',
'Popper positioning values', 'Popper positioning values',
); );
@ -491,13 +482,13 @@ describe('LocalOverlayController', () => {
modifiers: { modifiers: {
offset: { offset: {
enabled: true, enabled: true,
offset: '0, 32px', offset: '0, 20px',
}, },
}, },
}); });
expect(contentChild.style.transform).to.equal( expect(contentChild.style.transform).to.equal(
'translate3d(14px, -82px, 0px)', 'translate3d(10px, -72px, 0px)',
'Popper positioning Y value should be 32 less than previous, due to the added 32px offset', 'Popper positioning Y value should be 10 less than previous, due to the added extra 10px offset',
); );
}); });