@financial-times/dotcom-ui-shell 7.3.1 → 7.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-shell",
-  "version": "7.3.1",
+  "version": "7.3.2",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
@@ -35,7 +35,11 @@
     "npm": "7.x || 8.x"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "src/",
+    "browser.js",
+    "component.js",
+    "styles.scss"
   ],
   "repository": {
     "type": "git",

package/src/__test__/components/Content.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Subject from '../../components/Content'
+
+describe('dotcom-ui-shell/src/components/Content', () => {
+  describe('with stringified contents', () => {
+    it('renders the given HTML string without escaping', () => {
+      const contents = '<p>Hello, World!</p>'
+      const tree = renderer.create(<Subject contents={contents} />).toJSON()
+
+      expect(tree).toMatchSnapshot()
+    })
+  })
+
+  describe('with component contents', () => {
+    it('renders the components', () => {
+      const contents = <p>Hello, World!</p>
+      const tree = renderer.create(<Subject contents={contents} />).toJSON()
+
+      expect(tree).toMatchSnapshot()
+    })
+  })
+})

package/src/__test__/components/DocumentHead.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Subject from '../../components/DocumentHead'
+
+describe('dotcom-ui-shell/src/components/DocumentHead', () => {
+  it('renders the document head', () => {
+    const props = {
+      description: 'Website description.',
+      facebookPage: 'facebook-page-id',
+      pageTitle: 'Page title',
+      siteTitle: 'Website title',
+      twitterSite: '@twitter_page',
+      canonicalURL: 'https://my.site',
+      metaTags: [{ rel: 'alternate', type: 'application/rss+xml', href: 'path/to/rss' }]
+    }
+
+    const tree = renderer.create(<Subject {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should not render smart banner meta tag when showSmartBanner false', () => {
+    const props = {
+      description: 'Website description.',
+      facebookPage: 'facebook-page-id',
+      pageTitle: 'Page title',
+      siteTitle: 'Website title',
+      twitterSite: '@twitter_page',
+      canonicalURL: 'https://my.site',
+      metaTags: [{ rel: 'alternate', type: 'application/rss+xml', href: 'path/to/rss' }],
+      showSmartBanner: false
+    }
+
+    const tree = renderer.create(<Subject {...props} />).root
+    expect(() => {
+      tree.findByProps({name: 'apple-itunes-app'})
+    }).toThrow()
+  })
+})

package/src/__test__/components/GTMBody.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import GTMBody from '../../components/GTMBody'
+
+describe('dotcom-ui-shell/src/components/GTMBody', () => {
+  it('renders the gtm body script when the enableGTM flag is on', () => {
+    const props = {
+      flags: {
+        enableGTM: true
+      }
+    }
+
+    const tree = renderer.create(<GTMBody {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders null when the enableGTM flag is off', () => {
+    const props = {
+      flags: {
+        enableGTM: false
+      }
+    }
+
+    const tree = renderer.create(<GTMBody {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders null when there is no enableGTM', () => {
+    const props = {
+      flags: {}
+    }
+
+    const tree = renderer.create(<GTMBody {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/GTMHead.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import GTMHead from '../../components/GTMHead'
+
+describe('dotcom-ui-shell/src/components/GTMHead', () => {
+  it('renders the gtm head script when the enableGTM flag is on', () => {
+    const props = {
+      flags: {
+        enableGTM: true
+      }
+    }
+
+    const tree = renderer.create(<GTMHead {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders null when the enableGTM flag is off', () => {
+    const props = {
+      flags: {
+        enableGTM: false
+      }
+    }
+
+    const tree = renderer.create(<GTMHead {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/LinkedData.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Subject from '../../components/LinkedData'
+
+describe('dotcom-ui-shell/src/components/LinkedData', () => {
+  it('renders the base site schema', () => {
+    const tree = renderer.create(<Subject />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders the given additional schemas', () => {
+    const fixture = [
+      {
+        '@context': 'http://schema.org',
+        '@type': 'Person',
+        name: 'John Doe',
+        email: 'john.doe@example.com',
+        netWorth: '1 trillion'
+      },
+      {
+        '@context': 'http://schema.org',
+        '@type': 'Organization',
+        url: 'https://www.ft.com',
+        address: 'Bracken House, EC4M 9JA'
+      }
+    ]
+
+    const tree = renderer.create(<Subject jsonLd={fixture} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/OpenGraph.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Subject from '../../components/OpenGraph'
+
+describe('dotcom-ui-shell/src/components/OpenGraph', () => {
+  it('renders the given Open Graph data to meta tags', () => {
+    const fixture = {
+      og: {
+        title: 'Open Graph title',
+        video: 'https://my.site/video.mp4',
+        'video:type': 'video/mp4',
+        'video:width': 640,
+        'video:height': 360
+      },
+      article: {
+        published_time: '2019-02-27T06:59:35.000Z',
+        modified_time: '2019-02-27T16:01:21.000Z',
+        author: ['Joe Bloggs', 'Jane Doe']
+      }
+    }
+
+    const tree = renderer.create(<Subject openGraph={fixture} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/ResourceHints.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Subject from '../../components/ResourceHints'
+
+describe('dotcom-ui-shell/src/components/ResourceHints', () => {
+  it('renders the given paths and URLs as resource hints', () => {
+    const fixture = [
+      'www.example.com/assets/style.css',
+      'www.example.com/images/graphic.svg#icon',
+      'http://polyfill.io/v3/bundle.min.js?features=es5,es6',
+      '/assets/public/style.as83hd99.css',
+      '/__origami/service/build/v3/font?font_format=woff2&font_name=FinancierDisplayWeb-Bold&system_code=origami&version=1.12'
+    ]
+
+    const tree = renderer.create(<Subject resourceHints={fixture} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/Shell.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import ShallowRenderer from 'react-test-renderer/shallow'
+import { Shell } from '../../components/Shell'
+
+describe('dotcom-ui-shell/src/components/Shell', () => {
+  it('should define all props as optional except the `pageTitle` prop', () => {
+    new ShallowRenderer().render(<Shell pageTitle="Foo" />)
+  })
+
+  it('renders boolean boolean html data attributes correctly', () => {
+    const htmlAttributes = { dataIsProduction: '', dataIsDevelopment: false }
+    const htmlTag = renderer.create(<Shell pageTitle="Foo" htmlAttributes={htmlAttributes} />).toJSON()
+
+    // where react is concerned, a `true` boolean data attribute
+    // is one where the attribute value is an empty string (because
+    // it is not possible to render the attribute without a value),
+    // and a `false` boolean data attribute is one where the attribute
+    // has not been specified altogether
+    expect(htmlTag.props).toHaveProperty('data-is-production', '')
+    expect(htmlTag.props).not.toHaveProperty('data-is-development')
+  })
+
+  it('renders the GTM script when the enableGTM flag is on', () => {
+    const tree = renderer.create(<Shell pageTitle="Foo" flags={{ enableGTM: true }} />).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/Stylesheets.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Subject from '../../components/StyleSheets'
+
+describe('dotcom-ui-shell/src/components/StyleSheets', () => {
+  it('renders the given stylesheets and critical styles', () => {
+    const props = {
+      stylesheets: ['path/to/styles.css'],
+      criticalStyles: 'html { margin: 0 } body { font-family: "Comic Sans" }'
+    }
+    const tree = renderer.create(<Subject {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders JavaScript for adding asyncronous stylesheets if appropriate', () => {
+    const props = {
+      asyncStylesheets: ['path/to/async-styles.css']
+    }
+    const tree = renderer.create(<Subject {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/__snapshots__/Content.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-shell/src/components/Content with component contents renders the components 1`] = `
+<p>
+  Hello, World!
+</p>
+`;
+
+exports[`dotcom-ui-shell/src/components/Content with stringified contents renders the given HTML string without escaping 1`] = `
+<div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p>Hello, World!</p>",
+    }
+  }
+  style={
+    Object {
+      "display": "contents",
+    }
+  }
+/>
+`;

package/src/__test__/components/__snapshots__/DocumentHead.test.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-shell/src/components/DocumentHead renders the document head 1`] = `
+Array [
+  <meta
+    charSet="utf-8"
+  />,
+  <meta
+    content="IE=edge"
+    httpEquiv="X-UA-Compatible"
+  />,
+  <meta
+    content="width=device-width, initial-scale=1"
+    name="viewport"
+  />,
+  <title>
+    Page title | Website title
+  </title>,
+  <meta
+    content="Website description."
+    name="description"
+  />,
+  <link
+    href="https://my.site"
+    rel="canonical"
+  />,
+  <meta
+    content="index,follow,max-snippet:200,max-image-preview:large"
+    name="robots"
+  />,
+  <meta
+    content="4-t8sFaPvpO5FH_Gnw1dkM28CQepjzo8UjjAkdDflTw"
+    name="google-site-verification"
+  />,
+  <meta
+    href="path/to/rss"
+    rel="alternate"
+    type="application/rss+xml"
+  />,
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "{\\"@context\\":\\"http://schema.org\\",\\"@type\\":\\"WebSite\\",\\"name\\":\\"Financial Times\\",\\"alternateName\\":\\"FT.com\\",\\"url\\":\\"http://www.ft.com\\"}",
+      }
+    }
+    type="application/ld+json"
+  />,
+  <meta
+    content="facebook-page-id"
+    property="fb:pages"
+  />,
+  <meta
+    content="@twitter_page"
+    property="twitter:site"
+  />,
+  <meta
+    content="app-id=1200842933, app-argument=https://my.site"
+    name="apple-itunes-app"
+  />,
+  <link
+    href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=svg"
+    rel="icon"
+    type="image/svg+xml"
+  />,
+  <link
+    href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=png&width=32&height=32"
+    rel="alternate icon"
+    sizes="32x32"
+    type="image/png"
+  />,
+  <link
+    href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=png&width=194&height=194"
+    rel="alternate icon"
+    sizes="194x194"
+    type="image/png"
+  />,
+  <link
+    href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=png&width=180&height=180"
+    rel="apple-touch-icon"
+    sizes="180x180"
+  />,
+  <link
+    href="https://www.ft.com/__assets/creatives/manifest/manifest-v6.json"
+    rel="manifest"
+  />,
+]
+`;

package/src/__test__/components/__snapshots__/GTMBody.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-shell/src/components/GTMBody renders null when the enableGTM flag is off 1`] = `null`;
+
+exports[`dotcom-ui-shell/src/components/GTMBody renders null when there is no enableGTM 1`] = `null`;
+
+exports[`dotcom-ui-shell/src/components/GTMBody renders the gtm body script when the enableGTM flag is on 1`] = `
+<noscript>
+  <iframe
+    height="0"
+    src="https://www.googletagmanager.com/ns.html?id=GTM-NWQJW68"
+    style={
+      Object {
+        "display": "none",
+        "visibility": "hidden",
+      }
+    }
+    width="0"
+  />
+</noscript>
+`;

package/src/__test__/components/__snapshots__/GTMHead.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-shell/src/components/GTMHead renders null when the enableGTM flag is off 1`] = `null`;
+
+exports[`dotcom-ui-shell/src/components/GTMHead renders the gtm head script when the enableGTM flag is on 1`] = `
+<script
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+        })(window,document,'script','dataLayer','GTM-NWQJW68');",
+    }
+  }
+/>
+`;

package/src/__test__/components/__snapshots__/LinkedData.test.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-shell/src/components/LinkedData renders the base site schema 1`] = `
+<script
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "{\\"@context\\":\\"http://schema.org\\",\\"@type\\":\\"WebSite\\",\\"name\\":\\"Financial Times\\",\\"alternateName\\":\\"FT.com\\",\\"url\\":\\"http://www.ft.com\\"}",
+    }
+  }
+  type="application/ld+json"
+/>
+`;
+
+exports[`dotcom-ui-shell/src/components/LinkedData renders the given additional schemas 1`] = `
+Array [
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "{\\"@context\\":\\"http://schema.org\\",\\"@type\\":\\"Person\\",\\"name\\":\\"John Doe\\",\\"email\\":\\"john.doe@example.com\\",\\"netWorth\\":\\"1 trillion\\"}",
+      }
+    }
+    type="application/ld+json"
+  />,
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "{\\"@context\\":\\"http://schema.org\\",\\"@type\\":\\"Organization\\",\\"url\\":\\"https://www.ft.com\\",\\"address\\":\\"Bracken House, EC4M 9JA\\"}",
+      }
+    }
+    type="application/ld+json"
+  />,
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "{\\"@context\\":\\"http://schema.org\\",\\"@type\\":\\"WebSite\\",\\"name\\":\\"Financial Times\\",\\"alternateName\\":\\"FT.com\\",\\"url\\":\\"http://www.ft.com\\"}",
+      }
+    }
+    type="application/ld+json"
+  />,
+]
+`;

package/src/__test__/components/__snapshots__/OpenGraph.test.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-shell/src/components/OpenGraph renders the given Open Graph data to meta tags 1`] = `
+Array [
+  <meta
+    content="Open Graph title"
+    property="og:title"
+  />,
+  <meta
+    content="https://my.site/video.mp4"
+    property="og:video"
+  />,
+  <meta
+    content="video/mp4"
+    property="og:video:type"
+  />,
+  <meta
+    content={640}
+    property="og:video:width"
+  />,
+  <meta
+    content={360}
+    property="og:video:height"
+  />,
+  <meta
+    content="2019-02-27T06:59:35.000Z"
+    property="article:published_time"
+  />,
+  <meta
+    content="2019-02-27T16:01:21.000Z"
+    property="article:modified_time"
+  />,
+  <meta
+    content="Joe Bloggs"
+    property="article:author"
+  />,
+  <meta
+    content="Jane Doe"
+    property="article:author"
+  />,
+]
+`;

package/src/__test__/components/__snapshots__/ResourceHints.test.tsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-shell/src/components/ResourceHints renders the given paths and URLs as resource hints 1`] = `
+Array [
+  <link
+    href="https://spoor-api.ft.com"
+    rel="preconnect"
+  />,
+  <link
+    crossOrigin="use-credentials"
+    href="https://session-next.ft.com"
+    rel="preconnect"
+  />,
+  <link
+    href="https://ads-api.ft.com"
+    rel="preconnect"
+  />,
+  <link
+    href="https://securepubads.g.doubleclick.net"
+    rel="preconnect"
+  />,
+  <link
+    as="style"
+    href="www.example.com/assets/style.css"
+    rel="preload"
+    type="text/css"
+  />,
+  <link
+    as="image"
+    href="www.example.com/images/graphic.svg#icon"
+    rel="preload"
+    type={null}
+  />,
+  <link
+    as="script"
+    href="http://polyfill.io/v3/bundle.min.js?features=es5,es6"
+    rel="preload"
+    type={null}
+  />,
+  <link
+    as="style"
+    href="/assets/public/style.as83hd99.css"
+    rel="preload"
+    type="text/css"
+  />,
+  <link
+    as="font"
+    crossOrigin="anonymous"
+    href="/__origami/service/build/v3/font?font_format=woff2&font_name=FinancierDisplayWeb-Bold&system_code=origami&version=1.12"
+    rel="preload"
+    type="font/woff2"
+  />,
+]
+`;