Merge branch 'dev' into sierra

Author: starkspark

src/app/__tests__/StateContainter.test.js

@@ -0,0 +1,42 @@
+import { mount , configure } from 'enzyme';
+
+import React from 'react';
+import { MemoryRouter , NavLink } from 'react-router-dom';
+
+import StateContainer from '../containers/StateContainer';
+import Chart from '../components/Chart';
+import Tree from '../components/Tree';
+
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+describe('testing react router path',()=>{
+  const wrapper = mount(<MemoryRouter><StateContainer/></MemoryRouter>);
+  it('NavLink has two paths', () => {                                       
+    expect(wrapper.find(NavLink)).toHaveLength(2);
+  });
+  it('First NavLink should be root', () => {
+    expect(wrapper.find(NavLink).at(0).props().to).toBe('/');
+  });
+  it('Second NavLink should be chart', () => {
+    expect(wrapper.find(NavLink).at(1).props().to).toBe('/chart');
+  });
+});
+
+describe('render test', () => {
+  const wrapper = mount(
+    <MemoryRouter>
+      <StateContainer snapshot={ {data :'root'} }/>
+    </MemoryRouter>);
+  it('Clicking first NavLink should render Tree only', () => {
+    wrapper.find(NavLink).at(0).simulate('click', { button: 0 });
+    expect(wrapper.find(Tree)).toHaveLength(1);
+    expect(wrapper.find(Chart)).toHaveLength(0);
+  });
+  it('Clicking second NavLink should render Chart only', () => {
+    wrapper.find(NavLink).at(1).simulate('click', { button: 0 });
+    expect(wrapper.find(Tree)).toHaveLength(0);
+    expect(wrapper.find(Chart)).toHaveLength(1);
+  });
+});

src/app/__tests__/dropdown.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Dropdown from '../components/Dropdown';
+
+configure({ adapter: new Adapter() });
+
+describe('unit testing for Dropdown.jsx', () => {
+    let wrapper;
+    const props = {
+        options: [
+            { value: 2000, label: '0.5x' },
+            { value: 1000, label: '1.0x' },
+            { value: 500, label: '2.0x' },
+          ],
+        handleChangeSpeed: jest.fn(),
+        selectedOption: { value: 1000, label: '1.0x' }
+    };
+    beforeEach(() => {
+        wrapper = shallow(<Dropdown {...props} />);
+    });
+
+    describe('Component', () => {
+        test('array of objects that have value and label should be options props', () => {
+            expect(wrapper.props().options).toEqual(props.options);
+        });
+        test('selectedOption should be value property', () => {
+            expect(wrapper.props().value).toEqual(props.selectedOption);
+        })
+    })
+
+    describe('handlechangeSpeed', () => {
+        test('should invoke handleChangeSpeed onChange', () => {
+            wrapper.simulate('change', { value: 2000, label: '0.5x' });
+            expect(props.handleChangeSpeed).toHaveBeenCalled();
+        });
+    });
+});

src/app/components/Chart.jsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import '../styles/components/_d3Tree.scss';
 import * as d3 from 'd3';
 
 var root={};

src/app/styles/main.scss

@@ -20,3 +20,6 @@
 
 // slider component
 @import './components/rc-slider', './components/sliderHandle';
+
+// d3 chart component
+@import './components/d3Tree';