@financial-times/dotcom-ui-data-embed 7.3.1 → 7.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-data-embed",
-  "version": "7.3.1",
+  "version": "7.3.3",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
@@ -28,7 +28,11 @@
     "react": "16.x || 17.x"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "src/",
+    "browser.js",
+    "component.js",
+    "server.js"
   ],
   "repository": {
     "type": "git",
@@ -43,4 +47,4 @@
     "check-engine": "^1.10.1",
     "react": "^16.8.6"
   }
-}
+}

package/src/__test__/client/DataEmbedStore.spec.ts

@@ -0,0 +1,37 @@
+import subject from '../../client/DataEmbedStore'
+
+const fakeData = {
+  foo: 1,
+  bar: true,
+  baz: 'qux'
+}
+
+describe('dotcom-ui-data-embed/src/client/DataEmbedStore', () => {
+  let instance
+
+  beforeEach(() => {
+    instance = new subject(fakeData)
+  })
+
+  describe('.get()', () => {
+    it('returns the value of an existing data', () => {
+      expect(instance.get('foo')).toBe(1)
+      expect(instance.get('bar')).toBe(true)
+      expect(instance.get('baz')).toBe('qux')
+    })
+
+    it('returns undefined for properties that do not exist', () => {
+      expect(instance.get('buzz')).toBeUndefined()
+    })
+  })
+
+  describe('.getAll()', () => {
+    it('returns all data', () => {
+      expect(instance.getAll()).toEqual(fakeData)
+    })
+
+    it('freezes the data', () => {
+      expect(Object.isFrozen(instance.getAll())).toBe(true)
+    })
+  })
+})

package/src/__test__/client/index.spec.ts

@@ -0,0 +1,16 @@
+import { init as subject } from '../../client'
+import loadDataEmbed from '../../client/loadDataEmbed'
+import DataEmbedStore from '../../client/DataEmbedStore'
+jest.mock('../../client/loadDataEmbed.ts')
+jest.mock('../../client/DataEmbedStore.ts')
+
+describe('dotcom-ui-data-embed/src/client/index', () => {
+  describe('.init()', () => {
+    it('returns the value of an existing data embed store', () => {
+      const result = subject({ id: 'data-embed' })
+      expect(result).toBeInstanceOf(DataEmbedStore)
+      expect(loadDataEmbed).toBeCalledWith('data-embed')
+      expect(DataEmbedStore).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/__test__/client/loadDataEmbed.spec.ts

@@ -0,0 +1,36 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import subject from '../../client/loadDataEmbed'
+const SCRIPT_ELEMENT_ID = 'data-embed'
+
+describe('dotcom-ui-data-embed/src/client/loadDataEmbed', () => {
+  describe('when there is a configuration object', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <script id="${SCRIPT_ELEMENT_ID}">{"foo":1,"bar":true,"baz":"qux"}</script>
+      `
+    })
+
+    it('returns a frozen object', () => {
+      const result = subject(SCRIPT_ELEMENT_ID)
+
+      expect(result).toEqual({ foo: 1, bar: true, baz: 'qux' })
+      expect(Object.isFrozen(result)).toBe(true)
+    })
+  })
+
+  describe('when there is no a configuration object', () => {
+    beforeEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    it('returns a frozen empty object', () => {
+      const result = subject(SCRIPT_ELEMENT_ID)
+
+      expect(result).toEqual({})
+      expect(Object.isFrozen(result)).toBe(true)
+    })
+  })
+})

package/src/__test__/components/DataEmbed.spec.ts

@@ -0,0 +1,18 @@
+import renderer from 'react-test-renderer'
+import { DataEmbed as subject } from '../../components/DataEmbed'
+
+const data = {
+  id: 'data-embed',
+  data: {
+    foo: 1,
+    bar: true,
+    baz: 'qux'
+  }
+}
+
+describe('dotcom-ui-data-embed/src/components/dataEmbed', () => {
+  it('renders a script element containing data', () => {
+    const tree = renderer.create(subject(data))
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/__snapshots__/DataEmbed.spec.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-data-embed/src/components/dataEmbed renders a script element containing data 1`] = `
+<script
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "{\\"foo\\":1,\\"bar\\":true,\\"baz\\":\\"qux\\"}",
+    }
+  }
+  id="data-embed"
+  type="application/json"
+/>
+`;

package/src/client/DataEmbedStore.ts

@@ -0,0 +1,15 @@
+export default class DataEmbedStore {
+  private data
+
+  constructor(data) {
+    this.data = Object.freeze(data)
+  }
+
+  get(key: string) {
+    return this.data.hasOwnProperty(key) ? this.data[key] : undefined
+  }
+
+  getAll() {
+    return this.data
+  }
+}

package/src/client/index.ts

@@ -0,0 +1,9 @@
+import loadDataEmbed from './loadDataEmbed'
+import DataEmbedStore from './DataEmbedStore'
+
+const init = ({ id }: { id: string }) => {
+  const data = loadDataEmbed(id)
+  return new DataEmbedStore(data)
+}
+
+export { loadDataEmbed, init }

package/src/client/loadDataEmbed.ts

@@ -0,0 +1,15 @@
+export default function loadDataEmbed(id: string) {
+  const dataEmbedElement = document.getElementById(id)
+
+  let data = {}
+
+  if (dataEmbedElement) {
+    try {
+      data = JSON.parse(dataEmbedElement.innerHTML)
+    } catch (error) {
+      console.error('Data embed error', error) // eslint-disable-line no-console
+    }
+  }
+
+  return Object.freeze(data)
+}

package/src/components/DataEmbed.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function DataEmbed({ id, data }: { id: string; data: object }) {
+  return <script type="application/json" id={id} dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components/DataEmbed'
+export * from './client'