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/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 d0c02fd..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/cb77058/src/index.ts#L87) +[index.ts:87](https://github.com/richardguerre/use-relay-mock-environment/blob/d499acc/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/d499acc/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/d499acc/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/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: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/d499acc/src/index.ts#L189) diff --git a/src/index.ts b/src/index.ts index 85bd242..427914f 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; }; /** @@ -196,6 +204,14 @@ export function createRelayMockEnvironmentHook( ...globalOptions?.data, ...options?.data, }, + generatorOptions: { + ...globalOptions?.generatorOptions, + ...options?.generatorOptions, + }, + customResolvers: { + ...globalOptions?.customResolvers, + ...options?.customResolvers, + }, }; const environment = useMemo(() => createMockEnvironment(), []); @@ -223,7 +239,6 @@ export function createRelayMockEnvironmentHook( } // custom data from options - // specific (parentTypeName + name) const data = opts.data?.[context.parentType ?? '']?.[context.name ?? '']; if ( @@ -258,6 +273,7 @@ export function createRelayMockEnvironmentHook( 'can', 'will', 'need', + 'use', ]) ) { return faker.datatype.boolean(); @@ -315,7 +331,15 @@ export function createRelayMockEnvironmentHook( }, ...opts.customResolvers, }, - opts.generatorOptions + { + ...opts.generatorOptions, + ...(opts.seed + ? { + randomArrayLength: false, + arrayLength: opts.generatorOptions?.arrayLength ?? 3, + } + : {}), + } ); }); } catch (err) { @@ -332,7 +356,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);