From e987fd351c3f0979fdb15222d8e46a577e0f8202 Mon Sep 17 00:00:00 2001 From: Richard Guerre Date: Sat, 31 Jul 2021 16:29:21 +0200 Subject: [PATCH 1/3] Improve setup for visual testing tools like Chromatic --- README.md | 30 ++++++++++++++++++++++++++++-- docs/modules.md | 14 +++++++------- src/index.ts | 29 ++++++++++++++++++++++++----- 3 files changed, 59 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 67cc391..7a434e8 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,9 @@ You can read more about `data overrides` [here](https://github.com/richardguerre # Examples -Create the useRelayMockEnvironment hook using `createRelayMockEnvironmentHook()` and passing in your global options +## Base + +For any environment (Storybook, Cypress, dummy page, etc.), you will first need to create the `useRelayMockEnvironment` hook using `createRelayMockEnvironmentHook()` and passing in your global options ```jsx // useRelayMockEnvironment.(js | jsx | ts | tsx) @@ -82,6 +84,30 @@ export const Default = () => { }; ``` +## Chromatic + +When using a visual testing tool like Chromatic, you can enforce having consistent fake data by providing the `seed`, `instantInitialLoading` and/or `forceInstantInitialLoading` options. We recommend passing these options at the global level, when invoking `createRelayMockEnvironmentHook()`: + +```js +// useRelayMockEnvironment.(js | jsx | ts | tsx) +import { createRelayMockEnvironmentHook } from 'use-relay-mock-environment'; +import isChromatic from 'chromatic/isChromatic'; + +const useRelayMockEnvironment = createRelayMockEnvironmentHook({ + ...(isChromatic() + ? { + seed: 123, // can be anything you want (string or number) + forceInstantInitialLoading: true, + } + : {}), + // Add any other global options here (optional) +}); + +export default useRelayMockEnvironment; +``` + +With the above you don't have to add any additional options when invoking the `useRelayMockEnvironment` hook. + # Options You can specify the following `options` in `createRelayMockEnvironmentHook(options)` (global level) or `useRelayMockEnvironment(options)` (component specific level): @@ -95,7 +121,7 @@ You can specify the following `options` in `createRelayMockEnvironmentHook(optio | `generatorOptions?` | `MockPayloadGeneratorOptions` | (optional) mock generator options. Please read documentation of type MockPayLoadGeneratorOptions. | | `instantInitialLoading?` | `boolean` | (optional) Whether to instantly load the GraphQL operation. By default there is a 300ms loading time to mimick real-world network conditions. This only applies to the initial loading. If you would like to change the loading time, set `loadTime` instead. | | `loadTime?` | `number` | (optional) Loading time in miliseconds for each GraphQL operations. Default is 300ms as to mimick real-world network conditions. | -| `seed?` | `number` \| `string` | If a number is passed in, it directly runs `faker.seed(n)` with `n` being the number that you specify. This is the same as giving `fakerSeed`. If a string is passed in, it first converts the string into a hashCode number (like Java's String.hashCode()), and then runs `faker.seed(n)`, where `n` is the hashCode number. | +| `seed?` | `number` \| `string` | If a number is passed in, it directly runs `faker.seed(n)` with `n` being the number that you specify. If a string is passed in, it first converts the string into a hashCode number (like Java's String.hashCode()), and then runs `faker.seed(n)`, where `n` is the hashCode number. Providing `seed` will override property `generatorOptions.randomLengthArray` to false, and will set `geneartorOptions.arrayLength` to 3, unless specified. | You can read more about `options` [here](https://github.com/richardguerre/use-relay-mock-environment/blob/master/docs/modules.md#relaymockoptions). diff --git a/docs/modules.md b/docs/modules.md index d0c02fd..c240999 100644 --- a/docs/modules.md +++ b/docs/modules.md @@ -40,7 +40,7 @@ const mockData = { #### Defined in -[index.ts:87](https://github.com/richardguerre/use-relay-mock-environment/blob/cb77058/src/index.ts#L87) +[index.ts:87](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L87) ___ @@ -68,19 +68,19 @@ You can specify one or more of the following: #### Defined in -[index.ts:26](https://github.com/richardguerre/use-relay-mock-environment/blob/cb77058/src/index.ts#L26) +[index.ts:26](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L26) ___ ### RelayMockGlobalOptions -Ƭ **RelayMockGlobalOptions**: [`RelayMockOptions`](modules.md#relaymockoptions) & { `fuseOptions?`: `FuseTypes.IFuseOptions`<`any`\> } +Ƭ **RelayMockGlobalOptions**: [`RelayMockOptions`](modules.md#relaymockoptions) & { `forceInstantInitialLoading?`: `boolean` ; `fuseOptions?`: `FuseTypes.IFuseOptions`<`any`\> } Same as the `RelayMockOptions` below. #### Defined in -[index.ts:166](https://github.com/richardguerre/use-relay-mock-environment/blob/cb77058/src/index.ts#L166) +[index.ts:167](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L167) ___ @@ -99,11 +99,11 @@ ___ | `generatorOptions?` | `MockPayloadGeneratorOptions` | (optional) mock generator options. Please read documentation of type MockPayLoadGeneratorOptions. | | `instantInitialLoading?` | `boolean` | (optional) Whether to instantly load the GraphQL operation. By default there is a 300ms loading time to mimick real-world network conditions. This only applies to the initial loading. If you would like to change the loading time, set `loadTime` instead. | | `loadTime?` | `number` | (optional) Loading time in miliseconds for each GraphQL operations. Default is 300ms as to mimick real-world network conditions. | -| `seed?` | `number` \| `string` | If a number is passed in, it directly runs `faker.seed(n)` with `n` being the number that you specify. This is the same as giving `fakerSeed`. If a string is passed in, it first converts the string into a hashCode number (like Java's String.hashCode()), and then runs `faker.seed(n)`, where `n` is the hashCode number. | +| `seed?` | `number` \| `string` | If a number is passed in, it directly runs `faker.seed(n)` with `n` being the number that you specify. If a string is passed in, it first converts the string into a hashCode number (like Java's String.hashCode()), and then runs `faker.seed(n)`, where `n` is the hashCode number. Providing `seed` will override property `generatorOptions.randomLengthArray` to false, and will set `geneartorOptions.arrayLength` to 3, unless specified. | #### Defined in -[index.ts:93](https://github.com/richardguerre/use-relay-mock-environment/blob/cb77058/src/index.ts#L93) +[index.ts:93](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L93) ## Functions @@ -141,4 +141,4 @@ a function that is the `useRelayMockEnvironment()` React hook. Read more about i #### Defined in -[index.ts:181](https://github.com/richardguerre/use-relay-mock-environment/blob/cb77058/src/index.ts#L181) +[index.ts:189](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L189) diff --git a/src/index.ts b/src/index.ts index 85bd242..af6a8b6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -153,9 +153,10 @@ export type RelayMockOptions = { data?: RelayMockData; /** - * If a number is passed in, it directly runs `faker.seed(n)` with `n` being the number that you specify. This is the same as giving `fakerSeed`. - * + * If a number is passed in, it directly runs `faker.seed(n)` with `n` being the number that you specify. * If a string is passed in, it first converts the string into a hashCode number (like Java's String.hashCode()), and then runs `faker.seed(n)`, where `n` is the hashCode number. + * + * Providing `seed` will override property `generatorOptions.randomLengthArray` to false, and will set `geneartorOptions.arrayLength` to 3, unless specified. */ seed?: number | string; }; @@ -168,6 +169,13 @@ export type RelayMockGlobalOptions = RelayMockOptions & { * (optional) FuseJS options as outlined here: https://fusejs.io/api/options.html */ fuseOptions?: FuseTypes.IFuseOptions; + + /** + * (optional) Whether to force instant initial loading on all environements created using the `useRelayMockEnvironment`. This option takes priority over the `instantInitialLoading` option. + * + * This is useful in visual testing tools, like Storybook's Chromatic which takes snapshots at first-paint. + */ + forceInstantInitialLoading?: boolean; }; /** @@ -223,7 +231,6 @@ export function createRelayMockEnvironmentHook( } // custom data from options - // specific (parentTypeName + name) const data = opts.data?.[context.parentType ?? '']?.[context.name ?? '']; if ( @@ -258,6 +265,7 @@ export function createRelayMockEnvironmentHook( 'can', 'will', 'need', + 'use', ]) ) { return faker.datatype.boolean(); @@ -315,7 +323,15 @@ export function createRelayMockEnvironmentHook( }, ...opts.customResolvers, }, - opts.generatorOptions + { + ...opts.generatorOptions, + ...(opts.seed + ? { + randomArrayLength: false, + arrayLength: opts.generatorOptions?.arrayLength ?? 3, + } + : {}), + } ); }); } catch (err) { @@ -332,7 +348,10 @@ export function createRelayMockEnvironmentHook( }, [environment.mock, fieldNameToMockTypeMap, opts]); useEffect(() => { - if (opts.instantInitialLoading) { + if ( + globalOptions?.forceInstantInitialLoading || + opts.instantInitialLoading + ) { main(); } const interval = setInterval(main, opts.loadTime ?? 300); From d499acc44f38bfce1d831b9d22e6736aade1b50e Mon Sep 17 00:00:00 2001 From: Richard Guerre Date: Sat, 31 Jul 2021 16:37:53 +0200 Subject: [PATCH 2/3] fix opts issues --- src/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/index.ts b/src/index.ts index af6a8b6..427914f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -204,6 +204,14 @@ export function createRelayMockEnvironmentHook( ...globalOptions?.data, ...options?.data, }, + generatorOptions: { + ...globalOptions?.generatorOptions, + ...options?.generatorOptions, + }, + customResolvers: { + ...globalOptions?.customResolvers, + ...options?.customResolvers, + }, }; const environment = useMemo(() => createMockEnvironment(), []); From 968c5795f68e6bf56dd2f8744af16a494af1f43f Mon Sep 17 00:00:00 2001 From: Richard Guerre Date: Sat, 31 Jul 2021 16:42:40 +0200 Subject: [PATCH 3/3] update docs --- docs/README.md | 30 ++++++++++++++++++++++++++++-- docs/modules.md | 10 +++++----- 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/docs/README.md b/docs/README.md index eaa8f64..4afddab 100644 --- a/docs/README.md +++ b/docs/README.md @@ -44,7 +44,9 @@ You can read more about `data overrides` [here](https://github.com/richardguerre # Examples -Create the useRelayMockEnvironment hook using `createRelayMockEnvironmentHook()` and passing in your global options +## Base + +For any environment (Storybook, Cypress, dummy page, etc.), you will first need to create the `useRelayMockEnvironment` hook using `createRelayMockEnvironmentHook()` and passing in your global options ```jsx // useRelayMockEnvironment.(js | jsx | ts | tsx) @@ -84,6 +86,30 @@ export const Default = () => { }; ``` +## Chromatic + +When using a visual testing tool like Chromatic, you can enforce having consistent fake data by providing the `seed`, `instantInitialLoading` and/or `forceInstantInitialLoading` options. We recommend passing these options at the global level, when invoking `createRelayMockEnvironmentHook()`: + +```js +// useRelayMockEnvironment.(js | jsx | ts | tsx) +import { createRelayMockEnvironmentHook } from 'use-relay-mock-environment'; +import isChromatic from 'chromatic/isChromatic'; + +const useRelayMockEnvironment = createRelayMockEnvironmentHook({ + ...(isChromatic() + ? { + seed: 123, // can be anything you want (string or number) + forceInstantInitialLoading: true, + } + : {}), + // Add any other global options here (optional) +}); + +export default useRelayMockEnvironment; +``` + +With the above you don't have to add any additional options when invoking the `useRelayMockEnvironment` hook. + # Options You can specify the following `options` in `createRelayMockEnvironmentHook(options)` (global level) or `useRelayMockEnvironment(options)` (component specific level): @@ -97,7 +123,7 @@ You can specify the following `options` in `createRelayMockEnvironmentHook(optio | `generatorOptions?` | `MockPayloadGeneratorOptions` | (optional) mock generator options. Please read documentation of type MockPayLoadGeneratorOptions. | | `instantInitialLoading?` | `boolean` | (optional) Whether to instantly load the GraphQL operation. By default there is a 300ms loading time to mimick real-world network conditions. This only applies to the initial loading. If you would like to change the loading time, set `loadTime` instead. | | `loadTime?` | `number` | (optional) Loading time in miliseconds for each GraphQL operations. Default is 300ms as to mimick real-world network conditions. | -| `seed?` | `number` \| `string` | If a number is passed in, it directly runs `faker.seed(n)` with `n` being the number that you specify. This is the same as giving `fakerSeed`. If a string is passed in, it first converts the string into a hashCode number (like Java's String.hashCode()), and then runs `faker.seed(n)`, where `n` is the hashCode number. | +| `seed?` | `number` \| `string` | If a number is passed in, it directly runs `faker.seed(n)` with `n` being the number that you specify. If a string is passed in, it first converts the string into a hashCode number (like Java's String.hashCode()), and then runs `faker.seed(n)`, where `n` is the hashCode number. Providing `seed` will override property `generatorOptions.randomLengthArray` to false, and will set `geneartorOptions.arrayLength` to 3, unless specified. | You can read more about `options` [here](https://github.com/richardguerre/use-relay-mock-environment/blob/master/docs/modules.md#relaymockoptions). diff --git a/docs/modules.md b/docs/modules.md index c240999..f20411d 100644 --- a/docs/modules.md +++ b/docs/modules.md @@ -40,7 +40,7 @@ const mockData = { #### Defined in -[index.ts:87](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L87) +[index.ts:87](https://github.com/richardguerre/use-relay-mock-environment/blob/d499acc/src/index.ts#L87) ___ @@ -68,7 +68,7 @@ You can specify one or more of the following: #### Defined in -[index.ts:26](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L26) +[index.ts:26](https://github.com/richardguerre/use-relay-mock-environment/blob/d499acc/src/index.ts#L26) ___ @@ -80,7 +80,7 @@ Same as the `RelayMockOptions` below. #### Defined in -[index.ts:167](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L167) +[index.ts:167](https://github.com/richardguerre/use-relay-mock-environment/blob/d499acc/src/index.ts#L167) ___ @@ -103,7 +103,7 @@ ___ #### Defined in -[index.ts:93](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L93) +[index.ts:93](https://github.com/richardguerre/use-relay-mock-environment/blob/d499acc/src/index.ts#L93) ## Functions @@ -141,4 +141,4 @@ a function that is the `useRelayMockEnvironment()` React hook. Read more about i #### Defined in -[index.ts:189](https://github.com/richardguerre/use-relay-mock-environment/blob/1b701be/src/index.ts#L189) +[index.ts:189](https://github.com/richardguerre/use-relay-mock-environment/blob/d499acc/src/index.ts#L189)