chore(test): Storybook test integration

.github/workflows/run_tests.yml

@@ -48,8 +48,14 @@ jobs:
         run: |
           export CI_PATHS_CHANGED=$(git diff --name-only -r HEAD^1 HEAD)
           npm run test:component
+
       - name: Run e2e tests 👀
         run: npm run test:e2e
+
+      - name: Run storybook tests 👀
+        run: |
+          export CI_PATHS_CHANGED=$(git diff --name-only -r HEAD^1 HEAD) && npm run test:storybook
+
       - name: Upload failed test screenshots 📷
         uses: actions/upload-artifact@v4
         if: failure()

cypress.config.ts

@@ -21,10 +21,14 @@ if (pathsChanged) {
   }
 }
 export default defineConfig({
+  env: {
+    CI_PATHS_CHANGED: pathsChanged,
+  },
   e2e: {
     // specPattern: "**/*.cy.{js,jsx,ts,tsx}",
     supportFile: false,
     experimentalRunAllSpecs: true,
+    excludeSpecPattern: ["**/storybook.cy.js"],
   },
   component: {
     supportFile: "cypress/support/component.ts",
@@ -35,4 +39,7 @@ export default defineConfig({
     specPattern: specPatternComponentTests,
     indexHtmlFile: "cypress/support/component-index.html",
   },
+  retries: {
+    runMode: 2,
+  },
 });

cypress/e2e/storybook.cy.js

@@ -0,0 +1,37 @@
+import "cypress-network-idle";
+import stories from "../../docs/index.json";
+
+describe("Stories test", () => {
+  const pathsChanged = Cypress.env("CI_PATHS_CHANGED");
+  let uniqueElementFolders = [];
+  let cypressChanged = false;
+  // only run stories from files that have been changed
+  if (pathsChanged) {
+    const changed = pathsChanged.split("\n");
+    // if cypress folder changed => run all tests
+    if (!changed.some((item) => item.startsWith("cypress"))) {
+      const filteredElementsFolders = changed
+        .filter((filePath) => filePath.startsWith("elements/"))
+        .map((filePath) => filePath.split("/")[1]);
+      uniqueElementFolders = [...new Set(filteredElementsFolders)];
+      console.log(uniqueElementFolders);
+    } else {
+      cypressChanged = true;
+    }
+  }
+  const filteredStories = cypressChanged
+    ? Object.values(stories.entries)
+    : Object.values(stories.entries).filter((obj) => {
+        return uniqueElementFolders.some((folder) =>
+          obj.importPath.includes(folder)
+        );
+      });
+  filteredStories.forEach((story) => {
+    if (story.type && story.type == "story") {
+      it(`${story.id}`, () => {
+        cy.visit(`../../docs/iframe.html?id=${story.id}`);
+        cy.waitForNetworkIdle(1000);
+      });
+    }
+  });
+});

elements/stacinfo/stacinfo.stories.js

@@ -123,20 +123,17 @@ export const CustomSlotContent = {
       style="width: 400px"
     >
       <div
-        slot="region"
+        slot="agency"
         style="background: lightgrey; width: 100%; padding: 10px 20px; border-radius: 4px;"
       >
-        <p>
-          Replacing the "region" property slot to render it in a custom manner:
-        </p>
-        <p>--> <strong>Region:</strong> <span class="content"></span>!</p>
+        <p>--> <strong>Agency:</strong> <span class="content"></span>!</p>
       </div>
     </eox-stacinfo>
     <script>
       const stacInfo = document.querySelector("eox-stacinfo#slot");
       stacInfo.addEventListener("loaded", () => {
         setTimeout(() => {
-          const value = stacInfo.stacProperties["osc:region"];
+          const value = stacInfo.stacProperties["agency"];
           document.querySelector(".content").innerHTML = value.formatted;
         });
       });