Skip to content

Commit

Permalink
test(Toast): add tests (#1939)
Browse files Browse the repository at this point in the history
  • Loading branch information
@booc0mtaco
booc0mtaco authored May 14, 2024
1 parent 48e92d4 commit 3298c66
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 72 deletions.
2 changes: 1 addition & 1 deletion src/components/Toast/Toast-v2.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { generateSnapshots } from '@chanzuckerberg/story-utils';
import type { StoryFile } from '@storybook/testing-react';

import * as stories from './Toast.stories';
import * as stories from './Toast-v2.stories';

describe('<Toast /> (v2)', () => {
generateSnapshots(stories as StoryFile);
Expand Down
163 changes: 92 additions & 71 deletions src/components/Toast/__snapshots__/Toast-v2.test.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,121 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Toast /> (v2) Error story renders snapshot 1`] = `
exports[`<Toast /> (v2) Critical story renders snapshot 1`] = `
<div
class="toast toast--error"
class="toast toast--status-critical"
>
<svg
aria-hidden="true"
class="icon toast__icon"
fill="currentColor"
height="1.875rem"
style="--icon-size: 1.875rem;"
viewBox="0 0 24 24"
width="1.875rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
/>
</svg>
<div
class="toast__content"
class="toast__body"
>
<svg
class="icon"
fill="currentColor"
height="1.5rem"
role="img"
style="--icon-size: 1.5rem;"
viewBox="0 0 24 24"
width="1.5rem"
xmlns="http://www.w3.org/2000/svg"
>
<title>
error
</title>
<path
d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
/>
</svg>
<p
class="toast__text"
<span
class="text text--title-md toast__text"
>
You've got toast!
</p>
You've got a temporary notification!
</span>
</div>
</div>
`;

exports[`<Toast /> (v2) NotDismissable story renders snapshot 1`] = `
exports[`<Toast /> (v2) Default story renders snapshot 1`] = `
<div
class="toast toast--success"
class="toast toast--status-favorable"
>
<svg
aria-hidden="true"
class="icon toast__icon"
fill="currentColor"
height="1.875rem"
style="--icon-size: 1.875rem;"
viewBox="0 0 24 24"
width="1.875rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
/>
</svg>
<div
class="toast__content"
class="toast__body"
>
<svg
class="icon"
fill="currentColor"
height="1.5rem"
role="img"
style="--icon-size: 1.5rem;"
viewBox="0 0 24 24"
width="1.5rem"
xmlns="http://www.w3.org/2000/svg"
<span
class="text text--title-md toast__text"
>
<title>
success
</title>
<path
d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
/>
</svg>
<p
class="toast__text"
>
You've got toast!
</p>
You've got a temporary notification!
</span>
</div>
</div>
`;

exports[`<Toast /> (v2) Success story renders snapshot 1`] = `
exports[`<Toast /> (v2) Favorable story renders snapshot 1`] = `
<div
class="toast toast--success"
class="toast toast--status-favorable"
>
<svg
aria-hidden="true"
class="icon toast__icon"
fill="currentColor"
height="1.875rem"
style="--icon-size: 1.875rem;"
viewBox="0 0 24 24"
width="1.875rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
/>
</svg>
<div
class="toast__content"
class="toast__body"
>
<svg
class="icon"
fill="currentColor"
height="1.5rem"
role="img"
style="--icon-size: 1.5rem;"
viewBox="0 0 24 24"
width="1.5rem"
xmlns="http://www.w3.org/2000/svg"
<span
class="text text--title-md toast__text"
>
<title>
success
</title>
<path
d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
/>
</svg>
<p
class="toast__text"
You've got a temporary notification!
</span>
</div>
</div>
`;

exports[`<Toast /> (v2) NotDismissable story renders snapshot 1`] = `
<div
class="toast toast--status-favorable"
>
<svg
aria-hidden="true"
class="icon toast__icon"
fill="currentColor"
height="1.875rem"
style="--icon-size: 1.875rem;"
viewBox="0 0 24 24"
width="1.875rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
/>
</svg>
<div
class="toast__body"
>
<span
class="text text--title-md toast__text"
>
You've got toast!
</p>
You've got a temporary notification!
</span>
</div>
</div>
`;

0 comments on commit 3298c66

Please sign in to comment.