-
Notifications
You must be signed in to change notification settings - Fork 73
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.
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
Add storybook testing setup for client #8335
base: develop
Are you sure you want to change the base?
Conversation
rikukissa
commented
Jan 15, 2025
•
edited
Loading
edited
Oops! Looks like you forgot to update the changelog. When updating CHANGELOG.md, please consider the following:
|
Would we migrate the current stuff from the components side or maintain both going forward? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, suggested some actual test case to try out
@@ -263,3 +284,20 @@ export const tennisClubMembershipEvent = { | |||
} | |||
] | |||
} satisfies EventConfig | |||
|
|||
export const tennisClubMembershipEventIndex: EventIndex = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could use similar pattern as we have on
packages/events/src/tests/generators.ts
.
async () => { | ||
await worker.start() | ||
} | ||
], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe test for sorting and that pagination works (currently doesn't 😬 )
import React from 'react' | ||
import superjson from 'superjson' | ||
|
||
const trpcMsw = createTRPCMsw<AppRouter>({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What a casing
Co-authored-by: Markus Laurila <[email protected]>
…re into events-v2-storybook
@@ -90,7 +90,7 @@ export default defineConfig(({ mode }) => { | |||
}, | |||
resolve: { | |||
alias: { | |||
crypto: 'crypto-js' | |||
crypto: require.resolve('crypto-js') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we know why we have this? :D
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did try and figure it out but gave up
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feel free to remove if E2E's pass imo
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think the dev environment starts without this
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good stuff, thanks! some clean up comments
baseUrl: '/api/events', | ||
transformer: { input: superjson, output: superjson } | ||
}) | ||
console.log( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can be cleaned // lint-ignore
tRPCMsw.event.config.get.query(() => { | ||
return [tennisClubMembershipEvent] | ||
}), | ||
tRPCMsw.events.get.query(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I updated the api so event.list replaces events.get
. If not, I have made a mistake
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No, I think it's just that doesn't yet support tRPC 11 types maloguertin/msw-trpc#41
) | ||
|
||
export const handlers = { | ||
events: [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would be cool if events handlers lived under events
systemRoles: [ | ||
graphql.query('getSystemRoles', () => { | ||
return HttpResponse.json({ | ||
data: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we utilise separate fixture files as we have in the past, or come up with some other organisation principle? +1000 files with static code are quite hard to navigate
}) | ||
], | ||
locations: [ | ||
http.get('http://localhost:7070/location', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we use envs here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
True 🤔 best would be if all of these request paths would be behind /api so it would be a non-issue
}) | ||
], | ||
forms: [ | ||
http.get('http://localhost:2021/forms', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
usage through envs would be super
import { System, SystemStatus, SystemType } from '@client/utils/gateway' | ||
import type { | ||
Facility, | ||
CRVSOffice, | ||
AdminStructure | ||
} from '@client/offline/reducer' | ||
import forms from './forms.json' | ||
import languages from './languages.json' assert { type: 'json' } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
never seen assert 🤯
title: 'OfficeHome', | ||
component: OfficeHome, | ||
decorators: [(Story) => <Story />] | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
satisfies Meta<typeof OfficeHome>
might work
|
||
export default meta | ||
|
||
type Story = StoryObj<any> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
type Story = StoryObj<typeof meta>
handlers: { | ||
registrationHome: [ | ||
graphql.query('registrationHome', () => { | ||
return HttpResponse.json({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could this utilise the ones in default-request-handlers? Share fixtures or anything like that?
… fails to install it even when it prints out success
e483238
to
6159edf
Compare
6db4c42
to
472d665
Compare
472d665
to
01fd9a9
Compare