@financial-times/dotcom-server-navigation 7.3.0 → 7.3.2

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@financial-times/dotcom-server-navigation",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "description": "",
   "main": "dist/node/index.js",
   "types": "src/index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "tsc": "../../node_modules/.bin/tsc --incremental",
     "clean": "npm run clean:dist && npm run clean:node_modules",
     "clean:dist": "rm -rf dist",
     "clean:node_modules": "rm -rf node_modules",
+    "build:node": "tsc",
     "build": "npm run build:node",
-    "build:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
     "dev": "npm run build:node -- --watch",
     "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
   },
@@ -19,7 +18,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^7.3.0",
+    "@financial-times/dotcom-types-navigation": "file:../dotcom-types-navigation",
     "@types/deep-freeze": "^0.1.1",
     "deep-freeze": "0.0.1",
     "ft-poller": "^7.2.1",
@@ -35,6 +34,10 @@
     "node": ">= 14.0.0",
     "npm": "7.x || 8.x"
   },
+  "files": [
+    "dist/",
+    "src/"
+  ],
   "repository": {
     "type": "git",
     "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
@@ -44,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'])
+  })
+})