adding enzyme test

step2-04/README.md

@@ -14,6 +14,8 @@ https://jestjs.io/
 
 # Demo
 
+## jest basics
+
 In this repo, we can start an inner loop development of tests with the command: `npm test`
 
 Take a look at code inside `demo/src`:
@@ -24,10 +26,43 @@ Take a look at code inside `demo/src`:
 
 3. `index.spec.ts` is the test file: note how tests are re-run on save to test file changes as well as source code changes under `src`
 
+## testing React applications
+
+You can also test React Components with `jest` with the help of a partner library called `enzyme`. Take a look at the test below:
+
+```ts
+import { mount } from 'enzyme';
+
+describe('Foo Component Tests', () => {
+  it('allows us to set props', () => {
+    const wrapper = mount(<Foo bar="baz" />);
+    expect(wrapper.props().bar).toBe('baz');
+    wrapper.setProps({ bar: 'foo' });
+    expect(wrapper.props().bar).toBe('foo');
+  });
+});
+```
+
+`mount` does a full mount of the component. You can use the `enzyme` wrapper to simulate clicks, etc:
+
+```ts
+wrapper.find('button').simulate('click');
+```
+
 # Exercise
 
+## Basic Testing
+
 1. Run the tests by running `npm test` at the root of the bootcamp project
 
 2. Look at the `stack.ts` for a sample implementation of a stack
 
 3. Follow the instructions inside the `stack.spec.ts` file to complete the two tests
+
+## Enzyme Testing
+
+1. Open up `exercise/src/TestMe.spec.tsx`
+
+2. Fill in the blank for the missing test using `enzyme` concepts introduced from the demo
+
+3. Run tests with `npm test`

step2-04/demo/src/TestMe.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { TestMe } from './TestMe';
+
+describe('TestMe Component', () => {
+  it('should have a non-clickable component when the origina InnerMe is clicked', () => {
+    const wrapper = mount(<TestMe name="world" />);
+    wrapper.find('#innerMe').simulate('click');
+    expect(wrapper.find('#innerMe').text()).toBe('Clicked');
+  });
+});

step2-04/demo/src/TestMe.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export interface TestMeProps {
+  name: string;
+}
+
+export interface TestMeState {
+  clicked: boolean;
+}
+
+export const TestMe = (props: TestMeProps) => {
+  return (
+    <div id="testMe">
+      <InnerMe name={props.name} />
+    </div>
+  );
+};
+
+export class InnerMe extends React.Component<TestMeProps, TestMeState> {
+  state = {
+    clicked: false
+  };
+
+  onClick = () => {
+    this.setState({ clicked: true });
+  };
+
+  render() {
+    return !this.state.clicked ? (
+      <div onClick={this.onClick} id="innerMe">
+        Hello {this.props.name}, Click Me
+      </div>
+    ) : (
+      <div id="innerMe">Clicked</div>
+    );
+  }
+}

step2-04/exercise/src/TestMe.spec.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { TestMe } from './TestMe';
+
+describe('TestMe Component', () => {
+  it('should render correctly when hovered', () => {
+    // TODO:
+    // 1. mount a <TestMe> Component here
+    // 2. use enzyme wrapper's find() method to retrieve the #innerMe element
+    // 3. simulate a hover with "mouseover" event via the simulate() API
+    // 4. make assertions with expect on the text() of the #innerMe element
+  });
+});

step2-04/exercise/src/TestMe.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export interface TestMeProps {
+  name: string;
+}
+
+export interface TestMeState {
+  enabled: boolean;
+}
+
+export const TestMe = (props: TestMeProps) => {
+  return (
+    <div id="testMe">
+      <InnerMe name={props.name} />
+    </div>
+  );
+};
+
+export class InnerMe extends React.Component<TestMeProps, TestMeState> {
+  state = {
+    enabled: false
+  };
+
+  onMouseOver = () => {
+    this.setState({ enabled: true });
+  };
+
+  render() {
+    return !this.state.enabled ? (
+      <div onMouseOver={this.onMouseOver} id="innerMe">
+        Hello {this.props.name}, Hover Over Me
+      </div>
+    ) : (
+      <div id="innerMe">Enabled</div>
+    );
+  }
+}