Add amp script if amp html attr present

cypress/integration/ampSpec.js

@@ -17,6 +17,12 @@ describe('AMP Tests', () => {
     getElement('html').should('have.attr', 'amp');
   });
 
+  it('should load the AMP framework', () => {
+    // .eq(1) gets the amp <script> as the first loaded is a Cypress <script>
+    const ampScript = getElement('head script').eq(1);
+    ampScript.should('have.attr', 'src', 'https://cdn.ampproject.org/v0.js');
+  });
+
   it('should not have an AMP attribute on the main article', () => {
     cy.visit('/news/articles/c0000000027o');
     getElement('html').should('not.have.attr', 'amp');

src/app/components/Metadata/__snapshots__/index.test.jsx.snap

@@ -105,6 +105,10 @@ exports[`Metadata News AMP article should render correctly 1`] = `
     content="An article title"
     name="twitter:title"
   />
+  <script
+    async={true}
+    src="https://cdn.ampproject.org/v0.js"
+  />
 </HelmetWrapper>
 `;
 
@@ -320,6 +324,10 @@ exports[`Metadata Persian AMP article should render correctly 1`] = `
     content="پهپادی که برایتان قهوه می‌آورد"
     name="twitter:title"
   />
+  <script
+    async={true}
+    src="https://cdn.ampproject.org/v0.js"
+  />
 </HelmetWrapper>
 `;
 

src/app/components/Metadata/index.jsx

@@ -27,6 +27,10 @@ const Metadata = ({
     htmlAttributes.amp = ''; // empty value as this makes Helmet render 'amp' as per https://www.ampproject.org/docs/fundamentals/spec#ampd
   }
 
+  const injectAmpScript = amp ? (
+    <script key="amp" async src="https://cdn.ampproject.org/v0.js" />
+  ) : null;
+
   return (
     <Helmet htmlAttributes={htmlAttributes}>
       <meta
@@ -60,6 +64,7 @@ const Metadata = ({
       <meta name="twitter:image:src" content={defaultImage} />
       <meta name="twitter:site" content={twitterSite} />
       <meta name="twitter:title" content={title} />
+      {injectAmpScript}
     </Helmet>
   );
 };