From 0c35130599b95610129873b3f9fbf65812fda053 Mon Sep 17 00:00:00 2001
From: ByoungYong Kim <ryubro@users.noreply.github.com>
Date: Wed, 8 Jan 2025 23:30:18 +0100
Subject: [PATCH] Add a failing test

---
 .../dialog/test-helpers/test-router.js        | 43 +++++++++++++++
 .../dialog/test/lion-dialog.test.js           | 53 +++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 packages/ui/components/dialog/test-helpers/test-router.js

diff --git a/packages/ui/components/dialog/test-helpers/test-router.js b/packages/ui/components/dialog/test-helpers/test-router.js
new file mode 100644
index 000000000..9b102b48c
--- /dev/null
+++ 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
index 3838b6703..09f95fe1d 100644
--- 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;
+    });
+  });
 });