Skip to content

Commit e8d69dd

Browse files
khanniiekhanniie
committed
update documentation and snapshot
1 parent aa6ded8 commit e8d69dd

File tree

2 files changed

+150
-4
lines changed

2 files changed

+150
-4
lines changed

‎client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<Sketchlist /> snapshot testing 1`] = `
4+
<DocumentFragment>
5+
<article
6+
class="sketches-table-container"
7+
>
8+
<table
9+
class="sketches-table"
10+
summary="table containing all saved projects"
11+
>
12+
<thead>
13+
<tr>
14+
<th
15+
scope="col"
16+
>
17+
<button
18+
aria-label="Sort by Sketch descending."
19+
class="sketch-list__sort-button"
20+
>
21+
<span
22+
class="sketches-table__header"
23+
>
24+
Sketch
25+
</span>
26+
</button>
27+
</th>
28+
<th
29+
scope="col"
30+
>
31+
<button
32+
aria-label="Sort by Date Created ascending."
33+
class="sketch-list__sort-button"
34+
>
35+
<span
36+
class="sketches-table__header sketches-table__header--selected"
37+
>
38+
Date Created
39+
</span>
40+
<test-file-stub
41+
aria-label="Descending"
42+
focusable="false"
43+
role="img"
44+
/>
45+
</button>
46+
</th>
47+
<th
48+
scope="col"
49+
>
50+
<button
51+
aria-label="Sort by Date Updated descending."
52+
class="sketch-list__sort-button"
53+
>
54+
<span
55+
class="sketches-table__header"
56+
>
57+
Date Updated
58+
</span>
59+
</button>
60+
</th>
61+
<th
62+
scope="col"
63+
/>
64+
</tr>
65+
</thead>
66+
<tbody>
67+
<tr
68+
class="sketches-table__row"
69+
>
70+
<th
71+
scope="row"
72+
>
73+
<a>
74+
testsketch1
75+
</a>
76+
</th>
77+
<td>
78+
Feb 25, 2021, 11:58:14 PM
79+
</td>
80+
<td>
81+
Feb 25, 2021, 11:58:29 PM
82+
</td>
83+
<td
84+
class="sketch-list__dropdown-column"
85+
>
86+
<button
87+
aria-label="Toggle Open/Close Sketch Options"
88+
class="sketch-list__dropdown-button"
89+
>
90+
<test-file-stub
91+
aria-hidden="true"
92+
focusable="false"
93+
/>
94+
</button>
95+
</td>
96+
</tr>
97+
<tr
98+
class="sketches-table__row"
99+
>
100+
<th
101+
scope="row"
102+
>
103+
<a>
104+
testsketch2
105+
</a>
106+
</th>
107+
<td>
108+
Feb 23, 2021, 12:40:43 PM
109+
</td>
110+
<td>
111+
Feb 23, 2021, 12:40:43 PM
112+
</td>
113+
<td
114+
class="sketch-list__dropdown-column"
115+
>
116+
<button
117+
aria-label="Toggle Open/Close Sketch Options"
118+
class="sketch-list__dropdown-button"
119+
>
120+
<test-file-stub
121+
aria-hidden="true"
122+
focusable="false"
123+
/>
124+
</button>
125+
</td>
126+
</tr>
127+
</tbody>
128+
</table>
129+
</article>
130+
</DocumentFragment>
131+
`;

‎developer_docs/testing.md

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Many files still don't have tests, so **if you're looking to get started as a co
2222
- [Internationalization](#internationalization)
2323
- [Useful terminology to know](#Useful-terminology-to-know)
2424
- [Tips](#Tips)
25+
- [Files to start with](#Files-to-start-with)
2526
- [More resources](#More-resources)
2627
- [References](#References)
2728

@@ -219,7 +220,7 @@ Node modules are mocked in the ``__mocks__`` folder at the root of the client fo
219220
### test-utils.js
220221
This file overwrites the default react-testing-library's render function so that components rendered through the new render function have access i18next and redux. It exports the rest of react-testing-library as is.
221222
222-
It exports a render function with a i18n wrapper as ``render`` and a render function with a wrapper for both redux and i18n as ``reduxRender``
223+
It exports a render function with a i18n wrapper as ``render`` and a render function with a wrapper for both redux and i18n as ``reduxRender``.
223224
224225
Thus, in your component test files, instead of calling ``import {functions you want} from 'react-testing-libary'`` importing react-testing library might look something like this:
225226
@@ -259,6 +260,12 @@ function reduxRender(
259260
}
260261
```
261262
263+
Then, if you want to call the render function with the wrapper with the Redux Provider, you can do this, once you have a [store made with redux-mock-store](#Connected-Components):
264+
265+
```js
266+
reduxRender(<SketchList {...subjectProps} />, { store });
267+
```
268+
262269
263270
### testData
264271
This folder contains the test data that you can use in your tests, including inital redux states that you can provide to the ``reduxRender`` function when testing. For example, if you want to render the SketchList component with a username of ``happydog`` and some sample sketches, ``testData/testReduxStore.js`` contains a definition for that state that you can import and provide to the renderer. The folder also contains test data that you can use for ``msw`` server so that the server returns json with the correct format and fields.
@@ -462,6 +469,9 @@ jest.mock('_path_to_file_/i18n');
462469
```
463470
You can see it used in the context of a test [in the SketchList.test.jsx file](../client/modules/IDE/components/SketchList.test.jsx).
464471
472+
## Internationalization
473+
This project uses i18next for internationalization. If you import the render function with the i18n wrapper from ``test_utils.js``, it's set up to use English, so the components with be rendered with English text and you should be able to count on this to test for specific strings.
474+
465475
466476
## Useful terminology to know
467477
Thanks [Test Double Wiki](https://github.com/testdouble/contributing-tests/wiki/Test-Double) for the definitions. You might see some of these words used in testing library documentation, so here are short definitions for them.
@@ -481,15 +491,20 @@ some methods but not others. Partial mocks are widely considered to be an anti-p
481491
#### Spy
482492
Records every invocation made against it and can verify certain interactions took place after the fact.
483493
484-
## Internationalization
485-
This project uses i18next for internationalization. If you import the render function with the i18n wrapper from ``test_utils.js``, it's set up to use English, so the components with be rendered with English text and you should be able to count on this to test for specific strings.
486-
487494
## Tips
488495
1. Make test fail at least once to make sure it was a meaningful test
489496
2. "If you or another developer change the component in a way that it changes its behaviour at least one test should fail." - [How to Unit Test in React](https://itnext.io/how-to-unit-test-in-react-72e911e2b8d)
490497
3. Avoid using numbers or data that seem "special" in your tests. For example, if you were checking the "age" variable in a component is a integer, but checked it as so ``expect(person.ageValidator(18)).toBe(true)``, the reader might assume that the number 18 had some significance to the function because it's a significant age. It would be better to have used 1234.
491498
4. Tests should help other developers understand the expected behavior of the component that it's testing
492499
500+
## Files to start with
501+
502+
These files still need tests! If you want to contribute by writing tests, please consider starting with these:
503+
504+
1. Integration test for LoginView.jsx
505+
2. Integration test for SignupView.jsx
506+
3. Tests for route switching in routes.jsx
507+
493508
## More Resources
494509
- [React Testing Library Cheatsheet](https://testing-library.com/docs/react-testing-library/cheatsheet/)
495510
- [React connected component test](https://www.robinwieruch.de/react-connected-component-test)

0 commit comments

Comments
 (0)