Skip to content
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

feat(nova-react-test-utils): add storybook decorator for nova #72

Merged
merged 31 commits into from
May 17, 2023

Conversation

sjwilczynski
Copy link
Contributor

@sjwilczynski sjwilczynski commented Mar 15, 2023

In scope of this PR we add a nova storybook decorator that should cover #17. The whole purpose of the decorator is to expose all the power of existing nova test utils (based on apollo-mock-client and mock-payload-generator) also inside storybook. For usage details check the README from nova/react-test-utils package.

Some important implementation considerations:

  • the main point of the decorator was to allow same level of flexibility as nova/react-test-utils in unit test. So the decorator has enableQueuedMockResolvers: false mode, which doesn't generate any mocks by default but instantiates a nova environment for your component which you can get using getEnvForStory inside play function and perform any actions you'd normally perform during unit tests
  • however, most of the time when storybook is run, people don't want to react to each interaction programatically as in unit tests but also have a possibility to interact with a story displayed in Storybook. To achieve that enableQueuedMockResolvers: true mode can be used to queue all resolvers up front, so that users can interact with the story live and also makes it simpler in case someone is interested in just resolving a single query/fragment. You can also pass custom resolvers using resolvers field which can be strongly typed with TypeMap
  • we added examples folder, so that we can test our decorator on real components. In future the number of examples should increase, including leveraging decorator for fragment only based component, or components leveraging pagination/refetchable fragments, or subscriptions.
  • We thought if storybook deps should be added as peer or normal dependencies in nova-react-test-utils. We landed on normal deps similarly how @apollo/client to graphitation utilities are added. On clean repo depending on @storybook/addon-actions adds around ~500 lines in lock file, which is acceptable.
  • We compared our implementation with https://github.com/iamchanii/storybook-addon-relay/blob/main/src/decorators/withRelay.tsx but instead of adding an option to wrap a story inside a query to be able to leverage MockPayloadGenerator, a preferred solution is to upstream add a possibility to generate mock data for fragment. Let's fix that in graphitation mock payload generator!

TODO:

Closes #17

@sjwilczynski sjwilczynski force-pushed the user/stwilczy/novaDecorator branch 2 times, most recently from 381a363 to 03009b2 Compare April 21, 2023 15:41
@sjwilczynski sjwilczynski changed the title [WIP] feat(nova-react-test-utils): add storybook decorator for nova feat(nova-react-test-utils): add storybook decorator for nova May 11, 2023
@sjwilczynski sjwilczynski marked this pull request as ready for review May 11, 2023 10:51
Stanislaw Wilczynski added 22 commits May 11, 2023 18:20
move operation utils

make mock environment a bit more generic

add first version of the decorator

add peer dependency

try bumping graphitation relay complier as well

Change files

initial example

use older version of complier

generate types

add storybook

[DO NOT MERGE] add autogenerated stories

fix lage config

remove stories

align version of test types

use makeDecorator api

add codegen

add initial story

add more loaders

use proper loader
Feedback: () => sampleFeedback,
},
},
} satisfies NovaEnvironmentDecoratorParameters<TypeMap>,
Copy link
Member

Choose a reason for hiding this comment

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

Would be nice if we can get rid of this in the future.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

of satisfies? Then probably no, we won't get rid of it. We still need a way to strongly type parameters (by default it's just generic Record) so we either need to use satisfies or adjust story type itself

Copy link
Contributor Author

Choose a reason for hiding this comment

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

image

Copy link
Member

Choose a reason for hiding this comment

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

Yeah the satisfies part. I figured this was the reason, but I’m thinking that it should be very possible to explain users how they can create their own StoryObj type that composed the normal StoryObj and a resolvers map with their schema.

Copy link
Member

Choose a reason for hiding this comment

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

(To be clear, this is not a blocker!)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

One can always do const Primary: Story & {parameters: NovaEnvironmentDecoratorParameters<TypeMap>} but I personally like satisfies part :)

Copy link
Member

@alloy alloy left a comment

Choose a reason for hiding this comment

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

Absolutely amazing! 🤩

Really solid job, @sjwilczynski—thanks 👏

@alloy alloy merged commit 3d65a5b into microsoft:main May 17, 2023
2 checks passed
@sjwilczynski sjwilczynski deleted the user/stwilczy/novaDecorator branch May 17, 2023 11:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Storybook support for Nova GraphQL
2 participants