diff --git a/CHANGELOG.md b/CHANGELOG.md
index a70b61f8b..c65d869d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,12 @@
# NHS.UK frontend Changelog
-## 8.0.2 - 019 October 2023
+## 8.0.3 - 13 November 2023
+
+:wrench: **Fixes**
+
+- Updated header component unit tests ([PR 900](https://github.com/nhsuk/nhsuk-frontend/pull/900)).
+
+## 8.0.2 - 19 October 2023
:wrench: **Fixes**
diff --git a/package-lock.json b/package-lock.json
index eaae0ef9d..3ee530db7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "nhsuk-frontend",
- "version": "8.0.2",
+ "version": "8.0.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "nhsuk-frontend",
- "version": "8.0.2",
+ "version": "8.0.3",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.18.6",
diff --git a/package.json b/package.json
index e48a569ee..a2f09fe59 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "nhsuk-frontend",
- "version": "8.0.2",
+ "version": "8.0.3",
"description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
"scripts": {
"prepare": "gulp bundle",
diff --git a/tests/integration/jsdom/header.test.js b/tests/integration/jsdom/header.test.js
new file mode 100644
index 000000000..2c9847abb
--- /dev/null
+++ b/tests/integration/jsdom/header.test.js
@@ -0,0 +1,171 @@
+import Header from '../../../packages/components/header/header.js'
+
+describe('Header class', () => {
+ beforeEach(() => {
+ document.body.innerHTML = `
+
+
+
+
+
+ `
+ })
+
+ it('Should create navigation elements in the DOM', async () => {
+ // Call the Header initialization function
+ await Header()
+
+ // Ensure the navigation elements are created in the DOM
+ expect(document.querySelector('.nhsuk-navigation')).not.toBeNull()
+ })
+
+ it('Should toggle mobile menu visibility', async () => {
+ const toggleButton = document.querySelector('.nhsuk-header__menu-toggle')
+ let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
+ // Call the Header initialization function
+ await Header()
+
+ mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
+ // Initially, the menu should be closed
+ expect(mobileMenuList.classList.contains('nhsuk-header__drop-down--hidden')).toBe(true)
+
+ // Open the mobile menu
+ toggleButton.click()
+
+ expect(mobileMenuList.classList.contains('nhsuk-header__drop-down--hidden')).toBe(false)
+
+ // Close the mobile menu
+ toggleButton.click()
+
+ expect(mobileMenuList.classList.contains('nhsuk-header__drop-down--hidden')).toBe(true)
+ })
+
+ it('Should close menu when escape key is pressed', async () => {
+ //define a event for the escape key
+ const escapeKeyEvent = new KeyboardEvent('keydown', {
+ key: 'Escape',
+ code: 'Escape',
+ keyCode: 27,
+ which: 27,
+ charCode: 27
+ })
+ const toggleButton = document.querySelector('.nhsuk-header__menu-toggle')
+
+ await Header()
+
+ //Expect the menu to be hidden initially
+ expect(
+ document.querySelector('.nhsuk-header__drop-down').classList.contains('nhsuk-header__drop-down--hidden')
+ ).toBe(true)
+
+ //Toogle the menu - open it
+ toggleButton.click()
+ expect(
+ document.querySelector('.nhsuk-header__drop-down').classList.contains('nhsuk-header__drop-down--hidden')
+ ).toBe(false)
+
+ //Press the escape key to close it
+ document.dispatchEvent(escapeKeyEvent)
+ expect(
+ document.querySelector('.nhsuk-header__drop-down').classList.contains('nhsuk-header__drop-down--hidden')
+ ).toBe(true)
+ })
+
+ it('Should setup the Mobile Menu Container during initialization', async () => {
+ const mobileMenuContainer = document.querySelector('.nhsuk-mobile-menu-container')
+ expect(mobileMenuContainer.childElementCount).toBe(0)
+ await Header()
+ expect(mobileMenuContainer.childElementCount).toBeGreaterThan(0)
+ })
+
+ it('Should setup the Mobile Menu List during initialization', async () => {
+ //Initially there won't be any ul elements inside the container- it gets added in the setupMobileMenu method
+ let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
+
+ //So we expect that to be null until it gets created
+ expect(mobileMenuList).toBe(null)
+
+ // Call the Header initialization function
+ await Header()
+
+ //We update the variable to hold the ul element from the container that has been created
+ mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
+
+ expect(mobileMenuList).not.toBeNull()
+ expect(mobileMenuList.classList).toContain('nhsuk-header__drop-down')
+ expect(mobileMenuList.classList).toContain('nhsuk-header__drop-down--hidden')
+ })
+
+ it('Should not update navigation when the available space is enough for all elements', async () => {
+ const mobileMenuToggleButton = document.querySelector('.nhsuk-header__menu-toggle')
+ const mobileMenuContainer = document.querySelector('.nhsuk-mobile-menu-container')
+ const navigationElement = document.querySelector('.nhsuk-navigation')
+ const navigationList = document.querySelector('.nhsuk-header__navigation-list')
+ let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
+
+ // Spy on offsetWidth property for navigation element
+ const navigationOffsetWidthSpy = jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
+ // Mock offsetWidth for navigation element
+ navigationOffsetWidthSpy.mockImplementation(function () {
+ if (this === navigationElement) {
+ return 1000 // Mock navigation element offsetWidth
+ }
+ return 50 // Mock children offsetWidth
+ })
+
+ await Header()
+
+ // breakpoints will be [50,100,150,200,250,300,350,400]
+ // the available space - navigation offsetWidth - will be greater than the last element from the breakpoints array
+ // meaning we don't need the mobile menu to get any items from the navigation
+ expect(mobileMenuToggleButton.classList.contains('nhsuk-header__menu-toggle--visible')).toBe(false)
+ expect(mobileMenuContainer.classList.contains('nhsuk-mobile-menu-container--visible')).toBe(false)
+
+ mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
+ expect(mobileMenuList.children).toHaveLength(0)
+ expect(navigationList.children).toHaveLength(8)
+
+ navigationOffsetWidthSpy.mockRestore()
+ })
+
+ it('Should update navigation when the available space is not enough for all elements', async () => {
+ const mobileMenuToggleButton = document.querySelector('.nhsuk-header__menu-toggle')
+ const mobileMenuContainer = document.querySelector('.nhsuk-mobile-menu-container')
+ const navigationElement = document.querySelector('.nhsuk-navigation')
+ const navigationList = document.querySelector('.nhsuk-header__navigation-list')
+ let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
+
+ // Spy on offsetWidth property for navigation element
+ const navigationOffsetWidthSpy = jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
+ // Mock offsetWidth for navigation element
+ navigationOffsetWidthSpy.mockImplementation(function () {
+ if (this === navigationElement) {
+ return 700 // Mock navigation element offsetWidth
+ }
+ return 100 // Mock children offsetWidth
+ })
+
+ await Header()
+
+ // breakpoints will be [100,200,300,400,500,600,700,800]
+ // the available space - navigation offsetWidth - will be smaller than the last element from the breakpoints array
+ // meaning we need the mobile menu to get 1 item from the navigation
+ expect(mobileMenuToggleButton.classList.contains('nhsuk-header__menu-toggle--visible')).toBe(true)
+ expect(mobileMenuContainer.classList.contains('nhsuk-mobile-menu-container--visible')).toBe(true)
+
+ mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
+ expect(mobileMenuList.children).toHaveLength(1)
+ expect(navigationList.children).toHaveLength(7)
+
+ navigationOffsetWidthSpy.mockRestore()
+ })
+})