Trevor Lewis [React-Testing]

src/__tests__/App.spec.js

@@ -1,10 +1,20 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import ReactDOM from 'react-dom';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 
 import App from '../App';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 describe('<App />', () => {
-	it('renders without crashing', () => {
-		shallow(<App />);
-	});
-});
+  it('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

@@ -1,10 +1,32 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import ReactDOM from 'react-dom';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 
 import Button from '../components/Button/Button';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 describe('<Button />', () => {
-	it('renders without crashing', () => {
-		shallow(<Button />);
-	});
+  it('renders 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

@@ -7,4 +7,16 @@ describe('<Display />', () => {
 	it('renders without crashing', () => {
 		shallow(<Display />);
 	});
-});
+
+	it('renders the display', () => {
+		const wrapper = shallow(<Display />);
+		const display = wrapper.find('.component-display');
+		expect(display.length).toBe(1);
+	});
+
+	it('displays the prop', () => {
+		const wrapper = shallow(<Display value='test' />);
+		const displayed = wrapper.find('.component-display > div');
+		expect(displayed.text()).toBe('test');
+	});
+});

src/__tests__/Panel.spec.js

@@ -1,10 +1,41 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import ReactDOM from 'react-dom';
+import Enzyme, { shallow, mount  } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 
 import Panel from '../components/Panel/Panel';
+import App from '../App';
+
+Enzyme.configure({ adapter: new Adapter() });
 
 describe('<Panel />', () => {
-	it('renders without crashing', () => {
-		shallow(<Panel />);
-	});
-});
+  it('renders 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');
+  });
+});