Skip to content

Commit

Permalink
Merge pull request #2 from richardguerre/improvements-for-visual-test…
Browse files Browse the repository at this point in the history 
…ing-tools

Improve setup for visual testing tools like Chromatic
  • Loading branch information
@richardguerre
richardguerre authored Jul 31, 2021
2 parents 1b701be + 968c579 commit 2b2f109
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 16 deletions.
30 changes: 28 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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):
Expand All @@ -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).

Expand Down
30 changes: 28 additions & 2 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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):
Expand All @@ -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).

Expand Down
14 changes: 7 additions & 7 deletions docs/modules.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

___

Expand Down Expand Up @@ -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)

___

Expand All @@ -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

Expand Down Expand Up @@ -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)
37 changes: 32 additions & 5 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand All @@ -168,6 +169,13 @@ export type RelayMockGlobalOptions = RelayMockOptions & {
* (optional) FuseJS options as outlined here: https://fusejs.io/api/options.html
*/
fuseOptions?: FuseTypes.IFuseOptions<any>;

/**
* (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;
};

/**
Expand Down Expand Up @@ -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(), []);
Expand Down Expand Up @@ -223,7 +239,6 @@ export function createRelayMockEnvironmentHook(
}

// custom data from options
// specific (parentTypeName + name)
const data =
opts.data?.[context.parentType ?? '']?.[context.name ?? ''];
if (
Expand Down Expand Up @@ -258,6 +273,7 @@ export function createRelayMockEnvironmentHook(
'can',
'will',
'need',
'use',
])
) {
return faker.datatype.boolean();
Expand Down Expand Up @@ -315,7 +331,15 @@ export function createRelayMockEnvironmentHook(
},
...opts.customResolvers,
},
opts.generatorOptions
{
...opts.generatorOptions,
...(opts.seed
? {
randomArrayLength: false,
arrayLength: opts.generatorOptions?.arrayLength ?? 3,
}
: {}),
}
);
});
} catch (err) {
Expand All @@ -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);
Expand Down

0 comments on commit 2b2f109

Please sign in to comment.