@financial-times/dotcom-ui-app-context 7.3.1 → 7.3.2

package/package.json

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

package/src/__test__/AppContext.spec.ts

@@ -0,0 +1,41 @@
+import subject from '../client/AppContext'
+
+const fakeContext = {
+  appContext: {
+    appName: 'app-name',
+    appVersion: '123',
+    edition: 'uk',
+    product: 'next',
+    abTestState: 'someCohort:on',
+    isProduction: true
+  }
+}
+
+describe('dotcom-ui-app-context/src/client/AppContext', () => {
+  let instance
+
+  beforeEach(() => {
+    instance = new subject(fakeContext)
+  })
+
+  describe('.get()', () => {
+    it('returns the value of an existing app context', () => {
+      expect(instance.get('appName')).toBe('app-name')
+      expect(instance.get('isProduction')).toBe(true)
+    })
+
+    it('returns undefined for contexts which do not exist', () => {
+      expect(instance.get('foo')).toBeUndefined()
+    })
+  })
+
+  describe('.getAll()', () => {
+    it('returns all app context data', () => {
+      expect(instance.getAll()).toEqual(fakeContext.appContext)
+    })
+
+    it('freezes the app context data', () => {
+      expect(Object.isFrozen(instance.getAll())).toBe(true)
+    })
+  })
+})

package/src/__test__/AppContextEmbed.spec.ts

@@ -0,0 +1,19 @@
+import renderer from 'react-test-renderer'
+import { AppContextEmbed as subject } from '../components/AppContextEmbed'
+import { TAppContext } from '../types'
+
+const fakeContext: TAppContext = {
+  appName: 'app-name',
+  appVersion: '123',
+  edition: 'uk',
+  product: 'next',
+  abTestState: 'someCohort:on',
+  isProduction: true
+}
+
+describe('dotcom-ui-app-context/src/components/AppContextEmbed', () => {
+  it('renders a script element containing app context properties', () => {
+    const tree = renderer.create(subject({ appContext: fakeContext }))
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/__snapshots__/AppContextEmbed.spec.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-app-context/src/components/AppContextEmbed renders a script element containing app context properties 1`] = `
+<script
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "{\\"appName\\":\\"app-name\\",\\"appVersion\\":\\"123\\",\\"edition\\":\\"uk\\",\\"product\\":\\"next\\",\\"abTestState\\":\\"someCohort:on\\",\\"isProduction\\":true}",
+    }
+  }
+  id="page-kit-app-context"
+  type="application/json"
+/>
+`;

package/src/__test__/loadAppContext.spec.ts

@@ -0,0 +1,35 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import subject from '../client/loadAppContext'
+
+describe('dotcom-ui-app-context/src/client/loadAppContext', () => {
+  describe('when there is a configuration object', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <script type="application/json" id="page-kit-app-context">{"appName":"app-name","appVersion":"123"}</script>
+      `
+    })
+
+    it('returns a frozen object', () => {
+      const result = subject()
+
+      expect(result).toEqual({ appName: 'app-name', appVersion: '123' })
+      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()
+
+      expect(result).toEqual({})
+      expect(Object.isFrozen(result)).toBe(true)
+    })
+  })
+})

package/src/client/AppContext.ts

@@ -0,0 +1,20 @@
+import { TAppContext } from '../types'
+
+export type TAppContextOptions = {
+  appContext: TAppContext
+}
+export default class AppContext {
+  private appContext: TAppContext
+
+  constructor(options: TAppContextOptions) {
+    this.appContext = Object.freeze(options.appContext)
+  }
+
+  get(property: string): any {
+    return this.appContext.hasOwnProperty(property) ? this.appContext[property] : undefined
+  }
+
+  getAll(): TAppContext {
+    return this.appContext
+  }
+}

package/src/client/browser.ts

@@ -0,0 +1,11 @@
+import AppContext from './AppContext'
+import loadEmbeddedAppContext from './loadAppContext'
+
+export function init() {
+  const appContext = loadEmbeddedAppContext()
+  const client = new AppContext({ appContext })
+
+  console.log('Page Kit app context:', client.getAll()) // eslint-disable-line no-console
+
+  return client
+}

package/src/client/loadAppContext.ts

@@ -0,0 +1,7 @@
+import { loadDataEmbed } from '@financial-times/dotcom-ui-data-embed'
+import { TAppContext } from '../types'
+import { APP_CONTEXT_ELEMENT_ID } from '../constants'
+
+export default function loadEmbeddedAppContext(): TAppContext {
+  return loadDataEmbed(APP_CONTEXT_ELEMENT_ID) as TAppContext
+}

package/src/components/AppContextEmbed.ts

@@ -0,0 +1,11 @@
+import { DataEmbed } from '@financial-times/dotcom-ui-data-embed'
+import { TAppContext } from '../types'
+import { APP_CONTEXT_ELEMENT_ID } from '../constants'
+
+export type TAppContextProps = {
+  appContext?: TAppContext
+}
+
+export function AppContextEmbed({ appContext }: TAppContextProps) {
+  return DataEmbed({ id: APP_CONTEXT_ELEMENT_ID, data: appContext })
+}

package/src/constants.ts

@@ -0,0 +1 @@
+export const APP_CONTEXT_ELEMENT_ID = 'page-kit-app-context'

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components/AppContextEmbed'
+export * from './constants'

package/src/types.d.ts

@@ -0,0 +1,14 @@
+export interface TAppContext {
+  appName: string
+  appVersion: string
+  product: string
+  edition: string
+  abTestState: string
+  contentId?: string
+  contentType?: string
+  conceptId?: string
+  conceptType?: string
+  isProduction: boolean
+  publishReference?: string
+  [key: string]: any
+}