Test Img

package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-react": "7.11.1",
     "html-webpack-plugin": "3.2.0",
     "jest": "23.6.0",
+    "jest-styled-components": "6.3.1",
     "react-dom": "16.4.2",
     "stylelint": "9.9.0",
     "stylelint-config-recommended": "2.1.0",

src/CarouselSlide.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const Img = styled.img`
+const DefaultImg = styled.img`
   object-fit: cover;
   width: 100%;
   height: ${props =>
@@ -11,23 +11,32 @@ const Img = styled.img`
       : props.imgHeight};
 `;
 
-const CarouselSlide = ({ imgUrl, description, attribution, ...rest }) => (
+const CarouselSlide = ({
+  Img,
+  imgUrl,
+  imgHeight,
+  description,
+  attribution,
+  ...rest
+}) => (
   <figure {...rest}>
-    <Img src={imgUrl} />
+    <Img src={imgUrl} imgHeight={imgHeight} />
     <figcaption>
       <strong>{description}</strong> {attribution}
     </figcaption>
   </figure>
 );
 
 CarouselSlide.propTypes = {
+  Img: PropTypes.elementType,
   imgHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   imgUrl: PropTypes.string.isRequired,
   description: PropTypes.node.isRequired,
   attribution: PropTypes.node,
 };
 
 CarouselSlide.defaultProps = {
+  Img: DefaultImg,
   imgHeight: 500,
 };
 

src/tests/Carousel.test.js

@@ -104,10 +104,16 @@ describe('Carousel', () => {
     let slideProps;
 
     slideProps = wrapper.find(CarouselSlide).props();
-    expect(slideProps).toEqual(slides[0]);
+    expect(slideProps).toEqual({
+      ...CarouselSlide.defaultProps,
+      ...slides[0],
+    });
 
     wrapper.setState({ slideIndex: 1 });
     slideProps = wrapper.find(CarouselSlide).props();
-    expect(slideProps).toEqual(slides[1]);
+    expect(slideProps).toEqual({
+      ...CarouselSlide.defaultProps,
+      ...slides[1],
+    });
   });
 });

src/tests/CarouselSlide.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import CarouselSlide from '../CarouselSlide';
+import styled from 'styled-components';
 
 describe('CarouselSlide', () => {
   let wrapper;
@@ -17,15 +18,16 @@ describe('CarouselSlide', () => {
     expect(wrapper.type()).toBe('figure');
   });
 
-  it('renders an <img> and a <figcaption? as children', () => {
-    expect(wrapper.childAt(0).type()).toBe('img');
+  it('renders an <img> and a <figcaption> as children', () => {
+    expect(wrapper.childAt(0).type()).toBe(CarouselSlide.defaultProps.Img);
     expect(wrapper.childAt(1).type()).toBe('figcaption');
   });
 
-  it('passed `imgUrl` through to the <img>', () => {
+  it('passes `imgUrl` through to props.Img', () => {
     const imgUrl = 'https://example.com/image.png';
     wrapper.setProps({ imgUrl });
-    const img = wrapper.find('img');
+    const img = wrapper.find(CarouselSlide.defaultProps.Img);
+
     expect(img.prop('src')).toBe(imgUrl);
   });
 
@@ -49,3 +51,51 @@ describe('CarouselSlide', () => {
     expect(wrapper.prop('className')).toBe(className);
   });
 });
+
+describe('Img', () => {
+  let mounted;
+  const imgUrl = 'https://example.com/default.jpg';
+
+  beforeEach(() => {
+    const Img = CarouselSlide.defaultProps.Img
+    mounted = mount(
+      <Img src={imgUrl} imgHeight={500} />
+    );
+  });
+
+  it('renders an <img> with the given src', () => {
+    expect(mounted.containsMatchingElement(<img src={imgUrl} />)).toBe(true);
+  });
+
+  it('has the expected static styles', () => {
+    expect(mounted).toHaveStyleRule('width', '100%');
+    expect(mounted).toHaveStyleRule('object-fit', 'cover');
+  });
+
+  it('uses imgHeight as the height style property', () => {
+    expect(mounted).toHaveStyleRule('height', '500px');
+
+    mounted.setProps({ imgHeight: 'calc(100vh - 100px)' });
+    expect(mounted).toHaveStyleRule('height', 'calc(100vh - 100px)');
+  });
+
+  it('allows styles to be overridden', () => {
+    const TestImg = styled(CarouselSlide.defaultProps.Img)`
+      width: auto;
+      height: auto;
+      object-fit: fill;
+    `;
+
+    mounted = mount(
+      <CarouselSlide
+        Img={TestImg}
+        imgUrl={imgUrl}
+        description="This prop is required"
+      />
+    );
+
+    expect(mounted.find(TestImg)).toHaveStyleRule('width', 'auto');
+    expect(mounted.find(TestImg)).toHaveStyleRule('height', 'auto');
+    expect(mounted.find(TestImg)).toHaveStyleRule('object-fit', 'fill');
+  });
+});

src/tests/jestSetup.js

@@ -1,4 +1,5 @@
 import Adapter from 'enzyme-adapter-react-16';
 import { configure } from 'enzyme';
+import 'jest-styled-components';
 
 configure({ adapter: new Adapter() });

yarn.lock

@@ -2342,6 +2342,16 @@ css-what@2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
+css@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
@@ -4941,6 +4951,13 @@ jest-snapshot@^23.6.0:
     pretty-format "^23.6.0"
     semver "^5.5.0"
 
+jest-styled-components@6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-6.3.1.tgz#fa21a89bfe8c20081c7c083cbaed2200854b60e3"
+  integrity sha512-zie3ajvJbwlbHCAq8/Bv5jdbcYCz0ZMRNNX6adL7wSRpkCVPQtiJigv1140JN1ZOJIODPn8VKrjeFCN+jlPa7w==
+  dependencies:
+    css "^2.2.4"
+
 jest-util@^23.4.0:
   version "23.4.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-23.4.0.tgz#4d063cb927baf0a23831ff61bec2cbbf49793561"
@@ -7749,7 +7766,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
   integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==