Skip to content

Commit

Permalink
fix: set display none on overlay part to fix Safari 17.4 issue (#7246) (
Browse files Browse the repository at this point in the history 
#7256)
  • Loading branch information
@web-padawan
web-padawan committed Mar 22, 2024
1 parent 8c5b0ea commit 97fce0a
Show file tree
Hide file tree
Showing 8 changed files with 431 additions and 208 deletions.
84 changes: 61 additions & 23 deletions packages/context-menu/test/properties.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { expect } from '@esm-bundle/chai';
import { fire, fixtureSync } from '@vaadin/testing-helpers';
import { fire, fixtureSync, nextRender } from '@vaadin/testing-helpers';
import './not-animated-styles.js';
import '../vaadin-context-menu.js';

Expand All @@ -13,100 +13,129 @@ describe('properties', () => {
describe('context', () => {
let target;

beforeEach(() => {
beforeEach(async () => {
menu = fixtureSync(`
<vaadin-context-menu>
<section>
<div id="target"></div>
</section>
</vaadin-context-menu>
`);
menu.renderer = (root) => {
root.textContent = 'Content';
};
await nextRender();
target = menu.querySelector('#target');
});

it('should use event target as context target', () => {
it('should use event target as context target', async () => {
fire(target, 'contextmenu');
await nextRender();

expect(menu._context.target).to.eql(target);
});

it('should use context-selector scope to target', () => {
it('should use context-selector scope to target', async () => {
menu.selector = 'section';

fire(target, 'contextmenu');
await nextRender();

expect(menu._context.target).to.eql(target.parentElement);
});
});

describe('openOn', () => {
beforeEach(() => {
beforeEach(async () => {
menu = fixtureSync('<vaadin-context-menu></vaadin-context-menu>');
menu.renderer = (root) => {
root.textContent = 'Content';
};
await nextRender();
});

it('should open on custom event', () => {
it('should open on custom event', async () => {
menu.openOn = 'click';
await nextRender();

menu.click();
await nextRender();

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

it('should not open on `contextmenu`', () => {
it('should not open on `contextmenu`', async () => {
menu.openOn = 'click';
await nextRender();

fire(menu, 'contextmenu');
await nextRender();

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

describe('event listener', () => {
it('should not add listener when set to empty', () => {
it('should not add listener when set to empty', async () => {
expect(menu._oldOpenOn).to.be.ok;
menu.openOn = '';
await nextRender();
expect(menu._oldOpenOn).not.to.be.ok;
});
});
});

describe('opened', () => {
beforeEach(() => {
beforeEach(async () => {
menu = fixtureSync('<vaadin-context-menu></vaadin-context-menu>');
menu.renderer = (root) => {
root.textContent = 'Content';
};
await nextRender();
});

it('should be read-only', () => {
it('should be read-only', async () => {
expect(menu.opened).to.eql(false);

menu.opened = true;
await nextRender();
expect(menu.opened).to.eql(false);
});

it('should be set using the private setter', () => {
it('should be set using the private setter', async () => {
expect(menu.opened).to.eql(false);

menu._setOpened(true);
await nextRender();
expect(menu.opened).to.be.true;
});
});

describe('closeOn', () => {
beforeEach(() => {
beforeEach(async () => {
menu = fixtureSync('<vaadin-context-menu></vaadin-context-menu>');
menu.renderer = (root) => {
root.textContent = 'Content';
};
await nextRender();
menu._setOpened(true);
});

it('should not close on `click`', () => {
it('should not close on `click`', async () => {
menu.closeOn = '';
await nextRender();

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

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

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

fire(menu.$.overlay, 'foobar');
fire(menu._overlayElement, 'foobar');
await nextRender();

expect(menu.opened).to.eql(false);
});
Expand All @@ -115,7 +144,7 @@ describe('properties', () => {
describe('external target', () => {
let wrapper, target;

beforeEach(() => {
beforeEach(async () => {
wrapper = fixtureSync(`
<div>
<vaadin-context-menu></vaadin-context-menu>
Expand All @@ -124,48 +153,57 @@ describe('properties', () => {
</section>
</div>
`);
await nextRender();
menu = wrapper.firstElementChild;
menu.renderer = (root) => {
root.textContent = 'Content';
};
target = wrapper.querySelector('#target');

menu.listenOn = target;
});

it('should open on external target', () => {
it('should open on external target', async () => {
fire(target, 'contextmenu');
await nextRender();

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

it('should select context target on external target', () => {
it('should select context target on external target', async () => {
fire(target, 'contextmenu');
await nextRender();

expect(menu._context.target).to.eql(target);
});

it('should use context selector on external target', () => {
it('should use context selector on external target', async () => {
menu.selector = 'section'; // Parent of #target
menu.listenOn = menu.parentElement;
fire(target, 'contextmenu');
await nextRender();

expect(menu._context.target).to.eql(target.parentElement);
});

describe('event listeners', () => {
it('should not target listeners when set to null', () => {
it('should not target listeners when set to null', async () => {
expect(menu._oldOpenOn).to.be.ok;
menu.listenOn = null;
await nextRender();
expect(menu._oldOpenOn).not.to.be.ok;
});
});
});

describe('theme attribute', () => {
beforeEach(() => {
beforeEach(async () => {
menu = fixtureSync('<vaadin-context-menu theme="foo"></vaadin-context-menu>');
await nextRender();
});

it('should propagate theme attribute to overlay', () => {
expect(menu.$.overlay.getAttribute('theme')).to.equal('foo');
expect(menu._overlayElement.getAttribute('theme')).to.equal('foo');
});
});
});
Loading

0 comments on commit 97fce0a

Please sign in to comment.