|
1 | | -import '@testing-library/jest-dom' |
2 | | -import {render, wait, fireEvent} from '@testing-library/vue' |
3 | | -import StopWatch from './components/StopWatch.vue' |
4 | | - |
5 | | -test('updates component state', async () => { |
6 | | - const {getByTestId, getByText} = render(StopWatch) |
7 | | - |
8 | | - const startButton = getByText('Start') |
9 | | - const elapsedTime = getByTestId('elapsed') |
10 | | - |
11 | | - // Assert initial state. |
12 | | - expect(elapsedTime).toHaveTextContent('0ms') |
13 | | - getByText('Start') |
14 | | - |
15 | | - await fireEvent.click(startButton) |
16 | | - |
17 | | - getByText('Stop') |
18 | | - |
19 | | - // Wait for one tick of the event loop. |
20 | | - await wait() |
21 | | - |
22 | | - // Stop the timer. |
23 | | - await fireEvent.click(startButton) |
24 | | - |
25 | | - // We can't assert a specific amount of time. Instead, we assert that the |
26 | | - // content has changed. |
27 | | - expect(elapsedTime).not.toHaveTextContent('0ms') |
28 | | -}) |
29 | | - |
30 | | -test('unmounts a component', async () => { |
31 | | - jest.spyOn(console, 'error').mockImplementation(() => {}) |
32 | | - |
33 | | - const {unmount, isUnmounted, getByText} = render(StopWatch) |
34 | | - await fireEvent.click(getByText('Start')) |
35 | | - |
36 | | - // Destroys a Vue component instance. |
37 | | - unmount() |
38 | | - |
39 | | - expect(isUnmounted()).toBe(true) |
40 | | - |
41 | | - await wait() |
42 | | - |
43 | | - expect(console.error).not.toHaveBeenCalled() |
44 | | -}) |
| 1 | +import '@testing-library/jest-dom' |
| 2 | +import {render, waitFor, fireEvent} from '@testing-library/vue' |
| 3 | +import StopWatch from './components/StopWatch.vue' |
| 4 | + |
| 5 | +const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) |
| 6 | + |
| 7 | +test('updates component state', async () => { |
| 8 | + const {getByTestId, getByText} = render(StopWatch) |
| 9 | + |
| 10 | + const startButton = getByText('Start') |
| 11 | + const elapsedTime = getByTestId('elapsed') |
| 12 | + |
| 13 | + // Assert initial state. |
| 14 | + expect(elapsedTime).toHaveTextContent('0ms') |
| 15 | + getByText('Start') |
| 16 | + |
| 17 | + await fireEvent.click(startButton) |
| 18 | + |
| 19 | + getByText('Stop') |
| 20 | + |
| 21 | + // Wait for one tick of the event loop. |
| 22 | + await waitFor(() => { |
| 23 | + expect(elapsedTime).not.toHaveTextContent('0ms') |
| 24 | + }) |
| 25 | + const timeBeforeStop = elapsedTime.textContent |
| 26 | + |
| 27 | + // Stop the timer. |
| 28 | + await fireEvent.click(startButton) |
| 29 | + |
| 30 | + // Wait for a few milliseconds |
| 31 | + await sleep(5) |
| 32 | + |
| 33 | + // We can't assert a specific amount of time. Instead, we assert that the |
| 34 | + // content has changed. |
| 35 | + expect(elapsedTime).toHaveTextContent(timeBeforeStop) |
| 36 | +}) |
| 37 | + |
| 38 | +test('unmounts a component', async () => { |
| 39 | + jest.spyOn(console, 'error').mockImplementation(() => {}) |
| 40 | + |
| 41 | + const {unmount, isUnmounted, getByText} = render(StopWatch) |
| 42 | + await fireEvent.click(getByText('Start')) |
| 43 | + |
| 44 | + // Destroys a Vue component instance. |
| 45 | + unmount() |
| 46 | + |
| 47 | + expect(isUnmounted()).toBe(true) |
| 48 | + |
| 49 | + // Wait for a few milliseconds |
| 50 | + await sleep(5) |
| 51 | + |
| 52 | + expect(console.error).not.toHaveBeenCalled() |
| 53 | +}) |
0 commit comments