video10: test simulated event handlers.

src/App.js

@@ -26,6 +26,11 @@ Title.propTypes = {
 };
 
 class App extends Component {
+  state = {
+    input: "",
+    on: false,
+  };
+
   render() {
     return (
       <div className="App">
@@ -42,6 +47,10 @@ class App extends Component {
           <li>Second</li>
           <li>Third</li>
         </ul>
+        <p className="button-state">{this.state.on ? "Yes!" : "No!"}</p>
+        <button onClick={() => this.setState({ on: true })}>Click</button>
+        <h2>{this.state.input}</h2>
+        <input type="text" onChange={(e) => this.setState({ input: e.currentTarget.value })} />
       </div>
     );
   }

src/App.test.js

@@ -14,7 +14,7 @@ describe("<App /> shallow rendering", () => {
 
   it("should find its elements", () => {
     // There is one <p> in <App />: only one shoud be present in shallow rendering.
-    expect(wrapper.find("p").length).toBe(1);
+    expect(wrapper.find("p").length).toBe(2);
     expect(wrapper.find("p.App-intro").exists()).toBe(true);
     expect(wrapper.find("ul").hasClass("tyler")).toBe(true);
     expect(wrapper.find("ul").children().length).toBe(3);
@@ -46,6 +46,25 @@ describe("<App /> shallow rendering", () => {
     const tree = shallow(<App />);
     expect(toJson(tree)).toMatchSnapshot();
   });
+
+  it("should change p text on button click", () => {
+    const button = wrapper.find("button");
+    expect(wrapper.find(".button-state").text()).toBe("No!");
+
+    // Simulate() will fetch the onClick prop  on the component and call it.
+    button.simulate("click");
+    expect(wrapper.find(".button-state").text()).toBe("Yes!");
+  });
+
+  it("should change title text on input change", () => {
+    const input = wrapper.find("input");
+    const expected = "Tyler";
+
+    expect(wrapper.find("h2").text()).toBe("");
+    // The optional parameter is the mocked event.
+    input.simulate("change", { currentTarget: { value: expected } });
+    expect(wrapper.find("h2").text()).toBe(expected);
+  });
 });
 
 describe("<App /> mount rendering", () => {

src/__snapshots__/App.test.js.snap

@@ -48,6 +48,21 @@ exports[`<App /> mount rendering matches the snapshot 1`] = `
         Third
       </li>
     </ul>
+    <p
+      className="button-state"
+    >
+      No!
+    </p>
+    <button
+      onClick={[Function]}
+    >
+      Click
+    </button>
+    <h2 />
+    <input
+      onChange={[Function]}
+      type="text"
+    />
   </div>
 </MasterControlProgram>
 `;
@@ -95,5 +110,20 @@ exports[`<App /> shallow rendering matches the snapshot 1`] = `
       Third
     </li>
   </ul>
+  <p
+    className="button-state"
+  >
+    No!
+  </p>
+  <button
+    onClick={[Function]}
+  >
+    Click
+  </button>
+  <h2 />
+  <input
+    onChange={[Function]}
+    type="text"
+  />
 </div>
 `;

src/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import App from "./App";
+import { App } from "./App";
 import registerServiceWorker from "./registerServiceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));