test(slot): add karma test for #1968

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue
ionic-team · Dec 6, 2023 · f6a28b2 · f6a28b2
1 parent 4303d6a
commit f6a28b2
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 0 deletions.
diff --git a/test/karma/test-app/scoped-conditional/cmp.tsx b/test/karma/test-app/scoped-conditional/cmp.tsx
@@ -0,0 +1,31 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'scoped-conditional',
+  scoped: true,
+})
+export class ScopedConditional {
+  @Prop() renderHello: boolean = false;
+
+  render() {
+    return (
+      <div>
+        {/* prior to fixing the bug */}
+        {/* - if you remove the conditional below, it works */}
+        {/* - if you remove the <div /> around `.tag`, it works */}
+        {/* - if you add additional elements between the conditional and the second <div/>, it works */}
+
+        {/* Note: Need the conditional's first half, _and_ the innerHTML attr */}
+        {/* Interestingly, if we replace innerHTML with a text node as a child of the <div>, */}
+        {/* we get a separate error where the slot doesn't get put in the correct place */}
+        {this.renderHello && <div class="tag" innerHTML={'Hello'} />}
+        {/* This div below must be there too */}
+        <div>
+          before slot-&gt;
+          <slot />
+          &lt;-after slot
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/test/karma/test-app/scoped-conditional/index.html b/test/karma/test-app/scoped-conditional/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<script src="./build/testapp.esm.js" type="module"></script>
+<script src="./build/testapp.js" nomodule></script>
+
+<script>
+  function toggleHelloMessage() {
+    const scopedConditional = document.querySelector('scoped-conditional');
+    scopedConditional.renderHello = !scopedConditional.renderHello;
+  }
+</script>
+
+<button id="toggleHello" onclick="toggleHelloMessage()">Toggle Hello Message</button>
+<scoped-conditional>
+  <div>This div will be slotted in</div>
+</scoped-conditional>
diff --git a/test/karma/test-app/scoped-conditional/karma.spec.ts b/test/karma/test-app/scoped-conditional/karma.spec.ts
@@ -0,0 +1,61 @@
+import { setupDomTests, waitForChanges } from '../util';
+
+describe('scoped-conditional', () => {
+  const { setupDom, tearDownDom } = setupDomTests(document);
+  let app: HTMLElement | undefined;
+
+  beforeEach(async () => {
+    app = await setupDom('/scoped-conditional/index.html');
+  });
+
+  afterEach(tearDownDom);
+
+  it('renders the initial slotted content', () => {
+    const host = app.querySelector('scoped-conditional');
+    const outerDiv = host.querySelector('div');
+
+    expect(outerDiv.textContent).toBe(
+      `before slot->
+  This div will be slotted in
+<-after slot`,
+    );
+  });
+
+  it('renders the slotted content after toggling the message', async () => {
+    // toggle the 'Hello' message, which should insert a new <div/> into the DOM & _not_ remove the slotted content
+    const toggleButton = app.querySelector<HTMLButtonElement>('#toggleHello');
+    toggleButton.click();
+    await waitForChanges();
+
+    const host = app.querySelector('scoped-conditional');
+    const outerDivChildren = host.querySelector('div').childNodes;
+
+    expect(outerDivChildren.length).toBe(2);
+
+    expect(outerDivChildren[0].textContent).toBe('Hello');
+    expect(outerDivChildren[1].textContent).toBe(
+      `before slot->
+  This div will be slotted in
+<-after slot`,
+    );
+  });
+
+  it('renders the slotted content after toggling the twice message', async () => {
+    // toggle the 'Hello' message twice, which should insert a new <div/> into the DOM, then remove it.
+    // as a result of the toggle, we should _not_ remove the slotted content
+    const toggleButton = app.querySelector<HTMLButtonElement>('#toggleHello');
+    toggleButton.click();
+    await waitForChanges();
+    toggleButton.click();
+    await waitForChanges();
+
+    const host = app.querySelector('scoped-conditional');
+    const outerDiv = host.querySelector('div');
+
+    expect(outerDiv.textContent).toBe(
+      `before slot->
+  This div will be slotted in
+<-after slot`,
+    );
+  });
+});