@financial-times/dotcom-server-navigation 7.3.1 → 7.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-server-navigation",
-  "version": "7.3.1",
+  "version": "7.3.3",
   "description": "",
   "main": "dist/node/index.js",
   "types": "src/index.ts",
@@ -18,7 +18,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "file:../dotcom-types-navigation",
+    "@financial-times/dotcom-types-navigation": "^7.3.3",
     "@types/deep-freeze": "^0.1.1",
     "deep-freeze": "0.0.1",
     "ft-poller": "^7.2.1",
@@ -35,7 +35,8 @@
     "npm": "7.x || 8.x"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
   "repository": {
     "type": "git",
@@ -46,4 +47,4 @@
   "volta": {
     "extends": "../../package.json"
   }
-}
+}

package/src/__fixtures__/menus.ts

@@ -0,0 +1,62 @@
+import { TNavMenus, TNavMeganav, TNavMenu } from '@financial-times/dotcom-types-navigation'
+
+const meganav: TNavMeganav[] = [
+  {
+    component: 'sectionlist',
+    dataset: 'subsections',
+    title: 'Sections',
+    data: [[{ label: 'Mega Foo', url: '/world' }], [{ label: 'Mega Bar', url: '/world/uk', submenu: null }]]
+  },
+  {
+    component: 'articlelist',
+    dataset: 'popular',
+    title: 'Most Read',
+    data: [
+      { label: 'Mega Baz', url: '/content/baz' },
+      { label: 'Mega Qux', url: '/content/qux?location=${currentPath}' }
+    ]
+  }
+]
+
+const submenu: TNavMenu = {
+  label: 'submenu',
+  items: [
+    { label: 'Baz', url: '/world/uk', submenu: null },
+    { label: 'Qux', url: '/fake-item-nested?location=${currentPath}', submenu: null }
+  ]
+}
+
+const menus: Partial<TNavMenus> = {
+  'navbar-uk': {
+    label: 'Navigation',
+    items: [
+      { label: 'Foo', url: '/world/uk', submenu: null },
+      { label: 'Bar', url: '/fake-item?location=${currentPath}', submenu, meganav }
+    ]
+  },
+
+  footer: {
+    label: 'Footer',
+    items: [
+      {
+        label: 'Tools',
+        url: null,
+        submenu: {
+          label: null,
+          items: [
+            [
+              { label: 'Alerts Hub', url: 'http://markets.ft.com/data/alerts/', submenu: null },
+              { label: 'Lexicon', url: 'http://lexicon.ft.com/', submenu: null }
+            ],
+            [
+              { label: 'News feed', url: '/news-feed', submenu: null },
+              { label: 'Newsletters', url: '/newsletters', submenu: null }
+            ]
+          ]
+        }
+      }
+    ]
+  }
+}
+
+export { menus }

package/src/__test__/decorateMenuData.spec.ts

@@ -0,0 +1,83 @@
+import { decorateMenuData as subject } from '../decorateMenuData'
+import { menus } from '../__fixtures__/menus'
+import dlv from 'dlv'
+
+describe('dotcom-server-navigation/src/decorateMenuData', () => {
+  describe('.decorateMenu()', () => {
+    it('returns a new deeply cloned object rather than mutating in place', () => {
+      const decorated = subject(menus['navbar-uk'], '/world/uk')
+
+      expect(decorated).not.toBe(menus['navbar-uk'])
+      expect(decorated.items).not.toBe(menus['navbar-uk'].items)
+      expect(decorated.items[0]).not.toBe(menus['navbar-uk'].items[0])
+    })
+
+    it('marks menu items whose `url` property matches `currentPath` as `selected`', () => {
+      const decorated = subject(menus['navbar-uk'], '/world/uk')
+
+      const a = dlv(decorated, ['items', 0])
+      const b = dlv(decorated, ['items', 1, 'submenu', 'items', 0])
+      const c = dlv(decorated, ['items', 1, 'meganav', 0, 'data', 1, 0])
+      const d = dlv(decorated, ['items', 1])
+
+      expect(a.selected).toBe(true)
+      expect(b.selected).toBe(true)
+      expect(c.selected).toBe(true)
+      expect(d.selected).toBe(false)
+    })
+
+    it('replaces the ${currentPath} placeholder with the value of `currentPath`', () => {
+      const decorated = subject(menus['navbar-uk'], '/world/us/politics')
+
+      const a = dlv(decorated, ['items', 1])
+      const b = dlv(decorated, ['items', 1, 'submenu', 'items', 1])
+      const c = dlv(decorated, ['items', 1, 'meganav', 1, 'data', 1])
+
+      expect(a.url).toBe('/fake-item?location=/world/us/politics')
+      expect(b.url).toBe('/fake-item-nested?location=/world/us/politics')
+      expect(c.url).toBe('/content/qux?location=/world/us/politics')
+    })
+
+    it('replaces the ${currentPath} placeholder with %2F in URLs which contain keywords', () => {
+      const testKeyword = (itemUrl: string) => {
+        const decorated = subject(menus['navbar-uk'], itemUrl)
+
+        const a = dlv(decorated, ['items', 1, 'url'])
+        const b = dlv(decorated, ['items', 1, 'submenu', 'items', 1, 'url'])
+
+        expect(a).toBe('/fake-item?location=%2F')
+        expect(b).toBe('/fake-item-nested?location=%2F')
+      }
+
+      testKeyword('/uk/products/bar')
+      testKeyword('/world/barriers')
+      testKeyword('/world/us/errors')
+    })
+
+    it('can clone submenu properties', () => {
+      const decorated = subject(menus.footer, '/world/uk')
+      const submenu = dlv(decorated, ['items', 0, 'submenu', 'items'])
+
+      submenu.forEach((column) => {
+        column.forEach((menuItem) => {
+          expect(menuItem).toHaveProperty('label')
+          expect(menuItem).toHaveProperty('url')
+          expect(menuItem).toHaveProperty('selected')
+        })
+      })
+    })
+
+    it('can clone meganav properties', () => {
+      const decorated = subject(menus['navbar-uk'], '/world/uk')
+      const meganav = dlv(decorated, ['items', 1, 'meganav'])
+
+      expect(meganav[0]).toHaveProperty('component', 'sectionlist')
+      expect(meganav[0]).toHaveProperty('title', 'Sections')
+      expect(meganav[0]).toHaveProperty('data')
+
+      expect(meganav[1]).toHaveProperty('component', 'articlelist')
+      expect(meganav[1]).toHaveProperty('title', 'Most Read')
+      expect(meganav[1]).toHaveProperty('data')
+    })
+  })
+})

package/src/__test__/editions.spec.ts

@@ -0,0 +1,25 @@
+import * as subject from '../editions'
+
+describe('dotcom-server-navigation/src/editions', () => {
+  describe('.isEdition()', () => {
+    it('returns true for editions which exist', () => {
+      expect(subject.isEdition('uk')).toBe(true)
+    })
+
+    it('returns false for editions which do not exist', () => {
+      expect(subject.isEdition('london')).toBe(false)
+    })
+  })
+
+  describe('.getEditions()', () => {
+    it('returns the current selected edition', () => {
+      const result = subject.getEditions('uk')
+      expect(result.current).toEqual(expect.objectContaining({ id: 'uk' }))
+    })
+
+    it('returns the all other editions', () => {
+      const result = subject.getEditions('uk')
+      expect(result.others).toEqual([expect.objectContaining({ id: 'international' })])
+    })
+  })
+})

package/src/__test__/navigation.spec.ts

@@ -0,0 +1,134 @@
+import nock from 'nock'
+import { Navigation } from '..'
+import menusData from '../../../../__fixtures__/menus.json'
+
+const subNavigationData = {
+  ancestors: [{ label: 'some-ancestors' }],
+  children: [{ label: 'some-children' }],
+  item: { label: 'current-page' }
+}
+
+const FakePoller = {
+  start: jest.fn(),
+  getData: jest.fn()
+}
+
+jest.mock('ft-poller', () => {
+  return jest.fn().mockImplementation(() => FakePoller)
+})
+
+const clone = (obj) => JSON.parse(JSON.stringify(obj))
+
+describe('dotcom-server-navigation', () => {
+  let navigationInstance
+
+  beforeEach(() => {
+    FakePoller.start.mockResolvedValue(null)
+    FakePoller.getData.mockResolvedValue(clone(menusData))
+
+    navigationInstance = new Navigation()
+  })
+
+  afterEach(() => {
+    nock.cleanAll()
+    jest.clearAllMocks()
+  })
+
+  describe('constructor', () => {
+    it('initialises the poller', () => {
+      expect(FakePoller.start).toHaveBeenCalled()
+    })
+  })
+
+  describe('.getMenusData()', () => {
+    let result
+
+    beforeAll(async () => {
+      result = await navigationInstance.getMenusData()
+    })
+
+    it('returns the raw menus data', () => {
+      expect(result).toEqual(menusData)
+    })
+  })
+
+  describe('.getMenusFor()', () => {
+    let result
+
+    beforeAll(async () => {
+      result = await navigationInstance.getMenusFor('/', 'uk')
+    })
+
+    it('returns the shared menu data', () => {
+      expect(result).toHaveProperty('account.label', 'Account')
+      expect(result).toHaveProperty('footer.label', 'Footer')
+      expect(result).toHaveProperty('user.label', 'User')
+    })
+
+    it('returns the edition specific menu data', () => {
+      expect(result).toHaveProperty('drawer.label', 'Drawer')
+      expect(result).toHaveProperty('navbar.label', 'Navigation')
+    })
+
+    it('returns decorated menu data', () => {
+      expect(result).toHaveProperty('navbar.items.0.selected', true)
+      expect(result).toHaveProperty('drawer.items.0.submenu.items.0.selected', true)
+    })
+  })
+
+  // nock used here because SubNavigation fetches its data directly rather than pulling from Poller
+  describe('.getSubNavigationFor()', () => {
+    let result
+
+    beforeAll(async () => {
+      nock('http://next-navigation.ft.com')
+        .get('/v2/hierarchy/streamPage')
+        .reply(200, clone(subNavigationData))
+
+      result = await navigationInstance.getSubNavigationFor('/streamPage')
+    })
+
+    it('fetches the sub-navigation data', () => {
+      expect(result).toHaveProperty('breadcrumb')
+      expect(result).toHaveProperty('subsections')
+    })
+
+    it('appends the current page to the list of ancestors', () => {
+      expect(result).toHaveProperty('breadcrumb.1.label', 'current-page')
+    })
+
+    it('appends a selected property to the current page', () => {
+      expect(result).toHaveProperty('breadcrumb.1.selected', true)
+    })
+
+    describe('when things go wrong', () => {
+      it('throws an HTTP error when fetch fails', async () => {
+        nock('http://next-navigation.ft.com').get('/v2/hierarchy/streamPage').reply(500)
+
+        await expect(navigationInstance.getSubNavigationFor('streamPage')).rejects.toMatchObject({
+          message: 'Sub-navigation for streamPage could not be found.'
+        })
+      })
+    })
+  })
+
+  describe('.getEditionsFor()', () => {
+    let result
+
+    beforeAll(async () => {
+      result = await navigationInstance.getEditionsFor('uk')
+    })
+
+    it('returns the editions data', () => {
+      expect(result).toHaveProperty('current')
+      expect(result).toHaveProperty('others')
+    })
+
+    describe('with an invalid edition', () => {
+      it('throws an error', () => {
+        const test = () => navigationInstance.getEditionsFor('london')
+        expect(test).toThrow('The provided edition "london" is not a valid edition')
+      })
+    })
+  })
+})

package/src/__test__/selectMenuDataForEdition.spec.ts

@@ -0,0 +1,38 @@
+import { selectMenuDataForEdition as subject } from '../selectMenuDataForEdition'
+import { TNavMenus } from '@financial-times/dotcom-types-navigation'
+
+const fixture = {
+  account: {},
+  anon: {},
+  footer: {},
+  'drawer-international': {},
+  'drawer-uk': {},
+  'navbar-simple': {},
+  'navbar-right': {},
+  'navbar-right-anon': {},
+  'navbar-international': {},
+  'navbar-uk': {},
+  user: {}
+} as TNavMenus
+
+describe('dotcom-server-navigation/src/selectMenuDataForEdition', () => {
+  it('returns a new object', () => {
+    const result = subject(fixture, 'uk')
+    expect(result).not.toBe(fixture)
+  })
+
+  it('appends shared menus', () => {
+    const result = subject(fixture, 'uk')
+
+    expect(result.account).toBe(fixture.account)
+    expect(result.footer).toBe(fixture.footer)
+    expect(result.user).toBe(fixture.user)
+  })
+
+  it('appends edition specific menus', () => {
+    const result = subject(fixture, 'uk')
+
+    expect(result.drawer).toBe(fixture['drawer-uk'])
+    expect(result.navbar).toBe(fixture['navbar-uk'])
+  })
+})

package/src/actions.ts

@@ -0,0 +1,9 @@
+import { TNavAction } from '@financial-times/dotcom-types-navigation'
+
+export function getSubscribeAction(): TNavAction {
+  return {
+    id: 'subscribe',
+    name: 'Subscribe for full access',
+    url: '/products?segmentId=4526c036-7527-ab37-9a29-0b0403fa0b5f'
+  }
+}

package/src/decorateMenuData.ts

@@ -0,0 +1,53 @@
+import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
+
+const isSelected = (url: string, currentPath: string): boolean => {
+  return url === currentPath
+}
+
+const isMenuItem = (item: any): boolean => {
+  return item.hasOwnProperty('label') && item.hasOwnProperty('url')
+}
+
+const decorateURL = (url: string, currentPath: string): string => {
+  if (url && url.includes('${currentPath}')) {
+    // Don't replace the URL placeholder with a barrier or error URL so that
+    // a user logging in is not redirected to a barrier or error!
+    const shouldReplace = !/\/(products|barriers|errors)/.test(currentPath)
+    const redirectPath = shouldReplace ? currentPath : '%2F'
+    return url.replace('${currentPath}', redirectPath)
+  }
+
+  return url
+}
+
+const decorateMenuItem = (item: TNavMenuItem, currentPath: string): void => {
+  item.url = decorateURL(item.url, currentPath)
+  item.selected = isSelected(item.url, currentPath)
+}
+
+// This is a recursive clone function that will decorate objects it recognises as links
+function cloneMenu(value: any, currentPath: string): any {
+  if (Array.isArray(value)) {
+    return value.map((item) => cloneMenu(item, currentPath))
+  }
+
+  if (Object(value) === value) {
+    const cloned = {}
+
+    for (const key of Object.keys(value)) {
+      cloned[key] = cloneMenu(value[key], currentPath)
+    }
+
+    if (isMenuItem(cloned)) {
+      decorateMenuItem(cloned as TNavMenuItem, currentPath)
+    }
+
+    return cloned
+  }
+
+  return value
+}
+
+export function decorateMenuData<Type>(menuData: Type, currentUrl: string): Type {
+  return cloneMenu(menuData, currentUrl)
+}

package/src/editions.ts

@@ -0,0 +1,27 @@
+import { TNavEdition, TNavEditions } from '@financial-times/dotcom-types-navigation'
+
+const availableEditions: TNavEdition[] = [
+  {
+    id: 'uk',
+    name: 'UK',
+    url: '/'
+  },
+  {
+    id: 'international',
+    name: 'International',
+    url: '/'
+  }
+]
+
+const editionIDs = availableEditions.map((edition) => edition.id)
+
+export function isEdition(editionID: string): boolean {
+  return editionIDs.includes(editionID)
+}
+
+export function getEditions(currentEdition: string): TNavEditions {
+  return {
+    current: availableEditions.find((edition) => edition.id === currentEdition),
+    others: availableEditions.filter((edition) => edition.id !== currentEdition)
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './editions'
+export * from './actions'
+export * from './navigation'

package/src/navigation.ts

@@ -0,0 +1,104 @@
+import Poller from 'ft-poller'
+import httpError from 'http-errors'
+import deepFreeze from 'deep-freeze'
+import fetch from 'node-fetch'
+import {
+  TNavMenus,
+  TNavMenusForEdition,
+  TNavSubNavigation,
+  TNavEditions,
+  TNavAction
+} from '@financial-times/dotcom-types-navigation'
+import { selectMenuDataForEdition } from './selectMenuDataForEdition'
+import { decorateMenuData } from './decorateMenuData'
+import { getEditions, isEdition } from './editions'
+import { getSubscribeAction } from './actions'
+
+// Makes the navigation data completely immutable,
+// To modify the data, clone the parts you need to change then modify in your app
+const parseData = (data: any) => {
+  return deepFreeze(data)
+}
+
+const removeLeadingForwardSlash = (pagePath: string) => {
+  return pagePath.charAt(0) === '/' ? pagePath.substring(1) : pagePath
+}
+
+export type TNavOptions = {
+  menuUrl?: string
+  subNavigationUrl?: string
+  interval?: number
+}
+
+const defaults: TNavOptions = {
+  menuUrl: 'http://next-navigation.ft.com/v2/menus',
+  subNavigationUrl: 'http://next-navigation.ft.com/v2/hierarchy',
+  interval: 15 * 60 * 1000 // poll every 15 minutes
+}
+
+export class Navigation {
+  public options: TNavOptions
+  public poller: Poller
+  public initialPromise: Promise<void>
+  private menuData: TNavMenus
+
+  constructor(options: TNavOptions = {}) {
+    this.options = { ...defaults, ...options }
+
+    this.poller = new Poller({
+      url: this.options.menuUrl,
+      refreshInterval: this.options.interval,
+      parseData
+    })
+
+    this.initialPromise = this.poller.start({ initialRequest: true })
+  }
+
+  async getMenusData(): Promise<TNavMenus> {
+    // initialPromise does not return data but must resolve before `getData` can be called
+    await this.initialPromise
+
+    this.menuData = this.poller.getData()
+
+    return this.menuData
+
+  }
+
+  async getMenusFor(currentPath: string, currentEdition: string = 'uk'): Promise<TNavMenusForEdition> {
+    const menusData = await this.getMenusData()
+    const menusForEdition = selectMenuDataForEdition(menusData, currentEdition)
+
+    return decorateMenuData(menusForEdition, currentPath)
+  }
+
+  async getSubNavigationFor(path: string): Promise<TNavSubNavigation> {
+    const currentPage = removeLeadingForwardSlash(path)
+    const subNavigation = `${this.options.subNavigationUrl}/${currentPage}`
+    const response = await fetch(subNavigation)
+
+    if (response.ok) {
+      const data = await response.json()
+
+      const currentItem = { ...data.item, selected: true }
+
+      return {
+        breadcrumb: data.ancestors.concat(currentItem),
+        subsections: data.children
+      }
+    } else {
+      throw httpError(response.status, `Sub-navigation for ${currentPage} could not be found.`)
+    }
+  }
+
+  getEditionsFor(currentEdition: string = 'uk'): TNavEditions {
+    if (isEdition(currentEdition)) {
+      return getEditions(currentEdition)
+    } else {
+      throw Error(`The provided edition "${currentEdition}" is not a valid edition`)
+    }
+  }
+
+  getSubscribeAction(): TNavAction {
+    return getSubscribeAction()
+  }
+}

package/src/selectMenuDataForEdition.ts

@@ -0,0 +1,26 @@
+import { TNavMenuKeys, TNavMenus, TNavMenusForEdition } from '@financial-times/dotcom-types-navigation'
+
+const sharedMenuKeys: TNavMenuKeys[] = [
+  'account',
+  'anon',
+  'footer',
+  'navbar-simple',
+  'navbar-right',
+  'navbar-right-anon',
+  'user'
+]
+
+export function selectMenuDataForEdition(menuData: TNavMenus, currentEdition: string): TNavMenusForEdition {
+  const output = {
+    navbar: menuData[`navbar-${currentEdition}`],
+    drawer: menuData[`drawer-${currentEdition}`]
+  }
+
+  for (const key of sharedMenuKeys) {
+    if (menuData[key]) {
+      output[key] = menuData[key]
+    }
+  }
+
+  return output as TNavMenusForEdition
+}