Add a failing test

ing-bank · Jan 8, 2025 · 0c35130 · 0c35130
1 parent f06d795
commit 0c35130
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 0 deletions.
diff --git a/packages/ui/components/dialog/test-helpers/test-router.js b/packages/ui/components/dialog/test-helpers/test-router.js
@@ -0,0 +1,43 @@
+import { html, LitElement } from 'lit';
+
+class TestRouter extends LitElement {
+  static properties = {
+    routingMap: {
+      type: Object,
+      attribute: false,
+    },
+    path: { type: String },
+  };
+
+  constructor() {
+    super();
+
+    /** @type {{ [path: string]: HTMLElement }} */
+    this.routingMap = {};
+    /** @type {string} */
+    this.path = '';
+  }
+
+  render() {
+    return html`
+      <div>
+        <div id="selector">
+          ${Object.keys(this.routingMap).map(
+            path =>
+              html`<button
+                id="path-${path}"
+                @click="${() => {
+                  this.path = path;
+                }}"
+              >
+                ${path}
+              </button>`,
+          )}
+        </div>
+        <div id="view">${this.routingMap[this.path]}</div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('test-router', TestRouter);
diff --git a/packages/ui/components/dialog/test/lion-dialog.test.js b/packages/ui/components/dialog/test/lion-dialog.test.js
@@ -2,6 +2,7 @@
 import { expect, fixture as _fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
+import '../test-helpers/test-router.js';
 import '@lion/ui/define/lion-dialog.js';
 
 /**
@@ -187,4 +188,56 @@ describe('lion-dialog', () => {
       expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
     });
   });
+
+  describe('Edge cases', () => {
+    it('does not lose click event handler when was detached and reattached', async () => {
+      const el = await fixture(html`
+        <test-router
+          .routingMap="${{
+            a: html`
+              <lion-dialog>
+                <div slot="content" class="dialog">Hey there</div>
+                <button slot="invoker">Popup button</button>
+              </lion-dialog>
+            `,
+            b: html` <div>B</div> `,
+          }}"
+          path="a"
+        ></test-router>
+      `);
+
+      const getDialog = () =>
+        /** @type {LionDialog} */ (el.shadowRoot?.querySelector('lion-dialog'));
+      const getInvoker = () =>
+        /** @type {HTMLElement} */ (getDialog().querySelector('[slot="invoker"]'));
+
+      getInvoker().click();
+      const dialog = getDialog();
+      // @ts-expect-error [allow-protected-in-tests]
+      await dialog._overlayCtrl._showComplete;
+      expect(dialog.opened).to.be.true;
+
+      dialog.close();
+      // @ts-expect-error [allow-protected-in-tests]
+      await dialog._overlayCtrl._hideComplete;
+      expect(dialog.opened).to.be.false;
+
+      const buttonA = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('#path-a'));
+      const buttonB = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('#path-b'));
+
+      buttonB.click();
+      await el.updateComplete;
+      buttonA.click();
+      await el.updateComplete;
+
+      getInvoker().click();
+
+      const dialogAfterRouteChange = getDialog();
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(dialogAfterRouteChange._overlayCtrl).not.to.be.undefined;
+      // @ts-expect-error [allow-protected-in-tests]
+      await dialogAfterRouteChange._overlayCtrl._showComplete;
+      expect(dialogAfterRouteChange.opened).to.be.true;
+    });
+  });
 });