diff --git a/package.json b/package.json
index 58e603aa..71c43938 100644
--- a/package.json
+++ b/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",
diff --git a/src/__tests__/App.spec.js b/src/__tests__/App.spec.js
index a6b1f869..e8053e26 100644
--- a/src/__tests__/App.spec.js
+++ b/src/__tests__/App.spec.js
@@ -4,7 +4,13 @@ import { shallow } from 'enzyme';
import App from '../App';
describe('', () => {
- it('renders without crashing', () => {
- shallow();
+ it('renders shallow without crashing', () => {
+ shallow();
});
-});
+ it('state is initialized', () => {
+ const wrapper = shallow();
+ expect(wrapper.state().total).toBe('0');
+ expect(wrapper.state().next).toBeFalsy();
+ expect(wrapper.state().operation).toBeFalsy();
+ });
+ });
\ No newline at end of file
diff --git a/src/__tests__/Button.spec.js b/src/__tests__/Button.spec.js
index f03654a0..ba69d1a0 100644
--- a/src/__tests__/Button.spec.js
+++ b/src/__tests__/Button.spec.js
@@ -4,7 +4,25 @@ import { shallow } from 'enzyme';
import Button from '../components/Button/Button';
describe('', () => {
- it('renders without crashing', () => {
- shallow();
+ it('renders shallow without crashing', () => {
+ shallow();
});
-});
+ it('renders div with orange', () => {
+ const wrapper = shallow();
+ const buttons = wrapper.find('.orange');
+
+ expect(buttons.length).toBe(1);
+ });
+ it('renders div with wide', () => {
+ const wrapper = shallow();
+ const buttons = wrapper.find('.wide');
+
+ expect(buttons.length).toBe(1);
+ });
+ it('renders button with prop name', () => {
+ const wrapper = shallow();
+ const buttons = wrapper.find('button');
+
+ expect(buttons.text()).toBe('abcd');
+ });
+ });
diff --git a/src/__tests__/Display.spec.js b/src/__tests__/Display.spec.js
index 223f25ab..5bb2692e 100644
--- a/src/__tests__/Display.spec.js
+++ b/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('', () => {
- it('renders without crashing', () => {
- shallow();
+ it('renders shallow without crashing', () => {
+ shallow();
});
-});
+ it('renders prop name in div', () => {
+ const wrapper = shallow();
+ const finder = wrapper.find('div');
+
+ expect(finder.last().text()).toBe('abcd');
+ });
+ it('renders prop name in div', () => {
+ const wrapper = shallow();
+ const finder = wrapper.find('.component-display');
+
+ expect(finder.last().text()).toBe('abcd');
+ });
+ it('renders depending on App state', () => {
+ const wrapper = mount(
+
+
+
+
+ );
+ 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(
+
+
+
+
+ );
+ 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');
+ });
+ });
diff --git a/src/__tests__/Panel.spec.js b/src/__tests__/Panel.spec.js
index 440a5abc..a3da6e31 100644
--- a/src/__tests__/Panel.spec.js
+++ b/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('', () => {
- it('renders without crashing', () => {
- shallow();
- });
-});
+ it('renders shallow without crashing', () => {
+ shallow();
+ });
+ it('renders within ', () => {
+ const wrapper = mount(
+
+
+
+ );
+ expect(wrapper.find('button').length).toBe(19);
+ expect(wrapper.find('.component-panel').length).toBe(1);
+ });
+ it('button changes state of App', () => {
+ const wrapper = mount(
+
+
+
+ );
+ 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');
+ });
+});
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 6c1204d1..e2c9529e 100644
--- a/yarn.lock
+++ b/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==