-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
useMachine.test.ts
99 lines (91 loc) · 2.73 KB
/
useMachine.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import { fireEvent, render, waitFor } from '@testing-library/vue';
import { PromiseActorLogic, assign, createActor, createMachine } from 'xstate';
import UseMachineNoExtraOptions from './UseMachine-no-extra-options.vue';
import UseMachine from './UseMachine.vue';
describe('useMachine', () => {
const context = {
data: undefined
};
const fetchMachine = createMachine({
id: 'fetch',
types: {} as {
actors: {
src: 'fetchData';
logic: PromiseActorLogic<string>;
};
},
initial: 'idle',
context,
states: {
idle: {
on: { FETCH: 'loading' }
},
loading: {
invoke: {
id: 'fetchData',
src: 'fetchData',
onDone: {
target: 'success',
actions: assign({
data: ({ event }) => event.output
}),
guard: ({ event }) => !!event.output.length
}
}
},
success: {
type: 'final'
}
}
});
const actorRef = createActor(
fetchMachine.provide({
actors: {
fetchData: createMachine({
initial: 'done',
states: {
done: {
type: 'final'
}
},
output: 'persisted data'
}) as any
}
})
).start();
actorRef.send({ type: 'FETCH' });
const persistedFetchState = actorRef.getPersistedSnapshot();
it('should work with a component ', async () => {
const { getByText, getByTestId } = render(UseMachine as any);
const button = getByText('Fetch');
fireEvent.click(button);
await waitFor(() => getByText('Loading...'));
await waitFor(() => getByText(/Success/));
const dataEl = getByTestId('data');
expect(dataEl.textContent).toBe('some data');
});
it('should work with a component with rehydrated state', async () => {
const { getByText, getByTestId } = render(UseMachine as any, {
props: { persistedState: persistedFetchState }
});
await waitFor(() => getByText(/Success/));
const dataEl = getByTestId('data');
expect(dataEl.textContent).toBe('persisted data');
});
it('should work with a component with rehydrated state config', async () => {
const persistedFetchStateConfig = JSON.parse(
JSON.stringify(persistedFetchState)
);
const { getByText, getByTestId } = render(UseMachine as any, {
props: { persistedState: persistedFetchStateConfig }
});
await waitFor(() => getByText(/Success/));
const dataEl = getByTestId('data');
expect(dataEl.textContent).toBe('persisted data');
});
it('should not crash without optional `options` parameter being provided', async () => {
expect(() => {
render(UseMachineNoExtraOptions as any);
}).not.toThrow();
});
});