@financial-times/dotcom-ui-header 8.2.2 → 8.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "8.2.2",
+  "version": "8.2.3",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,7 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^8.2.2",
+    "@financial-times/dotcom-types-navigation": "^8.2.3",
     "n-topic-search": "^4.0.0",
     "n-ui-foundations": "^9.0.0"
   },

package/src/__test__/output/component.spec.tsx

@@ -0,0 +1,113 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import dataFixture from '../../__stories__/story-data/index'
+import { Header } from '../../index'
+
+// data.currentPath to enable the mobile header
+const headerFixture = {
+  ...dataFixture,
+  data: { ...dataFixture.data, currentPath: '/' }
+}
+const subscribedUserFixture = { ...dataFixture, showUserNavigation: true, userIsSubscribed: true }
+const loggedInUserFixture = { ...dataFixture, showUserNavigation: true }
+const anonymousUserFixture = {
+  ...dataFixture,
+  userIsAnonymous: true,
+  userIsLoggedIn: false,
+  showUserNavigation: true
+}
+
+const commonHeader = <Header {...headerFixture} />
+const subscribedUserHeader = <Header {...subscribedUserFixture} />
+const loggedInUserHeader = <Header {...loggedInUserFixture} />
+const anonymousUserHeader = <Header {...anonymousUserFixture} />
+
+describe('dotcom-ui-header', () => {
+  it('renders the expected common header elements', () => {
+    const { container } = render(commonHeader)
+
+    const logo = container.querySelector('div[data-trackable="header-top"] .o-header__top-logo')
+    expect(logo?.hasChildNodes()).toBe(true)
+
+    const myFtLink = container.querySelector('div[data-trackable="header-top"] .o-header__top-icon-link--myft')
+    expect(myFtLink?.innerHTML).toContain('myFT')
+
+  })
+
+  it('renders an inlined SVG logo image', () => {
+    const { container } = render(commonHeader)
+
+    const logo = container.querySelector('div[data-trackable="header-top"] .o-header__top-logo')
+    expect(logo?.hasChildNodes()).toBe(true)
+    expect(logo?.innerHTML).toContain('Financial Times')
+    expect(logo?.querySelector('div[data-trackable="header-top"] .o-header__top-logo svg')).not.toBeNull()
+  })
+
+  it('renders the sticky header', () => {
+    const { container } = render(commonHeader)
+    const header = container.querySelector('.o-header--sticky')
+    expect(header).not.toBeNull()
+  })
+
+  it('renders the mobile header', () => {
+    const { container } = render(commonHeader)
+    const mobileHeader = container.querySelector('#o-header-nav-mobile')
+    expect(mobileHeader).not.toBeNull()
+  })
+
+  describe('When the user is subscribed', () => {
+    it('renders the expected logged in user header links', () => {
+      const { container } = render(subscribedUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Portfolio"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="Settings & Account"]')).not.toBeNull()
+    })
+
+    it('does not render sign in link', () => {
+      const { container } = render(subscribedUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Subscribe"]')).toBeNull()
+      expect(container.querySelector('a[data-trackable="Sign In"]')).toBeNull()
+    })
+  })
+
+  describe('When the user is logged in', () => {
+    it('renders the expected logged in user header links', () => {
+      const { container } = render(loggedInUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Portfolio"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="Settings & Account"]')).not.toBeNull()
+    })
+
+    it('does not render sign in link', () => {
+      const { container } = render(loggedInUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Subscribe"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="Sign In"]')).toBeNull()
+    })
+  })
+
+  describe('When the user is anonymous', () => {
+    it('renders the expected anonymous user header links', () => {
+      const { container } = render(anonymousUserHeader)
+
+      expect(
+        container.querySelector('.o-header__top-column .o-header__top-column--right a[data-trackable="Subscribe"]')
+      ).not.toBeNull()
+     expect(
+        container.querySelector('.o-header__top-column .o-header__top-column--right a[data-trackable="Sign In"]')
+      ).not.toBeNull()
+    })
+
+    it('does not render the logged in user header links', () => {
+      const { container } = render(anonymousUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Portfolio"]')).toBeNull()
+      expect(container.querySelector('a[data-trackable="Settings & Account"]')).toBeNull()
+    })
+  })
+})

package/src/__test__/output/drawer.spec.tsx

@@ -0,0 +1,124 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import navigationData from '../../__stories__/story-data/index'
+import { Drawer as Subject } from '../../'
+
+const fixture = {
+  data: { ...navigationData.data, currentPath: '/world' }
+}
+
+const loggedInUserFixture = {
+  ...fixture,
+  userIsAnonymous: false,
+  userIsLoggedIn: true
+}
+
+const anonymousUserFixture = {
+  ...fixture,
+  userIsAnonymous: true,
+  userIsLoggedIn: false
+}
+
+describe('dotcom-ui-header/src/components/drawer', () => {
+  describe('editions', () => {
+    it('renders the current edition text', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      expect(container.getElementsByClassName('o-header__drawer-current-edition')[0].innerHTML).toContain(
+        'UK Edition'
+      )
+    })
+
+    it('renders the alternative edition link', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const [firstLink] = Array.from(container.getElementsByClassName('o-header__drawer-menu-link'))
+      expect(firstLink.innerHTML).toContain('Switch to International Edition')
+    })
+  })
+
+  describe('navigation links', () => {
+    it('renders the primary link section title', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const [firstLink] = Array.from(container.getElementsByClassName('o-header__drawer-menu-item--heading'))
+      expect(firstLink.innerHTML).toContain('Top sections')
+    })
+
+    it('renders the secondary link section title', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const secondLink = Array.from(
+        container.getElementsByClassName('o-header__drawer-menu-item--heading')
+      )[1]
+      expect(secondLink.innerHTML).toContain('FT recommends')
+    })
+
+    it('renders the tertiary link section divider', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const [li] = Array.from(container.getElementsByClassName('o-header__drawer-menu-list--divide'))
+      expect(li.children[0].innerHTML).toContain('myFT')
+    })
+
+    it('renders primary link subsections', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const parentHeaders = Array.from(
+        container.getElementsByClassName('o-header__drawer-menu-link--parent')
+      ).filter((header) => header.innerHTML.includes('Companies'))
+
+      expect(parentHeaders.length).toBe(1)
+
+      const toggleHeaders = Array.from(
+        container.getElementsByClassName('o-header__drawer-menu-toggle')
+      ).filter((header) => header.innerHTML.includes('Show more Companies'))
+
+      expect(toggleHeaders.length).toBe(1)
+    })
+
+    it('highlights the current page', () => {
+      const { container } = render(<Subject {...fixture} />)
+      const currentPage = container.querySelector('[aria-current="page"]')
+      expect(currentPage?.innerHTML).toContain('World')
+    })
+  })
+
+  describe('user menu', () => {
+    describe('for a logged in user', () => {
+      it('renders sign out link', () => {
+        const { container } = render(<Subject {...loggedInUserFixture} />)
+
+        const signOutLink = container.querySelector('a[data-trackable="Sign Out"]')
+        expect(signOutLink?.innerHTML).toContain('Sign Out')
+      })
+
+      it('renders settings and account link', () => {
+        const { container } = render(<Subject {...loggedInUserFixture} />)
+
+        const signOutLink = container.querySelector('a[data-trackable="Settings & Account"]')
+        expect(signOutLink?.innerHTML).toContain('Settings &amp; Account')
+      })
+    })
+
+    describe('for an anonymous user', () => {
+      it('renders sign in link', () => {
+        const { container } = render(<Subject {...anonymousUserFixture} />)
+
+        const signInLink = container.querySelector('a[data-trackable="Sign In"')
+        expect(signInLink?.innerHTML).toContain('Sign In')
+      })
+
+      it('renders subscribe link', () => {
+        const { container } = render(<Subject {...anonymousUserFixture} />)
+
+        const subscribeLink = container.querySelector('a[data-trackable="Subscribe"]')
+        expect(subscribeLink?.innerHTML).toContain('Subscribe')
+      })
+    })
+  })
+})

package/src/__test__/enzyme/component.spec.tsx

@@ -1,107 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import 'jest-enzyme'
-import React from 'react'
-import { mount } from 'enzyme'
-
-import dataFixture from '../../__stories__/story-data/index'
-import { Header } from '../../index'
-
-// data.currentPath to enable the mobile header
-const headerFixture = {
-  ...dataFixture,
-  data: { ...dataFixture.data, currentPath: '/' }
-}
-const subscribedUserFixture = { ...dataFixture, showUserNavigation: true, userIsSubscribed: true }
-const loggedInUserFixture = { ...dataFixture, showUserNavigation: true }
-const anonymousUserFixture = {
-  ...dataFixture,
-  userIsAnonymous: true,
-  userIsLoggedIn: false,
-  showUserNavigation: true
-}
-
-const commonHeader = <Header {...headerFixture} />
-const subscribedUserHeader = <Header {...subscribedUserFixture} />
-const loggedInUserHeader = <Header {...loggedInUserFixture} />
-const anonymousUserHeader = <Header {...anonymousUserFixture} />
-
-describe('dotcom-ui-header', () => {
-  const header = mount(commonHeader)
-
-  it('renders the expected common header elements', () => {
-    expect(header).not.toBeEmptyRender()
-    expect(header.find('div[data-trackable="header-top"] .o-header__top-logo')).toExist()
-    expect(
-      header.find(
-        'div[data-trackable="header-top"] .o-header__top-icon-link--search .o-header__top-link-label'
-      )
-    ).toExist()
-    expect(
-      header.find('div[data-trackable="header-top"] .o-header__top-icon-link--menu .o-header__top-link-label')
-    ).toExist()
-    expect(header.find('div[data-trackable="header-top"] .o-header__top-icon-link--myft')).toExist()
-  })
-
-  it('renders an inlined SVG logo image', () => {
-    expect(header.find('div[data-trackable="header-top"] .o-header__top-logo svg')).toExist()
-    expect(header.find('div[data-trackable="header-top"] .o-header__top-logo title')).toHaveText(
-      'Financial Times'
-    )
-  })
-
-  it('renders the sticky header', () => {
-    expect(header.find('.o-header--sticky')).toExist()
-  })
-
-  it('renders the mobile header', () => {
-    expect(header.find('#o-header-nav-mobile')).toExist()
-  })
-
-  describe('When the user is subscribed', () => {
-    const header = mount(subscribedUserHeader)
-
-    it('renders the expected logged in user header links', () => {
-      expect(header.find('a[data-trackable="Portfolio"]')).toExist()
-      expect(header.find('a[data-trackable="Settings & Account"]')).toExist()
-    })
-
-    it('does not render sign in link', () => {
-      expect(header.find('a[data-trackable="Subscribe"]')).not.toExist()
-      expect(header.find('a[data-trackable="Sign In"]')).not.toExist()
-    })
-  })
-
-  describe('When the user is logged in', () => {
-    const header = mount(loggedInUserHeader)
-
-    it('renders the expected logged in user header links', () => {
-      expect(header.find('a[data-trackable="Portfolio"]')).toExist()
-      expect(header.find('a[data-trackable="Settings & Account"]')).toExist()
-    })
-
-    it('does not render sign in link', () => {
-      expect(header.find('a[data-trackable="Subscribe"]')).toExist()
-      expect(header.find('a[data-trackable="Sign In"]')).not.toExist()
-    })
-  })
-
-  describe('When the user is anonymous', () => {
-    const header = mount(anonymousUserHeader)
-
-    it('renders the expected anonymous user header links', () => {
-      expect(
-        header.find('.o-header__top-column .o-header__top-column--right a[data-trackable="Subscribe"]')
-      ).toExist()
-      expect(
-        header.find('.o-header__top-column .o-header__top-column--right a[data-trackable="Sign In"]')
-      ).toExist()
-    })
-
-    it('does not render the logged in user header links', () => {
-      expect(header.find('a[data-trackable="Portfolio"]')).not.toExist()
-      expect(header.find('a[data-trackable="Settings & Account"]')).not.toExist()
-    })
-  })
-})

package/src/__test__/enzyme/drawer.spec.tsx

@@ -1,114 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import 'jest-enzyme'
-import React from 'react'
-import { mount } from 'enzyme'
-
-import navigationData from '../../__stories__/story-data/index'
-import { Drawer as Subject } from '../../'
-
-const fixture = {
-  data: { ...navigationData.data, currentPath: '/world' }
-}
-
-const loggedInUserFixture = {
-  ...fixture,
-  userIsAnonymous: false,
-  userIsLoggedIn: true
-}
-
-const anonymousUserFixture = {
-  ...fixture,
-  userIsAnonymous: true,
-  userIsLoggedIn: false
-}
-
-describe('dotcom-ui-header/src/components/drawer', () => {
-  describe('editions', () => {
-    let result
-
-    beforeAll(() => {
-      result = mount(<Subject {...fixture} />)
-    })
-
-    it('renders the current edition text', () => {
-      expect(result.find('.o-header__drawer-current-edition')).toHaveText('UK Edition')
-    })
-
-    it('renders the alternative edition link', () => {
-      expect(result.find('[data-trackable="edition-switcher"] a')).toHaveText(
-        'Switch to International Edition'
-      )
-    })
-  })
-
-  describe('navigation links', () => {
-    let result
-
-    beforeAll(() => {
-      result = mount(<Subject {...fixture} />)
-    })
-
-    it('renders the primary link section title', () => {
-      expect(result.find('.o-header__drawer-menu-item--heading').at(0)).toHaveText('Top sections')
-    })
-
-    it('renders the secondary link section title', () => {
-      expect(result.find('.o-header__drawer-menu-item--heading').at(1)).toHaveText('FT recommends')
-    })
-
-    it('renders the tertiary link section divider', () => {
-      expect(result.find('.o-header__drawer-menu-list--divide > li:first-child')).toHaveText('myFT')
-    })
-
-    it('renders primary link subsections', () => {
-      const section = result
-        .find('.o-header__drawer-menu-item')
-        .findWhere((node) => node.key() === '/companies')
-        .at(0)
-
-      expect(section.find('.o-header__drawer-menu-link--parent')).toHaveText('Companies')
-      expect(section.find('.o-header__drawer-menu-toggle')).toHaveText('Show more Companies')
-      expect(section.find('.o-header__drawer-menu-link--child').length).toBe(10)
-    })
-
-    it('highlights the current page', () => {
-      expect(result.find('[aria-current="page"]')).toHaveText('World')
-    })
-  })
-
-  describe('user menu', () => {
-    describe('for a logged in user', () => {
-      let result
-
-      beforeAll(() => {
-        result = mount(<Subject {...loggedInUserFixture} />)
-      })
-
-      it('renders sign out link', () => {
-        expect(result.find('a[data-trackable="Sign Out"]')).toExist()
-      })
-
-      it('renders settings and account link', () => {
-        expect(result.find('a[data-trackable="Settings & Account"]')).toExist()
-      })
-    })
-
-    describe('for an anonymous user', () => {
-      let result
-
-      beforeAll(() => {
-        result = mount(<Subject {...anonymousUserFixture} />)
-      })
-
-      it('renders sign in link', () => {
-        expect(result.find('a[data-trackable="Sign In"]')).toExist()
-      })
-
-      it('renders subscribe link', () => {
-        expect(result.find('a[data-trackable="Subscribe"]')).toExist()
-      })
-    })
-  })
-})