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

client/src/controllers/DropdownController.test.js

@@ -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>');
+    });
+  });
 });