From f1f3a28cb62dacbeba943acbc36567a3f074c869 Mon Sep 17 00:00:00 2001
From: Yigit Yuce <ygtyce@gmail.com>
Date: Thu, 7 Mar 2024 14:45:10 +0300
Subject: [PATCH] test(slot): add missing e2e tests for conditional slot
 rendering

---
 test/karma/test-app/components.d.ts           | 13 +++++++
 .../slot-conditional-rendering/cmp.tsx        | 27 +++++++++++++
 .../slot-conditional-rendering/index.html     |  9 +++++
 .../slot-conditional-rendering/karma.spec.ts  | 39 +++++++++++++++++++
 4 files changed, 88 insertions(+)
 create mode 100644 test/karma/test-app/slot-conditional-rendering/cmp.tsx
 create mode 100644 test/karma/test-app/slot-conditional-rendering/index.html
 create mode 100644 test/karma/test-app/slot-conditional-rendering/karma.spec.ts

diff --git a/test/karma/test-app/components.d.ts b/test/karma/test-app/components.d.ts
index 11a67cb356c..9ee75ab1d2b 100644
--- a/test/karma/test-app/components.d.ts
+++ b/test/karma/test-app/components.d.ts
@@ -301,6 +301,8 @@ export namespace Components {
     }
     interface SlotChildrenRoot {
     }
+    interface SlotConditionalRendering {
+    }
     interface SlotDynamicNameChangeScoped {
         "slotName": string;
     }
@@ -1211,6 +1213,12 @@ declare global {
         prototype: HTMLSlotChildrenRootElement;
         new (): HTMLSlotChildrenRootElement;
     };
+    interface HTMLSlotConditionalRenderingElement extends Components.SlotConditionalRendering, HTMLStencilElement {
+    }
+    var HTMLSlotConditionalRenderingElement: {
+        prototype: HTMLSlotConditionalRenderingElement;
+        new (): HTMLSlotConditionalRenderingElement;
+    };
     interface HTMLSlotDynamicNameChangeScopedElement extends Components.SlotDynamicNameChangeScoped, HTMLStencilElement {
     }
     var HTMLSlotDynamicNameChangeScopedElement: {
@@ -1595,6 +1603,7 @@ declare global {
         "slot-basic-order-root": HTMLSlotBasicOrderRootElement;
         "slot-basic-root": HTMLSlotBasicRootElement;
         "slot-children-root": HTMLSlotChildrenRootElement;
+        "slot-conditional-rendering": HTMLSlotConditionalRenderingElement;
         "slot-dynamic-name-change-scoped": HTMLSlotDynamicNameChangeScopedElement;
         "slot-dynamic-name-change-shadow": HTMLSlotDynamicNameChangeShadowElement;
         "slot-dynamic-scoped-list": HTMLSlotDynamicScopedListElement;
@@ -1940,6 +1949,8 @@ declare namespace LocalJSX {
     }
     interface SlotChildrenRoot {
     }
+    interface SlotConditionalRendering {
+    }
     interface SlotDynamicNameChangeScoped {
         "slotName"?: string;
     }
@@ -2160,6 +2171,7 @@ declare namespace LocalJSX {
         "slot-basic-order-root": SlotBasicOrderRoot;
         "slot-basic-root": SlotBasicRoot;
         "slot-children-root": SlotChildrenRoot;
+        "slot-conditional-rendering": SlotConditionalRendering;
         "slot-dynamic-name-change-scoped": SlotDynamicNameChangeScoped;
         "slot-dynamic-name-change-shadow": SlotDynamicNameChangeShadow;
         "slot-dynamic-scoped-list": SlotDynamicScopedList;
@@ -2324,6 +2336,7 @@ declare module "@stencil/core" {
             "slot-basic-order-root": LocalJSX.SlotBasicOrderRoot & JSXBase.HTMLAttributes<HTMLSlotBasicOrderRootElement>;
             "slot-basic-root": LocalJSX.SlotBasicRoot & JSXBase.HTMLAttributes<HTMLSlotBasicRootElement>;
             "slot-children-root": LocalJSX.SlotChildrenRoot & JSXBase.HTMLAttributes<HTMLSlotChildrenRootElement>;
+            "slot-conditional-rendering": LocalJSX.SlotConditionalRendering & JSXBase.HTMLAttributes<HTMLSlotConditionalRenderingElement>;
             "slot-dynamic-name-change-scoped": LocalJSX.SlotDynamicNameChangeScoped & JSXBase.HTMLAttributes<HTMLSlotDynamicNameChangeScopedElement>;
             "slot-dynamic-name-change-shadow": LocalJSX.SlotDynamicNameChangeShadow & JSXBase.HTMLAttributes<HTMLSlotDynamicNameChangeShadowElement>;
             "slot-dynamic-scoped-list": LocalJSX.SlotDynamicScopedList & JSXBase.HTMLAttributes<HTMLSlotDynamicScopedListElement>;
diff --git a/test/karma/test-app/slot-conditional-rendering/cmp.tsx b/test/karma/test-app/slot-conditional-rendering/cmp.tsx
new file mode 100644
index 00000000000..7a6b1126039
--- /dev/null
+++ b/test/karma/test-app/slot-conditional-rendering/cmp.tsx
@@ -0,0 +1,27 @@
+import { Component, h, Host, State } from '@stencil/core';
+
+@Component({
+  tag: 'slot-conditional-rendering',
+  shadow: false,
+  scoped: true,
+})
+export class SlotConditionalRendering {
+  @State() headerVisible = true;
+  @State() contentVisible = true;
+
+  render() {
+    return (
+      <Host>
+        {this.headerVisible ? <slot name="header" /> : null}
+        {this.contentVisible ? <slot /> : null}
+
+        <button id="header-visibility-toggle" onClick={() => (this.headerVisible = !this.headerVisible)}>
+          Toggle header visibility (to {this.headerVisible ? 'hidden' : 'visible'})
+        </button>
+        <button id="content-visibility-toggle" onClick={() => (this.contentVisible = !this.contentVisible)}>
+          Toggle content visibility (to {this.contentVisible ? 'hidden' : 'visible'})
+        </button>
+      </Host>
+    );
+  }
+}
diff --git a/test/karma/test-app/slot-conditional-rendering/index.html b/test/karma/test-app/slot-conditional-rendering/index.html
new file mode 100644
index 00000000000..1d5df87914b
--- /dev/null
+++ b/test/karma/test-app/slot-conditional-rendering/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<script src="./build/testapp.esm.js" type="module"></script>
+<script src="./build/testapp.js" nomodule></script>
+
+<slot-conditional-rendering>
+  <span slot="header" id="slotted-header-element-id">Hello</span>
+  <span id="slotted-content-element-id">World!</span>
+</slot-conditional-rendering>
\ No newline at end of file
diff --git a/test/karma/test-app/slot-conditional-rendering/karma.spec.ts b/test/karma/test-app/slot-conditional-rendering/karma.spec.ts
new file mode 100644
index 00000000000..259e8efe1a1
--- /dev/null
+++ b/test/karma/test-app/slot-conditional-rendering/karma.spec.ts
@@ -0,0 +1,39 @@
+import { setupDomTests, waitForChanges } from '../util';
+
+describe('slot-conditional-rendering', function () {
+  const { setupDom, tearDownDom } = setupDomTests(document);
+  let app: HTMLElement;
+  const getHeaderVisibilityToggle = () => app.querySelector<HTMLButtonElement>('#header-visibility-toggle');
+  const getContentVisibilityToggle = () => app.querySelector<HTMLButtonElement>('#content-visibility-toggle');
+  const getHeaderElementInLightDOM = () => app.querySelector('#slotted-header-element-id');
+  const getContentElementInLightDOM = () => app.querySelector('#slotted-content-element-id');
+
+  beforeEach(async () => {
+    app = await setupDom('/slot-conditional-rendering/index.html');
+  });
+  afterEach(tearDownDom);
+
+  it('slots are not hidden', async () => {
+    await waitForChanges();
+    expect(getHeaderElementInLightDOM().getAttribute('hidden')).toBeNull();
+    expect(getContentElementInLightDOM().getAttribute('hidden')).toBeNull();
+  });
+
+  it('header slot becomes hidden after hit the toggle button', async () => {
+    await waitForChanges();
+    expect(getHeaderElementInLightDOM().getAttribute('hidden')).toBeNull();
+
+    getHeaderVisibilityToggle()?.click();
+    await waitForChanges();
+    expect(getHeaderElementInLightDOM().getAttribute('hidden')).not.toBeNull();
+  });
+
+  it('content slot becomes hidden after hit the toggle button', async () => {
+    await waitForChanges();
+    expect(getContentElementInLightDOM().getAttribute('hidden')).toBeNull();
+
+    getContentVisibilityToggle()?.click();
+    await waitForChanges();
+    expect(getContentElementInLightDOM().getAttribute('hidden')).not.toBeNull();
+  });
+});