From 64bbe00c9b4eb2afb6451033500290b928990e82 Mon Sep 17 00:00:00 2001 From: sadick Date: Thu, 2 May 2019 15:38:40 +0300 Subject: [PATCH 01/13] Make width optional --- .../components/psammead-image/CHANGELOG.md | 2 + packages/components/psammead-image/README.md | 11 ++- .../psammead-image/package-lock.json | 2 +- .../components/psammead-image/package.json | 2 +- .../src/__snapshots__/index.test.jsx.snap | 73 ++----------------- .../components/psammead-image/src/index.jsx | 6 +- .../psammead-image/src/index.test.jsx | 8 +- .../src/testHelpers/snapshotTests.jsx | 12 +++ .../src/testHelpers/stories.jsx | 19 ++++- 9 files changed, 54 insertions(+), 81 deletions(-) diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md index b04f05aa87..e8f3d9c2c7 100644 --- a/packages/components/psammead-image/CHANGELOG.md +++ b/packages/components/psammead-image/CHANGELOG.md @@ -1,7 +1,9 @@ # Psammead Image Changelog + | Version | Description | |---------|-------------| +| 0.3.6 | [PR#???](https://github.com/bbc/psammead/pull/???) Make img width prop optional | | 0.3.5 | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme | | 0.3.4 | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly | | 0.3.3 | [PR#323](https://github.com/bbc/psammead/pull/323) Update storybook badge url | diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md index 4de0d0ff63..765db61fac 100644 --- a/packages/components/psammead-image/README.md +++ b/packages/components/psammead-image/README.md @@ -59,12 +59,17 @@ const WrappingContainer = ({ alt, src, height, width }) => ( | Prop | Type | Required | Default | Example | | :------- | :------------ | :------- | :------ | :----------------------------------------------------------------------------------------------------- | | `alt` | string | Yes | - | "A picture of a cat" | -| `height` | number/string | Yes | null | 450 | +| `height` | number/string | No | null | 450 | | `src` | string | Yes | - | "https://bbc.com/300/cat.jpg" | | `srcset` | string | No | null | "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w" | -| `width` | number/string | Yes | - | 600 | +| `width` | number/string | No | null | 600 | + +The `height` and `width` props are optional, in some cases to preserve the image ratio you might specify either `height` or `width` and let the browser scale the image accordingly. + +However when not specified the browser will not be able to determine the size of the image, the browser will therefore build the page twice or more depending on the number of images you have. First build is for the browser to display all the text and once the image is downloaded and size determined a second build to wrap the texts around the image. + +Specifying the `width` and `height` allows the browser to reserve space for the image which prevent content moving around while the image is being loaded. -The `height` prop is optional, since in some cases to preserve the image ratio we only want to specify the width and let the browser scale the image accordingly. However, in other cases the height might need to be specified. The `srcset` prop is optional since some projects might not want to use the srcset attribute on images. ### AmpImg diff --git a/packages/components/psammead-image/package-lock.json b/packages/components/psammead-image/package-lock.json index e1f2bfe0de..f38d9875d1 100644 --- a/packages/components/psammead-image/package-lock.json +++ b/packages/components/psammead-image/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-image", - "version": "0.3.5", + "version": "0.3.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-image/package.json b/packages/components/psammead-image/package.json index 452a91934b..93fcd167af 100644 --- a/packages/components/psammead-image/package.json +++ b/packages/components/psammead-image/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-image", - "version": "0.3.5", + "version": "0.3.6", "main": "dist/index.js", "description": "React styled components for an Image", "repository": { diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap index b280302fae..6c690eeb75 100644 --- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap @@ -1,21 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Image - imported as '{ Img }' should render image with custom dimensions correctly 1`] = ` -.c0 { - display: block; - width: 100%; -} - -By Elisa Decker, from her series \\ -`; - -exports[`Image - imported as '{ Img }' should render image with srcset correctly 1`] = ` +exports[`Image - Img' should render image correctly without width 1`] = ` .c0 { display: block; width: 100%; @@ -27,56 +12,10 @@ exports[`Image - imported as '{ Img }' should render image with srcset correctly height={576} src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg" srcSet="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w" - width={1024} -/> -`; - -exports[`Image - imported as '{ Img }' should render landscape image correctly 1`] = ` -.c0 { - display: block; - width: 100%; -} - -Student sitting an exam -`; - -exports[`Image - imported as '{ Img }' should render portrait image correctly 1`] = ` -.c0 { - display: block; - width: 100%; -} - -Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17. -`; - -exports[`Image - imported as '{ Img }' should render square image correctly 1`] = ` -.c0 { - display: block; - width: 100%; -} - -Tracks through the snow `; -exports[`Image - imported as default 'Image' should render image with custom dimensions correctly 1`] = ` +exports[`Image - Img' should render image with custom dimensions correctly 1`] = ` .c0 { display: block; width: 100%; @@ -91,7 +30,7 @@ exports[`Image - imported as default 'Image' should render image with custom dim /> `; -exports[`Image - imported as default 'Image' should render image with srcset correctly 1`] = ` +exports[`Image - Img' should render image with srcset correctly 1`] = ` .c0 { display: block; width: 100%; @@ -107,7 +46,7 @@ exports[`Image - imported as default 'Image' should render image with srcset cor /> `; -exports[`Image - imported as default 'Image' should render landscape image correctly 1`] = ` +exports[`Image - Img' should render landscape image correctly 1`] = ` .c0 { display: block; width: 100%; @@ -122,7 +61,7 @@ exports[`Image - imported as default 'Image' should render landscape image corre /> `; -exports[`Image - imported as default 'Image' should render portrait image correctly 1`] = ` +exports[`Image - Img' should render portrait image correctly 1`] = ` .c0 { display: block; width: 100%; @@ -137,7 +76,7 @@ exports[`Image - imported as default 'Image' should render portrait image correc /> `; -exports[`Image - imported as default 'Image' should render square image correctly 1`] = ` +exports[`Image - Img' should render square image correctly 1`] = ` .c0 { display: block; width: 100%; diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx index 84967327cf..44805296ad 100644 --- a/packages/components/psammead-image/src/index.jsx +++ b/packages/components/psammead-image/src/index.jsx @@ -15,6 +15,9 @@ export const Img = ({ alt, src, srcset, height, width }) => { if (srcset) { props.srcSet = srcset; } + if (!width) { + delete props.width; + } return ; }; @@ -24,12 +27,13 @@ Img.propTypes = { src: string.isRequired, srcset: string, height: oneOfType([string, number]), - width: oneOfType([string, number]).isRequired, + width: oneOfType([string, number]), }; Img.defaultProps = { height: null, srcset: null, + width: null, }; export default Img; diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index e8392bd5d1..0e286aef8c 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -1,10 +1,6 @@ -import Image, { Img } from '.'; +import Image from '.'; import snapshotTests from './testHelpers/snapshotTests'; -describe("Image - imported as '{ Img }'", () => { - snapshotTests(Img); -}); - -describe("Image - imported as default 'Image'", () => { +describe("Image - Img'", () => { snapshotTests(Image); }); diff --git a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx index b788b24200..7a14df16e6 100644 --- a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx +++ b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx @@ -58,6 +58,18 @@ const snapshotTests = (Component, additionalProps) => { width={landscape.width} />, ); + if (Component.name === 'Img') { + shouldMatchSnapshot( + 'should render image correctly without width', + , + ); + } }; export default snapshotTests; diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx index 41670009d4..98bd5f1a61 100644 --- a/packages/components/psammead-image/src/testHelpers/stories.jsx +++ b/packages/components/psammead-image/src/testHelpers/stories.jsx @@ -21,8 +21,8 @@ const stories = ( includeHeight = false, additionalProps = {}, styleDecorator = storyFn => storyFn(), -) => - storiesOf(title, module) +) => { + const imageStories = storiesOf(title, module) .addDecorator(styleDecorator) .add( 'landscape image', @@ -69,5 +69,20 @@ const stories = ( ), { notes }, ); + if (Component.name === 'Img') { + imageStories.add( + 'image without width', + () => ( + + ), + { notes }, + ); + } + return imageStories; +}; export default stories; From ca1501e5454ed38b776bcaa42d8f3aff35f325a5 Mon Sep 17 00:00:00 2001 From: sadick Date: Thu, 2 May 2019 17:10:25 +0300 Subject: [PATCH 02/13] Update PR number --- packages/components/psammead-image/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md index e8f3d9c2c7..74d211b91d 100644 --- a/packages/components/psammead-image/CHANGELOG.md +++ b/packages/components/psammead-image/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 0.3.6 | [PR#???](https://github.com/bbc/psammead/pull/???) Make img width prop optional | +| 0.3.6 | [PR#492](https://github.com/bbc/psammead/pull/492) Make img width prop optional | | 0.3.5 | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme | | 0.3.4 | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly | | 0.3.3 | [PR#323](https://github.com/bbc/psammead/pull/323) Update storybook badge url | From 3882a6621c7712a0c21fac7cabd7943a2c2b691c Mon Sep 17 00:00:00 2001 From: sadick Date: Fri, 3 May 2019 14:05:02 +0300 Subject: [PATCH 03/13] Make width null --- packages/components/psammead-image/src/testHelpers/stories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx index 98bd5f1a61..9a0c91372b 100644 --- a/packages/components/psammead-image/src/testHelpers/stories.jsx +++ b/packages/components/psammead-image/src/testHelpers/stories.jsx @@ -76,7 +76,7 @@ const stories = ( ), { notes }, From 3b4a4dd3b8340c6be51c48b9dc1abbc9f4afed6a Mon Sep 17 00:00:00 2001 From: sadick Date: Tue, 7 May 2019 16:18:22 +0300 Subject: [PATCH 04/13] Revert testing --- packages/components/psammead-image/src/index.test.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index 0e286aef8c..cd8700a851 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -1,6 +1,10 @@ -import Image from '.'; +import Image, { Img } from '.'; import snapshotTests from './testHelpers/snapshotTests'; +describe("Image - imported as default 'Image'", () => { + snapshotTests(Img); +}); + describe("Image - Img'", () => { snapshotTests(Image); }); From 3b0ae472d15e01309c2216806e8f889bf6e2f56a Mon Sep 17 00:00:00 2001 From: sadick Date: Tue, 7 May 2019 18:09:59 +0300 Subject: [PATCH 05/13] Replace build with paint --- packages/components/psammead-image/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md index 765db61fac..40f8995804 100644 --- a/packages/components/psammead-image/README.md +++ b/packages/components/psammead-image/README.md @@ -66,7 +66,7 @@ const WrappingContainer = ({ alt, src, height, width }) => ( The `height` and `width` props are optional, in some cases to preserve the image ratio you might specify either `height` or `width` and let the browser scale the image accordingly. -However when not specified the browser will not be able to determine the size of the image, the browser will therefore build the page twice or more depending on the number of images you have. First build is for the browser to display all the text and once the image is downloaded and size determined a second build to wrap the texts around the image. +However when not specified the browser will not be able to determine the size of the image, the browser will therefore build the page twice or more depending on the number of images you have. First paint is for the browser to display all the text and once the image is downloaded and size determined a second paint to wrap the texts around the image. Specifying the `width` and `height` allows the browser to reserve space for the image which prevent content moving around while the image is being loaded. From 5bec89d5be73e7730552be5e8aac022dd20d74a0 Mon Sep 17 00:00:00 2001 From: sadick Date: Wed, 8 May 2019 10:44:46 +0300 Subject: [PATCH 06/13] Stop checking for falsy width --- packages/components/psammead-image/src/index.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx index 44805296ad..9cfcc7c486 100644 --- a/packages/components/psammead-image/src/index.jsx +++ b/packages/components/psammead-image/src/index.jsx @@ -15,10 +15,6 @@ export const Img = ({ alt, src, srcset, height, width }) => { if (srcset) { props.srcSet = srcset; } - if (!width) { - delete props.width; - } - return ; }; From 88298bda408c122fdd189ad7834270338df5526f Mon Sep 17 00:00:00 2001 From: sadick Date: Wed, 8 May 2019 11:01:07 +0300 Subject: [PATCH 07/13] Refactor image component and tests --- .../src/__snapshots__/index.test.jsx.snap | 105 +++++++++++++++++- .../psammead-image/src/index.stories.jsx | 11 +- .../psammead-image/src/index.test.jsx | 27 ++++- .../src/testHelpers/snapshotTests.jsx | 12 -- .../src/testHelpers/stories.jsx | 15 +-- 5 files changed, 134 insertions(+), 36 deletions(-) diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap index 6c690eeb75..5106e2b947 100644 --- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Image - Img' should render image correctly without width 1`] = ` +exports[`Image - 'Img' should render image correctly without width 1`] = ` .c0 { display: block; width: 100%; @@ -12,10 +12,103 @@ exports[`Image - Img' should render image correctly without width 1`] = ` height={576} src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg" srcSet="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w" + width={1024} +/> +`; + +exports[`Image - 'Img' should render image with custom dimensions correctly 1`] = ` +.c0 { + display: block; + width: 100%; +} + +By Elisa Decker, from her series \\ +`; + +exports[`Image - 'Img' should render image with srcset correctly 1`] = ` +.c0 { + display: block; + width: 100%; +} + +Student sitting an exam +`; + +exports[`Image - 'Img' should render landscape image correctly 1`] = ` +.c0 { + display: block; + width: 100%; +} + +Student sitting an exam +`; + +exports[`Image - 'Img' should render portrait image correctly 1`] = ` +.c0 { + display: block; + width: 100%; +} + +Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17. +`; + +exports[`Image - 'Img' should render square image correctly 1`] = ` +.c0 { + display: block; + width: 100%; +} + +Tracks through the snow +`; + +exports[`Image - imported as default 'Image' should render image correctly without width 1`] = ` +.c0 { + display: block; + width: 100%; +} + +Student sitting an exam `; -exports[`Image - Img' should render image with custom dimensions correctly 1`] = ` +exports[`Image - imported as default 'Image' should render image with custom dimensions correctly 1`] = ` .c0 { display: block; width: 100%; @@ -30,7 +123,7 @@ exports[`Image - Img' should render image with custom dimensions correctly 1`] = /> `; -exports[`Image - Img' should render image with srcset correctly 1`] = ` +exports[`Image - imported as default 'Image' should render image with srcset correctly 1`] = ` .c0 { display: block; width: 100%; @@ -46,7 +139,7 @@ exports[`Image - Img' should render image with srcset correctly 1`] = ` /> `; -exports[`Image - Img' should render landscape image correctly 1`] = ` +exports[`Image - imported as default 'Image' should render landscape image correctly 1`] = ` .c0 { display: block; width: 100%; @@ -61,7 +154,7 @@ exports[`Image - Img' should render landscape image correctly 1`] = ` /> `; -exports[`Image - Img' should render portrait image correctly 1`] = ` +exports[`Image - imported as default 'Image' should render portrait image correctly 1`] = ` .c0 { display: block; width: 100%; @@ -76,7 +169,7 @@ exports[`Image - Img' should render portrait image correctly 1`] = ` /> `; -exports[`Image - Img' should render square image correctly 1`] = ` +exports[`Image - imported as default 'Image' should render square image correctly 1`] = ` .c0 { display: block; width: 100%; diff --git a/packages/components/psammead-image/src/index.stories.jsx b/packages/components/psammead-image/src/index.stories.jsx index d6cd796e8e..199f7d4fae 100644 --- a/packages/components/psammead-image/src/index.stories.jsx +++ b/packages/components/psammead-image/src/index.stories.jsx @@ -1,4 +1,11 @@ +import React from 'react'; import { Img } from '.'; -import stories from './testHelpers/stories'; +import stories, { getProps } from './testHelpers/stories'; +import { landscape } from './testHelpers/fixtureData'; +import notes from '../README.md'; -stories(Img, 'Image - Img'); +stories(Img, 'Image - Img').add( + 'image without width', + () => , + { notes }, +); diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index cd8700a851..f0c569df20 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -1,10 +1,33 @@ -import Image, { Img } from '.'; +import React from 'react'; +import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; import snapshotTests from './testHelpers/snapshotTests'; +import { landscape } from './testHelpers/fixtureData'; +import Image, { Img } from '.'; + +function matchSnapshot(description, Component, props) { + shouldMatchSnapshot(description, ); +} describe("Image - imported as default 'Image'", () => { snapshotTests(Img); }); -describe("Image - Img'", () => { +describe("Image - 'Img'", () => { snapshotTests(Image); }); + +describe("Image - imported as default 'Image'", () => { + matchSnapshot( + 'should render image correctly without width', + Image, + landscape, + ); +}); + +describe("Image - 'Img'", () => { + matchSnapshot( + 'should render image correctly without width', + Image, + landscape, + ); +}); diff --git a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx index 7a14df16e6..b788b24200 100644 --- a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx +++ b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx @@ -58,18 +58,6 @@ const snapshotTests = (Component, additionalProps) => { width={landscape.width} />, ); - if (Component.name === 'Img') { - shouldMatchSnapshot( - 'should render image correctly without width', - , - ); - } }; export default snapshotTests; diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx index 9a0c91372b..0dda65f7f6 100644 --- a/packages/components/psammead-image/src/testHelpers/stories.jsx +++ b/packages/components/psammead-image/src/testHelpers/stories.jsx @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'; import notes from '../../README.md'; import { custom, landscape, portrait, square } from './fixtureData'; -function getProps(image, includeHeight) { +export function getProps(image, includeHeight) { const props = { alt: image.alt, src: image.src, @@ -69,19 +69,6 @@ const stories = ( ), { notes }, ); - if (Component.name === 'Img') { - imageStories.add( - 'image without width', - () => ( - - ), - { notes }, - ); - } return imageStories; }; From e850a387a421d9b7450ff39d156ff929cad8951a Mon Sep 17 00:00:00 2001 From: sadick Date: Wed, 8 May 2019 11:14:40 +0300 Subject: [PATCH 08/13] Update tests and snapshots --- .../src/__snapshots__/index.test.jsx.snap | 12 ++++++------ .../components/psammead-image/src/index.test.jsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap index 5106e2b947..50a68d7d00 100644 --- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Image - 'Img' should render image correctly without width 1`] = ` +exports[`Image - imported as '{ Img }' should render image correctly without width 1`] = ` .c0 { display: block; width: 100%; @@ -16,7 +16,7 @@ exports[`Image - 'Img' should render image correctly without width 1`] = ` /> `; -exports[`Image - 'Img' should render image with custom dimensions correctly 1`] = ` +exports[`Image - imported as '{ Img }' should render image with custom dimensions correctly 1`] = ` .c0 { display: block; width: 100%; @@ -31,7 +31,7 @@ exports[`Image - 'Img' should render image with custom dimensions correctly 1`] /> `; -exports[`Image - 'Img' should render image with srcset correctly 1`] = ` +exports[`Image - imported as '{ Img }' should render image with srcset correctly 1`] = ` .c0 { display: block; width: 100%; @@ -47,7 +47,7 @@ exports[`Image - 'Img' should render image with srcset correctly 1`] = ` /> `; -exports[`Image - 'Img' should render landscape image correctly 1`] = ` +exports[`Image - imported as '{ Img }' should render landscape image correctly 1`] = ` .c0 { display: block; width: 100%; @@ -62,7 +62,7 @@ exports[`Image - 'Img' should render landscape image correctly 1`] = ` /> `; -exports[`Image - 'Img' should render portrait image correctly 1`] = ` +exports[`Image - imported as '{ Img }' should render portrait image correctly 1`] = ` .c0 { display: block; width: 100%; @@ -77,7 +77,7 @@ exports[`Image - 'Img' should render portrait image correctly 1`] = ` /> `; -exports[`Image - 'Img' should render square image correctly 1`] = ` +exports[`Image - imported as '{ Img }' should render square image correctly 1`] = ` .c0 { display: block; width: 100%; diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index f0c569df20..47cd2292b6 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -12,7 +12,7 @@ describe("Image - imported as default 'Image'", () => { snapshotTests(Img); }); -describe("Image - 'Img'", () => { +describe("Image - imported as '{ Img }'", () => { snapshotTests(Image); }); @@ -24,7 +24,7 @@ describe("Image - imported as default 'Image'", () => { ); }); -describe("Image - 'Img'", () => { +describe("Image - imported as '{ Img }'", () => { matchSnapshot( 'should render image correctly without width', Image, From 0334c7288151b2371d8d3151eba686cbf209b3f7 Mon Sep 17 00:00:00 2001 From: sadick Date: Wed, 8 May 2019 11:25:21 +0300 Subject: [PATCH 09/13] Fix snaps --- .../src/__snapshots__/index.test.jsx.snap | 4 ++-- .../psammead-image/src/index.test.jsx | 20 +++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap index 50a68d7d00..b68d51f110 100644 --- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap @@ -12,7 +12,7 @@ exports[`Image - imported as '{ Img }' should render image correctly without wid height={576} src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg" srcSet="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w" - width={1024} + width={null} /> `; @@ -104,7 +104,7 @@ exports[`Image - imported as default 'Image' should render image correctly witho height={576} src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg" srcSet="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w" - width={1024} + width={null} /> `; diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index 47cd2292b6..a600758989 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -17,17 +17,17 @@ describe("Image - imported as '{ Img }'", () => { }); describe("Image - imported as default 'Image'", () => { - matchSnapshot( - 'should render image correctly without width', - Image, - landscape, - ); + const props = Object.assign({}, landscape); + delete props.width; + matchSnapshot('should render image correctly without width', Image, { + ...landscape, + width: null, + }); }); describe("Image - imported as '{ Img }'", () => { - matchSnapshot( - 'should render image correctly without width', - Image, - landscape, - ); + matchSnapshot('should render image correctly without width', Image, { + ...landscape, + width: null, + }); }); From b002f4b161bfd33631f0a52924569ac8ca6ca794 Mon Sep 17 00:00:00 2001 From: sadick Date: Wed, 8 May 2019 11:28:06 +0300 Subject: [PATCH 10/13] Revert remove empty line --- packages/components/psammead-image/src/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx index 9cfcc7c486..a1254512ed 100644 --- a/packages/components/psammead-image/src/index.jsx +++ b/packages/components/psammead-image/src/index.jsx @@ -15,6 +15,7 @@ export const Img = ({ alt, src, srcset, height, width }) => { if (srcset) { props.srcSet = srcset; } + return ; }; From 35cfdfb621955152dfe1b6806906117277be5b92 Mon Sep 17 00:00:00 2001 From: sadick Date: Wed, 8 May 2019 11:36:29 +0300 Subject: [PATCH 11/13] Refactor tests --- .../psammead-image/src/index.test.jsx | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index a600758989..fbf2ffd5a0 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -4,10 +4,6 @@ import snapshotTests from './testHelpers/snapshotTests'; import { landscape } from './testHelpers/fixtureData'; import Image, { Img } from '.'; -function matchSnapshot(description, Component, props) { - shouldMatchSnapshot(description, ); -} - describe("Image - imported as default 'Image'", () => { snapshotTests(Img); }); @@ -17,17 +13,17 @@ describe("Image - imported as '{ Img }'", () => { }); describe("Image - imported as default 'Image'", () => { - const props = Object.assign({}, landscape); - delete props.width; - matchSnapshot('should render image correctly without width', Image, { - ...landscape, - width: null, - }); + const props = { ...landscape, width: null }; + shouldMatchSnapshot( + 'should render image correctly without width', + , + ); }); describe("Image - imported as '{ Img }'", () => { - matchSnapshot('should render image correctly without width', Image, { - ...landscape, - width: null, - }); + const props = { ...landscape, width: null }; + shouldMatchSnapshot( + 'should render image correctly without width', + , + ); }); From c403b058ae0fa92437c8482b2e5a4508ad9161bb Mon Sep 17 00:00:00 2001 From: sadick Date: Wed, 8 May 2019 13:22:07 +0300 Subject: [PATCH 12/13] Refactor testhelpers --- .../components/psammead-image/src/testHelpers/stories.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx index 0dda65f7f6..4ea6e365f7 100644 --- a/packages/components/psammead-image/src/testHelpers/stories.jsx +++ b/packages/components/psammead-image/src/testHelpers/stories.jsx @@ -21,8 +21,8 @@ const stories = ( includeHeight = false, additionalProps = {}, styleDecorator = storyFn => storyFn(), -) => { - const imageStories = storiesOf(title, module) +) => + storiesOf(title, module) .addDecorator(styleDecorator) .add( 'landscape image', @@ -69,7 +69,5 @@ const stories = ( ), { notes }, ); - return imageStories; -}; export default stories; From 6fab2f5390da56aa3be00882cf8ade16adb05889 Mon Sep 17 00:00:00 2001 From: sadick Date: Wed, 8 May 2019 13:28:08 +0300 Subject: [PATCH 13/13] Resolve test duplication --- packages/components/psammead-image/src/index.test.jsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index fbf2ffd5a0..b8f89e1dc0 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -4,20 +4,13 @@ import snapshotTests from './testHelpers/snapshotTests'; import { landscape } from './testHelpers/fixtureData'; import Image, { Img } from '.'; -describe("Image - imported as default 'Image'", () => { - snapshotTests(Img); -}); - -describe("Image - imported as '{ Img }'", () => { - snapshotTests(Image); -}); - describe("Image - imported as default 'Image'", () => { const props = { ...landscape, width: null }; shouldMatchSnapshot( 'should render image correctly without width', , ); + snapshotTests(Img); }); describe("Image - imported as '{ Img }'", () => { @@ -26,4 +19,5 @@ describe("Image - imported as '{ Img }'", () => { 'should render image correctly without width', , ); + snapshotTests(Image); });