diff --git a/src/images/detail/__tests__/Container.test.js b/src/images/detail/__tests__/Container.test.js index e18852f..7441a8b 100644 --- a/src/images/detail/__tests__/Container.test.js +++ b/src/images/detail/__tests__/Container.test.js @@ -3,7 +3,7 @@ import { getImage } from '../../../redux/images'; const { select, mapDispatchToProps, mapKeyToValue } = __testables__; -describe('auth register container test suite', () => { +describe('image details container test suite', () => { const expectedInitialState = { image: undefined, labels: [], diff --git a/src/images/list/Container.js b/src/images/list/Container.js index c797e46..a62178c 100644 --- a/src/images/list/Container.js +++ b/src/images/list/Container.js @@ -15,4 +15,9 @@ const mapDispatchToProps = ({ listImages, }); +export const __testables__ = { + select, + mapDispatchToProps, +}; + export default connect(select, mapDispatchToProps)(ListView); diff --git a/src/images/list/ListView.jsx b/src/images/list/ListView.jsx index 2ecc339..dce258c 100644 --- a/src/images/list/ListView.jsx +++ b/src/images/list/ListView.jsx @@ -28,7 +28,6 @@ ListView.propTypes = { PropTypes.shape({}) ).isRequired, addImageRequest: HOCRequestPropTypes.isRequired, - listImages: PropTypes.func.isRequired, }; ListView.defaultProps = {}; diff --git a/src/images/list/__tests__/Container.test.js b/src/images/list/__tests__/Container.test.js new file mode 100644 index 0000000..68dfbc5 --- /dev/null +++ b/src/images/list/__tests__/Container.test.js @@ -0,0 +1,38 @@ +import { __testables__ } from '../Container'; +import { listImages } from '../../../redux/images'; + +const { select, mapDispatchToProps, mapKeyToValue } = __testables__; + +describe('images list container test suite', () => { + const expectedInitialState = { + images: [], + addImageRequest: undefined, + }; + + const initialProps = { + match: { + params: { + id: null, + }, + }, + location: { + search: '', + }, + }; + + it('should return container state', () => { + const state = select({}, initialProps); + expect(state).toEqual(expectedInitialState); + + expect(Object.keys(state)).toEqual([ + 'images', + 'addImageRequest', + ]); + }); + + it('should return redux actions', () => { + expect(mapDispatchToProps).toEqual({ + listImages, + }); + }); +}); diff --git a/src/images/list/__tests__/ListView.test.js b/src/images/list/__tests__/ListView.test.js new file mode 100644 index 0000000..1382947 --- /dev/null +++ b/src/images/list/__tests__/ListView.test.js @@ -0,0 +1,94 @@ +/* globals testUtils */ +import React from 'react'; +import { mount, shallow } from 'enzyme'; +import { Provider } from 'react-redux'; +import toJson from 'enzyme-to-json'; +import 'jest-styled-components'; + +import ListView from '../ListView'; +import ImageList from '../ImageList'; +import AddImageButton from '../../AddImageButton'; + +import * as Paths from '../../../paths'; + +const { createMockStore } = testUtils; + +describe('ListView test suite', () => { + + const initialProps = { + history: { + push: jest.fn(), + }, + images: [], + onImageClick: jest.fn(), + addImageRequest: { + error: null, + loading: false, + }, + }; + + const mockStore = createMockStore(); + + afterEach(() => { + // clear mocks + initialProps.history.push.mockClear(); + initialProps.onImageClick.mockClear(); + }); + + const getListView = (props) => { + const store = mockStore(); + const provider = mount( + + + + ); + + const wrapper = provider.find(ListView); + return wrapper; + }; + + it('should render', () => { + const wrapper = getListView(); + expect(wrapper.exists()).toBeTruthy(); + }); + + it('should render AddImageButton', () => { + const wrapper = getListView(); + expect(wrapper.exists()).toBeTruthy(); + + const addImageButton = wrapper.find(AddImageButton); + expect(addImageButton.exists()).toBeTruthy(); + }); + + it('should render ImageList with props', () => { + const wrapper = getListView(); + expect(wrapper.exists()).toBeTruthy(); + + const imageList = wrapper.find(ImageList); + expect(imageList.exists()).toBeTruthy(); + + const props = imageList.props(); + expect(props.images).toEqual(initialProps.images); + expect(props.addImageRequest).toEqual(initialProps.addImageRequest); + }); + + it('should move to image detail view after image upload', () => { + const imageId = '2a2bdf23-e73f-4a2a-913e-da29926a195c'; + const wrapper = getListView(); + expect(wrapper.exists()).toBeTruthy(); + + const imageList = wrapper.find(ImageList); + expect(imageList.exists()).toBeTruthy(); + + expect(initialProps.history.push).not.toHaveBeenCalled(); + + // fire event + imageList.props().onImageClick({ id: imageId }); + + expect(initialProps.history.push).toHaveBeenCalled(); + expect(initialProps.history.push).toHaveBeenCalledWith(Paths.GET_IMAGES_DETAIL(imageId)); + }); +}); diff --git a/src/redux/images/selectors.js b/src/redux/images/selectors.js index 610a80d..bcdf2f8 100644 --- a/src/redux/images/selectors.js +++ b/src/redux/images/selectors.js @@ -5,7 +5,7 @@ export const imagesStateSelector = state => state.images || {}; export const imagesListSelector = createSelector( imagesStateSelector, ({ ids, byId }) => { - if (ids.length === 0) { + if (!ids || !byId || ids.length === 0) { return []; }