eslint configurations made

Author: starkspark

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
-    "test": "jest --verbose --coverage --watchAll"
+    "test": "jest --verbose --coverage --watchAll",
+    "lint": "eslint --ext .js --ext .jsx src"
   },
   "keywords": [
     "react",

src/app/__tests__/ButtonsContainer.test.js

@@ -1,12 +1,10 @@
 import { shallow, configure } from 'enzyme';
-
 import React from 'react';
-
+import Adapter from 'enzyme-adapter-react-16';
 import ButtonsContainer from '../containers/ButtonsContainer';
 
-import Adapter from 'enzyme-adapter-react-16';
 
-configure({ adapter: new Adapter() })
+configure({ adapter: new Adapter() });
 
 const props = {
   toggleMode: jest.fn(),
@@ -17,51 +15,46 @@ const props = {
     locked: false,
     persist: false,
   },
-}
+};
 
 describe('testing the bottom buttons', () => {
   test('if pause button is invoked', () => {
-
-    const wrapper = shallow(<ButtonsContainer { ...props } />)
+    const wrapper = shallow(<ButtonsContainer {...props} />);
 
     wrapper.find('.pause-button').simulate('click');
 
     expect(props.toggleMode).toHaveBeenCalled();
-  }),
+  });
 
   test('if lock button is invoked', () => {
-
-    const wrapper = shallow(<ButtonsContainer { ...props } />)
+    const wrapper = shallow(<ButtonsContainer {...props} />);
 
     wrapper.find('.lock-button').simulate('click');
 
     expect(props.toggleMode).toHaveBeenCalled();
-  }),
+  });
 
   test('if persist button is invoked', () => {
-
-    const wrapper = shallow(<ButtonsContainer { ...props } />)
+    const wrapper = shallow(<ButtonsContainer {...props} />);
 
     wrapper.find('.persist-button').simulate('click');
 
     expect(props.toggleMode).toHaveBeenCalled();
-  }),
+  });
 
   test('if import button is invoked', () => {
-
-    const wrapper = shallow(<ButtonsContainer { ...props } />)
+    const wrapper = shallow(<ButtonsContainer {...props} />);
 
     wrapper.find('.import-button').simulate('click');
 
     expect(props.importSnapshots).toHaveBeenCalled();
-  }),
+  });
 
   test('if export button is invoked', () => {
-
-    const wrapper = shallow(<ButtonsContainer { ...props } />)
+    const wrapper = shallow(<ButtonsContainer {...props} />);
 
     wrapper.find('.export-button').simulate('click');
 
     expect(props.exportSnapshots).toHaveBeenCalled();
-  })
-})
+  });
+});

src/app/__tests__/StateContainter.test.js

@@ -1,19 +1,17 @@
-import { mount , configure } from 'enzyme';
-
+import { mount, configure } from 'enzyme';
 import React from 'react';
-import { MemoryRouter , NavLink } from 'react-router-dom';
-
+import { MemoryRouter, NavLink } from 'react-router-dom';
+import Adapter from 'enzyme-adapter-react-16';
 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', () => {                                       
+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', () => {
@@ -27,8 +25,9 @@ describe('testing react router path',()=>{
 describe('render test', () => {
   const wrapper = mount(
     <MemoryRouter>
-      <StateContainer snapshot={ {data :'root'} }/>
-    </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);
@@ -39,4 +38,4 @@ describe('render test', () => {
     expect(wrapper.find(Tree)).toHaveLength(0);
     expect(wrapper.find(Chart)).toHaveLength(1);
   });
-});
+});

src/app/__tests__/TravelContainer.test.js

@@ -1,14 +1,12 @@
 import { shallow, configure } from 'enzyme';
-
 import React from 'react';
-import ReactDOM from 'react-dom';
+import Adapter from 'enzyme-adapter-react-16';
 import TravelContainer from '../containers/TravelContainer';
 // import MainContainer from '../containers/MainContainer';
-import Dropdown from '../components/Dropdown';
+// import Dropdown from '../components/Dropdown';
 
-import Adapter from 'enzyme-adapter-react-16';
 
-configure({ adapter: new Adapter() })
+configure({ adapter: new Adapter() });
 
 const props = {
   moveBackward: jest.fn(),
@@ -19,23 +17,25 @@ const props = {
   snapshotIndex: 6,
   play: jest.fn(),
   playing: false,
-  pause: jest.fn()
-}
-
-const dropdownProps = {
-  selectedOption: { 
-    value: 1, 
-    label: 'label'
-  },
-  options: [0.5, 1, 2],
-  onChange: jest.fn(),
-}
-
-const options = [
-  { value: 2000, label: '0.5x' },
-  { value: 1000, label: '1.0x' },
-  { value: 500, label: '2.0x' },
-];
+  pause: jest.fn(),
+};
+
+// These are fake props to be used during dropdown tests
+
+// const dropdownProps = {
+//   selectedOption: {
+//     value: 1,
+//     label: 'label',
+//   },
+//   options: [0.5, 1, 2],
+//   onChange: jest.fn(),
+// };
+
+// const options = [
+//   { value: 2000, label: '0.5x' },
+//   { value: 1000, label: '1.0x' },
+//   { value: 500, label: '2.0x' },
+// ];
 
 describe('testing the backward and forward buttons', () => {
   test('if the backward button rewinds the playback', () => {
@@ -44,16 +44,16 @@ describe('testing the backward and forward buttons', () => {
     wrapper.find('.backward-button').simulate('click');
 
     expect(props.moveBackward).toHaveBeenCalled();
-  }),
+  });
 
   test('if the forward button forwards the playback', () => {
     const wrapper = shallow(<TravelContainer {...props} />);
 
     wrapper.find('.forward-button').simulate('click');
 
     expect(props.moveForward).toHaveBeenCalled();
-  })
-})
+  });
+});
 
 describe('testing the play button', () => {
   test('if the play button starts the playback', () => {
@@ -62,47 +62,43 @@ describe('testing the play button', () => {
     wrapper.find('.play-button').simulate('click');
 
     expect(props.play).toHaveBeenCalled();
-  }),
+  });
 
   test("if playback is not running, the button should state 'Play'", () => {
     const wrapper = shallow(<TravelContainer {...props} />);
 
     wrapper.find('.play-button');
 
     expect(wrapper.find('.play-button').text()).toBe('Play');
-  }),
+  });
 
   test("if playback is running, the button should state 'Pause'", () => {
     props.playing = true;
-    
+
     const wrapper = shallow(<TravelContainer {...props} />);
 
     wrapper.find('.play-button');
 
-
     expect(wrapper.find('.play-button').text()).toBe('Pause');
-  })
-})
+  });
+});
 
 describe('testing the playback speed', () => {
   test('if the playback dropdown states 0.5x the speed should be 0.5x', () => {
-
-    const wrapper = render(<TravelContainer { ...props } />);
+    const wrapper = shallow(<TravelContainer {...props} />);
 
     wrapper.find('Dropdown').simulate('change', { value: ['val'] });
     // wrapper.find('select').simulate('change', { value : 'hello'});
     // console.log('val',wrapper.find('Dropdown').simulate('select', { value: ['val'] }));
     // expect(wrapper.find('Dropdown').text()).toBe('0.5x')
-    expect(wrapper.find('select [selected]').val()).to.equal('key')
-    
+    expect(wrapper.find('select [selected]').val()).toEqual('key');
   });
-
   // test('if the playback dropdown states 1x the speed should be 1x', () => {
 
   //   const wrapper = shallow(<TravelContainer { ...dropdownProps } />);
 
   //   expect(wrapper.find('Dropdown').label).toBe('1.0x')
-    
+
   // });
 
   // test('if the playback dropdown states 2x the speed should be 2x', () => {
@@ -112,6 +108,6 @@ describe('testing the playback speed', () => {
   //   wrapper.find('Dropdown').simulate('click');
 
   //   expect(wrapper.find('Dropdown').label).toBe('2.0x')
-    
+
   // });
-})
+});

src/app/__tests__/actionContainer.test.js

@@ -1,29 +1,26 @@
 import { shallow, configure } from 'enzyme';
-
 import React from 'react';
-
+import Adapter from 'enzyme-adapter-react-16';
 import ActionContainer from '../containers/ActionContainer';
 
-import Adapter from 'enzyme-adapter-react-16';
 
-configure({ adapter: new Adapter() })
+configure({ adapter: new Adapter() });
 
 const props = {
-    snapshots: [],
-    snapshotIndex: 1,
-    handleChangeSnapshot: jest.fn(),
-    handleJumpSnapshot: jest.fn(),
-    emptySnapshot: jest.fn()
-}
+  snapshots: [],
+  snapshotIndex: 1,
+  handleChangeSnapshot: jest.fn(),
+  handleJumpSnapshot: jest.fn(),
+  emptySnapshot: jest.fn(),
+};
 
 
 describe('testing the emptySnapshot button', () => {
-  test('emptySnapshot button should be called', () => { 
-    
-    const wrapper = shallow((<ActionContainer { ...props }/>));
+  test('emptySnapshot button should be called', () => {
+    const wrapper = shallow((<ActionContainer {...props} />));
 
     wrapper.find('.empty-button').simulate('click');
-    
+
     expect(props.emptySnapshot).toHaveBeenCalled();
   });
-})
+});

src/app/__tests__/dropdown.test.js

@@ -6,33 +6,33 @@ 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} />);
-    });
+  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('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();
-        });
+  describe('handlechangeSpeed', () => {
+    test('should invoke handleChangeSpeed onChange', () => {
+      wrapper.simulate('change', { value: 2000, label: '0.5x' });
+      expect(props.handleChangeSpeed).toHaveBeenCalled();
     });
-});
+  });
+});