Skip to content

Commit

Permalink
Adding more tests for overlay positon code
Browse files Browse the repository at this point in the history
  • Loading branch information
@manolo
manolo committed May 18, 2018
1 parent 06dffbf commit 039087a
Showing 1 changed file with 90 additions and 45 deletions.
135 changes: 90 additions & 45 deletions test/overlay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,23 @@

<script>
describe('overlay', () => {
let menu;
let menu, overlay, content;
const viewWidth = document.documentElement.clientWidth;
const viewHeight = document.documentElement.clientHeight;

beforeEach(() => {
menu = fixture('default');
overlay = menu.$.overlay;
content = overlay.$.overlay.children[0];
// make menu cover all body in order to click anywhere
menu.style.width = menu.style.height = '150%';
// make content have a fixed size
content.style.height = content.style.width = '100px';
content.style.boxSizing = 'border-box';

beforeEach(() => menu = fixture('default'));
});

afterEach(() => menu.$.overlay.opened = false);
afterEach(() => overlay.opened = false);

function contextmenu(x, y, shiftKey, target) {
shiftKey = shiftKey || false;
Expand Down Expand Up @@ -67,17 +79,17 @@
describe('opening', () => {

it('should be visible when open', done => {
expect(window.getComputedStyle(menu.$.overlay).display).to.eql('none');
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
expect(window.getComputedStyle(menu.$.overlay).display).to.not.eql('none');
expect(window.getComputedStyle(overlay).display).to.eql('none');
listenOnce(overlay, 'vaadin-overlay-open', () => {
expect(window.getComputedStyle(overlay).display).to.not.eql('none');
done();
});

menu._setOpened(true);
});

it('should open on `contextmenu` event', done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
listenOnce(overlay, 'vaadin-overlay-open', () => {
expect(menu.opened).to.eql(true);
done();
});
Expand All @@ -86,8 +98,8 @@
});

it('should be positioned on click target', done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
const rect = menu.$.overlay.getBoundingClientRect();
listenOnce(overlay, 'vaadin-overlay-open', () => {
const rect = overlay.getBoundingClientRect();
expect(rect.left).to.eql(menu._phone ? 0 : 10);
expect(rect.top).to.eql(menu._phone ? 0 : 10);
done();
Expand All @@ -96,31 +108,65 @@
contextmenu(10, 10);
});

it('should be aligned relative to top-left corner', done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
expect(menu.$.overlay.hasAttribute('right-aligned')).to.be.false;
expect(menu.$.overlay.hasAttribute('bottom-aligned')).to.be.false;
done();
describe('position', () => {
it('should be aligned relative to top-left corner', done => {
listenOnce(overlay, 'vaadin-overlay-open', () => {
expect(overlay.hasAttribute('right-aligned')).to.be.false;
expect(overlay.hasAttribute('bottom-aligned')).to.be.false;
expect(overlay.style.left).to.be.equal('10px');
expect(overlay.style.top).to.be.equal('10px');
done();
});
contextmenu(10, 10);
});

contextmenu(10, 10);
});
it('should be aligned relative to bottom-right corner', done => {
listenOnce(overlay, 'vaadin-overlay-open', () => {
expect(menu._phone || overlay.hasAttribute('right-aligned')).to.be.true;
expect(menu._phone || overlay.hasAttribute('bottom-aligned')).to.be.true;
expect(overlay.style.right).to.be.equal('0px');
expect(overlay.style.bottom).to.be.equal('0px');
done();
});
contextmenu(viewWidth, viewHeight);
});

it('should be aligned relative to bottom-right corner', done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
expect(menu._phone || menu.$.overlay.hasAttribute('right-aligned')).to.be.true;
expect(menu._phone || menu.$.overlay.hasAttribute('bottom-aligned')).to.be.true;
done();
it('css should be correctly configured to set content position', done => {
listenOnce(overlay, 'vaadin-overlay-open', () => {
const rect = content.getBoundingClientRect();
expect(rect.width).to.be.equal(100);
expect(rect.height).to.be.equal(100);
expect(rect.x).to.be.equal(menu._phone ? 0 : viewWidth - 100);
expect(rect.y).to.be.equal(menu._phone ? 0 : viewHeight - 100);
done();
});
contextmenu(viewWidth, viewHeight);
});

menu.style.width = menu.style.height = '100%';
const rect = menu.getBoundingClientRect();
contextmenu(rect.width, rect.height);
it('should reset css properties and attributes on each open', done => {
listenOnce(overlay, 'vaadin-overlay-open', () => {

overlay.opened = false;
listenOnce(overlay, 'vaadin-overlay-open', () => {
const rect = content.getBoundingClientRect();
expect(rect.x).to.be.equal(menu._phone ? 0 : 16);
expect(rect.y).to.be.equal(menu._phone ? 0 :16);
expect(overlay.hasAttribute('right-aligned')).to.be.false;
expect(overlay.hasAttribute('bottom-aligned')).to.be.false;
expect(overlay.style.right).to.be.empty;
expect(overlay.style.bottom).to.be.empty;
done();
});
contextmenu(16, 16);

});
contextmenu(viewWidth, viewHeight);
});
});

it('should be positioned on detailed mouse event', done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
const rect = menu.$.overlay.getBoundingClientRect();
listenOnce(overlay, 'vaadin-overlay-open', () => {
const rect = overlay.getBoundingClientRect();
expect(rect.left).to.eql(menu._phone ? 0 : 10);
expect(rect.top).to.eql(menu._phone ? 0 : 20);
done();
Expand All @@ -132,8 +178,8 @@
});

it('should be positioned by gesture event', done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
const rect = menu.$.overlay.getBoundingClientRect();
listenOnce(overlay, 'vaadin-overlay-open', () => {
const rect = overlay.getBoundingClientRect();
expect(rect.left).to.eql(menu._phone ? 0 : 5);
expect(rect.top).to.eql(menu._phone ? 0 : 5);
done();
Expand All @@ -145,8 +191,8 @@
});

it('should be positioned by detailed gesture event', done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
const rect = menu.$.overlay.getBoundingClientRect();
listenOnce(overlay, 'vaadin-overlay-open', () => {
const rect = overlay.getBoundingClientRect();
expect(rect.left).to.eql(menu._phone ? 0 : 5);
expect(rect.top).to.eql(menu._phone ? 0 : 5);
done();
Expand All @@ -158,8 +204,8 @@
});

it('should be positioned by touch event', done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
const rect = menu.$.overlay.getBoundingClientRect();
listenOnce(overlay, 'vaadin-overlay-open', () => {
const rect = overlay.getBoundingClientRect();
expect(rect.left).to.eql(menu._phone ? 0 : 10);
expect(rect.top).to.eql(menu._phone ? 0 : 20);
done();
Expand All @@ -174,8 +220,8 @@
});

it('should be positioned by detailed touch event', done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
const rect = menu.$.overlay.getBoundingClientRect();
listenOnce(overlay, 'vaadin-overlay-open', () => {
const rect = overlay.getBoundingClientRect();
expect(rect.left).to.eql(menu._phone ? 0 : 10);
expect(rect.top).to.eql(menu._phone ? 0 : 20);
done();
Expand All @@ -202,7 +248,7 @@
it('should have zero bottom by default', done => {
if (menu._phone) {
listenOnce(menu, 'opened-changed', () => {
expect(parseFloat(getComputedStyle(menu.$.overlay).bottom)).to.equal(0);
expect(parseFloat(getComputedStyle(overlay).bottom)).to.equal(0);
done();
});

Expand All @@ -215,10 +261,10 @@
it('should accept --vaadin-overlay-viewport-bottom CSS property', done => {
if (menu._phone) {
listenOnce(menu, 'opened-changed', () => {
menu.$.overlay.style.setProperty('--vaadin-overlay-viewport-bottom', '50px');
menu.$.overlay.updateStyles({'--vaadin-overlay-viewport-bottom': '50px'});
overlay.style.setProperty('--vaadin-overlay-viewport-bottom', '50px');
overlay.updateStyles({'--vaadin-overlay-viewport-bottom': '50px'});

expect(getComputedStyle(menu.$.overlay).bottom).to.equal('50px');
expect(getComputedStyle(overlay).bottom).to.equal('50px');
done();
});

Expand All @@ -232,7 +278,7 @@

describe('closing', () => {
beforeEach(done => {
listenOnce(menu.$.overlay, 'vaadin-overlay-open', () => {
listenOnce(overlay, 'vaadin-overlay-open', () => {
done();
});

Expand All @@ -257,7 +303,7 @@
done();
});

const e = contextmenu(0, 0, false, menu.$.overlay);
const e = contextmenu(0, 0, false, overlay);
expect(e.defaultPrevented).to.be.true;
});

Expand All @@ -272,30 +318,30 @@
});

it('should close on `click`', () => {
menu.$.overlay.click();
overlay.click();

expect(menu.opened).to.eql(false);
});

it('should close on custom event', () => {
menu.closeOn = 'foobar';

menu.$.overlay.dispatchEvent(new CustomEvent('foobar', {bubbles: true}));
overlay.dispatchEvent(new CustomEvent('foobar', {bubbles: true}));

expect(menu.opened).to.eql(false);
});

it('should disable close on empty `closeOn`', () => {
menu.closeOn = '';

menu.$.overlay.dispatchEvent(new CustomEvent('click'));
overlay.dispatchEvent(new CustomEvent('click'));

expect(menu.opened).to.eql(true);
});

describe('with shift key', () => {
it('should not close on menu contextmenu', () => {
const e = contextmenu(0, 0, true, menu.$.overlay);
const e = contextmenu(0, 0, true, overlay);

expect(menu.opened).to.be.true;
expect(e.defaultPrevented).to.be.false;
Expand All @@ -312,7 +358,6 @@

describe('styling', () => {
it('should set default background color for content', () => {
const content = menu.$.overlay.shadowRoot.querySelector('[part="content"]');
expect(getComputedStyle(content).backgroundColor).to.eql('rgb(255, 255, 255)');
});
});
Expand Down

0 comments on commit 039087a

Please sign in to comment.