-
Notifications
You must be signed in to change notification settings - Fork 72
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
[Bug]: PostVisit hook unable to access story source code #489
Comments
Hey @luciob what you are trying to achieve is not possible. If you want, the test-runner can generate DOM snapshots instead. I am not sure what you are trying to achieve though, would be nice to understand your use case better. |
Hi @yannbf, thanks for your reply.
The first three were quite easy using the Maybe I could use the |
I see! So the examples you are looking for are of the JSX, right? e.g. <Checkbox onChange={...} /> I'm honestly not sure how you could achieve that with the test-runner and how difficult it might be, or even if it's possible. You could take some inspiration from how it's done in Storybook docs: Just keep in mind that the test-runner hook runs in node, so if you need to run things in the browser, you need to use The only way to get this easily would be to manually add the source as a parameter, and then access it, but then it will be quite some effort for you to keep things up to date. |
Alright I found a solution to your use case. Please be advised that this is not a recommendation at all, this is more like a hacky workaround that happens to work well! However this code is brittle as it depends on internal things that might change. Storybook already does the job for you, and addon-docs emits the story source after it's computed. So here's an example of how to:
import { getStoryContext, TestRunnerConfig } from '@storybook/test-runner'
declare global {
// this is defined internally in the test-runner
// and can be used for logging from the browser to node, helpful for debugging
var logToPage: (message: string) => Promise<void>;
}
type SourceData = { source: string; args: Record<string, any>; id: string}
let extractedData: SourceData
const waitFor = async <T>(condition: () => T): Promise<T> => {
let result = condition();
let timeout = 2000;
const interval = 100;
while (!result && timeout > 0) {
await new Promise(resolve => setTimeout(resolve, interval));
result = condition();
timeout -= interval;
}
if (!result) {
throw new Error('Timeout exceeded');
}
return result;
};
const config: TestRunnerConfig = {
async preVisit(page) {
const extractData = page.evaluate<SourceData>(() => {
return new Promise((resolve, reject) => {
const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
// use this helper if you want to debug
// window.logToPage('listening to the storybook channel')
// event emitted by the addon-docs when a snippet is rendered
channel.on('@storybook/core/docs/snippet-rendered', (data) => {
resolve(data)
})
})
})
// we can't await this because it will block the test from continuing
// so we store its value and get it in the next hook
extractData.then(data => {
extractedData = data
})
},
async postVisit(_page, context) {
// waitFor is probably not needed so feel free to remove it. It's here to ensure that the data will be there
// there could be cases where timing isn't right and the event takes a bit longer to be emitted (e.g. complex components that take longer to compute)
const data = await waitFor<typeof extractedData>(() => extractedData)
console.log('Story data', {
id: context.id,
title: context.title,
name: context.name,
source: data.source,
props: data.args
})
}
}
export default config This results in what you're looking for: {
id: 'components-iconbutton--default',
title: 'Components/IconButton',
name: 'Default',
source: '<IconButton\n aria-label="forward"\n name="arrow-right"\n/>',
props: { name: 'arrow-right', small: false, 'aria-label': 'forward' }
} There are things you can change in this snippet. Some things are there for debugging purposes, some things might not be needed, I just wanted to give you a baseline to start with! |
Thanks @yannbf that worked. I was able to solve the issue and generate the components DB. |
Great to hear @luciob! I'd really love to see what you are able to achieve with this. Seems like you're experimenting with AI? |
That is the idea. Build a JSON components DB to have all possible documentation for our MUI wrapper library @melfore/mosaic. Once that is done, create something very similar to projects like Thanks again for your precious support! |
Describe the bug
Hello, I'm using the
postVisit
hook oftest-runner
to generate a JSON file containing the source code (in TSX) of each story available in my codebase.In
test-runner.ts
I have the following snippet of code:I have a general setting that tells storybook how to render
docs.source.type
that was initially set todynamic
.With this initial setting the source docs generated in the StoryBook web app are fine:
While the values retrieved by test-runner in
postVisit
method are the following:If the type is set to
auto
it behaves likedynamic
.If I set the type to
code
the web app source code shows args:While the output of test-runner remains the same of above.
Seems like there is no option to have on both the web and the
postVisit
the string source code.How can I achieve this?
Is there another way to programmatically catch and save to a JSON file the source code of a story?
Thanks
To Reproduce
Clone the repo and checkout branch
417-chore-add-tool-to-generate-components-database
.The source code of the branch is available here
Run:
nvm use
npm i
npm start
npm run test:db
The
test:db
command will output to the console an example of the source code.System
Additional context
No response
The text was updated successfully, but these errors were encountered: