video8: Test component props and rendering.

src/App.js

@@ -3,15 +3,28 @@ import React, { Component } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 
+const appName = "MasterControlProgram";
+const titleName = "heading";
+
+class Link extends Component {
+  render() {
+    return this.props.hide
+      ? null
+      : <a href={this.props.address}>Click</a>;
+  }
+}
+
+Link.propTypes = {
+  address: PropTypes.string,
+  hide: PropTypes.bool,
+};
+
 const Title = ({ text }) => <div>{text}</div>;
 
 Title.propTypes = {
   text: PropTypes.string,
 };
 
-const appName = "MasterControlProgram";
-const titleName = "heading";
-
 class App extends Component {
   render() {
     return (
@@ -37,4 +50,4 @@ class App extends Component {
 App.displayName = appName;
 Title.displayName = titleName;
 
-export { App, appName, titleName };
+export { App, Link, appName, titleName };

src/App.test.js

@@ -1,9 +1,9 @@
 import "raf/polyfill";
 import React from "react";
-import { App, appName, titleName } from "./App";
+import { App, appName, Link, titleName } from "./App";
 import { configure, shallow, mount } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
-import toJson from 'enzyme-to-json';
+import toJson from "enzyme-to-json";
 
 // Configure Enzyme for the React version we are using.
 // Could be in a test setup file. Required for React 16, 15, 0.14, 0.13.
@@ -47,3 +47,46 @@ describe("<App />>", () => {
     expect(toJson(tree)).toMatchSnapshot();
   });
 });
+
+describe("<Link>", () => {
+  const expected = "www.google.com";
+
+  it("link component accepts address prop", () => {
+    const wrapper = shallow(<Link address={expected} />);
+    // wrapper.instance() is the React component. "props" is a property.
+    expect(wrapper.instance().props.address).toBe(expected);
+  });
+
+  // wrapper itself is the ShallowWrapper instance, not the React component.
+  it("tag node renders href correctly", () => {
+    const wrapper = shallow(<Link address={expected} />);
+    // Check its rendering:
+    // console.log(wrapper.html(), wrapper.props());
+    expect(wrapper.prop("href")).toBe(expected);
+    // Here "props" is a method, not a property.
+    expect(wrapper.props().href).toBe(expected);
+  });
+
+  it("returns null with true hide prop", () => {
+    const wrapper = shallow(<Link address={expected} hide={false} />);
+    expect(wrapper.find("a").length).toBe(1);
+    expect(wrapper.props().href).toBe(expected);
+
+    // Causes a rerender() of the component.
+    // - triggers componentWillReceiveProps()
+    wrapper.setProps({ hide: true });
+
+    expect(wrapper.find("a").length).toBe(0);
+    // Dangerous: some versions of React might inject comments in HTML.
+    // expect(wrapper.html()).toBeNull();
+
+    // expect(wrapper.getNode()).toBeNull();
+    // Obsolete: getNode() is deprecated.
+
+    // Recommended way https://github.com/airbnb/enzyme/issues/52
+    expect(wrapper.getElement()).toBe(null);
+    expect(wrapper.getElement()).toBeNull();
+    // Get() returns the node at the given index on the wrapper.
+    expect(wrapper.get(0)).toBeNull();
+  });
+});