Skip to content

Commit

Permalink
build: fix storybook test running in ci
Browse files Browse the repository at this point in the history 
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`
  • Loading branch information
@DanConwayDev
DanConwayDev committed Dec 19, 2023
1 parent 92c9637 commit 7e14c14
Show file tree
Hide file tree
Showing 4 changed files with 238 additions and 76 deletions.
40 changes: 20 additions & 20 deletions __snapshots__/repo-summary-card.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -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"
<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"
<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"
<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"
<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">
<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>
Expand Down
88 changes: 44 additions & 44 deletions __snapshots__/repo-summary-list.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,38 +7,38 @@ exports[`Repo/Summary/List Default test 1`] = `
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>
Expand Down Expand Up @@ -66,26 +66,26 @@ exports[`Repo/Summary/List Loading test 1`] = `
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>
Expand All @@ -95,26 +95,26 @@ exports[`Repo/Summary/List Loading test 1`] = `

exports[`Repo/Summary/List No Title 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>
Expand All @@ -129,34 +129,34 @@ exports[`Repo/Summary/List Partially Loaded test 1`] = `
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>
Expand Down
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"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:ci": "(concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers=2\") && rm storybook-static -r -f"
},
"devDependencies": {
"@storybook/addon-a11y": "^7.4.5",
Expand All @@ -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",
Expand All @@ -54,4 +56,4 @@
"resolutions": {
"jackspeak": "2.1.1"
}
}
}
Loading

0 comments on commit 7e14c14

Please sign in to comment.