Add new ImagePlaceholderAmp psammead component

cypress/integration/pages/articles/tests.js

@@ -80,10 +80,6 @@ export const testsThatFollowSmokeTestConfig = ({
       });
 
       if (serviceHasFigure(service)) {
-        it('should have a placeholder image', () => {
-          cy.get('figure div div div').eq(0).should('be.visible');
-        });
-
         if (serviceHasCaption(service)) {
           it('should have a visible image with a caption, and also not be lazyloaded', () => {
             cy.get('figure')

cypress/integration/pages/articles/testsForAMPOnly.js

@@ -18,16 +18,21 @@ export const testsThatFollowSmokeTestConfigForAMPOnly = ({
   variant,
 }) =>
   describe(`Running testsForAMPOnly for ${service} ${pageType}`, () => {
-    it('should contain an amp-img', () => {
-      if (serviceHasFigure(service)) {
+    if (serviceHasFigure(service)) {
+      it('should contain an amp-img', () => {
         cy.get('figure')
           .eq(0)
           .should('be.visible')
           .within(() => {
             cy.get('amp-img').should('be.visible');
           });
-      }
-    });
+      });
+
+      it('should have a placeholder and fallback for amp-image', () => {
+        cy.get('div[placeholder]').eq(0).should('be.hidden');
+        cy.get('div[fallback]').eq(0).should('be.hidden');
+      });
+    }
 
     describe('Media Player: AMP', () => {
       it('should render a placeholder image', () => {

cypress/integration/pages/articles/testsForCanonicalOnly.js

@@ -6,6 +6,9 @@ import { getBlockData, getBlockByType, getVideoEmbedUrl } from './helpers';
 // TODO: Remove after https://github.com/bbc/simorgh/issues/2959
 const serviceHasCaption = service => service === 'news';
 
+const serviceHasFigure = service =>
+  ['arabic', 'news', 'pashto', 'persian', 'urdu'].includes(service);
+
 // For testing important features that differ between services, e.g. Timestamps.
 // We recommend using inline conditional logic to limit tests to services which differ.
 export const testsThatAlwaysRunForCanonicalOnly = ({ service, pageType }) => {
@@ -32,6 +35,12 @@ export const testsThatFollowSmokeTestConfigForCanonicalOnly = ({
       });
     }
 
+    if (serviceHasFigure(service)) {
+      it('should have a placeholder image', () => {
+        cy.get('figure div div div').eq(0).should('be.visible');
+      });
+    }
+
     if (serviceHasCaption(service)) {
       describe('Image with placeholder', () => {
         it('should have a visible image that is not lazyloaded', () => {

src/app/containers/ImageWithPlaceholder/fixtureData.jsx

@@ -17,6 +17,9 @@ const serviceContextStubNews = {
   imageCaptionOffscreenText: 'Image caption, ',
 };
 
+const imageUrl =
+  'https://ichef.bbci.co.uk/news/640/cpsprodpb/E7DB/production/_101655395_paulineclayton.jpg';
+
 const WrappedImageWithPlaceholder = ({ isAmp, ...otherProps }) => (
   <ServiceContext.Provider value={serviceContextStubNews}>
     <RequestContextProvider
@@ -58,7 +61,7 @@ WrappedImageWithPlaceholder.defaultProps = {
   width: null,
 };
 
-const baseFixture = {
+const baseFixture = (src = imageUrl) => ({
   alt: 'Pauline Clayton',
   children: null,
   copyright: 'Getty Images',
@@ -67,25 +70,32 @@ const baseFixture = {
   lazyLoad: false,
   isAmp: false,
   ratio: 56.25,
-  src:
-    'https://ichef.bbci.co.uk/news/640/cpsprodpb/E7DB/production/_101655395_paulineclayton.jpg',
-  srcset:
-    'https://ichef.bbci.co.uk/news/640/cpsprodpb/E7DB/production/_101655395_paulineclayton.jpg 640w',
+  src,
+  srcset: `${src} 640w`,
   width: 640,
-};
+});
 
 // eslint-disable-next-line react/prop-types
 export const ImageWithPlaceholder = ({ preload = false }) => {
   const props = {
-    ...baseFixture,
+    ...baseFixture(),
     preload,
   };
   return <WrappedImageWithPlaceholder {...props} />;
 };
 
 export const AmpImageWithPlaceholder = () => {
   const props = {
-    ...baseFixture,
+    ...baseFixture(),
+    isAmp: true,
+  };
+
+  return <WrappedImageWithPlaceholder {...props} />;
+};
+
+export const AmpImageWithPlaceholderFallback = () => {
+  const props = {
+    ...baseFixture('foo'),
     isAmp: true,
   };
 
@@ -95,7 +105,7 @@ export const AmpImageWithPlaceholder = () => {
 // eslint-disable-next-line react/prop-types
 export const LazyLoadImageWithPlaceholder = ({ fallback, lazyLoad = true }) => {
   const props = {
-    ...baseFixture,
+    ...baseFixture(),
     fallback,
     lazyLoad,
   };

src/app/containers/ImageWithPlaceholder/index.jsx

@@ -1,7 +1,10 @@
 import React, { useContext, useState } from 'react';
 import { string, number, bool, node } from 'prop-types';
 import LazyLoad from 'react-lazyload';
-import ImagePlaceholder from '@bbc/psammead-image-placeholder';
+import styled from '@emotion/styled';
+import ImagePlaceholder, {
+  ImagePlaceholderAmp,
+} from '@bbc/psammead-image-placeholder';
 import Image, { AmpImg } from '@bbc/psammead-image';
 import { Helmet } from 'react-helmet';
 import { RequestContext } from '#contexts/RequestContext';
@@ -42,6 +45,10 @@ const ImageWithPlaceholder = ({
     <Image onLoad={() => setIsLoaded(true)} {...imageProps} />
   );
 
+  const AmpImgWrapper = styled.div`
+    position: relative;
+  `;
+
   const shouldPreload = !isAmp && preload;
 
   return (
@@ -57,11 +64,8 @@ const ImageWithPlaceholder = ({
           />
         </Helmet>
       )}
-      <ImagePlaceholder
-        style={isLoaded ? { background: 'none' } : null}
-        ratio={ratio}
-      >
-        {isAmp ? (
+      {isAmp ? (
+        <AmpImgWrapper>
           <AmpImg
             alt={alt}
             attribution={copyright || ''}
@@ -70,12 +74,20 @@ const ImageWithPlaceholder = ({
             srcset={srcset}
             height={height}
             width={width}
-          />
-        ) : (
-          renderImage(imageToRender, lazyLoad, fallback)
-        )}
-        {children}
-      </ImagePlaceholder>
+          >
+            <ImagePlaceholderAmp />
+          </AmpImg>
+          {children}
+        </AmpImgWrapper>
+      ) : (
+        <ImagePlaceholder
+          style={isLoaded ? { background: 'none' } : null}
+          ratio={ratio}
+        >
+          {renderImage(imageToRender, lazyLoad, fallback)}
+          {children}
+        </ImagePlaceholder>
+      )}
     </>
   );
 };

src/app/containers/ImageWithPlaceholder/index.stories.jsx

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
 import {
   ImageWithPlaceholder,
   AmpImageWithPlaceholder,
+  AmpImageWithPlaceholderFallback,
   LazyLoadImageWithPlaceholder,
 } from './fixtureData';
 import AmpDecorator from '../../../../.storybook/helpers/ampDecorator';
@@ -15,4 +16,5 @@ storiesOf('Containers/Image with Placeholder/Canonical', module)
 storiesOf('Containers/Image with Placeholder/AMP', module)
   .addParameters({ chromatic: { disable: true } })
   .addDecorator(AmpDecorator)
-  .add('default', () => <AmpImageWithPlaceholder />);
+  .add('default', () => <AmpImageWithPlaceholder />)
+  .add('with an invalid img src', () => <AmpImageWithPlaceholderFallback />);

src/app/containers/ImageWithPlaceholder/index.test.jsx

@@ -4,6 +4,7 @@ import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import {
   ImageWithPlaceholder,
   AmpImageWithPlaceholder,
+  AmpImageWithPlaceholderFallback,
   LazyLoadImageWithPlaceholder,
 } from './fixtureData';
 
@@ -65,4 +66,9 @@ describe('ImageWithPlaceholder', () => {
     'should render an AMP image',
     <AmpImageWithPlaceholder />,
   );
+
+  shouldMatchSnapshot(
+    'should render a fallback when AMP image fails to load',
+    <AmpImageWithPlaceholderFallback />,
+  );
 });