Skip to content

Commit 78f6442

Browse files
areisleareisle
committed
test: add stories for components used in RecordForm
KBDEV-1500 replace most existing tests with stories
1 parent 99c339d commit 78f6442

45 files changed

Lines changed: 18718 additions & 978 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.storybook/preview.tsx‎

Lines changed: 2 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
import React, { Suspense } from 'react';
1+
import React from 'react';
22
import ThemeProvider from '../src/theme';
33
import { initialize, mswLoader, getWorker } from 'msw-storybook-addon'
44
import { QueryClient, QueryClientProvider } from 'react-query';
55
import '../src/static/graphkb-env-config';
66
import { HttpRequestHandler, HttpResponse, http as httpBase, isCommonAssetRequest } from 'msw';
77
import { GeneralRecordType, QueryBody } from '../src/components/types';
8-
import { Decorator, definePreview, StoryObj } from '@storybook/react-vite';
8+
import { definePreview } from '@storybook/react-vite';
99
import addonTest from '@storybook/addon-vitest';
1010
import { MswParameters } from 'msw-storybook-addon'
1111
import { PreviewAddon } from 'storybook/internal/csf';
12-
import { AppRoutes } from '../src/views/MainView';
13-
import { MemoryRouter } from 'react-router-dom';
14-
import { SnackbarProvider } from 'notistack';
15-
import { AuthContext, AuthContextState } from '../src/components/Auth';
16-
import { expect, waitFor } from 'storybook/test';
17-
import { CircularProgress } from '@mui/material';
1812

1913
export const http = {
2014
...httpBase,
@@ -66,87 +60,4 @@ const preview = definePreview({
6660
loaders: [mswLoader, () => ({ queryClient: new QueryClient({ defaultOptions: { queries: { retry: false } } }) })],
6761
});
6862

69-
export async function hasFinishedLoading({ step, canvas }: Pick<Parameters<NonNullable<StoryObj['play']>>[0], 'step' | 'canvas'>) {
70-
await step('Finished Loading', async () => {
71-
await waitFor(async () => {
72-
await expect(canvas.queryAllByRole('progressbar')).toHaveLength(0);
73-
await expect(canvas.queryAllByText(/loading\.\.\./i)).toHaveLength(0);
74-
}, { timeout: 10000 });
75-
});
76-
}
77-
78-
export const withSnackbar: Decorator = (Story) => <SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}><Story /></SnackbarProvider>;
79-
80-
interface WithAuthArgs {
81-
auth?: Omit<Partial<AuthContextState>, 'user'> & { user?: Partial<AuthContextState['user']> };
82-
}
83-
84-
export const withAuth: Decorator<WithAuthArgs> = (Story, { args }) => {
85-
const auth = args.auth;
86-
const authState: AuthContextState = {
87-
login: () => { },
88-
logout: () => { },
89-
isAuthenticating: false,
90-
isAuthenticated: true,
91-
isAdmin: false,
92-
hasWriteAccess: false,
93-
error: undefined,
94-
...auth,
95-
user: auth?.user === null ? undefined : {
96-
signedLicenseAt: new Date(2020, 0, 1).getTime(),
97-
name: 'bmonkeys',
98-
groups: [],
99-
'@rid': '#1:1',
100-
...auth?.user
101-
},
102-
}
103-
return (
104-
<AuthContext.Provider value={authState}>
105-
<Story />
106-
</AuthContext.Provider>
107-
)
108-
};
109-
110-
interface WithRouterArgs {
111-
path?: string;
112-
}
113-
114-
export const withRouter: Decorator<WithRouterArgs> = (Story, { args }) => {
115-
const { path = '/' } = args;
116-
return (
117-
<MemoryRouter initialEntries={[path]}>
118-
<Story />
119-
</MemoryRouter>
120-
)
121-
}
122-
123-
type ViewArgs = WithAuthArgs & WithRouterArgs;
124-
125-
export interface ViewPreviewType {
126-
args: ViewArgs;
127-
}
128-
129-
function View() {
130-
return (
131-
<div style={{height: '100%', minWidth: '300px'}}>
132-
<Suspense fallback={(<CircularProgress color="secondary" />)}>
133-
<AppRoutes />
134-
</Suspense>
135-
</div>
136-
)
137-
}
138-
139-
export const view = {
140-
component: View,
141-
play: hasFinishedLoading,
142-
parameters: {
143-
layout: 'fullscreen' as const,
144-
msw: {
145-
handlers: [http.gkb.query(() => [])]
146-
}
147-
},
148-
decorators: [withSnackbar, withAuth, withRouter],
149-
}
150-
151-
15263
export default preview;

‎src/components/ActionButton/__snapshots__/index.stories.tsx.snap‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`Disabled snapshot 1`] = `
4+
<div>
5+
<div
6+
class="action-button"
7+
>
8+
<button
9+
class="Mui-disabled MuiButton-colorPrimary MuiButton-contained MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-root MuiButton-sizeLarge MuiButtonBase-root action-button__button css-XXXX-MuiButtonBase-root-MuiButton-root"
10+
disabled=""
11+
tabindex="-1"
12+
type="button"
13+
>
14+
Action
15+
</button>
16+
</div>
17+
</div>
18+
`;
19+
20+
exports[`NoConfirmRequired snapshot 1`] = `
21+
<div>
22+
<div
23+
class="action-button"
24+
>
25+
<button
26+
class="MuiButton-colorPrimary MuiButton-contained MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-root MuiButton-sizeLarge MuiButtonBase-root action-button__button css-XXXX-MuiButtonBase-root-MuiButton-root"
27+
tabindex="0"
28+
type="button"
29+
>
30+
Action
31+
</button>
32+
</div>
33+
</div>
34+
`;
35+
36+
exports[`WithConfirmRequired snapshot 1`] = `
37+
<div>
38+
<div
39+
class="action-button"
40+
>
41+
<button
42+
class="MuiButton-colorPrimary MuiButton-contained MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-root MuiButton-sizeLarge MuiButtonBase-root action-button__button css-XXXX-MuiButtonBase-root-MuiButton-root"
43+
tabindex="0"
44+
type="button"
45+
>
46+
Action
47+
</button>
48+
</div>
49+
</div>
50+
`;
51+
52+
exports[`WithConfirmRequiredOpen snapshot 1`] = `
53+
[
54+
<div
55+
aria-hidden="true"
56+
>
57+
<div
58+
class="action-button"
59+
>
60+
<button
61+
class="MuiButton-colorPrimary MuiButton-contained MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-root MuiButton-sizeLarge MuiButtonBase-root action-button__button css-XXXX-MuiButtonBase-root-MuiButton-root"
62+
tabindex="0"
63+
type="button"
64+
>
65+
Action
66+
<span
67+
class="MuiTouchRipple-root css-XXXX-MuiTouchRipple-root"
68+
/>
69+
</button>
70+
</div>
71+
</div>,
72+
<div
73+
class="MuiDialog-root MuiModal-root confirm-action-dialog css-XXXX-MuiModal-root-MuiDialog-root"
74+
role="presentation"
75+
>
76+
<div
77+
aria-hidden="true"
78+
class="MuiBackdrop-root MuiDialog-backdrop MuiModal-backdrop css-XXXX-MuiBackdrop-root-MuiDialog-backdrop"
79+
/>
80+
<div
81+
data-testid="sentinelStart"
82+
tabindex="0"
83+
/>
84+
<div
85+
class="MuiDialog-container MuiDialog-scrollPaper css-XXXX-MuiDialog-container"
86+
role="presentation"
87+
tabindex="-1"
88+
>
89+
<div
90+
aria-labelledby="_r_XXXX_"
91+
aria-modal="true"
92+
class="MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation MuiPaper-elevation24 MuiPaper-root MuiPaper-rounded css-XXXX-MuiPaper-root-MuiDialog-paper"
93+
role="dialog"
94+
>
95+
<h2
96+
class="MuiDialogTitle-root MuiTypography-h6 MuiTypography-root css-XXXX-MuiTypography-root-MuiDialogTitle-root"
97+
id="_r_XXXX_"
98+
>
99+
Are you sure?
100+
</h2>
101+
<div
102+
class="MuiDialogContent-root css-XXXX-MuiDialogContent-root"
103+
>
104+
<div
105+
class="MuiDialogActions-root MuiDialogActions-spacing css-XXXX-MuiDialogActions-root"
106+
>
107+
<button
108+
class="MuiButton-colorPrimary MuiButton-root MuiButton-sizeSmall MuiButton-text MuiButton-textPrimary MuiButton-textSizeSmall MuiButtonBase-root confirm-action-dialog__cancel css-XXXX-MuiButtonBase-root-MuiButton-root"
109+
tabindex="0"
110+
type="button"
111+
>
112+
Cancel
113+
</button>
114+
<button
115+
class="MuiButton-colorPrimary MuiButton-root MuiButton-sizeSmall MuiButton-text MuiButton-textPrimary MuiButton-textSizeSmall MuiButtonBase-root confirm-action-dialog__confirm css-XXXX-MuiButtonBase-root-MuiButton-root"
116+
tabindex="0"
117+
type="button"
118+
>
119+
Confirm
120+
</button>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
<div
126+
data-testid="sentinelEnd"
127+
tabindex="0"
128+
/>
129+
</div>,
130+
]
131+
`;
132+
133+
exports[`WithCustomMessageOpen snapshot 1`] = `
134+
[
135+
<div
136+
aria-hidden="true"
137+
>
138+
<div
139+
class="action-button"
140+
>
141+
<button
142+
class="MuiButton-colorPrimary MuiButton-contained MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-root MuiButton-sizeLarge MuiButtonBase-root action-button__button css-XXXX-MuiButtonBase-root-MuiButton-root"
143+
tabindex="0"
144+
type="button"
145+
>
146+
Action
147+
<span
148+
class="MuiTouchRipple-root css-XXXX-MuiTouchRipple-root"
149+
/>
150+
</button>
151+
</div>
152+
</div>,
153+
<div
154+
class="MuiDialog-root MuiModal-root confirm-action-dialog css-XXXX-MuiModal-root-MuiDialog-root"
155+
role="presentation"
156+
>
157+
<div
158+
aria-hidden="true"
159+
class="MuiBackdrop-root MuiDialog-backdrop MuiModal-backdrop css-XXXX-MuiBackdrop-root-MuiDialog-backdrop"
160+
/>
161+
<div
162+
data-testid="sentinelStart"
163+
tabindex="0"
164+
/>
165+
<div
166+
class="MuiDialog-container MuiDialog-scrollPaper css-XXXX-MuiDialog-container"
167+
role="presentation"
168+
tabindex="-1"
169+
>
170+
<div
171+
aria-labelledby="_r_XXXX_"
172+
aria-modal="true"
173+
class="MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation MuiPaper-elevation24 MuiPaper-root MuiPaper-rounded css-XXXX-MuiPaper-root-MuiDialog-paper"
174+
role="dialog"
175+
>
176+
<h2
177+
class="MuiDialogTitle-root MuiTypography-h6 MuiTypography-root css-XXXX-MuiTypography-root-MuiDialogTitle-root"
178+
id="_r_XXXX_"
179+
>
180+
Are you sure you want to delete this record?
181+
</h2>
182+
<div
183+
class="MuiDialogContent-root css-XXXX-MuiDialogContent-root"
184+
>
185+
<div
186+
class="MuiDialogActions-root MuiDialogActions-spacing css-XXXX-MuiDialogActions-root"
187+
>
188+
<button
189+
class="MuiButton-colorPrimary MuiButton-root MuiButton-sizeSmall MuiButton-text MuiButton-textPrimary MuiButton-textSizeSmall MuiButtonBase-root confirm-action-dialog__cancel css-XXXX-MuiButtonBase-root-MuiButton-root"
190+
tabindex="0"
191+
type="button"
192+
>
193+
Cancel
194+
</button>
195+
<button
196+
class="MuiButton-colorPrimary MuiButton-root MuiButton-sizeSmall MuiButton-text MuiButton-textPrimary MuiButton-textSizeSmall MuiButtonBase-root confirm-action-dialog__confirm css-XXXX-MuiButtonBase-root-MuiButton-root"
197+
tabindex="0"
198+
type="button"
199+
>
200+
Confirm
201+
</button>
202+
</div>
203+
</div>
204+
</div>
205+
</div>
206+
<div
207+
data-testid="sentinelEnd"
208+
tabindex="0"
209+
/>
210+
</div>,
211+
]
212+
`;

‎src/components/ActionButton/__tests__/index.test.tsx‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

0 commit comments

Comments
 (0)