feat(#105): added test cases for details Attribute component and cont…

…ainer

src/images/detail/Attribute.jsx

@@ -10,6 +10,8 @@ export const AttributePropType = PropTypes.shape({
   value: PropTypes.string,
 });
 
+const getFontWeith = ({ bold }) => bold ? 600 : 400;
+
 // components
 const StyledConfidence = styled.span`
   display: inline-block;
@@ -24,7 +26,7 @@ const StyledConfidence = styled.span`
 `;
 
 export const StyledAttrLabel = styled.label`
-  font-weight: ${props => props.bold ? 600 : 400};
+  font-weight: ${props => getFontWeith(props)};
   flex-shrink: 0;
   flex-grow: 0;
   width: 7rem;
@@ -80,6 +82,7 @@ export const __testables__ = {
   StyledConfidence,
   StyledAttrContent,
   StyledAttr,
+  getFontWeith,
 };
 
 export default Attribute;

src/images/detail/Container.js

@@ -9,20 +9,10 @@ import { facesByImageId, facesByIdSelector } from '../../redux/faces/selectors';
 
 import DetailView from './DetailView';
 
-const select = (state, props) => {
-  // get image id
-  const {
-    match: { params: { id } },
-    location: { search },
-  } = props;
-
-  const byId = imagesByIdSelector(state);
-  const image = byId[id];
-
-  // map to key / value array
+const mapKeyToValue = (searchString) => {
   const params = {};
   let param;
-  search.substring(1)
+  searchString.substring(1)
     .split('=')
     .forEach((value, i) => {
       if (i % 2 === 0) {
@@ -33,6 +23,20 @@ const select = (state, props) => {
         params[param] = value;
       }
     });
+  return params;
+};
+
+const select = (state, props) => {
+  // get image id
+  const {
+    match: { params: { id } },
+    location: { search },
+  } = props;
+
+  const byId = imagesByIdSelector(state);
+  const image = byId[id];
+
+  const params = mapKeyToValue(search);
 
   return {
     image,
@@ -52,4 +56,11 @@ const mapDispatchToProps = ({
   getImage,
 });
 
+
+export const __testables__ = {
+  select,
+  mapDispatchToProps,
+  mapKeyToValue,
+};
+
 export default connect(select, mapDispatchToProps)(DetailView);

src/images/detail/__tests__/Attribute.test.js

@@ -3,7 +3,16 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import 'jest-styled-components';
 
-import Attribute from '../Attribute';
+import Attribute, {
+  __testables__,
+  StyledAttrLabel,
+} from '../Attribute';
+
+const {
+  StyledConfidence,
+  StyledAttrContent,
+  getFontWeith,
+} = __testables__;
 
 describe('Image Detail Attribute', () => {
   const initialProps = {
@@ -19,6 +28,53 @@ describe('Image Detail Attribute', () => {
   const getAttribute = props => shallow(<Attribute {...props} />);
 
   it('should render', () => {
-    const wrapper = getAttribute
+    const wrapper = getAttribute(initialProps);
+    expect(wrapper.exists()).toBeTruthy();
+
+
+  });
+
+  it('should not render confidence if set', () => {
+    const wrapper = getAttribute({
+      ...initialProps,
+      showConfidence: true,
+    });
+    expect(wrapper.exists()).toBeTruthy();
+
+    const styledConfidence = wrapper.find(StyledConfidence);
+    expect(styledConfidence.exists()).toBeTruthy();
+  });
+
+  describe('Attribute styles test suite', () => {
+    it('Attribute should render consistently', () => {
+      const wrapper = getAttribute(initialProps);
+      expect(toJson(wrapper.dive())).toMatchSnapshot();
+    });
+
+    it('StyledAttrLabel should render consistently', () => {
+      const attrLabel = shallow(<StyledAttrLabel />);
+      expect(toJson(attrLabel)).toMatchSnapshot();
+    });
+
+    it('StyledAttrLabel should render consistently with bold styles', () => {
+      const attrLabel = shallow(<StyledAttrLabel bold={true} />);
+      expect(toJson(attrLabel)).toMatchSnapshot();
+    });
+
+    it('StyledConfidence should render consistently', () => {
+      const attrLabel = shallow(<StyledConfidence />);
+      expect(toJson(attrLabel)).toMatchSnapshot();
+    });
+
+    it('StyledAttrContent should render consistently', () => {
+      const attrLabel = shallow(<StyledAttrContent />);
+      expect(toJson(attrLabel)).toMatchSnapshot();
+    });
+
+    it('getFontWeith should return bold label', () => {
+      expect(getFontWeith({ bold: true })).toEqual(600);
+      expect(getFontWeith({ bold: false })).toEqual(400);
+      expect(getFontWeith({})).toEqual(400);
+    });
   });
 });

src/images/detail/__tests__/Container.test.js

@@ -0,0 +1,139 @@
+import { __testables__ } from '../Container';
+import { getImage } from '../../../redux/images';
+
+const { select, mapDispatchToProps, mapKeyToValue } = __testables__;
+
+describe('auth register container test suite', () => {
+  const expectedInitialState = {
+    image: undefined,
+    labels: [],
+    faces: [],
+    selectedFace: null,
+    selectedLabel: null,
+    getImageRequest: 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([
+      'image',
+      'labels',
+      'faces',
+      'selectedFace',
+      'selectedLabel',
+      'getImageRequest',
+    ]);
+  });
+
+  it('should return redux actions', () => {
+    expect(mapDispatchToProps).toEqual({
+      getImage,
+    });
+  });
+
+  it('mapKeyToValue should return params', () => {
+    const string = '?attr1=val1';
+    expect(mapKeyToValue(string)).toEqual({
+      attr1: 'val1',
+    });
+  });
+
+  it('should select face based on face url attr', () => {
+    const id = 'ae1f94b0-a090-4e09-aa70-2fdc23e74bcc';
+    const face = {
+      id,
+      name: 'test face',
+    };
+    const url = `?face=${id}`;
+    const expectedState = {
+      ...expectedInitialState,
+      selectedFace: face,
+    };
+
+    // check for valid face
+    expect(select({
+      // set faces state
+      faces: {
+        byId: {
+          [id]: face,
+        },
+      },
+    }, {
+      ...initialProps,
+      location: {
+        search: url,
+      },
+    })).toEqual(expectedState);
+
+    // check for invalid face
+    expect(select({
+      // set faces state
+      faces: {
+        byId: {
+          'invalid-id': face,
+        },
+      },
+    }, {
+      ...initialProps,
+      location: {
+        search: url,
+      },
+    })).toEqual(expectedInitialState);
+  });
+
+  it('should select label based on label url attr', () => {
+    const id = 'ae1f94b0-a090-4e09-aa70-2fdc23e74baa';
+    const label = {
+      id,
+      name: 'test label',
+    };
+    const url = `?label=${id}`;
+    const expectedState = {
+      ...expectedInitialState,
+      selectedLabel: label,
+    };
+
+    // check for valid face
+    expect(select({
+      // set faces state
+      labels: {
+        byId: {
+          [id]: label,
+        },
+      },
+    }, {
+      ...initialProps,
+      location: {
+        search: url,
+      },
+    })).toEqual(expectedState);
+
+    // check for invalid label
+    expect(select({
+      // set label state
+      labels: {
+        byId: {
+          'invalid-id': label,
+        },
+      },
+    }, {
+      ...initialProps,
+      location: {
+        search: url,
+      },
+    })).toEqual(expectedInitialState);
+  });
+});