@financial-times/dotcom-ui-footer 8.2.1 → 8.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-footer",
-  "version": "8.2.1",
+  "version": "8.2.3",
   "description": "",
   "main": "component.js",
   "styles": "styles.scss",
@@ -21,7 +21,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^8.2.1"
+    "@financial-times/dotcom-types-navigation": "^8.2.3"
   },
   "peerDependencies": {
     "react": "16.x || 17.x",

package/src/__test__/component.spec.tsx

@@ -1,61 +1,83 @@
 /**
  * @jest-environment jsdom
  */
-import 'jest-enzyme'
 import React from 'react'
-import { mount } from 'enzyme'
+import { render } from '@testing-library/react'
 
 import dataFixture from '../__stories__/story-data'
 import { Footer, LegalFooter } from '../index'
 
-describe('dotcom-ui-footer', () => {
-  const footer = mount(<Footer {...dataFixture} />)
-  const legalFooter = mount(<LegalFooter {...dataFixture} />)
-
+describe('dotcom-ui-footer', () => {  
   it('renders the available footer variants', () => {
-    expect(footer).not.toBeEmptyRender()
-    expect(legalFooter).not.toBeEmptyRender()
+    const footer = render(<Footer {...dataFixture} />)
+    const legalFooter = render(<LegalFooter {...dataFixture} />)
+    expect(footer).not.toBeNull()
+    expect(legalFooter).not.toBeNull()
   })
 
   it('renders the copyright section', () => {
-    expect(footer.find('.o-footer__copyright')).toExist()
-    expect(legalFooter.find('.o-footer__copyright')).toExist()
+    const { container: footerContainer } = render(<Footer {...dataFixture} /> )
+    const { container: legalFooterContainer } = render(<LegalFooter {...dataFixture} />)
+
+    expect(footerContainer.querySelector('.o-footer__copyright')).not.toBeNull()
+    expect(legalFooterContainer.querySelector('.o-footer__copyright')).not.toBeNull()
   })
 
   it('renders the Nikkei banner', () => {
-    expect(footer.find('.o-footer__copyright')).toExist()
-    expect(legalFooter.find('.o-footer__brand-logo')).toExist()
+    const { container: footerContainer } = render(<Footer {...dataFixture} /> )
+    const { container: legalFooterContainer } = render(<LegalFooter {...dataFixture} />)
+
+    expect(legalFooterContainer.querySelector('.o-footer__copyright')).not.toBeNull()
+    expect(footerContainer.querySelector('.o-footer__brand-logo')).not.toBeNull()
   })
 
   describe('standard footer', () => {
     it('renders the navigation sections', () => {
-      expect(footer).not.toBeEmptyRender()
-      expect(footer.find('.o-footer__matrix')).toIncludeText('Support')
-      expect(footer.find('.o-footer__matrix')).toIncludeText('Legal & Privacy')
-      expect(footer.find('.o-footer__matrix')).toIncludeText('Services')
-      expect(footer.find('.o-footer__matrix')).toIncludeText('Tools')
+      const { container } = render(<Footer {...dataFixture} /> )
+
+      const matrix = container.querySelector('.o-footer__matrix')
+
+      expect(matrix).not.toBeNull()
+
+      expect(matrix?.innerHTML).toContain('Support')
+      expect(matrix?.innerHTML).toContain('Legal &amp; Privacy')
+      expect(matrix?.innerHTML).toContain('Services')
+      expect(matrix?.innerHTML).toContain('Tools')
     })
 
     it('does not render the legal links section', () => {
-      expect(footer.find('.o-footer__legal-links')).not.toExist()
+      const { container } = render(<Footer {...dataFixture} /> )
+
+      const legalLinks = container.querySelector('.o-footer__legal-links')
+
+      expect(legalLinks).toBeNull()
     })
 
     it('renders the More from FT section', () => {
-      expect(footer.find('.o-footer__matrix-link__copy')).toExist()
+      const { container } = render(<Footer {...dataFixture} /> )
+
+      const moreFromFt = container.querySelector('.o-footer__matrix-link__copy')
+      expect(moreFromFt).not.toBeNull()
     })
   })
 
   describe('legal footer', () => {
     it('does not render the navigation sections', () => {
-      expect(legalFooter.find('.o-footer__matrix')).not.toExist()
+      const { container } = render(<LegalFooter {...dataFixture} /> )
+
+      expect(container.querySelector('.o-footer__matrix')).toBeNull()
     })
 
     it('renders the legal links section', () => {
-      expect(legalFooter.find('.o-footer__legal-links')).toExist()
+      const { container } = render(<LegalFooter {...dataFixture} /> )
+
+      expect(container.querySelector('.o-footer__legal-links')).not.toBeNull()
     })
 
     it('does not render the More from FT section', () => {
-      expect(legalFooter.find('.o-footer__more-from-ft')).not.toExist()
+      const { container } = render(<LegalFooter {...dataFixture} /> )
+
+      expect(container.querySelector('.o-footer__more-from-ft')).toBeNull()
     })
   })
 })

package/src/components/partials.tsx

@@ -65,7 +65,8 @@ const FooterContents = ({ footerData }: TFooterContentsProps) => (
         return (
           <div
             key={`group-${index}`}
-            className={`o-footer__matrix-group o-footer__matrix-group--${submenu.length}`}>
+            className={`o-footer__matrix-group o-footer__matrix-group--${submenu.length}`}
+          >
             <SectionTitle label={item.label} index={index} />
             <SectionLinks submenu={submenu} index={index} />
           </div>
@@ -76,7 +77,8 @@ const FooterContents = ({ footerData }: TFooterContentsProps) => (
           <a
             className="o-footer__matrix-link o-footer__matrix-link--more"
             id={`o-footer-${footerData.length}`}
-            href="https://ft.com/more-from-ft-group">
+            href="https://ft.com/more-from-ft-group"
+          >
             <span className="o-footer__matrix-link__copy">More from the FT Group</span>
           </a>
         </h3>
@@ -97,7 +99,7 @@ const CopyrightNotice = ({ withoutMarketsData = false }) => {
         and ‘Financial Times’ are trademarks of The Financial Times Ltd.
         <br />
         The Financial Times and its journalism are subject to a self-regulation regime under the{' '}
-        <a href="http://aboutus.ft.com/en-gb/ft-editorial-code/" aria-label="F T Editorial Code of Practice">
+        <a href="https://aboutus.ft.com/en-gb/ft-editorial-code/" aria-label="F T Editorial Code of Practice">
           FT Editorial Code of Practice
         </a>
         .