diff --git a/package-lock.json b/package-lock.json index bd7c20cdd..bc6f08664 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8164,9 +8164,9 @@ } }, "lodash": { - "version": "4.17.5", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz", - "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==" + "version": "4.17.10", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", + "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" }, "lodash-es": { "version": "4.17.10", diff --git a/package.json b/package.json index 024512c3c..14b0b263c 100644 --- a/package.json +++ b/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": { diff --git a/src/components/Home.js b/src/components/Home.js index db809b109..610b80dd3 100644 --- a/src/components/Home.js +++ b/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); diff --git a/src/components/agreement/Agreement.js b/src/components/agreement/Agreement.js index 7f90fbb69..a053a103e 100644 --- a/src/components/agreement/Agreement.js +++ b/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'; diff --git a/src/tests/intergration/Home.test.js b/src/tests/intergration/Home.test.js index 69dde7f3f..fa2e994b2 100644 --- a/src/tests/intergration/Home.test.js +++ b/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( - + + + + + , ); - 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( -// -// -// -// ); -// 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( + + + + + + + , + ); + 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); + }); + }); }); diff --git a/src/tests/intergration/mockAgreement.js b/src/tests/intergration/mockAgreement.js new file mode 100644 index 000000000..92380585b --- /dev/null +++ b/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; diff --git a/src/tests/intergration/mockData.js b/src/tests/intergration/mockData.js index 1b6f7016e..ea26a99dd 100644 --- a/src/tests/intergration/mockData.js +++ b/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}`,