mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 05:02:57 +01:00
Code Issues Releases Wiki Activity

Add tests for w-dropdown-keep-mounted-value

Browse Source
This commit is contained in:
Sage Abdullah 2024-02-02 10:18:44 +01:00 committed by Thibaud Colas
parent 71a8853365
commit 2594be387d
1 changed files with 70 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
client/src/controllers/DropdownController.test.js
View File

@ -6,8 +6,8 @@ jest.useFakeTimers();
describe('DropdownController', () => {
let application;
beforeEach(async () => {
document.body.innerHTML = `
const setup = async (
html = `
<section>
<div data-controller="w-dropdown" data-w-dropdown-theme-value="dropdown" data-action="custom:show->w-dropdown#show custom:hide->w-dropdown#hide">
<button id="toggle" type="button" data-w-dropdown-target="toggle" aria-label="Actions"></button>
@ -15,7 +15,9 @@ describe('DropdownController', () => {
<a href="/">Option</a>
</div>
</div>
</section>`;
</section>`,
) => {
document.body.innerHTML = html;
application = Application.start();
application.register('w-dropdown', DropdownController);
@ -33,6 +35,10 @@ describe('DropdownController', () => {
.getControllerForElementAndIdentifier(element, 'w-dropdown')
.tippy.setProps({ duration: 0 }); // tippy will merge props with whatever has already been set
});
};
beforeEach(async () => {
await setup();
});
afterEach(() => {
@ -130,7 +136,6 @@ describe('DropdownController', () => {
.querySelector('div')
.setAttribute('data-w-dropdown-offset-value', '[12,24]');
application = Application.start();
application = Application.start();
application.register('w-dropdown', DropdownController);
@ -143,4 +148,65 @@ describe('DropdownController', () => {
expect(tippy.props).toHaveProperty('offset', [12, 24]);
});
describe('with keep-mounted-value set to true', () => {
beforeEach(async () => {
application?.stop();
await setup(`
<section>
<div data-controller="w-dropdown" data-w-dropdown-theme-value="dropdown" data-w-dropdown-keep-mounted-value="true" data-action="custom:show->w-dropdown#show custom:hide->w-dropdown#hide">
<button id="toggle" type="button" data-w-dropdown-target="toggle" aria-label="Actions"></button>
<div data-w-dropdown-target="content">
<a href="/">Option</a>
</div>
</div>
</section>`);
});
it('initialises Tippy.js on connect and keeps the content mounted in the DOM', async () => {
expect(document.querySelectorAll('[role="tooltip"]')).toHaveLength(1);
const toggle = document.querySelector(
'[data-w-dropdown-target="toggle"]',
);
await Promise.resolve();
expect(toggle.getAttribute('aria-expanded')).toBe('false');
const content = document.querySelector(
'[data-controller="w-dropdown"] [data-w-dropdown-target="content"]',
);
expect(content.innerHTML).toContain('<a href="/">Option</a>');
toggle.dispatchEvent(new Event('click'));
const expandedContent = document.querySelectorAll('[role="tooltip"]');
expect(expandedContent).toHaveLength(1);
expect(expandedContent[0].innerHTML).toContain('<a href="/">Option</a>');
});
it('should support methods to show and hide the dropdown while keeping the content in the DOM', async () => {
expect(document.querySelectorAll('[role="tooltip"]')).toHaveLength(1);
const dropdownElement = document.querySelector(
'[data-controller="w-dropdown"]',
);
dropdownElement.dispatchEvent(new CustomEvent('custom:show'));
expect(document.querySelectorAll('[role="tooltip"]')).toHaveLength(1);
dropdownElement.dispatchEvent(new CustomEvent('custom:hide'));
expect(document.querySelectorAll('[role="tooltip"]')).toHaveLength(1);
const toggle = document.querySelector(
'[data-w-dropdown-target="toggle"]',
);
const content = document.querySelector(
'[data-controller="w-dropdown"] [data-w-dropdown-target="content"]',
);
expect(toggle.getAttribute('aria-expanded')).toBe('false');
expect(content.innerHTML).toContain('<a href="/">Option</a>');
});
});
});