From 22d40d6e2c6b98c9216fa1b8e8a2479ecd51f7a2 Mon Sep 17 00:00:00 2001
From: Silvester <silvester.pari@eox.at>
Date: Thu, 21 Nov 2024 17:47:30 +0100
Subject: [PATCH] fix: re-enable result title slot (#1384)

* fix: re-enable result title slot

* chore: add test
---
 elements/itemfilter/src/components/results.js |  4 +--
 elements/itemfilter/src/main.js               |  6 ++++-
 .../itemfilter/test/cases/general/index.js    |  1 +
 .../itemfilter/test/cases/general/slots.js    | 26 +++++++++++++++++++
 elements/itemfilter/test/general.cy.js        | 13 ++++++++++
 5 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 elements/itemfilter/test/cases/general/slots.js

diff --git a/elements/itemfilter/src/components/results.js b/elements/itemfilter/src/components/results.js
index cb82ace97..fce923e94 100644
--- a/elements/itemfilter/src/components/results.js
+++ b/elements/itemfilter/src/components/results.js
@@ -114,9 +114,7 @@ export class EOxItemFilterResults extends LitElement {
   render() {
     return html`
       <section id="section-results">
-        <div>
-          <h6 class="main-heading">Results</h6>
-        </div>
+        <div slot="resultstitle"></div>
         <div id="container-results" class="scroll">
           ${when(
             this.results.length < 1,
diff --git a/elements/itemfilter/src/main.js b/elements/itemfilter/src/main.js
index 764a34c23..200895d37 100644
--- a/elements/itemfilter/src/main.js
+++ b/elements/itemfilter/src/main.js
@@ -455,7 +455,11 @@ export class EOxItemFilter extends LitElement {
               .resultAggregation=${this.#resultAggregation}
               .selectedResult=${this.selectedResult}
               @result=${this.updateResult}
-            ></eox-itemfilter-results>
+            >
+              <slot name="resultstitle"
+                ><h6 class="main-heading">Results</h6></slot
+              >
+            </eox-itemfilter-results>
           `,
         )}
       </form>
diff --git a/elements/itemfilter/test/cases/general/index.js b/elements/itemfilter/test/cases/general/index.js
index 358de3391..abdcb478b 100644
--- a/elements/itemfilter/test/cases/general/index.js
+++ b/elements/itemfilter/test/cases/general/index.js
@@ -11,3 +11,4 @@ export { default as externalFilterTest } from "./external-filter";
 export { default as nestedPropertyTest } from "./nested-property";
 export { default as subtitleTest } from "./subtitle";
 export { default as validationTest } from "./validation";
+export { default as slotRenderTest } from "./slots";
diff --git a/elements/itemfilter/test/cases/general/slots.js b/elements/itemfilter/test/cases/general/slots.js
new file mode 100644
index 000000000..edef657d5
--- /dev/null
+++ b/elements/itemfilter/test/cases/general/slots.js
@@ -0,0 +1,26 @@
+/**
+ * Tests the available slots to correctly render
+ */
+const slotRenderTest = () => {
+  const filtersTitle = "Foo";
+  const resultsTitle = "Bar";
+  cy.mount(
+    `
+    <eox-itemfilter>
+      <p slot="filterstitle">${filtersTitle}</p>
+      <p slot="resultstitle">${resultsTitle}</p>
+    </eox-itemfilter>`,
+  ).as("eox-itemfilter");
+  cy.get("eox-itemfilter")
+    .shadow()
+    .within(() => {
+      cy.get('slot[name="filterstitle"]').and(($el) => {
+        expect($el[0].assignedNodes()[0].textContent).to.equal(filtersTitle);
+      });
+      cy.get('slot[name="resultstitle"]').and(($el) => {
+        expect($el[0].assignedNodes()[0].textContent).to.equal(resultsTitle);
+      });
+    });
+};
+
+export default slotRenderTest;
diff --git a/elements/itemfilter/test/general.cy.js b/elements/itemfilter/test/general.cy.js
index 1a522b2d8..dcb8cdb01 100644
--- a/elements/itemfilter/test/general.cy.js
+++ b/elements/itemfilter/test/general.cy.js
@@ -13,6 +13,7 @@ import {
   nestedPropertyTest,
   subtitleTest,
   validationTest,
+  slotRenderTest,
 } from "./cases/general/";
 
 /**
@@ -23,6 +24,11 @@ describe("Item Filter Config", () => {
    * Runs before each test case to mount the eox-itemfilter component and configure it.
    */
   beforeEach(() => {
+    console.log(Cypress.currentTest);
+    if (["renders slots correctly"].includes(Cypress.currentTest.title)) {
+      cy.log("skipping beforeEach hook");
+      return;
+    }
     cy.mount(`<eox-itemfilter></eox-itemfilter>`)
       .as("eox-itemfilter")
       .then(($el) => {
@@ -107,4 +113,11 @@ describe("Item Filter Config", () => {
    * Test case to check if input validation is working
    */
   it("should have working validation", () => validationTest());
+
+  /**
+   * Test case to check slot rendering
+   */
+  it.only("renders slots correctly", { skipBeforeEach: true }, () =>
+    slotRenderTest(),
+  );
 });