@smartive/xstate-test-toolbox

This package contains the helper createTestPlans which can be used with xstate and @xstate/test.

createTestPlans

This function adds the meta-property to every state and a test if it is defined within tests. (see in example) Beside that it generates all possible test simple path plans for all possible combinations of your guards.

⚠️ Attention: Your statechart must consist of only string references to guards, actions and services otherwise the testing will break.

Example

1// The following snippet does not include all needed imports and code it is intended
2// to give you a starting point and an idea how the `createTestPlans`-function can be used.
3
4import { createTestPlans, StatesTestFunctions } from '@smartive/xstate-test-toolbox';
5import { FetchInterceptor, mockHeaders, mockResponse, RequestCallCountMock } from '@smartive/testcafe-utils';
6import { TestEventsConfig } from '@xstate/test/lib/types';
7import { RequestMock } from 'testcafe';
8import { Context, machine } from './machine-under-test';
9// ...
10
11type TestContext = {
12  t: TestController,
13  plan: string,
14  path: string
15};
16
17const fetchInterceptor = new FetchInterceptor({
18  fetchPeople: /.+swapi\.dev.+\/people\/$/,
19  fetchMore: /.+swapi\.dev.+\/people\/\?page=.+/,
20  searchPeople: /.+swapi\.dev.+\/people\/\?search=.+/,
21});
22
23const getRequestMocks = (plan: string, path: string): object[] => {
24  const peopleUrl = /.+swapi\.dev.+\/people\/.*/
25  if (
26    plan.includes('NoResults') ||
27    (plan.includes('Searching') && path.includes('NoResults'))
28  ) {
29    return [
30      RequestMock()
31        .onRequestTo(peopleUrl)
32        .respond(empty, 200, mockHeaders),
33    ];
34  }
35
36  if (plan.includes('Error')) {
37    switch (path) {
38      case 'Pending → error.platform.fetchPeople':
39        return [
40          RequestMock().onRequestTo(peopleUrl).respond({}, 400, mockHeaders),
41        ];
42      case 'Pending → done.invoke.fetchPeople → Idle → END_REACHED → LoadingMore → error.platform.fetchMore':
43        return [
44          new RequestCallCountMock(peopleUrl, [
45            { body: mockResponse(peoples) },
46            { body: mockResponse({}, 400) },
47          ]),
48        ];
49      case 'Pending → done.invoke.fetchPeople → NoResults → QUERY_DISPATCHED → Searching → error.platform.searchPeople':
50        return [
51          RequestMock()
52            .onRequestTo(fetchInterceptor.interceptUrls.searchPeople)
53            .respond({}, 400, mockHeaders),
54          RequestMock()
55            .onRequestTo(peopleUrl)
56            .respond(empty, 200, mockHeaders),
57        ];
58      case 'Pending → done.invoke.fetchPeople → Idle → QUERY_DISPATCHED → Searching → error.platform.searchPeople':
59        return [
60          RequestMock()
61            .onRequestTo(fetchInterceptor.interceptUrls.searchPeople)
62            .respond({}, 400, mockHeaders),
63        ];
64    }
65  }
66
67  return [];
68};
69
70const tests: StatesTestFunctions<Context, TestContext> = {
71  Pending: ({ t }) => t.expect(page.spinner.exists).ok(),
72  Idle: ({ t }) => t.expect(page.listItem.count).gt(0),
73  LoadingMore: ({ t }) => t.expect(page.listItem.count).gt(1).expect(page.spinner.exists).ok(),
74  Error: ({ t }) => t.expect(page.error.exists).ok(),
75  NoResults: ({ t }) => t.expect(page.notify.exists).ok(),
76  Searching: ({ t }) => t.expect(page.search.value).contains('luke').expect(page.spinner.exists).ok(),
77};
78
79const testEvents: TestEventsConfig<TestContext> = {
80  END_REACHED: ({ t }) => t.hover(page.listItem.nth(9), { speed: 0.8 }),
81  QUERY_DISPATCHED: ({ t }) => t.typeText(page.search, 'luke', { speed: 0.8 }),
82  'done.invoke.fetchPeople': fetchInterceptor.resolve('fetchPeople'),
83  'error.platform.fetchPeople': fetchInterceptor.resolve('fetchPeople'),
84  'error.platform.fetchMore': fetchInterceptor.resolve('fetchMore'),
85  'error.platform.searchPeople': fetchInterceptor.resolve('searchPeople'),
86};
87
88createTestPlans({
89  machine,
90  tests,
91  testEvents,
92  // add logLevel: LogLevel.INFO for some output which plans/paths are generated
93}).forEach(
94  ({ description: plan, paths }) => {
95    fixture(plan).page(`http://localhost:3000/peoples`);
96
97    paths.forEach(({ test: run, description: path }) => {
98      test
99        .clientScripts([fetchInterceptor.clientScript()])
100        .requestHooks(getRequestMocks(plan, path))(`via ${path} ⬏`, (t) => run({ plan, path, t }));
101    });
102  }
103);