DONE basic integration testing

package.json

@@ -9,8 +9,7 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "jspdf": "^1.3.5",
     "jwt-decode": "^2.2.0",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.debounce": "^4.0.8",
+    "lodash": "^4.17.10",
     "moment": "^2.21.0",
     "node-sass-chokidar": "^0.0.3",
     "normalizr": "^3.2.4",
@@ -26,8 +25,8 @@
     "react-test-renderer": "^16.3.2",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
     "redux-mock-store": "^1.5.3",
+    "redux-thunk": "^2.2.0",
     "semantic-ui-react": "^0.78.2"
   },
   "devDependencies": {

src/components/Home.js

@@ -1,23 +1,13 @@
 import React, { Component } from 'react';
-// import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Agreement from './agreement';
-// import { getAgreements, getAgreementsPagination } from '../reducers/rootReducer';
 
 /* eslint-disable react/prefer-stateless-function */
 const propTypes = {
-  location: PropTypes.shape({ search: PropTypes.string }),
-  history: PropTypes.shape({}),
-};
-const defaultProps = {
-  location: {
-    search: '',
-    pathname: '/home',
-  },
-  history: {
-    push: () => {},
-  },
+  location: PropTypes.shape({ search: PropTypes.string }).isRequired,
 };
+
 class Home extends Component {
   componentDidMount() {
 
@@ -30,15 +20,5 @@ class Home extends Component {
   }
 }
 
-// const mapStateToProps = (state) => {
-//   return {
-//     agreements: getAgreements(state),
-//     agreementsPagination: getAgreementsPagination(state),
-//     plan: getPlan(state),
-//     agreementsMap: getAlbums(state),
-//   };
-// };
 Home.propTypes = propTypes;
-Home.defaultProps = defaultProps;
-export default Home;
-// export default connect(null, {})(Home);
+export default withRouter(Home);

src/components/agreement/Agreement.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
+import { debounce } from 'lodash';
 import AgreementTable from './AgreementTable';
 import AgreementSearch from './AgreementSearch';
 import { Banner } from '../common';

src/tests/intergration/Home.test.js

@@ -3,15 +3,21 @@ import MockAdapter from 'axios-mock-adapter';
 import { Provider } from 'react-redux';
 import { mount } from 'enzyme';
 import thunk from 'redux-thunk';
+import { BrowserRouter, MemoryRouter } from 'react-router-dom';
+import _ from 'lodash';
 
 import { axios } from '../../utils';
 import Home from '../../components/Home';
 import { storeAuthData, storeUser } from '../../actions';
 import { getAgreements } from '../../reducers/rootReducer';
 import { configureMockStore, flushAllPromises } from '../helpers/utils';
-import { mockRequestHeader, mockAgreements } from './mockData';
+import { ELEMENT_ID } from '../../constants/variables';
+import { mockRequestHeader, mockAgreements, mockAgreement } from './mockData';
 import * as API from '../../constants/API';
 
+// mock lodash debounce in jest
+_.debounce = jest.fn(fn => fn);
+
 let store;
 const mockAxios = new MockAdapter(axios);
 const mockAuthData = {
@@ -20,13 +26,13 @@ const mockAuthData = {
 const mockUser = {
   id: 'user_id',
 };
+
 beforeEach(() => {
   store = configureMockStore([thunk]);
   store.dispatch(storeAuthData(mockAuthData));
   store.dispatch(storeUser(mockUser));
   mockAxios.reset();
 });
-
 /* eslint-disable function-paren-newline */
 describe('Integration testing', () => {
   it('Component initializes properly', async () => {
@@ -36,102 +42,46 @@ describe('Integration testing', () => {
     };
 
     mockAxios.onGet(API.SEARCH_AGREEMENTS_ENDPOINT, config).reply(200, mockAgreements);
+
     const wrapper = mount(
       <Provider store={store}>
-        <Home />
+        <BrowserRouter>
+          <MemoryRouter initialEntries={['/home']}>
+            <Home />
+          </MemoryRouter>
+        </BrowserRouter>
       </Provider>,
     );
-
     await flushAllPromises();
     // Forces a re-render
     wrapper.update();
     expect(getAgreements(store.getState())).toHaveLength(10);
   });
-//   describe('Browse functionalities', () => {
-//     const query = "test";
-//     const filterType = "album";
-//     const mockSearchAlbumResponse = {
-//       albums: {
-//         items: mockFetchSavedAlbumsResponse.items.map(item => item.album),
-//       },
-//     };
-//     let wrapper;
-
-//     beforeEach(() => {
-//       mockAxios
-//       .onGet(API.GET_LIBRARY_LINK(), mockRequestHeader).reply(200, mockFetchSavedAlbumsResponse)
-//       .onGet(API.SEARCH_LINK(query, filterType), mockRequestHeader).reply(200, mockSearchAlbumResponse);
-
-//       wrapper = mount(
-//         <Provider store={store}>
-//           <Home />
-//         </Provider>
-//       );
-//       wrapper.find('.form-control').simulate('change', {target: { value: 'test' }});
-//       wrapper.find('button').simulate('submit');
-//     });
-
-//     it('Submits query and searchs for albums', async () => {
-//       await flushAllPromises();
-//       wrapper.update();
-
-//       expect(wrapper.find('.card')).toHaveLength(3);
-//       expect(wrapper.find('.artist-filter button')).toHaveLength(3);
-
-//       expect(wrapper.find('.artist-filter button').at(0).text()).toEqual('All');
-//       expect(wrapper.find('.artist-filter button').at(1).text()).toEqual('A.A.L');
-//       expect(wrapper.find('.artist-filter button').at(2).text()).toEqual('Alvvays');
-
-//       expect(wrapper.find('.card button').at(0).text()).toEqual("Remove");
-//       expect(wrapper.find('.card button').at(1).text()).toEqual("Remove");
-//       expect(wrapper.find('.card button').at(2).text()).toEqual("Remove");
-//     });
 
-//     it('Favoriting/Unfavoriting an album adds/removes the album from the library', async () => {
-//       const albumId = "1uzfGk9vxMXfaZ2avqwxod";
-//       mockAxios
-//         .onPut(API.ADD_LIBRARY_ALBUM_LINK(), [albumId]).reply(200, { success: true })
-//         .onAny(API.DELETE_LIBRARY_ALBUM_LINK(albumId), mockRequestHeader).reply(200, { success: true });
-
-//       await flushAllPromises();
-//       wrapper.update();
-//       //Should have the same 3 albums in library and search results
-//       expect(store.getState().LIBRARY.albumIds).toHaveLength(3);
-
-//       //Unfavorite the first album
-//       wrapper.find('.card button').at(0).simulate('click');
-
-//       await flushAllPromises();
-//       wrapper.update();
-//       //Now there should be only 2 albums in library
-//       expect(store.getState().LIBRARY.albumIds).toHaveLength(2);
-//       expect(store.getState().LIBRARY.albumIds.indexOf("1uzfGk9vxMXfaZ2avqwxod")).toEqual(-1);
-
-//       //Favorite the same album again
-//       wrapper.find('.card button').at(0).simulate('click');
-
-//       await flushAllPromises();
-//       wrapper.update();
-
-//       //Those albums should reappear in the library again
-//       expect(store.getState().LIBRARY.albumIds).toHaveLength(3);
-//       expect(store.getState().LIBRARY.albumIds.indexOf("1uzfGk9vxMXfaZ2avqwxod")).toBeGreaterThan(0);
-//     });
-
-//     it('Click an artist filter will filter the search results', async () => {
-//       const artistId = "329iU5aUf9pGiYFbjE9xqQ";
-//       mockAxios.onGet(API.GET_ARTIST_LINK(artistId), mockRequestHeader).reply(200, mockArtistResponse);
-
-//       await flushAllPromises();
-//       wrapper.update();
-//       expect(wrapper.find('.card')).toHaveLength(3);
-
-//       wrapper.find('.artist-filter button').filterWhere(node => node.text() === 'A.A.L').simulate('click');
-
-//       await flushAllPromises();
-//       wrapper.update();
-//       expect(wrapper.find('.card')).toHaveLength(1);
-//       expect(wrapper.find('.artist-info')).toHaveLength(1);
-//     });
-//   });
+  describe('Browse functionalities', () => {
+    it('search agreements by RAN number', async () => {
+      const config = {
+        ...mockRequestHeader(mockAuthData.access_token),
+        params: { term: 'RAN075974', page: '1', limit: 10 },
+      };
+
+      mockAxios.onGet(API.SEARCH_AGREEMENTS_ENDPOINT, config).reply(200, mockAgreement);
+      const wrapper = mount(
+        <Provider store={store}>
+          <BrowserRouter>
+            <MemoryRouter initialEntries={['/home']}>
+              <Home />
+            </MemoryRouter>
+          </BrowserRouter>
+        </Provider>,
+      );
+      await flushAllPromises();
+      wrapper.update();
+
+      wrapper.find(`#${ELEMENT_ID.SEARCH_TERM}`).simulate('change', { target: { id: ELEMENT_ID.SEARCH_TERM, value: 'RAN075974' } });
+      await flushAllPromises();
+      wrapper.update();
+      expect(getAgreements(store.getState())).toHaveLength(1);
+    });
+  });
 });

src/tests/intergration/mockAgreement.js

@@ -0,0 +1,14 @@
+const mockAgreement = {
+  perPage: 10,
+  currentPage: 1,
+  totalItems: 1513,
+  totalPages: 152,
+  agreements: [
+    {
+      id: 'RAN075974',
+      plans: [],
+    },
+  ],
+};
+
+export default mockAgreement;

src/tests/intergration/mockData.js

@@ -1,5 +1,6 @@
 export { default as mockAgreements } from './mockAgreements';
 export { default as mockPlan } from './mockPlan';
+export { default as mockAgreement } from './mockAgreement';
 export const mockRequestHeader = token => ({
   headers: {
     'Authorization': `Bearer ${token}`,