@financial-times/dotcom-ui-header 7.3.0 → 7.3.2

package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap

@@ -0,0 +1,588 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in user 1`] = `
+<header
+  aria-hidden="true"
+  className="o-header o-header--simple o-header--sticky o--if-js"
+  data-o-component="o-header"
+  data-o-header--sticky={true}
+>
+  <div
+    className="o-header__row o-header__top"
+    data-trackable="header-sticky"
+  >
+    <div
+      className="o-header__container"
+    >
+      <div
+        className="o-header__top-wrapper"
+      >
+        <div
+          className="o-header__top-column o-header__top-column--left"
+        >
+          <a
+            aria-controls="o-header-drawer"
+            className="o-header__top-icon-link o-header__top-icon-link--menu"
+            data-trackable="drawer-toggle"
+            href="#"
+            tabIndex={-1}
+          >
+            <span
+              className="o-header__top-link-label"
+            >
+              Menu
+            </span>
+          </a>
+          <a
+            aria-controls="o-header-search-sticky"
+            className="o-header__top-icon-link o-header__top-icon-link--search"
+            data-trackable="search-toggle"
+            href="#"
+            tabIndex={-1}
+          >
+            <span
+              className="o-header__top-link-label"
+            >
+              Search
+            </span>
+          </a>
+        </div>
+        <div
+          className="o-header__top-column o-header__top-column--center"
+        >
+          <div
+            className="o-header__top-takeover"
+          >
+            <div
+              className="o-header__nav"
+            >
+              <ul
+                className="o-header__nav-list o-header__nav-list--left"
+                data-trackable="primary-nav"
+              >
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Home"
+                    href="/"
+                    tabIndex={-1}
+                  >
+                    Home
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="World"
+                    href="/world"
+                    tabIndex={-1}
+                  >
+                    World
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="UK"
+                    href="/world/uk"
+                    tabIndex={-1}
+                  >
+                    UK
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Companies"
+                    href="/companies"
+                    tabIndex={-1}
+                  >
+                    Companies
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Tech"
+                    href="/technology"
+                    tabIndex={-1}
+                  >
+                    Tech
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Markets"
+                    href="/markets"
+                    tabIndex={-1}
+                  >
+                    Markets
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Graphics"
+                    href="/graphics"
+                    tabIndex={-1}
+                  >
+                    Graphics
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Opinion"
+                    href="/opinion"
+                    tabIndex={-1}
+                  >
+                    Opinion
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Work & Careers"
+                    href="/work-careers"
+                    tabIndex={-1}
+                  >
+                    Work & Careers
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Life & Arts"
+                    href="/life-arts"
+                    tabIndex={-1}
+                  >
+                    Life & Arts
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="HTSI"
+                    href="https://howtospendit.ft.com/"
+                    tabIndex={-1}
+                  >
+                    HTSI
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <a
+            className="o-header__top-logo o-header__hide--L"
+            data-trackable="logo"
+            href="/"
+            tabIndex={-1}
+            title="Go to Financial Times homepage"
+          >
+            <span
+              className="o-header__visually-hidden"
+            >
+              Financial Times
+            </span>
+          </a>
+        </div>
+        <div
+          className="o-header__top-column o-header__top-column--right"
+        >
+          <a
+            className="o-header__top-button o-header__top-button--hide-m"
+            data-trackable="Subscribe"
+            href="/products?segmentId=#"
+            role="button"
+          >
+            Subscribe
+          </a>
+          <a
+            className="o-header__top-icon-link o-header__top-icon-link--myft "
+            data-trackable="my-ft"
+            href="/myft"
+            tabIndex={-1}
+          >
+            <span
+              className="o-header__visually-hidden"
+            >
+              myFT
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="o-header__row o-header__search o-header__search--sticky"
+    data-o-header-search={true}
+    data-trackable="header-search"
+    id="o-header-search-sticky"
+  >
+    <div
+      className="o-header__container"
+    >
+      <form
+        action="/search"
+        aria-label="Site search"
+        className="o-header__search-form"
+        data-n-topic-search={true}
+        data-n-topic-search-categories="concepts,equities"
+        data-n-topic-search-view-all={true}
+        role="search"
+      >
+        <label
+          className="o-header__visually-hidden"
+          htmlFor="o-header-search-term-sticky"
+        >
+          Search the 
+          <abbr
+            title="Financial Times"
+          >
+            FT
+          </abbr>
+        </label>
+        <input
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          className="o-header__search-term"
+          data-n-topic-search-input={true}
+          data-trackable="search-term"
+          id="o-header-search-term-sticky"
+          name="q"
+          placeholder="Search the FT"
+          spellCheck={false}
+          type="text"
+        />
+        <button
+          className="o-header__search-submit"
+          data-trackable="search-submit"
+          type="submit"
+        >
+          Search
+        </button>
+        <button
+          aria-controls="o-header-search-sticky"
+          className="o-header__search-close o--if-js"
+          data-trackable="close"
+          title="Close search bar"
+          type="button"
+        >
+          <span
+            className="o-header__visually-hidden"
+          >
+            Close search bar
+          </span>
+        </button>
+      </form>
+    </div>
+  </div>
+</header>
+`;
+
+exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous user 1`] = `
+<header
+  aria-hidden="true"
+  className="o-header o-header--simple o-header--sticky o--if-js"
+  data-o-component="o-header"
+  data-o-header--sticky={true}
+>
+  <div
+    className="o-header__row o-header__top"
+    data-trackable="header-sticky"
+  >
+    <div
+      className="o-header__container"
+    >
+      <div
+        className="o-header__top-wrapper"
+      >
+        <div
+          className="o-header__top-column o-header__top-column--left"
+        >
+          <a
+            aria-controls="o-header-drawer"
+            className="o-header__top-icon-link o-header__top-icon-link--menu"
+            data-trackable="drawer-toggle"
+            href="#"
+            tabIndex={-1}
+          >
+            <span
+              className="o-header__top-link-label"
+            >
+              Menu
+            </span>
+          </a>
+          <a
+            aria-controls="o-header-search-sticky"
+            className="o-header__top-icon-link o-header__top-icon-link--search"
+            data-trackable="search-toggle"
+            href="#"
+            tabIndex={-1}
+          >
+            <span
+              className="o-header__top-link-label"
+            >
+              Search
+            </span>
+          </a>
+        </div>
+        <div
+          className="o-header__top-column o-header__top-column--center"
+        >
+          <div
+            className="o-header__top-takeover"
+          >
+            <div
+              className="o-header__nav"
+            >
+              <ul
+                className="o-header__nav-list o-header__nav-list--left"
+                data-trackable="primary-nav"
+              >
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Home"
+                    href="/"
+                    tabIndex={-1}
+                  >
+                    Home
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="World"
+                    href="/world"
+                    tabIndex={-1}
+                  >
+                    World
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="UK"
+                    href="/world/uk"
+                    tabIndex={-1}
+                  >
+                    UK
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Companies"
+                    href="/companies"
+                    tabIndex={-1}
+                  >
+                    Companies
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Tech"
+                    href="/technology"
+                    tabIndex={-1}
+                  >
+                    Tech
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Markets"
+                    href="/markets"
+                    tabIndex={-1}
+                  >
+                    Markets
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Graphics"
+                    href="/graphics"
+                    tabIndex={-1}
+                  >
+                    Graphics
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Opinion"
+                    href="/opinion"
+                    tabIndex={-1}
+                  >
+                    Opinion
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Work & Careers"
+                    href="/work-careers"
+                    tabIndex={-1}
+                  >
+                    Work & Careers
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="Life & Arts"
+                    href="/life-arts"
+                    tabIndex={-1}
+                  >
+                    Life & Arts
+                  </a>
+                </li>
+                <li
+                  className="o-header__nav-item"
+                >
+                  <a
+                    className="o-header__nav-link o-header__nav-link--primary"
+                    data-trackable="HTSI"
+                    href="https://howtospendit.ft.com/"
+                    tabIndex={-1}
+                  >
+                    HTSI
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <a
+            className="o-header__top-logo o-header__hide--L"
+            data-trackable="logo"
+            href="/"
+            tabIndex={-1}
+            title="Go to Financial Times homepage"
+          >
+            <span
+              className="o-header__visually-hidden"
+            >
+              Financial Times
+            </span>
+          </a>
+        </div>
+        <div
+          className="o-header__top-column o-header__top-column--right"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="o-header__row o-header__search o-header__search--sticky"
+    data-o-header-search={true}
+    data-trackable="header-search"
+    id="o-header-search-sticky"
+  >
+    <div
+      className="o-header__container"
+    >
+      <form
+        action="/search"
+        aria-label="Site search"
+        className="o-header__search-form"
+        data-n-topic-search={true}
+        data-n-topic-search-categories="concepts,equities"
+        data-n-topic-search-view-all={true}
+        role="search"
+      >
+        <label
+          className="o-header__visually-hidden"
+          htmlFor="o-header-search-term-sticky"
+        >
+          Search the 
+          <abbr
+            title="Financial Times"
+          >
+            FT
+          </abbr>
+        </label>
+        <input
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          className="o-header__search-term"
+          data-n-topic-search-input={true}
+          data-trackable="search-term"
+          id="o-header-search-term-sticky"
+          name="q"
+          placeholder="Search the FT"
+          spellCheck={false}
+          type="text"
+        />
+        <button
+          className="o-header__search-submit"
+          data-trackable="search-submit"
+          type="submit"
+        >
+          Search
+        </button>
+        <button
+          aria-controls="o-header-search-sticky"
+          className="o-header__search-close o--if-js"
+          data-trackable="close"
+          title="Close search bar"
+          type="button"
+        >
+          <span
+            className="o-header__visually-hidden"
+          >
+            Close search bar
+          </span>
+        </button>
+      </form>
+    </div>
+  </div>
+</header>
+`;

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

@@ -0,0 +1,107 @@
+/**
+ * @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()
+    })
+  })
+})