fix: re-enable result title slot (#1384)

* fix: re-enable result title slot

* chore: add test

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,

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>

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";

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;

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(),
+  );
 });