Skip to content

Commit bad84c8

Browse files
committed
Make edits to testing READMEs
1 parent e1f0ec1 commit bad84c8

File tree

18 files changed

+31
-27
lines changed

18 files changed

+31
-27
lines changed

src/testing/02-render-components/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ Instead of using [`.find()`](http://airbnb.io/enzyme/docs/api/ReactWrapper/find.
133133

134134
- Finish the second test verifying that `<EmailListItem />` receives `isSelected=true` for a matching `selectedEmailId` prop
135135
- Move `EMAILS` constant into [`__fixtures__/index.js`](__fixtures__/index.js)
136+
- Any missed exercises from [Step 1](../01-render-markup)! 😉
136137

137138
## Next
138139

src/testing/03-callbacks-markup/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ it('calls onSelect handler with email ID on click when specified', () => {
129129
});
130130
```
131131

132-
Lastly, the `_handleClick` does not try to call the `onSelect` prop when it isn't passed. We can verify that it does nothing by asserting that `.stopPropagation()` is never called **and** that we don't get any errors from trying to call the `undefined` `onSelect` prop:
132+
Lastly, the `_handleClick` does not try to call the `onSelect` prop when the prop isn't passed. We can verify that it does nothing by asserting that `.stopPropagation()` is never called **and** that we don't get any errors from trying to call the would-be-`undefined` `onSelect` prop:
133133

134134
```js
135135
describe('onSelect', () => {
@@ -142,7 +142,7 @@ Lastly, the `_handleClick` does not try to call the `onSelect` prop when it isn'
142142
const component = mount(<EmailListItem email={DEFAULT_EMAIL} />);
143143
const container = component.find('[data-test="email-list-item"]');
144144

145-
// simulating a click even shouldn't cause an error when onSelect
145+
// simulating a click event shouldn't cause an error when onSelect
146146
// isn't passed
147147
expect(() => {
148148
container.simulate('click', {stopPropagation});

src/testing/03-callbacks-markup/components/EmailListItem.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ describe('event handling', () => {
9292
const component = getComponent();
9393
const container = component.find('[data-test="email-list-item"]');
9494

95-
// simulating a click even shouldn't cause an error when onSelect
95+
// simulating a click event shouldn't cause an error when onSelect
9696
// isn't passed
9797
expect(() => {
9898
container.simulate('click', {stopPropagation});

src/testing/03-callbacks-markup/components/EmailView.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ describe('event handling', () => {
110110
const component = getComponent();
111111
const markReadButton = component.find('[data-test="email-view-mark-read"]');
112112

113-
// simulating a click even shouldn't cause an error
113+
// simulating a click event shouldn't cause an error
114114
expect(() => {
115115
markReadButton.simulate('click');
116116
}).not.toThrow();
@@ -141,7 +141,7 @@ describe('event handling', () => {
141141
const component = getComponent({email: READ_EMAIL});
142142
const markUnreadButton = component.find('[data-test="email-view-mark-unread"]');
143143

144-
// simulating a click even shouldn't cause an error
144+
// simulating a click event shouldn't cause an error
145145
expect(() => {
146146
markUnreadButton.simulate('click');
147147
}).not.toThrow();

src/testing/04-callbacks-components/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Jest will start up in "watch mode", run the existing tests, and then wait for te
5858

5959
## Tasks
6060

61-
Let's finally write tests for the `Page` container component. It has very little DOM, but acts as a coordinator for all of the other child components within it.
61+
Let's finally write tests for the `Page` container component. It has very little DOM, but acts as a coordinator for all of the other child components within it. It operates exclusively off of event handlers for its child components.
6262

6363
Create [`containers/Page.test.js`](containers/Page.test.js) and let's create some tests for the simple action event handlers it receives:
6464

@@ -113,7 +113,7 @@ You'll noticed that the test **fails**:
113113
Invariant Violation: Could not find "store"in either the context or props of "Connect(Page)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Page)".
114114
```
115115

116-
The `connect()` function within [`Page.js`](containers/Page.js) is expected the Redux store to be in the `context`. We use `<Provider>` in [`App.js`](App.js) to provide the Redux store when our app runs, but we don't do it when we're running our tests. But for the purposes of the test, we don't _really_ need Redux at all; we can test `Page` in isolation like we've been testing our other components.
116+
The `connect()` function within [`Page.js`](containers/Page.js) is expecting the Redux store to be in the `context`. We use `<Provider>` in [`App.js`](App.js) to provide the Redux store when our app runs, but we don't want to do it when we're running our tests. It's way too much to create a fake store, fake reducers & fake actions, just to test our container component. But for the purposes of the test, we don't _really_ need Redux at all; we can test `Page` in isolation like we've been testing our other components.
117117

118118
So we'll first need to make `Page` more easily testable, by separating the Redux `connect()` from the component itself.
119119

src/testing/04-callbacks-components/components/EmailListItem.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ describe('event handling', () => {
9292
const component = getComponent();
9393
const container = component.find('[data-test="email-list-item"]');
9494

95-
// simulating a click even shouldn't cause an error when onSelect
95+
// simulating a click event shouldn't cause an error when onSelect
9696
// isn't passed
9797
expect(() => {
9898
container.simulate('click', {stopPropagation});

src/testing/04-callbacks-components/components/EmailView.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ describe('event handling', () => {
110110
const component = getComponent();
111111
const markReadButton = component.find('[data-test="email-view-mark-read"]');
112112

113-
// simulating a click even shouldn't cause an error
113+
// simulating a click event shouldn't cause an error
114114
expect(() => {
115115
markReadButton.simulate('click');
116116
}).not.toThrow();
@@ -141,7 +141,7 @@ describe('event handling', () => {
141141
const component = getComponent({email: READ_EMAIL});
142142
const markUnreadButton = component.find('[data-test="email-view-mark-unread"]');
143143

144-
// simulating a click even shouldn't cause an error
144+
// simulating a click event shouldn't cause an error
145145
expect(() => {
146146
markUnreadButton.simulate('click');
147147
}).not.toThrow();

src/testing/05-ui-state/README.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Jest will start up in "watch mode", run the existing tests, and then wait for te
5858

5959
## Tasks
6060

61-
Let's return to testing the `EmailForm` component by opening [`components/EmailForm.test.js`](components/EmailForm.test.js). The four input fields, `from`, `to`, `subject` & `message`, are ["controlled components"](https://facebook.github.io/react/docs/forms.html#controlled-components). React maintains their value in `state` and re-renders them with their new value when their values change.
61+
Let's return to testing the `EmailForm` component by opening [`components/EmailForm.test.js`](components/EmailForm.test.js). The four input fields, `from`, `to`, `subject` & `message`, are ["controlled components"](https://facebook.github.io/react/docs/forms.html#controlled-components). We maintain their value in `state` and re-renders them with their new value when their values change.
6262

6363
Write a test to verify that the `from` field gets a new value when the `'change'` event is triggered:
6464

@@ -129,6 +129,8 @@ describe('state updating', () => {
129129
});
130130
```
131131

132+
So we never test directly the `state` or even the helper function that resets the form field values. By testing indrectly, we're testing the intended _user experience_ which should be able to remain the same even if the code is refactored.
133+
132134
To be extra safe, ensure that the fields aren't accidentally reset on unsuccessful form submission:
133135

134136
```js
@@ -161,7 +163,7 @@ There is an [exercise](#exercise) to test for cancelled submission.
161163

162164
Let's revisit the tests for `Page`. There are two pieces of UI state, `selectedEmailId` and `showForm`, that we want to test how they update. Again, we use indirection to verify that the state was updated correctly, but analyzing if the new UI has been rendered correctly.
163165

164-
The main piece of state is `selectedEmailId`. It is updated in many different ways to build interactive in the email app. It defaults to `-1` signaling that nothing is selected and the `<EmailView />` should not display. Let's verify this case:
166+
The main piece of state is `selectedEmailId`. It is updated in many different ways to build interactivity in the email app. It defaults to `-1` signaling that nothing is selected and the `<EmailView />` should not display. Let's verify this case:
165167

166168
```js
167169
describe('state updates + callbacks', () => {
@@ -223,7 +225,7 @@ describe('selected email', () => {
223225
});
224226
```
225227

226-
We simulate an email item being selected by invoking the `onItemSelect` prop on the `<EmailList />`. This triggers a re-render, but because we didn't trigger it via Enzyme's [`.simulate()`](http://airbnb.io/enzyme/docs/api/ReactWrapper/simulate.html), we have to manually tell the component to update. After which we verify `<EmailList />` has the write selected email ID, is displaying the `<EmailView />` with the selected email, and that the `markRead` callback handler was called with the selected email ID. This is the result of the simple `setState()` in `_handleItemSelect`.
228+
We simulate an email item being selected by invoking the `onItemSelect` prop on the `<EmailList />`. This triggers a re-render, but because we didn't trigger it via Enzyme's [`.simulate()`](http://airbnb.io/enzyme/docs/api/ReactWrapper/simulate.html), we have to manually tell the component to update. After which we verify `<EmailList />` has the correct selected email ID, is displaying the `<EmailView />` with the selected email, and that the `markRead` callback handler was called with the selected email ID. This is the result of the simple `setState()` in `_handleItemSelect`.
227229

228230
Finally, let's test what happens when the email view is closed:
229231

src/testing/05-ui-state/components/EmailListItem.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ describe('event handling', () => {
9292
const component = getComponent();
9393
const container = component.find('[data-test="email-list-item"]');
9494

95-
// simulating a click even shouldn't cause an error when onSelect
95+
// simulating a click event shouldn't cause an error when onSelect
9696
// isn't passed
9797
expect(() => {
9898
container.simulate('click', {stopPropagation});

src/testing/05-ui-state/components/EmailView.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ describe('event handling', () => {
110110
const component = getComponent();
111111
const markReadButton = component.find('[data-test="email-view-mark-read"]');
112112

113-
// simulating a click even shouldn't cause an error
113+
// simulating a click event shouldn't cause an error
114114
expect(() => {
115115
markReadButton.simulate('click');
116116
}).not.toThrow();
@@ -141,7 +141,7 @@ describe('event handling', () => {
141141
const component = getComponent({email: READ_EMAIL});
142142
const markUnreadButton = component.find('[data-test="email-view-mark-unread"]');
143143

144-
// simulating a click even shouldn't cause an error
144+
// simulating a click event shouldn't cause an error
145145
expect(() => {
146146
markUnreadButton.simulate('click');
147147
}).not.toThrow();

0 commit comments

Comments
 (0)