Skip to content
This repository has been archived by the owner on Feb 19, 2023. It is now read-only.

Commit

Permalink
feat(#105): finished test cases for image details
Browse files Browse the repository at this point in the history
  • Loading branch information
Andreas Gasser committed May 4, 2019
1 parent e24c9fa commit d598f2d
Show file tree
Hide file tree
Showing 11 changed files with 927 additions and 38 deletions.
71 changes: 41 additions & 30 deletions src/images/detail/DetailView.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -182,10 +186,6 @@ const DetailView = ({
history.push(path);
};

console.log(faces);
console.log(labels);
console.log(selectedFace);

return (
<StyledView>
<AddImageButton afterOnClick={() => history.push(Paths.HOME)} />
Expand All @@ -202,31 +202,31 @@ const DetailView = ({
<StyledBackButton onClick={() => history.push(Paths.HOME)} />
<StyledScrollableData>
<StyledHeading level="4" style={{ marginTop: '0rem'}}>Image Information</StyledHeading>
<Box>
<Box id="jestImageAttributes">
<Attribute attribute={{ name: 'Uploaded', value: getImageCreationDateTime(created) }} />
{metaValues.map(({ name, value }) => (
<Attribute key={`meta_attribute_${name}`} attribute={{ name, value }} />
))}
</Box>
<StyledHeading level="4">Labels ({labels.length})</StyledHeading>
<AsyncContainer loading={loading}>
<AsyncContainer id="jestLabelsAsyncContainer" loading={loading}>
<Labels
labels={labels}
selectedLabel={selectedLabel}
onLabelClick={(label) => handleLabelClick(label)}
/>
</AsyncContainer>
{ faces.length > 0 && (
<Fragment>
<div id="jestFacesContainer">
<StyledHeading level="4">Faces ({faces.length})</StyledHeading>
<AsyncContainer loading={loading}>
<AsyncContainer id="jestFacesAsyncContainer" loading={loading}>
<Faces
faces={faces}
selectedFace={selectedFace}
onFaceClick={(face) => handleFaceClick(face)}
/>
</AsyncContainer>
</Fragment>
</div>
)}
</StyledScrollableData>
</StyledDataBox>
Expand Down Expand Up @@ -254,5 +254,16 @@ DetailView.defaultProps = {
selectedLabel: null,
}

export const __testables__ = {
StyledBackButton,
StyledHeading,
StyledImageBoxContainer,
StyledImageBox,
StyledDataBox,
StyledScrollableData,
StyledView,
convertMetaToAttributes,
};

export default DetailView;

2 changes: 1 addition & 1 deletion src/images/detail/Faces.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
206 changes: 206 additions & 0 deletions src/images/detail/__data__/faces.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}]
16 changes: 16 additions & 0 deletions src/images/detail/__data__/image.json
View file
Original file line number Diff line number Diff line change
@@ -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
}
}
Loading

0 comments on commit d598f2d

Please sign in to comment.