Make edits to testing READMEs

Author: benmvp

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

@@ -133,6 +133,7 @@ Instead of using [`.find()`](http://airbnb.io/enzyme/docs/api/ReactWrapper/find.
 
 - Finish the second test verifying that `<EmailListItem />` receives `isSelected=true` for a matching `selectedEmailId` prop 
 - Move `EMAILS` constant into [`__fixtures__/index.js`](__fixtures__/index.js)
+- Any missed exercises from [Step 1](../01-render-markup)! 😉
 
 ## Next
 

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

@@ -129,7 +129,7 @@ it('calls onSelect handler with email ID on click when specified', () => {
 });
 ```
 
-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:
+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:
 
 ```js
   describe('onSelect', () => {
@@ -142,7 +142,7 @@ Lastly, the `_handleClick` does not try to call the `onSelect` prop when it isn'
       const component = mount(<EmailListItem email={DEFAULT_EMAIL} />);
       const container = component.find('[data-test="email-list-item"]');
 
-      // simulating a click even shouldn't cause an error when onSelect
+      // simulating a click event shouldn't cause an error when onSelect
       // isn't passed
       expect(() => {
         container.simulate('click', {stopPropagation});

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

@@ -92,7 +92,7 @@ describe('event handling', () => {
       const component = getComponent();
       const container = component.find('[data-test="email-list-item"]');
 
-      // simulating a click even shouldn't cause an error when onSelect
+      // simulating a click event shouldn't cause an error when onSelect
       // isn't passed
       expect(() => {
         container.simulate('click', {stopPropagation});

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

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

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

@@ -58,7 +58,7 @@ Jest will start up in "watch mode", run the existing tests, and then wait for te
 
 ## Tasks
 
-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.
+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.
 
 Create [`containers/Page.test.js`](containers/Page.test.js) and let's create some tests for the simple action event handlers it receives:
 
@@ -113,7 +113,7 @@ You'll noticed that the test **fails**:
   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)".
 ```
 
-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.
+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.
 
 So we'll first need to make `Page` more easily testable, by separating the Redux `connect()` from the component itself.
 

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

@@ -92,7 +92,7 @@ describe('event handling', () => {
       const component = getComponent();
       const container = component.find('[data-test="email-list-item"]');
 
-      // simulating a click even shouldn't cause an error when onSelect
+      // simulating a click event shouldn't cause an error when onSelect
       // isn't passed
       expect(() => {
         container.simulate('click', {stopPropagation});

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

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

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

@@ -58,7 +58,7 @@ Jest will start up in "watch mode", run the existing tests, and then wait for te
 
 ## Tasks
 
-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.
+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.
 
 Write a test to verify that the `from` field gets a new value when the `'change'` event is triggered:
 
@@ -129,6 +129,8 @@ describe('state updating', () => {
 });
 ```
 
+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.
+
 To be extra safe, ensure that the fields aren't accidentally reset on unsuccessful form submission:
 
 ```js
@@ -161,7 +163,7 @@ There is an [exercise](#exercise) to test for cancelled submission.
 
 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.
 
-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:
+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:
 
 ```js
 describe('state updates + callbacks', () => {
@@ -223,7 +225,7 @@ describe('selected email', () => {
 });
 ```
 
-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`.
+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`.
 
 Finally, let's test what happens when the email view is closed:
 

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

@@ -92,7 +92,7 @@ describe('event handling', () => {
       const component = getComponent();
       const container = component.find('[data-test="email-list-item"]');
 
-      // simulating a click even shouldn't cause an error when onSelect
+      // simulating a click event shouldn't cause an error when onSelect
       // isn't passed
       expect(() => {
         container.simulate('click', {stopPropagation});

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

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