Skip to content

MSW data mocking with @web/test-runner and StoryBook #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 12, 2023
Merged

MSW data mocking with @web/test-runner and StoryBook #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d1cd1e7
MSW test & StoryBook integration
sashafirsov Mar 11, 2023
7c388c7
delayed http-request SB
sashafirsov Mar 12, 2023
f0d2107
http-request delayed test
sashafirsov Mar 12, 2023
53b4d8d
sanitized mockServiceWorker.js
sashafirsov Mar 12, 2023
89d420e
0.0.8
sashafirsov Mar 12, 2023
7aac01f
test timeouts adjusted
sashafirsov Mar 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .storybook/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
var{ color: green; }
code{ color: violet; }
3 changes: 2 additions & 1 deletion .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ module.exports = {
"core": {
"builder": "@storybook/builder-webpack5"
},
Copy link
Member Author

@sashafirsov sashafirsov Mar 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MSW in StoryBook build and during the dev run needs service worker available on root level

/mockServiceWorker.js is generated by

npx msw init "./" --save

staticDirs: ['../public'
staticDirs: [
{from: '../mockServiceWorker.js', to: '/mockServiceWorker.js'} // MSW support
// , '../static', {from: '../foo/assets', to: '/assets'}
],

Expand Down
13 changes: 4 additions & 9 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { initialize, mswDecorator } from "msw-storybook-addon";
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

msw-storybook-addon and handlers are needed for enabling mock handlers in StoryBook.

The handlers placed into separate module for sharing between StoryBook and unit tests

import { rest } from "msw";
import pokemonsMock from "../stories/pokemons.mock";

import './common.css';
import {handlers} from "../src/mocks/handlers";

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
Expand All @@ -11,13 +12,7 @@ export const parameters = {
date: /Date$/,
},
},
msw: {
handlers: [
rest.get("*/api/v2/pokemon", (req, res, ctx) => {
return res(ctx.json(pokemonsMock));
}),
],
},
msw: {handlers},
};

// Initialize MSW
Expand Down
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ To run a local development server that serves the basic demo located in `src/dem

[git-url]: https://github.com/EPA-WG/custom-element
[github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
[demo-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.7/dist/index.html
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.7/storybook-static/index.html?path=/story/welcome--introduction
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.7/coverage/coverage.svg
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.7/coverage/lcov-report/index.html
[demo-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.8/dist/index.html
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.8/storybook-static/index.html?path=/story/welcome--introduction
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.8/coverage/coverage.svg
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.8/coverage/lcov-report/index.html
57 changes: 36 additions & 21 deletions coverage/lcov-report/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,30 @@ <h1>All files</h1>
<div class='clearfix'>

<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="strong">97.69% </span>
<span class="quiet">Statements</span>
<span class='fraction'>217/217</span>
<span class='fraction'>636/651</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="strong">92.13% </span>
<span class="quiet">Branches</span>
<span class='fraction'>17/17</span>
<span class='fraction'>82/89</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">83.33% </span>
<span class="strong">92.68% </span>
<span class="quiet">Functions</span>
<span class='fraction'>10/12</span>
<span class='fraction'>38/41</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="strong">97.69% </span>
<span class="quiet">Lines</span>
<span class='fraction'>217/217</span>
<span class='fraction'>636/651</span>
</div>


Expand Down Expand Up @@ -80,17 +80,32 @@ <h1>All files</h1>
</thead>
<tbody><tr>
<td class="file high" data-value="src"><a href="src/index.html">src</a></td>
<td data-value="100" class="pic high">
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
<td data-value="97.7" class="pic high">
<div class="chart"><div class="cover-fill" style="width: 97%"></div><div class="cover-empty" style="width: 3%"></div></div>
</td>
<td data-value="97.7" class="pct high">97.7%</td>
<td data-value="305" class="abs high">298/305</td>
<td data-value="90.27" class="pct high">90.27%</td>
<td data-value="72" class="abs high">65/72</td>
<td data-value="91.42" class="pct high">91.42%</td>
<td data-value="35" class="abs high">32/35</td>
<td data-value="97.7" class="pct high">97.7%</td>
<td data-value="305" class="abs high">298/305</td>
</tr>

<tr>
<td class="file high" data-value="src/mocks"><a href="src/mocks/index.html">src/mocks</a></td>
<td data-value="88.23" class="pic high">
<div class="chart"><div class="cover-fill" style="width: 88%"></div><div class="cover-empty" style="width: 12%"></div></div>
</td>
<td data-value="88.23" class="pct high">88.23%</td>
<td data-value="68" class="abs high">60/68</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="101" class="abs high">101/101</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="15" class="abs high">15/15</td>
<td data-value="81.81" class="pct high">81.81%</td>
<td data-value="11" class="abs high">9/11</td>
<td data-value="9" class="abs high">9/9</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="101" class="abs high">101/101</td>
<td data-value="2" class="abs high">2/2</td>
<td data-value="88.23" class="pct high">88.23%</td>
<td data-value="68" class="abs high">60/68</td>
</tr>

<tr>
Expand All @@ -99,13 +114,13 @@ <h1>All files</h1>
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="116" class="abs high">116/116</td>
<td data-value="278" class="abs high">278/278</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="2" class="abs high">2/2</td>
<td data-value="8" class="abs high">8/8</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="1" class="abs high">1/1</td>
<td data-value="4" class="abs high">4/4</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="116" class="abs high">116/116</td>
<td data-value="278" class="abs high">278/278</td>
</tr>

</tbody>
Expand All @@ -116,7 +131,7 @@ <h1>All files</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
at 2023-01-01T01:00:06.204Z
at 2023-03-12T19:45:22.597Z
</div>
<script src="prettify.js"></script>
<script>
Expand Down
Loading