From 032338973fa93404661f3c04022a5c2a714cab94 Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Sun, 6 Oct 2024 13:15:18 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=88=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 grid-poc                                      |  1 -
 packages/components/dialog/src/dialog.spec.ts | 87 ++++++++++++++++++-
 2 files changed, 86 insertions(+), 2 deletions(-)
 delete mode 160000 grid-poc

diff --git a/grid-poc b/grid-poc
deleted file mode 160000
index a55a9ca60..000000000
--- a/grid-poc
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit a55a9ca60335b2eb49c72c7b57b486e1d621e4c8
diff --git a/packages/components/dialog/src/dialog.spec.ts b/packages/components/dialog/src/dialog.spec.ts
index da1b915f7..a98c502b2 100644
--- a/packages/components/dialog/src/dialog.spec.ts
+++ b/packages/components/dialog/src/dialog.spec.ts
@@ -1,7 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { type Button } from '@sl-design-system/button';
 import { sendKeys } from '@web/test-runner-commands';
-import { html } from 'lit';
+import { type LitElement, type TemplateResult, html } from 'lit';
 import { spy, stub } from 'sinon';
 import '../register.js';
 import { Dialog } from './dialog.js';
@@ -321,4 +321,89 @@ describe('sl-dialog', () => {
       expect(dialog.close).not.to.have.been.called;
     });
   });
+
+  describe('inheritance', () => {
+    beforeEach(() => {
+      try {
+        customElements.define('inherited-dialog', class extends Dialog {});
+      } catch {
+        // empty
+      }
+    });
+
+    it('should call renderHeader during render', async () => {
+      const renderHeader = spy(Dialog.prototype, 'renderHeader');
+
+      await fixture(html`<inherited-dialog></inherited-dialog>`);
+
+      expect(renderHeader).to.have.been.calledOnce;
+    });
+
+    it('should render the given title and subtitle passed to renderHeader()', async () => {
+      customElements.define(
+        'inherited-dialog-with-custom-title',
+        class extends Dialog {
+          override renderHeader(): TemplateResult {
+            return super.renderHeader('Title', 'Subtitle');
+          }
+        }
+      );
+
+      const el: LitElement = await fixture(
+        html`<inherited-dialog-with-custom-title></inherited-dialog-with-custom-title>`
+      );
+
+      const title = el.renderRoot.querySelector('slot[name="title"]');
+      expect(title).to.exist;
+      expect(title).to.have.text('Title');
+
+      const subtitle = el.renderRoot.querySelector('slot[name="subtitle"]');
+      expect(subtitle).to.exist;
+      expect(subtitle).to.have.text('Subtitle');
+    });
+
+    it('should call renderBody during render', async () => {
+      const renderBody = spy(Dialog.prototype, 'renderBody');
+
+      await fixture(html`<inherited-dialog></inherited-dialog>`);
+
+      expect(renderBody).to.have.been.calledOnce;
+    });
+
+    it('should call renderFooter during render', async () => {
+      const renderFooter = spy(Dialog.prototype, 'renderFooter');
+
+      await fixture(html`<inherited-dialog></inherited-dialog>`);
+
+      expect(renderFooter).to.have.been.calledOnce;
+    });
+
+    it('should call renderActions during render', async () => {
+      const renderActions = spy(Dialog.prototype, 'renderActions');
+
+      await fixture(html`<inherited-dialog></inherited-dialog>`);
+
+      expect(renderActions).to.have.been.calledOnce;
+    });
+
+    it('should render the actions into the actions slot', async () => {
+      customElements.define(
+        'inherited-dialog-with-custom-actions',
+        class extends Dialog {
+          override renderActions(): TemplateResult {
+            return html`<sl-button>Custom action</sl-button>`;
+          }
+        }
+      );
+
+      const el: LitElement = await fixture(
+        html`<inherited-dialog-with-custom-actions></inherited-dialog-with-custom-actions>`
+      );
+
+      const button = el.renderRoot.querySelector('sl-button');
+      expect(button).to.exist;
+      expect(button).to.have.text('Custom action');
+      expect(button?.parentElement).to.match('slot[name="actions"]');
+    });
+  });
 });