build: fix storybook test running in ci

add dependancies to enable tests to run

there is a slight missmatch in html classes in `js.snap` test vectors
when tests are run with storybook is built using `storybook dev` vs
`storybook build`

.gitignore

@@ -9,4 +9,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-/result
+/result
+storybook-static

.storybook/test-runner.ts

@@ -26,6 +26,9 @@ const config: TestRunnerConfig = {
             failureThreshold: 0.002,
         });
     },
+    tags: {
+        skip: ["intermittent-test-success"],
+    },
 };
 
 export default config;

__snapshots__/navbar.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navbar Default test 1`] = `
+exports[`Navbar Default smoke-test 1`] = `
 <div class="bg-neutral">
   <div class="mx-auto lg:container bg-neutral">
     <div class="navbar">
@@ -30,7 +30,7 @@ exports[`Navbar Default test 1`] = `
 </div>
 `;
 
-exports[`Navbar NIP07Exists test 1`] = `
+exports[`Navbar NIP07Exists smoke-test 1`] = `
 <div class="bg-neutral">
   <div class="mx-auto lg:container bg-neutral">
     <div class="navbar">
@@ -57,7 +57,7 @@ exports[`Navbar NIP07Exists test 1`] = `
 </div>
 `;
 
-exports[`Navbar NoNIP07 test 1`] = `
+exports[`Navbar NoNIP07 smoke-test 1`] = `
 <div class="bg-neutral">
   <div class="mx-auto lg:container bg-neutral">
     <div class="navbar">

__snapshots__/prs-list-item.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PRs/List/Item Long Details test 1`] = `
+exports[`PRs/List/Item Long Details smoke-test 1`] = `
 <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
@@ -25,7 +25,7 @@ exports[`PRs/List/Item Long Details test 1`] = `
 </li>
 `;
 
-exports[`PRs/List/Item Long and No Spaces test 1`] = `
+exports[`PRs/List/Item Long and No Spaces smoke-test 1`] = `
 <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
@@ -60,7 +60,7 @@ exports[`PRs/List/Item Long and No Spaces test 1`] = `
 </li>
 `;
 
-exports[`PRs/List/Item No Details test 1`] = `
+exports[`PRs/List/Item No Details smoke-test 1`] = `
 <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
@@ -84,7 +84,7 @@ exports[`PRs/List/Item No Details test 1`] = `
 </li>
 `;
 
-exports[`PRs/List/Item Short Details test 1`] = `
+exports[`PRs/List/Item Short Details smoke-test 1`] = `
 <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
@@ -119,7 +119,7 @@ exports[`PRs/List/Item Short Details test 1`] = `
 </li>
 `;
 
-exports[`PRs/List/Item loading test 1`] = `
+exports[`PRs/List/Item loading smoke-test 1`] = `
 <li class="flex p-2 pt-4 ">
   <div class="h-5 w-5 pt-1 flex-none skeleton">
   </div>

__snapshots__/prs-list-list.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PRs/List/List Default test 1`] = `
+exports[`PRs/List/List Default smoke-test 1`] = `
 <div class>
   <div class="prose">
     <h4>
@@ -98,7 +98,7 @@ exports[`PRs/List/List Default test 1`] = `
 </div>
 `;
 
-exports[`PRs/List/List Empty test 1`] = `
+exports[`PRs/List/List Empty smoke-test 1`] = `
 <div class>
   <div class="prose">
     <h4>
@@ -113,7 +113,7 @@ exports[`PRs/List/List Empty test 1`] = `
 </div>
 `;
 
-exports[`PRs/List/List Loading test 1`] = `
+exports[`PRs/List/List Loading smoke-test 1`] = `
 <div class>
   <div class="prose">
     <h4>
@@ -155,7 +155,7 @@ exports[`PRs/List/List Loading test 1`] = `
 </div>
 `;
 
-exports[`PRs/List/List No Title test 1`] = `
+exports[`PRs/List/List No Title smoke-test 1`] = `
 <div class>
   <ul class="divide-y divide-neutral-600">
     <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
@@ -216,7 +216,7 @@ exports[`PRs/List/List No Title test 1`] = `
 </div>
 `;
 
-exports[`PRs/List/List Partially Loaded test 1`] = `
+exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
 <div class>
   <div class="prose">
     <h4>

__snapshots__/repo-details.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Repo/Details Long Details test 1`] = `
+exports[`Repo/Details Long Details smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -54,7 +54,7 @@ exports[`Repo/Details Long Details test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details Long and No Spaces test 1`] = `
+exports[`Repo/Details Long and No Spaces smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -107,7 +107,7 @@ exports[`Repo/Details Long and No Spaces test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details No Description test 1`] = `
+exports[`Repo/Details No Description smoke-test 1`] = `
 <div class="max-w-md prose">
   <div>
   </div>
@@ -156,7 +156,7 @@ exports[`Repo/Details No Description test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details No Maintainers or Relays test 1`] = `
+exports[`Repo/Details No Maintainers or Relays smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -189,7 +189,7 @@ exports[`Repo/Details No Maintainers or Relays test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details No Maintainers test 1`] = `
+exports[`Repo/Details No Maintainers smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -232,7 +232,7 @@ exports[`Repo/Details No Maintainers test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details No Name or Description test 1`] = `
+exports[`Repo/Details No Name or Description smoke-test 1`] = `
 <div class="max-w-md prose">
   <div>
   </div>
@@ -281,7 +281,7 @@ exports[`Repo/Details No Name or Description test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details No Relays test 1`] = `
+exports[`Repo/Details No Relays smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -324,7 +324,7 @@ exports[`Repo/Details No Relays test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details No Tags test 1`] = `
+exports[`Repo/Details No Tags smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -365,7 +365,7 @@ exports[`Repo/Details No Tags test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details One Maintainer's Profile Has No displayName or Name test 1`] = `
+exports[`Repo/Details One Maintainer's Profile Has No displayName or Name smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -418,7 +418,7 @@ exports[`Repo/Details One Maintainer's Profile Has No displayName or Name test 1
 </div>
 `;
 
-exports[`Repo/Details One Maintainer's Profile Not Loaded test 1`] = `
+exports[`Repo/Details One Maintainer's Profile Not Loaded smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -470,7 +470,7 @@ exports[`Repo/Details One Maintainer's Profile Not Loaded test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name test 1`] = `
+exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -523,7 +523,7 @@ exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name
 </div>
 `;
 
-exports[`Repo/Details Short Details test 1`] = `
+exports[`Repo/Details Short Details smoke-test 1`] = `
 <div class="max-w-md prose">
   <h4>
     description
@@ -566,7 +566,7 @@ exports[`Repo/Details Short Details test 1`] = `
 </div>
 `;
 
-exports[`Repo/Details loading test 1`] = `
+exports[`Repo/Details loading smoke-test 1`] = `
 <div class="max-w-md prose">
   <div class="h-5 my-3 skeleton w-20">
   </div>

__snapshots__/repo-summary-card.test.js.snap

@@ -1,69 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Repo/Summary/Card Long Details test 1`] = `
-<a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+exports[`Repo/Summary/Card Long Details smoke-test 1`] = `
+<a class="card w-96 bg-primary text-primary-content"
    href="/repo/"
 >
-  <div class="card-body s-LKxYhcdFgLTA">
-    <h2 class="card-title s-LKxYhcdFgLTA">
+  <div class="card-body">
+    <h2 class="card-title svelte-jesdj">
       Long Name that goes on and on and on and on a...
     </h2>
-    <p class="s-LKxYhcdFgLTA">
+    <p class="svelte-jesdj">
       Lorem ipsum dolor sit amet, consectetur adipi...
     </p>
   </div>
 </a>
 `;
 
-exports[`Repo/Summary/Card Long and No Spaces test 1`] = `
-<a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = `
+<a class="card w-96 bg-primary text-primary-content"
    href="/repo/"
 >
-  <div class="card-body s-LKxYhcdFgLTA">
-    <h2 class="card-title s-LKxYhcdFgLTA">
+  <div class="card-body">
+    <h2 class="card-title svelte-jesdj">
       LongNameLongNameLongNameLongNameLongNameLongN...
     </h2>
-    <p class="s-LKxYhcdFgLTA">
+    <p class="svelte-jesdj">
       LoremipsumLoremipsumLoremipsumLoremipsumLorem...
     </p>
   </div>
 </a>
 `;
 
-exports[`Repo/Summary/Card No Details test 1`] = `
-<a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+exports[`Repo/Summary/Card No Details smoke-test 1`] = `
+<a class="card w-96 bg-primary text-primary-content"
    href="/repo/"
 >
-  <div class="card-body s-LKxYhcdFgLTA">
-    <h2 class="card-title s-LKxYhcdFgLTA">
+  <div class="card-body">
+    <h2 class="card-title svelte-jesdj">
       Untitled
     </h2>
-    <p class="s-LKxYhcdFgLTA">
+    <p class="svelte-jesdj">
     </p>
   </div>
 </a>
 `;
 
-exports[`Repo/Summary/Card Short Details test 1`] = `
-<a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+exports[`Repo/Summary/Card Short Details smoke-test 1`] = `
+<a class="card w-96 bg-primary text-primary-content"
    href="/repo/"
 >
-  <div class="card-body s-LKxYhcdFgLTA">
-    <h2 class="card-title s-LKxYhcdFgLTA">
+  <div class="card-body">
+    <h2 class="card-title svelte-jesdj">
       Short Name
     </h2>
-    <p class="s-LKxYhcdFgLTA">
+    <p class="svelte-jesdj">
       short description
     </p>
   </div>
 </a>
 `;
 
-exports[`Repo/Summary/Card loading test 1`] = `
-<div class="card w-96 bg-neutral text-neutral-focus s-LKxYhcdFgLTA">
-  <div class="card-body s-LKxYhcdFgLTA">
-    <div class="text-center s-LKxYhcdFgLTA">
-      <span class="loading loading-spinner loading-lg text-base-100 s-LKxYhcdFgLTA">
+exports[`Repo/Summary/Card loading smoke-test 1`] = `
+<div class="card w-96 bg-neutral text-neutral-focus">
+  <div class="card-body">
+    <div class="text-center">
+      <span class="loading loading-spinner loading-lg text-base-100">
       </span>
     </div>
   </div>

__snapshots__/repo-summary-list.test.js.snap

@@ -1,44 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Repo/Summary/List Default test 1`] = `
+exports[`Repo/Summary/List Default smoke-test 1`] = `
 <div class="space-y-5">
   <div class="prose">
     <h3>
       Featured Repositories
     </h3>
   </div>
-  <a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+  <a class="card w-96 bg-primary text-primary-content"
      href="/repo/"
   >
-    <div class="card-body s-LKxYhcdFgLTA">
-      <h2 class="card-title s-LKxYhcdFgLTA">
+    <div class="card-body">
+      <h2 class="card-title svelte-jesdj">
         Short Name
       </h2>
-      <p class="s-LKxYhcdFgLTA">
+      <p class="svelte-jesdj">
         short description
       </p>
     </div>
   </a>
-  <a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+  <a class="card w-96 bg-primary text-primary-content"
      href="/repo/"
   >
-    <div class="card-body s-LKxYhcdFgLTA">
-      <h2 class="card-title s-LKxYhcdFgLTA">
+    <div class="card-body">
+      <h2 class="card-title svelte-jesdj">
         Long Name that goes on and on and on and on a...
       </h2>
-      <p class="s-LKxYhcdFgLTA">
+      <p class="svelte-jesdj">
         Lorem ipsum dolor sit amet, consectetur adipi...
       </p>
     </div>
   </a>
-  <a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+  <a class="card w-96 bg-primary text-primary-content"
      href="/repo/"
   >
-    <div class="card-body s-LKxYhcdFgLTA">
-      <h2 class="card-title s-LKxYhcdFgLTA">
+    <div class="card-body">
+      <h2 class="card-title svelte-jesdj">
         LongNameLongNameLongNameLongNameLongNameLongN...
       </h2>
-      <p class="s-LKxYhcdFgLTA">
+      <p class="svelte-jesdj">
         LoremipsumLoremipsumLoremipsumLoremipsumLorem...
       </p>
     </div>
@@ -46,7 +46,7 @@ exports[`Repo/Summary/List Default test 1`] = `
 </div>
 `;
 
-exports[`Repo/Summary/List Empty test 1`] = `
+exports[`Repo/Summary/List Empty smoke-test 1`] = `
 <div class="space-y-5">
   <div class="prose">
     <h3>
@@ -59,33 +59,33 @@ exports[`Repo/Summary/List Empty test 1`] = `
 </div>
 `;
 
-exports[`Repo/Summary/List Loading test 1`] = `
+exports[`Repo/Summary/List Loading smoke-test 1`] = `
 <div class="space-y-5">
   <div class="prose">
     <h3>
       Latest
     </h3>
   </div>
-  <div class="card w-96 bg-neutral text-neutral-focus s-LKxYhcdFgLTA">
-    <div class="card-body s-LKxYhcdFgLTA">
-      <div class="text-center s-LKxYhcdFgLTA">
-        <span class="loading loading-spinner loading-lg text-base-100 s-LKxYhcdFgLTA">
+  <div class="card w-96 bg-neutral text-neutral-focus">
+    <div class="card-body">
+      <div class="text-center">
+        <span class="loading loading-spinner loading-lg text-base-100">
         </span>
       </div>
     </div>
   </div>
-  <div class="card w-96 bg-neutral text-neutral-focus s-LKxYhcdFgLTA">
-    <div class="card-body s-LKxYhcdFgLTA">
-      <div class="text-center s-LKxYhcdFgLTA">
-        <span class="loading loading-spinner loading-lg text-base-100 s-LKxYhcdFgLTA">
+  <div class="card w-96 bg-neutral text-neutral-focus">
+    <div class="card-body">
+      <div class="text-center">
+        <span class="loading loading-spinner loading-lg text-base-100">
         </span>
       </div>
     </div>
   </div>
-  <div class="card w-96 bg-neutral text-neutral-focus s-LKxYhcdFgLTA">
-    <div class="card-body s-LKxYhcdFgLTA">
-      <div class="text-center s-LKxYhcdFgLTA">
-        <span class="loading loading-spinner loading-lg text-base-100 s-LKxYhcdFgLTA">
+  <div class="card w-96 bg-neutral text-neutral-focus">
+    <div class="card-body">
+      <div class="text-center">
+        <span class="loading loading-spinner loading-lg text-base-100">
         </span>
       </div>
     </div>
@@ -93,28 +93,28 @@ exports[`Repo/Summary/List Loading test 1`] = `
 </div>
 `;
 
-exports[`Repo/Summary/List No Title test 1`] = `
+exports[`Repo/Summary/List No Title smoke-test 1`] = `
 <div class="space-y-5">
-  <a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+  <a class="card w-96 bg-primary text-primary-content"
      href="/repo/"
   >
-    <div class="card-body s-LKxYhcdFgLTA">
-      <h2 class="card-title s-LKxYhcdFgLTA">
+    <div class="card-body">
+      <h2 class="card-title svelte-jesdj">
         Short Name
       </h2>
-      <p class="s-LKxYhcdFgLTA">
+      <p class="svelte-jesdj">
         short description
       </p>
     </div>
   </a>
-  <a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+  <a class="card w-96 bg-primary text-primary-content"
      href="/repo/"
   >
-    <div class="card-body s-LKxYhcdFgLTA">
-      <h2 class="card-title s-LKxYhcdFgLTA">
+    <div class="card-body">
+      <h2 class="card-title svelte-jesdj">
         Long Name that goes on and on and on and on a...
       </h2>
-      <p class="s-LKxYhcdFgLTA">
+      <p class="svelte-jesdj">
         Lorem ipsum dolor sit amet, consectetur adipi...
       </p>
     </div>
@@ -122,41 +122,41 @@ exports[`Repo/Summary/List No Title test 1`] = `
 </div>
 `;
 
-exports[`Repo/Summary/List Partially Loaded test 1`] = `
+exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
 <div class="space-y-5">
   <div class="prose">
     <h3>
       Latest
     </h3>
   </div>
-  <a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+  <a class="card w-96 bg-primary text-primary-content"
      href="/repo/"
   >
-    <div class="card-body s-LKxYhcdFgLTA">
-      <h2 class="card-title s-LKxYhcdFgLTA">
+    <div class="card-body">
+      <h2 class="card-title svelte-jesdj">
         Short Name
       </h2>
-      <p class="s-LKxYhcdFgLTA">
+      <p class="svelte-jesdj">
         short description
       </p>
     </div>
   </a>
-  <a class="card w-96 bg-primary text-primary-content s-LKxYhcdFgLTA"
+  <a class="card w-96 bg-primary text-primary-content"
      href="/repo/"
   >
-    <div class="card-body s-LKxYhcdFgLTA">
-      <h2 class="card-title s-LKxYhcdFgLTA">
+    <div class="card-body">
+      <h2 class="card-title svelte-jesdj">
         Long Name that goes on and on and on and on a...
       </h2>
-      <p class="s-LKxYhcdFgLTA">
+      <p class="svelte-jesdj">
         Lorem ipsum dolor sit amet, consectetur adipi...
       </p>
     </div>
   </a>
-  <div class="card w-96 bg-neutral text-neutral-focus s-LKxYhcdFgLTA">
-    <div class="card-body s-LKxYhcdFgLTA">
-      <div class="text-center s-LKxYhcdFgLTA">
-        <span class="loading loading-spinner loading-lg text-base-100 s-LKxYhcdFgLTA">
+  <div class="card w-96 bg-neutral text-neutral-focus">
+    <div class="card-body">
+      <div class="text-center">
+        <span class="loading loading-spinner loading-lg text-base-100">
         </span>
       </div>
     </div>

package.json

@@ -10,8 +10,8 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook --index-json",
-    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers=2\""
+    "test": "storybook build && (concurrently -k -s first \"http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && test-storybook --index-json --maxWorkers=2\") && rm storybook-static -r -f",
+    "test-update": "storybook build && (concurrently -k -s first \"http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && test-storybook -u --index-json --maxWorkers=2\") && rm storybook-static -r -f"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^7.4.5",
@@ -22,7 +22,7 @@
     "@storybook/blocks": "^7.4.5",
     "@storybook/svelte": "^7.4.5",
     "@storybook/sveltekit": "^7.4.5",
-    "@storybook/test-runner": "^0.13.0",
+    "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.1",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-node": "^1.2.3",
@@ -31,6 +31,8 @@
     "@types/jest-image-snapshot": "^6.2.1",
     "@types/node": "^20.8.2",
     "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
+    "http-server": "^14.1.1",
     "jest-image-snapshot": "^6.2.0",
     "postcss": "^8.4.30",
     "react": "^18.2.0",

src/lib/components/RepoSummaryCard.stories.svelte

@@ -23,4 +23,7 @@
 
 <Story name="No Details" args={{}} />
 
-<Story name="loading" args={{ loading: true }} />
+<Story
+    name="loading"
+    args={{ loading: true, tags: ["intermittent-test-success"] }}
+/>

src/lib/components/ReposSummaryList.stories.svelte

@@ -43,6 +43,7 @@
         title: "Latest",
         repos: [],
         loading: true,
+        tags: ["intermittent-test-success"],
     }}
 />
 
@@ -52,5 +53,6 @@
         title: "Latest",
         repos: [vectors.Short, vectors.Long],
         loading: true,
+        tags: ["intermittent-test-success"],
     }}
 />