From ef32c6497e4e3b95620feca674e246c5c2955473 Mon Sep 17 00:00:00 2001 From: Stanislaw Wilczynski Date: Tue, 1 Oct 2024 15:07:17 +0200 Subject: [PATCH 1/3] fix issue with store being shared between stories --- packages/examples/package.json | 4 +++- .../src/relay/Feedback/Feedback.stories.tsx | 9 ++++++++- .../src/relay/pure-relay/Feedback.stories.tsx | 9 ++++++++- .../src/relay/storybook-nova-decorator-relay.tsx | 15 +++++++++------ yarn.lock | 2 +- 5 files changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/examples/package.json b/packages/examples/package.json index 049fc95..86124f3 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -24,7 +24,8 @@ "graphql": "^15.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-relay": "^17.0.0" + "react-relay": "^17.0.0", + "relay-runtime": "^17.0.0" }, "devDependencies": { "@babel/core": "^7.20.2", @@ -53,6 +54,7 @@ "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", "@types/react-relay": "^16.0.0", + "@types/relay-runtime": "^17.0.0", "esbuild-loader": "^3.0.1", "monorepo-scripts": "*", "prop-types": "15.8.1", diff --git a/packages/examples/src/relay/Feedback/Feedback.stories.tsx b/packages/examples/src/relay/Feedback/Feedback.stories.tsx index dd3b0d2..8f427d6 100644 --- a/packages/examples/src/relay/Feedback/Feedback.stories.tsx +++ b/packages/examples/src/relay/Feedback/Feedback.stories.tsx @@ -15,14 +15,21 @@ import type { FeedbackStoryQuery } from "./__generated__/FeedbackStoryQuery.grap import { getSchema } from "../../testing-utils/getSchema"; import * as React from "react"; import type { events } from "../../events/events"; +import { RecordSource, Store } from "relay-runtime"; const schema = getSchema(); const MockPayloadGenerator = new PayloadGenerator(schema); +const novaDecorator = getNovaDecorator(schema, { + getEnvironmentOptions: () => ({ + store: new Store(new RecordSource()), + }), +}); + const meta = { component: FeedbackComponent, - decorators: [getNovaDecorator(schema)], + decorators: [novaDecorator], parameters: { novaEnvironment: { query: graphql` diff --git a/packages/examples/src/relay/pure-relay/Feedback.stories.tsx b/packages/examples/src/relay/pure-relay/Feedback.stories.tsx index 4c27371..8ae5880 100644 --- a/packages/examples/src/relay/pure-relay/Feedback.stories.tsx +++ b/packages/examples/src/relay/pure-relay/Feedback.stories.tsx @@ -17,14 +17,21 @@ import type { FeedbackStoryRelayQuery } from "./__generated__/FeedbackStoryRelay import { getSchema } from "../../testing-utils/getSchema"; import * as React from "react"; import type { events } from "../../events/events"; +import { RecordSource, Store } from "relay-runtime"; const schema = getSchema(); const MockPayloadGenerator = new PayloadGenerator(schema); +const novaDecorator = getNovaDecorator(schema, { + getEnvironmentOptions: () => ({ + store: new Store(new RecordSource()), + }), +}); + const meta = { component: FeedbackComponent, - decorators: [getNovaDecorator(schema)], + decorators: [novaDecorator], parameters: { novaEnvironment: { query: graphql` diff --git a/packages/nova-react-test-utils/src/relay/storybook-nova-decorator-relay.tsx b/packages/nova-react-test-utils/src/relay/storybook-nova-decorator-relay.tsx index f962d59..9472210 100644 --- a/packages/nova-react-test-utils/src/relay/storybook-nova-decorator-relay.tsx +++ b/packages/nova-react-test-utils/src/relay/storybook-nova-decorator-relay.tsx @@ -14,18 +14,21 @@ import { createMockEnvironment } from "relay-test-utils"; import type { GraphQLSchema } from "graphql"; import type { ReactRenderer } from "@storybook/react"; import type { PlayFunctionContext } from "@storybook/types"; +import type { EnvironmentConfig } from "relay-runtime"; -type RelayEnvironmentOptions = Parameters[0]; - -type Options = RelayEnvironmentOptions & { +type Options = { getEnvironmentOptions?: () => Partial } & { generateFunction?: typeof RelayMockPayloadGenerator.prototype.generate; }; export const getNovaRelayDecorator: ( schema: GraphQLSchema, options?: Options, -) => MakeDecoratorResult = (schema, { generateFunction, ...rest } = {}) => { - const createEnvironment = () => createNovaRelayEnvironment(rest); +) => MakeDecoratorResult = ( + schema, + { generateFunction, getEnvironmentOptions } = {}, +) => { + const createEnvironment = () => + createNovaRelayEnvironment(getEnvironmentOptions?.()); const relayMockPayloadGenerator = new RelayMockPayloadGenerator(schema); const initializeGenerator = ( parameters: WithNovaEnvironment["novaEnvironment"], @@ -45,7 +48,7 @@ export const getNovaRelayDecorator: ( }; function createNovaRelayEnvironment( - options?: RelayEnvironmentOptions, + options?: Partial, ): NovaMockEnvironment<"relay", "storybook"> { const relayEnvironment = createMockEnvironment(options); const env: NovaMockEnvironment<"relay", "storybook"> = { diff --git a/yarn.lock b/yarn.lock index a899888..7c7dec1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3856,7 +3856,7 @@ "@types/prop-types" "*" csstype "^3.0.2" -"@types/relay-runtime@*", "@types/relay-runtime@>16": +"@types/relay-runtime@*", "@types/relay-runtime@>16", "@types/relay-runtime@^17.0.0": version "17.0.4" resolved "https://registry.yarnpkg.com/@types/relay-runtime/-/relay-runtime-17.0.4.tgz#428526fc3e6dfb6e0a5730c38ad521cb1eea189b" integrity sha512-fB77br4lXlBYM/HpI6VI6KCrj5pw0LiAnkZOkffjirNYso+dzXGWkeIm0G0MGszD8WY1et+r1Uj2TA6rscBXNQ== From b5c8e152bb080618c4fbc25a1dad45c0869708ac Mon Sep 17 00:00:00 2001 From: Stanislaw Wilczynski Date: Tue, 1 Oct 2024 15:09:04 +0200 Subject: [PATCH 2/3] Change files --- ...nova-examples-b005d778-782a-4b62-8b10-35b4f3182904.json | 7 +++++++ ...ct-test-utils-35868734-fda7-4b84-9bee-73b9f577ce70.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@nova-examples-b005d778-782a-4b62-8b10-35b4f3182904.json create mode 100644 change/@nova-react-test-utils-35868734-fda7-4b84-9bee-73b9f577ce70.json diff --git a/change/@nova-examples-b005d778-782a-4b62-8b10-35b4f3182904.json b/change/@nova-examples-b005d778-782a-4b62-8b10-35b4f3182904.json new file mode 100644 index 0000000..4ad15cb --- /dev/null +++ b/change/@nova-examples-b005d778-782a-4b62-8b10-35b4f3182904.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "use custom store is some stories", + "packageName": "@nova/examples", + "email": "Stanislaw.Wilczynski@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@nova-react-test-utils-35868734-fda7-4b84-9bee-73b9f577ce70.json b/change/@nova-react-test-utils-35868734-fda7-4b84-9bee-73b9f577ce70.json new file mode 100644 index 0000000..5f17eea --- /dev/null +++ b/change/@nova-react-test-utils-35868734-fda7-4b84-9bee-73b9f577ce70.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix issue with store being shared between stories", + "packageName": "@nova/react-test-utils", + "email": "Stanislaw.Wilczynski@microsoft.com", + "dependentChangeType": "patch" +} From ba2917a3481298fbba8f304e916940fcaed4b8fb Mon Sep 17 00:00:00 2001 From: Stanislaw Wilczynski Date: Tue, 1 Oct 2024 15:16:20 +0200 Subject: [PATCH 3/3] update readme --- packages/nova-react-test-utils/README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/nova-react-test-utils/README.md b/packages/nova-react-test-utils/README.md index ea9fb00..c442530 100644 --- a/packages/nova-react-test-utils/README.md +++ b/packages/nova-react-test-utils/README.md @@ -252,7 +252,7 @@ const meta = { } satisfies Meta; ``` -#### I need to configure Relay store to support some custom setup I have in my repository. Is it possible? +#### I need to configure Relay environment to support some custom setup I have in my repository. Is it possible? Similarly as with configuring Apollo cache, one can pass options to `createMockEnvironment`: @@ -262,14 +262,16 @@ const environment = createMockEnvironment(schema, { }); ``` -and if you are using through storybook decorator you can pass options to `getNovaDecorator`: +and if you are using through storybook decorator you can pass options to `getNovaDecorator`. However, in case of storybook environment we need to make sure that for example `store` is unique for each story, so we need to pass a function that will return the options: ```tsx const meta = { component: FeedbackContainer, decorators: [ getNovaDecorator(schema, { - store: myCustomStoreConfig, + getEnvironmentOptions: () => ({ + store: myCustomStoreConfig, + }), }), ], } satisfies Meta;