ReactTesting({BrianWilliams: " -___- "})

package.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-scripts": "^2.1.1"
+    "react-scripts": "^2.1.1",
+    "react-test-renderer": "^16.6.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/__tests__/App.spec.js

@@ -4,7 +4,13 @@ import { shallow } from 'enzyme';
 import App from '../App';
 
 describe('<App />', () => {
-	it('renders without crashing', () => {
-		shallow(<App />);
+	it('renders shallow without crashing', () => {
+	  shallow(<App />);
 	});
-});
+	it('state is initialized', () => {
+	  const wrapper = shallow(<App />);
+	  expect(wrapper.state().total).toBe('0');
+	  expect(wrapper.state().next).toBeFalsy();
+	  expect(wrapper.state().operation).toBeFalsy();
+	});
+  });

src/__tests__/Button.spec.js

@@ -4,7 +4,25 @@ import { shallow } from 'enzyme';
 import Button from '../components/Button/Button';
 
 describe('<Button />', () => {
-	it('renders without crashing', () => {
-		shallow(<Button />);
+	it('renders shallow without crashing', () => {
+	  shallow(<Button />);
 	});
-});
+	it('renders div with orange', () => {
+	  const wrapper = shallow(<Button orange />);
+	  const buttons = wrapper.find('.orange');
+
+	  expect(buttons.length).toBe(1);
+	});
+	it('renders div with wide', () => {
+	  const wrapper = shallow(<Button wide />);
+	  const buttons = wrapper.find('.wide');
+
+	  expect(buttons.length).toBe(1);
+	});
+	it('renders button with prop name', () => {
+	  const wrapper = shallow(<Button name="abcd" />);
+	  const buttons = wrapper.find('button');
+
+	  expect(buttons.text()).toBe('abcd');
+	});
+  });

src/__tests__/Display.spec.js

@@ -1,10 +1,83 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import Display from '../components/Display/Display';
+import App from '../App';
+import Panel from '../components/Panel/Panel';
 
 describe('<Display />', () => {
-	it('renders without crashing', () => {
-		shallow(<Display />);
+	it('renders shallow without crashing', () => {
+	  shallow(<Display />);
 	});
-});
+	it('renders prop name in div', () => {
+	  const wrapper = shallow(<Display value="abcd" />);
+	  const finder = wrapper.find('div');
+
+	  expect(finder.last().text()).toBe('abcd');
+	});
+	it('renders prop name in div', () => {
+	  const wrapper = shallow(<Display value="abcd" />);
+	  const finder = wrapper.find('.component-display');
+
+	  expect(finder.last().text()).toBe('abcd');
+	});
+	it('renders depending on App state', () => {
+	  const wrapper = mount(
+		<App>
+		  <Display />
+		  <Panel />
+		</App>
+	  );
+	  const disp = wrapper.find('.component-display');
+	  wrapper
+		.find('button')
+		.filterWhere(btn => btn.text() === '7')
+		.simulate('click');
+	  expect(disp.text()).toBe('7');
+	  wrapper
+		.find('button')
+		.filterWhere(btn => btn.text() === '9')
+		.simulate('click');
+	  expect(disp.text()).toBe('79');
+	});
+	it('renders calculated value', () => {
+	  const wrapper = mount(
+		<App>
+		  <Display />
+		  <Panel />
+		</App>
+	  );
+	  const disp = wrapper.find('.component-display');
+	  wrapper
+		.find('button')
+		.filterWhere(btn => btn.text() === '7')
+		.simulate('click');
+	  expect(disp.text()).toBe('7');
+	  wrapper
+		.find('button')
+		.filterWhere(btn => btn.text() === '+')
+		.simulate('click');
+	  wrapper
+		.find('button')
+		.filterWhere(btn => btn.text() === '9')
+		.simulate('click');
+	  wrapper
+		.find('button')
+		.filterWhere(btn => btn.text() === '=')
+		.simulate('click');
+	  expect(disp.text()).toBe('16');
+	  wrapper
+		.find('button')
+		.filterWhere(btn => btn.text() === '-')
+		.simulate('click');
+	  wrapper
+		.find('button')
+		.filterWhere(btn => btn.text() === '6')
+		.simulate('click');
+	  wrapper
+		.find('button')
+		.filterWhere(btn => btn.text() === '=')
+		.simulate('click');
+	  expect(disp.text()).toBe('10');
+	});
+  });

src/__tests__/Panel.spec.js

@@ -1,10 +1,37 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import Panel from '../components/Panel/Panel';
+import App from '../App';
 
 describe('<Panel />', () => {
-	it('renders without crashing', () => {
-		shallow(<Panel />);
-	});
-});
+  it('renders shallow without crashing', () => {
+    shallow(<Panel />);
+  });
+  it('renders within <App />', () => {
+    const wrapper = mount(
+      <App>
+        <Panel />
+      </App>
+    );
+    expect(wrapper.find('button').length).toBe(19);
+    expect(wrapper.find('.component-panel').length).toBe(1);
+  });
+  it('button changes state of App', () => {
+    const wrapper = mount(
+      <App>
+        <Panel />
+      </App>
+    );
+    wrapper
+      .find('button')
+      .filterWhere(btn => btn.text() === '7')
+      .simulate('click');
+    expect(wrapper.state().next).toBe('7');
+    wrapper
+      .find('button')
+      .filterWhere(btn => btn.text() === '9')
+      .simulate('click');
+    expect(wrapper.state().next).toBe('79');
+  });
+});

yarn.lock

@@ -8117,7 +8117,7 @@ react-scripts@^2.1.1:
   optionalDependencies:
     fsevents "1.2.4"
 
-react-test-renderer@^16.0.0-0:
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.6.3:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.6.3.tgz#5f3a1a7d5c3379d46f7052b848b4b72e47c89f38"
   integrity sha512-B5bCer+qymrQz/wN03lT0LppbZUDRq6AMfzMKrovzkGzfO81a9T+PWQW6MzkWknbwODQH/qpJno/yFQLX5IWrQ==