@financial-times/dotcom-ui-layout 9.0.0-beta.8 → 9.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-layout",
-  "version": "9.0.0-beta.8",
+  "version": "9.0.1",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
@@ -22,15 +22,16 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^9.0.0-beta.8",
-    "@financial-times/dotcom-ui-base-styles": "^9.0.0-beta.8",
-    "@financial-times/dotcom-ui-footer": "^9.0.0-beta.8",
-    "@financial-times/dotcom-ui-header": "^9.0.0-beta.8",
+    "@financial-times/dotcom-types-navigation": "^9.0.1",
+    "@financial-times/dotcom-ui-base-styles": "^9.0.1",
+    "@financial-times/dotcom-ui-footer": "^9.0.1",
+    "@financial-times/dotcom-ui-header": "^9.0.1",
     "focus-visible": "^5.0.0",
     "n-ui-foundations": "^9.0.0"
   },
   "peerDependencies": {
-    "react": "16.x || 17.x"
+    "react": "17.x || 18.x",
+    "react-dom": "17.x || 18.x"
   },
   "engines": {
     "node": "16.x || 18.x",
@@ -53,7 +54,6 @@
     "extends": "../../package.json"
   },
   "devDependencies": {
-    "check-engine": "^1.10.1",
-    "react": "^16.8.6"
+    "check-engine": "^1.10.1"
   }
 }

package/src/components/__test__/Layout.spec.tsx

@@ -1,227 +1,233 @@
 /**
  * @jest-environment jsdom
  */
-import 'jest-enzyme'
 import React from 'react'
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
 
 import { Layout as Subject } from '../Layout'
-import { Header, Drawer, LogoOnly, NoOutboundLinksHeader } from '@financial-times/dotcom-ui-header'
-import { Footer, LegalFooter } from '@financial-times/dotcom-ui-footer'
 
-describe('dotcom-ui-layout/src/components/Layout', () => {
-  const result = shallow(<Subject />)
+jest.mock('@financial-times/dotcom-ui-header', () => ({
+  Header: () => <div>Header mock</div>,
+  Drawer: () => <div>Drawer mock</div>,
+  LogoOnly: () => <div>LogoOnly mock</div>,
+  NoOutboundLinksHeader: () => <div>NoOutboundLinksHeader mock</div>
+}))
+
+jest.mock('@financial-times/dotcom-ui-footer', () => ({
+  Footer: () => <div>Footer mock</div>,
+  LegalFooter: () => <div>LegalFooter mock</div>
+}))
 
+describe('dotcom-ui-layout/src/components/Layout', () => {
   it('renders skip links to page landmarks', () => {
-    expect(result.find('a[href="#site-navigation"]')).toHaveText('Skip to navigation')
-    expect(result.find('a[href="#site-content"]')).toHaveText('Skip to content')
-    expect(result.find('a[href="#site-footer"]')).toHaveText('Skip to footer')
-  })
+    const { container } = render(<Subject />)
+
+    const skipToNavigationLink = container.querySelector('a[href="#site-navigation"]')
+    const skipToContentLink = container.querySelector('a[href="#site-content"]')
+    const skipToFooterLink = container.querySelector('a[href="#site-footer"]')
 
-  it('renders the header and drawer components', () => {
-    expect(result.find(Header)).toExist()
-    expect(result.find(Drawer)).toExist()
+    expect(skipToNavigationLink?.innerHTML).toContain('Skip to navigation')
+    expect(skipToContentLink?.innerHTML).toContain('Skip to content')
+    expect(skipToFooterLink?.innerHTML).toContain('Skip to footer')
   })
 
-  it('renders the footer component', () => {
-    expect(result.find(Footer)).toExist()
+  it('renders the header, drawer & footer components', () => {
+    const { container } = render(<Subject />)
+
+    expect(container.innerHTML).toContain('Header mock')
+    expect(container.innerHTML).toContain('Drawer mock')
+    expect(container.innerHTML).toContain('Footer mock')
   })
+})
+
+describe('header variations', () => {
+  describe('with the simple variant', () => {
+    it('renders the header component', () => {
+      const { container } = render(<Subject headerVariant={'simple' as any} />)
+
+      expect(container.innerHTML).toContain('Header mock')
+    })
+
+    it('renders the drawer component', () => {
+      const { container } = render(<Subject headerVariant={'simple' as any} />)
 
-  describe('header variations', () => {
-    describe('with the simple variant', () => {
-      let result
+      expect(container.innerHTML).toContain('Drawer mock')
+    })
 
-      beforeAll(() => {
-        result = shallow(<Subject headerVariant={'simple' as any} />)
-      })
+    it('renders the navigation skip link', () => {
+      const { container } = render(<Subject headerVariant={'simple' as any} />)
 
-      it('renders the header component', () => {
-        expect(result.find(Header)).toExist()
-      })
+      expect(container.querySelector('a[href="#site-navigation"]')).not.toBeNull()
+    })
+  })
 
-      it('renders the drawer component', () => {
-        expect(result.find(Drawer)).toExist()
-      })
+  describe('with the large-logo variant', () => {
+    it('renders the header component', () => {
+      const { container } = render(<Subject headerVariant={'large-logo' as any} />)
 
-      it('renders the navigation skip link', () => {
-        expect(result.find('a[href="#site-navigation"]')).toExist()
-      })
+      expect(container.innerHTML).toContain('Header mock')
     })
 
-    describe('with the large-logo variant', () => {
-      let result
+    it('renders the drawer component', () => {
+      const { container } = render(<Subject headerVariant={'large-logo' as any} />)
 
-      beforeAll(() => {
-        result = shallow(<Subject headerVariant={'large-logo' as any} />)
-      })
+      expect(container.innerHTML).toContain('Drawer mock')
+    })
 
-      it('renders the header component', () => {
-        expect(result.find(Header)).toExist()
-      })
+    it('renders the navigation skip link', () => {
+      const { container } = render(<Subject headerVariant={'large-logo' as any} />)
 
-      it('renders the drawer component', () => {
-        expect(result.find(Drawer)).toExist()
-      })
+      expect(container.querySelector('a[href="#site-navigation"]')).not.toBeNull()
+    })
+  })
 
-      it('renders the navigation skip link', () => {
-        expect(result.find('a[href="#site-navigation"]')).toExist()
-      })
+  describe('with the logo-only variant', () => {
+    it('renders the logo only header component', () => {
+      const { container } = render(<Subject headerVariant={'logo-only' as any} />)
+
+      expect(container.innerHTML).toContain('LogoOnly mock')
     })
 
-    describe('with the logo-only variant', () => {
-      let result
+    it('does not render the drawer component', () => {
+      const { container } = render(<Subject headerVariant={'logo-only' as any} />)
+
+      expect(container.innerHTML).not.toContain('Drawer mock')
+    })
 
-      beforeAll(() => {
-        result = shallow(<Subject headerVariant={'logo-only' as any} />)
-      })
+    it('does not render the navigation skip link', () => {
+      const { container } = render(<Subject headerVariant={'logo-only' as any} />)
 
-      it('renders the logo only header component', () => {
-        expect(result.find(LogoOnly)).toExist()
-      })
+      expect(container.querySelector('a[href="#site-navigation"]')).toBeNull()
+    })
+  })
 
-      it('does not render the drawer component', () => {
-        expect(result.find(Drawer)).not.toExist()
-      })
+  describe('with the no-outbound-links variant', () => {
+    it('renders the no-outbound-links header component', () => {
+      const { container } = render(<Subject headerVariant={'no-outbound-links' as any} />)
 
-      it('does not render the navigation skip link', () => {
-        expect(result.find('a[href="#site-navigation"]')).not.toExist()
-      })
+      expect(container.innerHTML).toContain('NoOutboundLinksHeader mock')
     })
 
-    describe('with the no-outbound-links variant', () => {
-      let result
+    it('does not render the drawer component', () => {
+      const { container } = render(<Subject headerVariant={'no-outbound-links' as any} />)
 
-      beforeAll(() => {
-        result = shallow(<Subject headerVariant={'no-outbound-links' as any} />)
-      })
+      expect(container.innerHTML).not.toContain('Drawer mock')
+    })
+
+    it('does not render the navigation skip link', () => {
+      const { container } = render(<Subject headerVariant={'no-outbound-links' as any} />)
 
-      it('renders the no-outbound-links header component', () => {
-        expect(result.find(NoOutboundLinksHeader)).toExist()
-      })
+      expect(container.querySelector('a[href="#site-navigation"]')).toBeNull()
+    })
+  })
 
-      it('does not render the drawer component', () => {
-        expect(result.find(Drawer)).not.toExist()
-      })
+  describe('with the header disabled', () => {
+    it('does not render the header component', () => {
+      const { container } = render(<Subject headerVariant={false} />)
 
-      it('does not render the navigation skip link', () => {
-        expect(result.find('a[href="#site-navigation"]')).not.toExist()
-      })
+      expect(container.innerHTML).not.toContain('Header mock')
     })
 
-    describe('with the header disabled', () => {
-      let result
+    it('does not render the drawer component', () => {
+      const { container } = render(<Subject headerVariant={false} />)
 
-      beforeAll(() => {
-        result = shallow(<Subject headerVariant={false} />)
-      })
+      expect(container.innerHTML).not.toContain('Drawer mock')
+    })
 
-      it('does not render the header component', () => {
-        expect(result.find(Header)).not.toExist()
-      })
+    it('does not render the navigation skip link', () => {
+      const { container } = render(<Subject headerVariant={false} />)
 
-      it('does not render the drawer component', () => {
-        expect(result.find(Drawer)).not.toExist()
-      })
+      expect(container.querySelector('a[href="#site-navigation"]')).toBeNull()
+    })
+  })
+
+  describe('with a custom header component', () => {
+    it('renders the given component', () => {
+      const { container } = render(<Subject headerComponent={<header>My custom header</header>} />)
 
-      it('does not render the navigation skip link', () => {
-        expect(result.find('a[href="#site-navigation"]')).not.toExist()
-      })
+      expect(container.innerHTML).toContain('My custom header')
     })
 
-    describe('with a custom header component', () => {
-      let result
+    it('does not render the header component', () => {
+      const { container } = render(<Subject headerComponent={<header>My custom header</header>} />)
 
-      beforeAll(() => {
-        const customHeader = <header>My custom header</header>
-        result = shallow(<Subject headerComponent={customHeader} />)
-      })
+      expect(container.innerHTML).not.toContain('Header mock')
+    })
 
-      it('renders the given component', () => {
-        expect(result.find('header')).toHaveText('My custom header')
-      })
+    it('does not render the drawer component', () => {
+      const { container } = render(<Subject headerComponent={<header>My custom header</header>} />)
 
-      it('does not render the header component', () => {
-        expect(result.find(Header)).not.toExist()
-      })
+      expect(container.innerHTML).not.toContain('Drawer mock')
+    })
 
-      it('does not render the drawer component', () => {
-        expect(result.find(Drawer)).not.toExist()
-      })
+    it('does not render the navigation skip link', () => {
+      const { container } = render(<Subject headerComponent={<header>My custom header</header>} />)
 
-      it('does not render the navigation skip link', () => {
-        expect(result.find('a[href="#site-navigation"]')).not.toExist()
-      })
+      expect(container.querySelector('a[href="#site-navigation"]')).toBeNull()
     })
   })
+})
 
-  describe('footer variations', () => {
-    describe('with the simple variant', () => {
-      let result
+describe('footer variations', () => {
+  describe('with the simple variant', () => {
+    it('renders the footer component', () => {
+      const { container } = render(<Subject footerVariant={'simple' as any} />)
 
-      beforeAll(() => {
-        result = shallow(<Subject footerVariant={'simple' as any} />)
-      })
+      expect(container.innerHTML).toContain('Footer mock')
+    })
 
-      it('renders the footer component', () => {
-        expect(result.find(Footer)).toExist()
-      })
+    it('renders the footer skip link', () => {
+      const { container } = render(<Subject footerVariant={'simple' as any} />)
 
-      it('renders the footer skip link', () => {
-        expect(result.find('a[href="#site-footer"]')).toExist()
-      })
+      expect(container.querySelector('a[href="#site-footer"]')).not.toBeNull()
     })
+  })
 
-    describe('with the legal variant', () => {
-      let result
+  describe('with the legal variant', () => {
+    it('renders the legal footer component', () => {
+      const { container } = render(<Subject footerVariant={'legal' as any} />)
 
-      beforeAll(() => {
-        result = shallow(<Subject footerVariant={'legal' as any} />)
-      })
+      expect(container.innerHTML).toContain('LegalFooter mock')
+    })
 
-      it('renders the legal footer component', () => {
-        expect(result.find(LegalFooter)).toExist()
-      })
+    it('renders the footer skip link', () => {
+      const { container } = render(<Subject footerVariant={'legal' as any} />)
 
-      it('renders the footer skip link', () => {
-        expect(result.find('a[href="#site-footer"]')).toExist()
-      })
+      expect(container.querySelector('a[href="#site-footer"]')).not.toBeNull()
     })
+  })
 
-    describe('with the footer disabled', () => {
-      let result
+  describe('with the footer disabled', () => {
+    it('does not render the footer component', () => {
+      const { container } = render(<Subject footerVariant={false} />)
 
-      beforeAll(() => {
-        result = shallow(<Subject footerVariant={false} />)
-      })
+      expect(container.innerHTML).not.toContain('Footer mock')
+    })
 
-      it('does not render the footer component', () => {
-        expect(result.find(Footer)).not.toExist()
-      })
+    it('does not render the footer skip link', () => {
+      const { container } = render(<Subject footerVariant={false} />)
 
-      it('does not render the footer skip link', () => {
-        expect(result.find('a[href="#site-footer"]')).not.toExist()
-      })
+      expect(container.querySelector('a[href="#site-footer"]')).toBeNull()
     })
+  })
+})
 
-    describe('with a custom footer component', () => {
-      let result
+describe('with a custom footer component', () => {
+  it('renders the given component', () => {
+    const { container } = render(<Subject footerComponent={<footer>My custom footer</footer>} />)
 
-      beforeAll(() => {
-        const customFooter = <footer>My custom footer</footer>
-        result = shallow(<Subject footerComponent={customFooter} />)
-      })
+    expect(container.innerHTML).toContain('My custom footer')
+  })
 
-      it('renders the given component', () => {
-        expect(result.find('footer')).toHaveText('My custom footer')
-      })
+  it('does not render the footer component', () => {
+    const { container } = render(<Subject footerComponent={<footer>My custom footer</footer>} />)
 
-      it('does not render the footer component', () => {
-        expect(result.find(Footer)).not.toExist()
-      })
+    expect(container.innerHTML).not.toContain('Footer mock')
+  })
 
-      it('does not render the footer skip link', () => {
-        expect(result.find('a[href="#site-footer"]')).not.toExist()
-      })
-    })
+  it('does not render the footer skip link', () => {
+    const { container } = render(<Subject footerComponent={<footer>My custom footer</footer>} />)
+
+    expect(container.querySelector('a[href="#site-footer"]')).toBeNull()
   })
 })

package/src/components/__test__/Template.spec.tsx

@@ -1,24 +1,24 @@
 /**
  * @jest-environment jsdom
  */
-import 'jest-enzyme'
 import React from 'react'
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
 
 import Subject from '../Template'
 
 describe('dotcom-ui-layout/src/components/Template', () => {
   it('can render contents provided as a string', () => {
-    const result = mount(<Subject>{'<p>Hello World</p>'}</Subject>)
-    expect(result.html()).toBe('<div><p>Hello World</p></div>')
+    const { container } = render(<Subject>{'<p>Hello World</p>'}</Subject>)
+
+    expect(container.outerHTML).toContain('<div><p>Hello World</p></div>')
   })
 
   it('can render contents provided as children', () => {
-    const result = mount(
+    const { container } = render(
       <Subject>
         <p>Hello World</p>
       </Subject>
     )
-    expect(result.html()).toBe('<div><p>Hello World</p></div>')
+    expect(container.outerHTML).toContain('<div><p>Hello World</p></div>')
   })
-})
+})