diff --git a/src/images/detail/DetailView.jsx b/src/images/detail/DetailView.jsx index cf6b205..9160a52 100644 --- a/src/images/detail/DetailView.jsx +++ b/src/images/detail/DetailView.jsx @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect, useMemo } from 'react'; +import React, { useEffect, useMemo } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; @@ -121,14 +121,36 @@ const StyledView = styled(View)` } `; +const convertMetaToAttributes = (meta) => { + const { density, height, width, type, size } = meta; + return [ + { + name: 'Type', + value: type, + }, + { + name: 'Size', + value: size > 0 ? `${getFormattedFileSize(size)} MB` : null, + }, + { + name: 'Dimension', + value: height > 0 ? `${width}px x ${height}px` : null, + }, + { + name: 'Density', + value: density > 0 ? `${density} DPI` : null, + }, + ].filter(({ value }) => value !== null); +}; + const DetailView = ({ history, + image, labels, selectedLabel, faces, selectedFace, getImage, - image, getImageRequest, }) => { const { id: imageId, created, meta } = image; @@ -143,25 +165,7 @@ const DetailView = ({ // generate meta render array const metaValues = useMemo(() => { - const { density, height, width, type, size } = meta; - return [ - { - name: 'Type', - value: type, - }, - { - name: 'Size', - value: size > 0 ? `${getFormattedFileSize(size)} MB` : null, - }, - { - name: 'Dimension', - value: height > 0 ? `${width}px x ${height}px` : null, - }, - { - name: 'Density', - value: density > 0 ? `${density} DPI` : null, - }, - ].filter(({ value }) => value !== null); + return convertMetaToAttributes(meta); }, [meta]); // url handlers @@ -182,10 +186,6 @@ const DetailView = ({ history.push(path); }; - console.log(faces); - console.log(labels); - console.log(selectedFace); - return ( history.push(Paths.HOME)} /> @@ -202,14 +202,14 @@ const DetailView = ({ history.push(Paths.HOME)} /> Image Information - + {metaValues.map(({ name, value }) => ( ))} Labels ({labels.length}) - + { faces.length > 0 && ( - +
Faces ({faces.length}) - + handleFaceClick(face)} /> - +
)} @@ -254,5 +254,16 @@ DetailView.defaultProps = { selectedLabel: null, } +export const __testables__ = { + StyledBackButton, + StyledHeading, + StyledImageBoxContainer, + StyledImageBox, + StyledDataBox, + StyledScrollableData, + StyledView, + convertMetaToAttributes, +}; + export default DetailView; diff --git a/src/images/detail/Faces.jsx b/src/images/detail/Faces.jsx index 0d1b5f0..8714c3e 100644 --- a/src/images/detail/Faces.jsx +++ b/src/images/detail/Faces.jsx @@ -58,7 +58,7 @@ StyledFace.defaultProps = { selected: false, } -const Face = ({ face, number, ...props }) => { +export const Face = ({ face, number, ...props }) => { const { id, age, attributes, emotions } = face; // generate age attribute diff --git a/src/images/detail/__data__/faces.json b/src/images/detail/__data__/faces.json new file mode 100644 index 0000000..a842674 --- /dev/null +++ b/src/images/detail/__data__/faces.json @@ -0,0 +1,206 @@ +[{ + "id": "7efa73a7-6fe0-404b-a85e-e34abb20a251", + "age": { + "low": 20, + "high": 38, + "__typename": "FaceAge" + }, + "position": { + "height": 0.16048859059810638, + "width": 0.06429165601730347, + "left": 0.7339414358139038, + "top": 0.25065237283706665, + "__typename": "BoundingBox" + }, + "emotions": [{ + "name": "CALM", + "confidence": 53.679351806640625, + "__typename": "Attribute" + }, { + "name": "DISGUSTED", + "confidence": 14.890134811401367, + "__typename": "Attribute" + }, { + "name": "SAD", + "confidence": 10.600337028503418, + "__typename": "Attribute" + }, { + "name": "ANGRY", + "confidence": 9.131677627563477, + "__typename": "Attribute" + }, { + "name": "SURPRISED", + "confidence": 8.68793773651123, + "__typename": "Attribute" + }, { + "name": "HAPPY", + "confidence": 0.4520353376865387, + "__typename": "Attribute" + }, { + "name": "CONFUSED", + "confidence": 0, + "__typename": "Attribute" + }], + "attributes": [{ + "name": "gender", + "confidence": 61.0933837890625, + "value": "Male", + "__typename": "Attribute" + }, { + "name": "brightness", + "confidence": 100, + "value": "83.16773986816406", + "__typename": "Attribute" + }, { + "name": "sharpness", + "confidence": 100, + "value": "92.22801208496094", + "__typename": "Attribute" + }], + "__typename": "Face" +}, { + "id": "68858073-9f89-4b6d-9526-400fdf82ae2e", + "age": { + "low": 26, + "high": 43, + "__typename": "FaceAge" + }, + "position": { + "height": 0.15534932911396027, + "width": 0.06539079546928406, + "left": 0.1794459968805313, + "top": 0.2902233898639679, + "__typename": "BoundingBox" + }, + "emotions": [{ + "name": "CALM", + "confidence": 62.864418029785156, + "__typename": "Attribute" + }, { + "name": "DISGUSTED", + "confidence": 12.038032531738281, + "__typename": "Attribute" + }, { + "name": "ANGRY", + "confidence": 11.946447372436523, + "__typename": "Attribute" + }, { + "name": "SURPRISED", + "confidence": 8.280786514282227, + "__typename": "Attribute" + }, { + "name": "SAD", + "confidence": 2.8847672939300537, + "__typename": "Attribute" + }, { + "name": "HAPPY", + "confidence": 0.10791733115911484, + "__typename": "Attribute" + }, { + "name": "CONFUSED", + "confidence": 0, + "__typename": "Attribute" + }], + "attributes": [{ + "name": "gender", + "confidence": 76.8848876953125, + "value": "Male", + "__typename": "Attribute" + }, { + "name": "brightness", + "confidence": 100, + "value": "78.37348937988281", + "__typename": "Attribute" + }, { + "name": "sharpness", + "confidence": 100, + "value": "94.08262634277344", + "__typename": "Attribute" + }], + "__typename": "Face" +}, { + "id": "e686fda1-b83c-46b5-8086-81902f5580d4", + "age": { + "low": 26, + "high": 43, + "__typename": "FaceAge" + }, + "position": { + "height": 0.12948490679264069, + "width": 0.0694088414311409, + "left": 0.4533727467060089, + "top": 0.33818867802619934, + "__typename": "BoundingBox" + }, + "emotions": [{ + "name": "HAPPY", + "confidence": 99.68476867675781, + "__typename": "Attribute" + }, { + "name": "SURPRISED", + "confidence": 0.21237444877624512, + "__typename": "Attribute" + }, { + "name": "CALM", + "confidence": 0.027801742777228355, + "__typename": "Attribute" + }, { + "name": "DISGUSTED", + "confidence": 0.025570334866642952, + "__typename": "Attribute" + }, { + "name": "ANGRY", + "confidence": 0.025381267070770264, + "__typename": "Attribute" + }, { + "name": "SAD", + "confidence": 0.005187096539884806, + "__typename": "Attribute" + }, { + "name": "CONFUSED", + "confidence": 0, + "__typename": "Attribute" + }], + "attributes": [{ + "name": "eyeglasses", + "confidence": 99.98456573486328, + "value": "true", + "__typename": "Attribute" + }, { + "name": "eyesOpen", + "confidence": 100, + "value": "true", + "__typename": "Attribute" + }, { + "name": "gender", + "confidence": 99.29379272460938, + "value": "Female", + "__typename": "Attribute" + }, { + "name": "mouthOpen", + "confidence": 98.84275817871094, + "value": "true", + "__typename": "Attribute" + }, { + "name": "smile", + "confidence": 99.58173370361328, + "value": "true", + "__typename": "Attribute" + }, { + "name": "sunglasses", + "confidence": 99.93656158447266, + "value": "true", + "__typename": "Attribute" + }, { + "name": "brightness", + "confidence": 100, + "value": "60.014461517333984", + "__typename": "Attribute" + }, { + "name": "sharpness", + "confidence": 100, + "value": "83.14741516113281", + "__typename": "Attribute" + }], + "__typename": "Face" +}] \ No newline at end of file diff --git a/src/images/detail/__data__/image.json b/src/images/detail/__data__/image.json new file mode 100644 index 0000000..c1fe556 --- /dev/null +++ b/src/images/detail/__data__/image.json @@ -0,0 +1,16 @@ +{ + "id": "2a2bdf23-e73f-4a2a-913e-da29926a195c", + "created": "2019-02-09T08:12:11.736Z", + "name": "2a2bdf23-e73f-4a2a-913e-da29926a195c.jpeg", + "path": "d10074b0-1d6d-448c-9621-3a29cb5a2c85/2a2bdf23-e73f-4a2a-913e-da29926a195c.jpeg", + "meta": { + "type": "jpeg", + "size": 2264753, + "orientation": "LANDSCAPE", + "width": 4813, + "height": 3209, + "density": 72, + "numberOfFaces": 3, + "numberOfLabels": 17 + } +} \ No newline at end of file diff --git a/src/images/detail/__data__/labels.json b/src/images/detail/__data__/labels.json new file mode 100644 index 0000000..35a4170 --- /dev/null +++ b/src/images/detail/__data__/labels.json @@ -0,0 +1,156 @@ +[{ + "id": "a465d79f-f65c-44bd-9974-7d8ecb0325c7", + "name": "Restaurant", + "confidence": 99.84324645996094, + "parents": [], + "instances": [], + "__typename": "Label" +}, { + "id": "8bfbfb55-d4ac-46fc-8d09-3bc98a5040bb", + "name": "Human", + "confidence": 99.75186920166016, + "parents": [], + "instances": [], + "__typename": "Label" +}, { + "id": "f705f130-40ed-4c66-95e3-7d63e438ed5a", + "name": "Person", + "confidence": 99.75186920166016, + "parents": [], + "instances": [{ + "height": 0.788449764251709, + "width": 0.37145188450813293, + "left": 0.5232441425323486, + "top": 0.20031282305717468, + "__typename": "BoundingBox" + }, { + "height": 0.27881088852882385, + "width": 0.11530932039022446, + "left": 0.3354623317718506, + "top": 0.1961989402770996, + "__typename": "BoundingBox" + }, { + "height": 0.7772222757339478, + "width": 0.352791428565979, + "left": 0.03594960644841194, + "top": 0.20243647694587708, + "__typename": "BoundingBox" + }, { + "height": 0.3490219712257385, + "width": 0.3184428811073303, + "left": 0.3262154459953308, + "top": 0.2951163053512573, + "__typename": "BoundingBox" + }], + "__typename": "Label" +}, { + "id": "aec89fb8-7840-4462-9658-62a6bf54599f", + "name": "Sitting", + "confidence": 99.7125015258789, + "parents": ["Person"], + "instances": [], + "__typename": "Label" +}, { + "id": "30bd00f0-8a13-4f5a-9a5c-8408182bb75d", + "name": "Furniture", + "confidence": 98.73352813720703, + "parents": [], + "instances": [], + "__typename": "Label" +}, { + "id": "65b4c64e-0737-4b7a-be84-77c7577ceaca", + "name": "Chair", + "confidence": 98.73352813720703, + "parents": ["Furniture"], + "instances": [{ + "height": 0.35435470938682556, + "width": 0.30652856826782227, + "left": 0.012152209877967834, + "top": 0.6453336477279663, + "__typename": "BoundingBox" + }], + "__typename": "Label" +}, { + "id": "0ac2318e-67c3-4ddc-adc2-0711bb4766fe", + "name": "Sunglasses", + "confidence": 97.88621520996094, + "parents": ["Accessories"], + "instances": [{ + "height": 0.0482422336935997, + "width": 0.07262253016233444, + "left": 0.4590190351009369, + "top": 0.3799567222595215, + "__typename": "BoundingBox" + }], + "__typename": "Label" +}, { + "id": "71ab816d-8dc3-403a-9a5c-bff2bd7f73b5", + "name": "Accessory", + "confidence": 97.88621520996094, + "parents": [], + "instances": [], + "__typename": "Label" +}, { + "id": "d8436c1a-9d42-4070-9623-caa44e3bd2b6", + "name": "Accessories", + "confidence": 97.88621520996094, + "parents": [], + "instances": [], + "__typename": "Label" +}, { + "id": "86af5c75-9c6f-435f-8cb0-d4ae73e26f4c", + "name": "Cafe", + "confidence": 95.34770965576172, + "parents": ["Restaurant"], + "instances": [], + "__typename": "Label" +}, { + "id": "6b934aa7-35fb-4f32-a69b-2d5a067db392", + "name": "Food Court", + "confidence": 94.11480712890625, + "parents": ["Restaurant", "Food"], + "instances": [], + "__typename": "Label" +}, { + "id": "ad9d4ff2-5961-442e-a985-3af9a71dd1c3", + "name": "Food", + "confidence": 94.11480712890625, + "parents": [], + "instances": [], + "__typename": "Label" +}, { + "id": "c53fed94-b6b5-44cc-90c4-2d221051c895", + "name": "Cafeteria", + "confidence": 92.61895751953125, + "parents": ["Restaurant"], + "instances": [], + "__typename": "Label" +}, { + "id": "4deaecd3-f04e-4527-9665-63bb2c9fb6be", + "name": "Dating", + "confidence": 82.52543640136719, + "parents": ["Person"], + "instances": [], + "__typename": "Label" +}, { + "id": "0aaf6e3f-fb3a-4853-9746-31179fe464ab", + "name": "Electronics", + "confidence": 58.003883361816406, + "parents": [], + "instances": [], + "__typename": "Label" +}, { + "id": "cb2b4155-f2fd-406e-befa-cf2e5126ee0d", + "name": "Hair", + "confidence": 51.47688293457031, + "parents": [], + "instances": [], + "__typename": "Label" +}, { + "id": "54d71713-637c-4124-a4de-42b8b176ac58", + "name": "Couch", + "confidence": 50.86988830566406, + "parents": ["Furniture"], + "instances": [], + "__typename": "Label" +}] \ No newline at end of file diff --git a/src/images/detail/__data__/selectedFace.json b/src/images/detail/__data__/selectedFace.json new file mode 100644 index 0000000..fe53288 --- /dev/null +++ b/src/images/detail/__data__/selectedFace.json @@ -0,0 +1,61 @@ +{ + "id": "7efa73a7-6fe0-404b-a85e-e34abb20a251", + "age": { + "low": 20, + "high": 38, + "__typename": "FaceAge" + }, + "position": { + "height": 0.16048859059810638, + "width": 0.06429165601730347, + "left": 0.7339414358139038, + "top": 0.25065237283706665, + "__typename": "BoundingBox" + }, + "emotions": [{ + "name": "CALM", + "confidence": 53.679351806640625, + "__typename": "Attribute" + }, { + "name": "DISGUSTED", + "confidence": 14.890134811401367, + "__typename": "Attribute" + }, { + "name": "SAD", + "confidence": 10.600337028503418, + "__typename": "Attribute" + }, { + "name": "ANGRY", + "confidence": 9.131677627563477, + "__typename": "Attribute" + }, { + "name": "SURPRISED", + "confidence": 8.68793773651123, + "__typename": "Attribute" + }, { + "name": "HAPPY", + "confidence": 0.4520353376865387, + "__typename": "Attribute" + }, { + "name": "CONFUSED", + "confidence": 0, + "__typename": "Attribute" + }], + "attributes": [{ + "name": "gender", + "confidence": 61.0933837890625, + "value": "Male", + "__typename": "Attribute" + }, { + "name": "brightness", + "confidence": 100, + "value": "83.16773986816406", + "__typename": "Attribute" + }, { + "name": "sharpness", + "confidence": 100, + "value": "92.22801208496094", + "__typename": "Attribute" + }], + "__typename": "Face" +} \ No newline at end of file diff --git a/src/images/detail/__data__/selectedLabel.json b/src/images/detail/__data__/selectedLabel.json new file mode 100644 index 0000000..1236c64 --- /dev/null +++ b/src/images/detail/__data__/selectedLabel.json @@ -0,0 +1,32 @@ +{ + "id": "f705f130-40ed-4c66-95e3-7d63e438ed5a", + "name": "Person", + "confidence": 99.75186920166016, + "parents": [], + "instances": [{ + "height": 0.788449764251709, + "width": 0.37145188450813293, + "left": 0.5232441425323486, + "top": 0.20031282305717468, + "__typename": "BoundingBox" + }, { + "height": 0.27881088852882385, + "width": 0.11530932039022446, + "left": 0.3354623317718506, + "top": 0.1961989402770996, + "__typename": "BoundingBox" + }, { + "height": 0.7772222757339478, + "width": 0.352791428565979, + "left": 0.03594960644841194, + "top": 0.20243647694587708, + "__typename": "BoundingBox" + }, { + "height": 0.3490219712257385, + "width": 0.3184428811073303, + "left": 0.3262154459953308, + "top": 0.2951163053512573, + "__typename": "BoundingBox" + }], + "__typename": "Label" +} \ No newline at end of file diff --git a/src/images/detail/__tests__/DetailView.test.js b/src/images/detail/__tests__/DetailView.test.js new file mode 100644 index 0000000..fe93a92 --- /dev/null +++ b/src/images/detail/__tests__/DetailView.test.js @@ -0,0 +1,362 @@ +/* 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 DetailView, { __testables__ } from '../DetailView'; +import Labels from '../Labels'; +import Label from '../Label'; +import Faces, { Face } from '../Faces'; +import { Attribute } from '../Attribute'; +import Image from '../Image'; +import AddImageButton from '../../AddImageButton'; + +import * as Paths from '../../../paths'; + +import imageJson from '../__data__/image.json'; +import labelsJson from '../__data__/labels.json'; +import facesJson from '../__data__/faces.json'; +import selectedFaceJson from '../__data__/selectedFace.json'; +import selectedLabelJson from '../__data__/selectedLabel.json'; + +const { + StyledBackButton, + StyledHeading, + StyledImageBoxContainer, + StyledImageBox, + StyledDataBox, + StyledScrollableData, + StyledView, + convertMetaToAttributes, +} = __testables__; + +const { createMockStore } = testUtils; + + +describe('DetailView test suite', () => { + + const initialProps = { + history: { + push: jest.fn(), + }, + image: imageJson, + faces: facesJson, + labels: labelsJson, + selectedFace: selectedFaceJson, + selectedLabel: selectedLabelJson, + getImage: jest.fn(), + getImageRequest: { + error: null, + loading: false, + }, + }; + + const mockStore = createMockStore(); + + afterEach(() => { + // clear mocks + initialProps.history.push.mockClear(); + initialProps.getImage.mockClear(); + }); + + const getDetailView = (props) => { + const store = mockStore(); + const provider = mount( + + + + ); + + const wrapper = provider.find(DetailView); + return wrapper; + }; + + it('should render', () => { + const wrapper = getDetailView(); + expect(wrapper.exists()).toBeTruthy(); + }); + + it('should render AddImageButton', () => { + const wrapper = getDetailView(); + expect(wrapper.exists()).toBeTruthy(); + + const addImageButton = wrapper.find(AddImageButton); + expect(addImageButton.exists()).toBeTruthy(); + }); + + it('should render image with props', () => { + const wrapper = getDetailView(); + expect(wrapper.exists()).toBeTruthy(); + + const image = wrapper.find(Image); + expect(image.exists()).toBeTruthy(); + + const props = image.props(); + expect(props.image).toEqual(initialProps.image); + expect(props.selectedLabel).toEqual(initialProps.selectedLabel); + expect(props.selectedFace).toEqual(initialProps.selectedFace); + }); + + it('should render back button', () => { + const wrapper = getDetailView(); + expect(wrapper.exists()).toBeTruthy(); + + const backButton = wrapper.find(StyledBackButton); + expect(backButton.exists()).toBeTruthy(); + }); + + it('should render image attributes', () => { + const wrapper = getDetailView(); + expect(wrapper.exists()).toBeTruthy(); + + const imageAttributesWrapper = wrapper.find('#jestImageAttributes'); + expect(imageAttributesWrapper.exists()).toBeTruthy(); + + const metaAttributes = convertMetaToAttributes(initialProps.image.meta) + + const attributes = imageAttributesWrapper.find(Attribute); + expect(attributes.length).toEqual(metaAttributes.length + 1); + + const attributeNames = ['Uploaded', 'Type', 'Size', 'Dimension', 'Density']; + attributes.forEach((attribute) => { + expect(attributeNames.includes(attribute.props().attribute.name)).toBeTruthy(); + }) + }); + + it('should render labels if not loading', () => { + const wrapper = getDetailView({ + ...initialProps, + getImageRequest: { + ...initialProps.getImageRequest, + loading: false, + }, + }); + expect(wrapper.exists()).toBeTruthy(); + + const labels = wrapper.find(Labels); + expect(labels.exists()).toBeTruthy(); + + const props = labels.props(); + expect(props.labels).toEqual(initialProps.labels); + expect(props.selectedLabel).toEqual(initialProps.selectedLabel); + }); + + it('should render loading state for labels if loading', () => { + const wrapper = getDetailView({ + ...initialProps, + getImageRequest: { + ...initialProps.getImageRequest, + loading: true, + }, + }); + expect(wrapper.exists()).toBeTruthy(); + + const asyncContainer = wrapper.find('#jestLabelsAsyncContainer'); + expect(asyncContainer.exists()).toBeTruthy(); + + const labels = wrapper.find(Labels); + expect(labels.exists()).toBeFalsy(); + }); + + it('should not load faces if number of faces is equal zero', () => { + const wrapper = getDetailView({ + ...initialProps, + faces: [], + }); + expect(wrapper.exists()).toBeTruthy(); + + const faces = wrapper.find('#jestFacesContainer'); + expect(faces.exists()).toBeFalsy(); + }); + + it('should render faces if not loading', () => { + const wrapper = getDetailView({ + ...initialProps, + getImageRequest: { + ...initialProps.getImageRequest, + loading: false, + }, + }); + expect(wrapper.exists()).toBeTruthy(); + + const faces = wrapper.find(Faces); + expect(faces.exists()).toBeTruthy(); + + const props = faces.props(); + expect(props.faces).toEqual(initialProps.faces); + expect(props.selectedFace).toEqual(initialProps.selectedFace); + }); + + it('should render loading state for faces if loading', () => { + const wrapper = getDetailView({ + ...initialProps, + getImageRequest: { + ...initialProps.getImageRequest, + loading: true, + }, + }); + expect(wrapper.exists()).toBeTruthy(); + + const asyncContainer = wrapper.find('#jestFacesAsyncContainer'); + expect(asyncContainer.exists()).toBeTruthy(); + + const faces = wrapper.find(Faces); + expect(faces.exists()).toBeFalsy(); + }); + + it('should request image details if labels and faces are not set', () => { + expect(initialProps.getImage).not.toHaveBeenCalled(); + + const wrapper = getDetailView({ + ...initialProps, + faces: [], + labels: [], + }); + expect(wrapper.exists()).toBeTruthy(); + + expect(initialProps.getImage).toHaveBeenCalled(); + expect(initialProps.getImage).toHaveBeenCalledWith(initialProps.image.id); + }); + + it('should move to home view after new image upload', () => { + const wrapper = getDetailView(); + expect(wrapper.exists()).toBeTruthy(); + + const addImageButton = wrapper.find(AddImageButton); + expect(addImageButton.exists()).toBeTruthy(); + + expect(initialProps.history.push).not.toHaveBeenCalled(); + + addImageButton.props().afterOnClick(); + expect(initialProps.history.push).toHaveBeenCalled(); + }); + + it('should convert meta values to attributes', () => { + const { meta } = initialProps.image; + + const attributes = convertMetaToAttributes(meta); + expect(attributes).toEqual([ + { + name: 'Type', + value: 'jpeg', + }, { + name: 'Size', + value: '2.26 MB', + }, { + name: 'Dimension', + value: '4813px x 3209px', + }, { + name: 'Density', + value: '72 DPI', + }, + ]); + }); + + it('should filter out invalid image meta properties', () => { + const meta = { + ...initialProps.image.meta, + size: 0, + height: 0, + density: 0, + }; + + const attributes = convertMetaToAttributes(meta); + expect(attributes).toEqual([ + { + name: 'Type', + value: 'jpeg', + }, + ]); + }); + + it('should pass face id to browser on face click', () => { + const wrapper = getDetailView(); + expect(wrapper.exists()).toBeTruthy(); + + const faces = wrapper.find(Face); + expect(faces.exists()).toBeTruthy(); + + expect(initialProps.history.push).not.toHaveBeenCalled(); + + // click one face + const face = faces.at(0); + expect(face.exists()).toBeTruthy(); + + face.simulate('click'); + + expect(initialProps.history.push).toHaveBeenCalled(); + }); + + it('should pass label id to browser on label click', () => { + const wrapper = getDetailView(); + expect(wrapper.exists()).toBeTruthy(); + + const labels = wrapper.find(Label); + expect(labels.exists()).toBeTruthy(); + + expect(initialProps.history.push).not.toHaveBeenCalled(); + + // click one face + const label = labels.at(2); + expect(label.exists()).toBeTruthy(); + + label.simulate('click'); + + expect(initialProps.history.push).toHaveBeenCalled(); + }); + + it('should go back on back button click', () => { + const wrapper = getDetailView(); + expect(wrapper.exists()).toBeTruthy(); + + const backButton = wrapper.find(StyledBackButton); + expect(backButton.exists()).toBeTruthy(); + + expect(initialProps.history.push).not.toHaveBeenCalled(); + + backButton.simulate('click'); + expect(initialProps.history.push).toHaveBeenCalled(); + expect(initialProps.history.push).toHaveBeenCalledWith(Paths.HOME); + }); + + // check for styling + it('should render StyledBackButton consistently', () => { + const wrapper = shallow(); + expect(toJson(wrapper.dive())).toMatchSnapshot(); + }); + + it('should render StyledHeading consistently', () => { + const wrapper = shallow(); + expect(toJson(wrapper.dive())).toMatchSnapshot(); + }); + + it('should render StyledImageBoxContainer consistently', () => { + const wrapper = shallow(); + expect(toJson(wrapper.dive())).toMatchSnapshot(); + }); + + it('should render StyledImageBox consistently', () => { + const wrapper = shallow(); + expect(toJson(wrapper.dive())).toMatchSnapshot(); + }); + + it('should render StyledDataBox consistently', () => { + const wrapper = shallow(); + expect(toJson(wrapper.dive())).toMatchSnapshot(); + }); + + it('should render StyledScrollableData consistently', () => { + const wrapper = shallow(); + expect(toJson(wrapper.dive())).toMatchSnapshot(); + }); + + it('should render StyledView consistently', () => { + const wrapper = shallow(); + expect(toJson(wrapper.dive())).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/src/images/detail/__tests__/Image.test.js b/src/images/detail/__tests__/Image.test.js index a596e6d..b8977e0 100644 --- a/src/images/detail/__tests__/Image.test.js +++ b/src/images/detail/__tests__/Image.test.js @@ -3,8 +3,6 @@ import { mount, shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; import 'jest-styled-components'; -import { Paragraph } from 'grommet'; - import Image, { __testables__ } from '../Image'; const { @@ -15,7 +13,11 @@ const { getPositions, } = __testables__; -describe('Faces test suite', () => { + /** + * Can't test handleResetForm hooks with Enzyme. + * Waiting for Hooks support in Enzyme + */ +describe('Image test suite', () => { const mockedImage = { meta: { height: 100, diff --git a/src/images/detail/__tests__/__snapshots__/DetailView.test.js.snap b/src/images/detail/__tests__/__snapshots__/DetailView.test.js.snap new file mode 100644 index 0000000..b0d413d --- /dev/null +++ b/src/images/detail/__tests__/__snapshots__/DetailView.test.js.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DetailView test suite should render StyledBackButton consistently 1`] = ` + + + +`; + +exports[`DetailView test suite should render StyledDataBox consistently 1`] = ` + + + +`; + +exports[`DetailView test suite should render StyledHeading consistently 1`] = ` + + + +`; + +exports[`DetailView test suite should render StyledImageBox consistently 1`] = ` + + + +`; + +exports[`DetailView test suite should render StyledImageBoxContainer consistently 1`] = ` + + + +`; + +exports[`DetailView test suite should render StyledScrollableData consistently 1`] = ` + + + +`; + +exports[`DetailView test suite should render StyledView consistently 1`] = ` + + + +`; diff --git a/src/images/detail/__tests__/__snapshots__/Image.test.js.snap b/src/images/detail/__tests__/__snapshots__/Image.test.js.snap index 4513ab5..1491c74 100644 --- a/src/images/detail/__tests__/__snapshots__/Image.test.js.snap +++ b/src/images/detail/__tests__/__snapshots__/Image.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Faces test suite should render ImageContainer consistently 1`] = ` +exports[`Image test suite should render ImageContainer consistently 1`] = ` .c0 { display: -webkit-box; display: -webkit-flex; @@ -16465,19 +16465,19 @@ string", `; -exports[`Faces test suite should render StyledAsyncImage consistently 1`] = ` +exports[`Image test suite should render StyledAsyncImage consistently 1`] = ` `; -exports[`Faces test suite should render StyledImageWrapper consistently 1`] = ` +exports[`Image test suite should render StyledImageWrapper consistently 1`] = ` `; -exports[`Faces test suite should render StyledSelector consistently 1`] = ` +exports[`Image test suite should render StyledSelector consistently 1`] = `