diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js index 3144d5ae7e..adb8751284 100644 --- a/src/components/header/_macro.spec.js +++ b/src/components/header/_macro.spec.js @@ -6,525 +6,348 @@ import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { mapAll } from '../../tests/helpers/cheerio'; -const EXAMPLE_HEADER_BASIC = { - title: 'Header title', -}; - -const EXAMPLE_SERVICE_LINKS_CONFIG = { - id: 'service-links', - ariaLabel: 'Services menu', - classes: 'custom-class', - toggleServicesButton: { - text: 'Menu', - ariaLabel: 'Toggle services menu', - }, -}; - -const EXAMPLE_HEADER_SERVICE_LIST_ITEMS = { - ...EXAMPLE_HEADER_BASIC, - serviceLinks: { - ...EXAMPLE_SERVICE_LINKS_CONFIG, - itemsList: [ - { - title: 'Title 1', - }, - { - title: 'Title 2', - }, - { - title: 'Title 3', - }, - ], - }, -}; - -const EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE = { - ...EXAMPLE_HEADER_BASIC, - serviceLinks: { - ...EXAMPLE_SERVICE_LINKS_CONFIG, - itemsList: [ - { - title: 'Title 1', - url: '#1', - }, - { - title: 'Title 2', - url: '#2', - }, - { - title: 'Title 3', - url: '#3', - }, - ], - }, -}; - -const EXAMPLE_HEADER_SERVICE_LINKS_SINGLE = { - ...EXAMPLE_HEADER_BASIC, - serviceLinks: { - ...EXAMPLE_SERVICE_LINKS_CONFIG, - itemsList: [ - { - title: 'Title', - url: '#0', - }, - ], - }, -}; - -const EXAMPLE_HEADER_LANGUAGE_CONFIG = { - language: { - languages: [ - { - url: '#0', - ISOCode: 'en', - text: 'English', - buttonAriaLabel: 'Language selector. Current language: English', - chooseLanguage: 'Choose language', - current: true, - }, - { - url: '#0', - ISOCode: 'cy', - text: 'Cymraeg', - buttonAriaLabel: 'Dewisydd iaith. Iaith gyfredol: Cymraeg', - chooseLanguage: 'Dewiswch iaith', - current: false, - }, - ], - }, -}; - -const EXAMPLE_HEADER_NAVIGATION_CONFIG = { - navigation: { - id: 'main-nav', - ariaLabel: 'Main menu', - currentPath: '#home', - itemsList: [ - { - title: 'Home', - url: '#home', - }, - { - title: 'Guidance', - url: '#0', - }, - ], - toggleNavigationButton: { - text: 'Menu', - ariaLabel: 'Toggle main menu', - }, - }, -}; - -const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = { - navigation: { - id: 'main-nav', - ariaLabel: 'Main menu', - currentPath: '#1', - currentPageTitle: 'Guidance', - itemsList: [ - { - title: 'Home', - url: '#0', - }, - { - title: 'Guidance', - url: '#1', - }, - ], - toggleNavigationButton: { - text: 'Menu', - ariaLabel: 'Toggle main menu', - }, - subNavigation: { - id: 'sub-nav', - overviewURL: '#overview', - overviewText: 'Overview', - ariaLabel: 'Section menu', - currentPath: '#1', - itemsList: [ - { - title: 'Sub nav item 1', - url: '#0', - classes: 'custom-class-sub-item-1', - id: 'sub-item-1', - }, - { - title: 'Sub nav item 2', - url: '#1', - classes: 'custom-class-sub-item-2', - id: 'sub-item-2', - }, - ], - }, - }, -}; - -const EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST = { - navigation: { - id: 'main-nav', - ariaLabel: 'Main menu', - currentPath: '#home', - itemsList: [ - { - title: 'Home', - url: '#home', - }, - { - title: 'Guidance', - url: '#0', - }, - ], - toggleNavigationButton: { - text: 'Menu', - ariaLabel: 'Toggle main menu', - }, - }, - siteSearchAutosuggest: { - label: 'label', - instructions: 'Use up and down keys to navigate.', - ariaYouHaveSelected: 'You have selected', - ariaMinChars: 'Enter 3 or more characters for suggestions.', - minChars: 3, - ariaResultsLabel: 'Country suggestions', - ariaOneResult: 'There is one suggestion available.', - ariaNResults: 'There are {n} suggestions available.', - ariaLimitedResults: 'Type more characters to improve your search', - moreResults: 'Continue entering to improve suggestions', - resultsTitle: 'Suggestions', - resultsTitleId: 'country-of-birth-suggestions', - noResults: 'No suggestions found.', - typeMore: 'Continue entering to get suggestions', - language: 'en-gb', - }, -}; - -describe('macro: header', () => { - describe('mode: basic', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_BASIC)); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); +import { + EXAMPLE_HEADER_BASIC, + EXAMPLE_SERVICE_LINKS_CONFIG, + EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE, + EXAMPLE_HEADER_SERVICE_LINKS_SINGLE, + EXAMPLE_HEADER_LANGUAGE_CONFIG, + EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG, + EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST, +} from './_test_examples'; + +describe('FOR: Header', () => { + describe('GIVEN: Params: none', () => { + describe('WHEN: All params are at default state', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + }), + ); + test('THEN: jest-axe tests pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); }); - - it('has provided variant style classes', () => { + }); + describe('GIVEN: Params: variants', () => { + describe('WHEN: variants are provided', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, variants: ['variant-a', 'variant-b'], }), ); - - expect($('.ons-header--variant-a').length).toBe(1); - expect($('.ons-header--variant-b').length).toBe(1); + test('THEN: renders with variant style classes matching variant provided', () => { + expect($('.ons-header--variant-a').length).toBe(1); + expect($('.ons-header--variant-b').length).toBe(1); + }); }); - - it('has additionally provided `classes`', () => { + }); + describe('GIVEN: Params: classes', () => { + describe('WHEN: classes are provided', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, classes: 'extra-class another-extra-class', }), ); - - expect($('.ons-header').hasClass('extra-class')).toBe(true); - expect($('.ons-header').hasClass('another-extra-class')).toBe(true); - }); - - it('has the correct container if `fullWidth`', () => { - const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, fullWidth: true })); - - expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true); - }); - - it('has the correct container if `wide`', () => { - const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, wide: true })); - - expect($('.ons-container').hasClass('ons-container--wide')).toBe(true); - }); - - it('has the correct masthead logo link', () => { - const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, mastheadLogoUrl: '#0' })); - - expect($('.ons-header__org-logo-link').attr('href')).toBe('#0'); - }); - - it('has the default masthead logo icon', () => { - const faker = templateFaker(); - const iconsSpy = faker.spy('icon'); - - faker.renderComponent('header', EXAMPLE_HEADER_BASIC); - - expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-en'); + test('THEN: renders with correct additional classes', () => { + expect($('.ons-header').hasClass('extra-class')).toBe(true); + expect($('.ons-header').hasClass('another-extra-class')).toBe(true); + }); }); - - it('has the default masthead mobile logo icon', () => { - const faker = templateFaker(); - const iconsSpy = faker.spy('icon'); - - faker.renderComponent('header', EXAMPLE_HEADER_BASIC); - - expect(iconsSpy.occurrences[1].iconType).toBe('ons-logo-stacked-en'); + }); + describe('GIVEN: Params: fullWidth & wide', () => { + describe('WHEN: fullWidth parameter is set to true', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + fullWidth: true, + }), + ); + test('THEN: renders container with fullWidth class', () => { + expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true); + }); }); - - it('has the default masthead logo icon alt text', () => { - const faker = templateFaker(); - const iconsSpy = faker.spy('icon'); - - faker.renderComponent('header', EXAMPLE_HEADER_BASIC); - - expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics homepage'); + describe('WHEN: wide parameter is set to true', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + wide: true, + }), + ); + test('THEN: renders container with wide class', () => { + expect($('.ons-container').hasClass('ons-container--wide')).toBe(true); + }); }); - - it('has the default masthead mobile logo icon alt text', () => { + }); + describe('GIVEN: Params: mastheadLogo', () => { + describe('WHEN: default params are provided', () => { const faker = templateFaker(); const iconsSpy = faker.spy('icon'); - faker.renderComponent('header', EXAMPLE_HEADER_BASIC); - expect(iconsSpy.occurrences[1].altText).toBe('Office for National Statistics logo'); + test('THEN: renders default large logo on large screen', () => { + expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-en'); + }); + test('THEN: renders logo with correct default alt-text on large screen', () => { + expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics homepage'); + }); + test('THEN: renders default small logo on small screen', () => { + expect(iconsSpy.occurrences[1].iconType).toBe('ons-logo-stacked-en'); + }); + test('THEN: renders logo with correct default alt-text on small screen', () => { + expect(iconsSpy.occurrences[1].altText).toBe('Office for National Statistics logo'); + }); }); - - it('has the provided large masthead logo', () => { + describe('WHEN: large & small parameters are provided', () => { const $ = cheerio.load( - renderComponent('header', { ...EXAMPLE_HEADER_BASIC, mastheadLogo: { large: '' } }), + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + mastheadLogo: { large: '', small: '' }, + }), ); - - expect($('.ons-header__org-logo--large img').attr('src')).toBe('another-logo.svg'); + test('THEN: renders provided large logo on large screen', () => { + expect($('.ons-header__org-logo--large img').attr('src')).toBe('another-logo.svg'); + }); + test('THEN: renders provided small logo on small screen', () => { + expect($('.ons-header__org-logo--small img').attr('src')).toBe('another-logo-small.svg'); + }); }); - - it('has the provided masthead logo custom classes', () => { + describe('WHEN: classes parameter is provided', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, mastheadLogo: { large: '', classes: 'custom-class another-custom-class' }, }), ); - - expect($('.ons-header__grid-top').hasClass('custom-class')).toBe(true); - expect($('.ons-header__grid-top').hasClass('another-custom-class')).toBe(true); + test('THEN: renders logo with provided additional classes', () => { + expect($('.ons-header__grid-top').hasClass('custom-class')).toBe(true); + expect($('.ons-header__grid-top').hasClass('another-custom-class')).toBe(true); + }); }); - - it('has the provided small masthead logo', () => { + describe('WHEN: mastheadLogoUrl parameter is provided', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, - mastheadLogo: { large: 'another-logo.svg', small: '' }, + mastheadLogoUrl: '#0', }), ); - - expect($('.ons-header__org-logo--small img').attr('src')).toBe('another-logo-small.svg'); + test('THEN: renders logo with provided URL', () => { + expect($('.ons-header__org-logo-link').attr('href')).toBe('#0'); + }); }); + }); + describe('GIVEN: Params: multipleLogos', () => { + describe('WHEN: logoImage parameter is set to "ONS Logo"', () => { + const faker = templateFaker(); + const iconsSpy = faker.spy('icon'); - describe('mode: with multiple logos', () => { - it('has the default ONS icon when requested', () => { - const faker = templateFaker(); - const iconsSpy = faker.spy('icon'); - - faker.renderComponent('header', { + faker.renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + mastheadLogo: { + multipleLogos: { + logo1: { + logoImage: 'ONS Logo', + }, + }, + }, + }); + test('THEN: renders default ONS icon', () => { + expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-stacked-en'); + }); + }); + describe('WHEN: logoURL parameter is set ', () => { + const $ = cheerio.load( + renderComponent('header', { ...EXAMPLE_HEADER_BASIC, mastheadLogo: { multipleLogos: { logo1: { - logoImage: 'ONS Logo', + logoImage: '', + logoURL: '#0', }, }, }, - }); - expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-stacked-en'); - }); - - it('has the provided link', () => { - const $ = cheerio.load( - renderComponent('header', { - ...EXAMPLE_HEADER_BASIC, - mastheadLogo: { - multipleLogos: { - logo1: { - logoImage: '', - logoURL: '#0', - }, - }, - }, - }), - ); - + }), + ); + test('THEN: renders provided link', () => { expect($('.ons-header__org-logo-link').attr('href')).toBe('#0'); }); - - it('when multiple images are provided all show', () => { - const $ = cheerio.load( - renderComponent('header', { - ...EXAMPLE_HEADER_BASIC, - mastheadLogo: { - multipleLogos: { - logo1: { - logoImage: '', - }, - logo2: { - logoImage: '', - }, - logo3: { - logoImage: '', - }, + }); + describe('WHEN: logo1, logo2, logo3 image parameters are all provided', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + mastheadLogo: { + multipleLogos: { + logo1: { + logoImage: '', + }, + logo2: { + logoImage: '', + }, + logo3: { + logoImage: '', }, }, - }), - ); - + }, + }), + ); + test('THEN: renders all provided logos', () => { expect($('.ons-header__org-logo--multi img').attr('src')).toBe('a-logo.svg'); expect($('.ons-header__org-logo--multi img:nth-of-type(2)').attr('src')).toBe('a-second-logo.svg'); expect($('.ons-header__org-logo--multi img:nth-of-type(3)').attr('src')).toBe('a-third-logo.svg'); }); - - it('renders multiple logos even when small/large parameters are used', () => { - const $ = cheerio.load( - renderComponent('header', { - ...EXAMPLE_HEADER_BASIC, - mastheadLogo: { - small: '', - large: '', - multipleLogos: { - logo1: { - logoImage: '', - }, - logo2: { - logoImage: '', - }, - logo3: { - logoImage: '', - }, + }); + describe('WHEN: multipleLogos & mastheadLogo:Large parameters are both provided', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + mastheadLogo: { + large: '', + multipleLogos: { + logo1: { + logoImage: '', }, }, - }), - ); + }, + }), + ); + test('THEN: renders only logos provided via multipleLogos parameter', () => { expect($('.ons-header__org-logo--large').attr('src')).toBe(undefined); expect($('.ons-header__org-logo--multi img').attr('src')).toBe('a-logo.svg'); }); }); - - it('displays the `title` text', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_BASIC)); - - expect($('.ons-header__title').text()).toBe('Header title'); - }); - - it('displays the `title` using the default tag', () => { + }); + describe('GIVEN: Params: title', () => { + describe('WHEN: title parameter is provided', () => { const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_BASIC)); - - expect($('.ons-header__title')[0].tagName).toBe('div'); + test('THEN: renders provided title text', () => { + expect($('.ons-header__title').text()).toBe('Header title'); + }); + test('THEN: renders title with default title tag', () => { + expect($('.ons-header__title')[0].tagName).toBe('div'); + }); }); - - it('displays the `title` using a H1 if `titleAsH1`', () => { - const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, titleAsH1: true })); - - expect($('.ons-header__title')[0].tagName).toBe('h1'); + describe('WHEN: titleAsH1 parameter is set to true', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + titleAsH1: true, + }), + ); + test('THEN: renders title with H1 title tag', () => { + expect($('.ons-header__title')[0].tagName).toBe('h1'); + }); }); - - it('has the correct `title` link', () => { - const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, titleUrl: '#0' })); - - expect($('.ons-header__title-link').attr('href')).toBe('#0'); + describe('WHEN: titleURL param is provided', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + titleUrl: '#0', + }), + ); + test('THEN: renders title with provided link', () => { + expect($('.ons-header__title-link').attr('href')).toBe('#0'); + }); }); - - it('has the provided large title logo', () => { + describe('WHEN: titleLogo: large and small are provided', () => { const $ = cheerio.load( - renderComponent('header', { ...EXAMPLE_HEADER_BASIC, titleLogo: { large: '' } }), + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + titleLogo: { large: '', small: '' }, + }), ); - - expect($('.ons-header__title-logo--large img').attr('src')).toBe('another-logo.svg'); + test('THEN: renders provided large title logo on large screen', () => { + expect($('.ons-header__title-logo--large img').attr('src')).toBe('another-logo.svg'); + }); + test('THEN: renders provided small title logo on small screen', () => { + expect($('.ons-header__title-logo--small img').attr('src')).toBe('another-logo-small.svg'); + }); }); - - it('has the provided title logo custom classes', () => { + describe('WHEN: titleLogo: classes parameter is provided', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, titleLogo: { large: 'another-logo.svg', classes: 'custom-class another-custom-class' }, }), ); - - expect($('.ons-header__title-logo--large').hasClass('custom-class')).toBe(true); - expect($('.ons-header__title-logo--large').hasClass('another-custom-class')).toBe(true); + test('THEN: renders title logo with provided additional classes', () => { + expect($('.ons-header__title-logo--large').hasClass('custom-class')).toBe(true); + expect($('.ons-header__title-logo--large').hasClass('another-custom-class')).toBe(true); + }); }); - - it('has the provided small title logo', () => { + describe('WHEN: description parameter is provided', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, - titleLogo: { large: '', small: '' }, + description: 'Header description', }), ); - - expect($('.ons-header__title-logo--small img').attr('src')).toBe('another-logo-small.svg'); - }); - - it('displays the `description` text', () => { - const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_BASIC, description: 'Header description' })); - - expect($('.ons-header__description').text()).toBe('Header description'); + test('THEN: renders title with provided description', () => { + expect($('.ons-header__description').text()).toBe('Header description'); + }); }); - - it('renders a button with expected parameters', () => { - const faker = templateFaker(); - const buttonSpy = faker.spy('button', { suppressOutput: true }); - - faker.renderComponent('header', { - ...EXAMPLE_HEADER_BASIC, - button: { - text: 'Save and sign out', - name: 'button-name', - attributes: { - a: 'b', - }, - url: '#0', - }, + }); + describe('GIVEN: Params: button: SignOutButton', () => { + describe('WHEN: no button parameters are provided', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + }), + ); + test('THEN: renders title grid with gutterless class', () => { + const titleGridDiv = $('.ons-header__main .ons-container .ons-grid'); + expect($(titleGridDiv).hasClass('ons-grid--gutterless')).toBe(true); }); - - expect(buttonSpy.occurrences).toContainEqual({ + }); + describe('WHEN: signOutButton parameters are provided', () => { + const button = { text: 'Save and sign out', - classes: 'ons-u-d-no@xxs@m', - variants: 'ghost', name: 'button-name', attributes: { a: 'b', }, url: '#0', - iconType: 'exit', - iconPosition: 'after', - }); - }); + }; - it('has gutterless class if there is no button present', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, + button, }), ); - const titleGridDiv = $('.ons-header__main .ons-container .ons-grid'); - expect($(titleGridDiv).hasClass('ons-grid--gutterless')).toBe(true); - }); - - it('has does not have gutterless class if there is a button present', () => { - const $ = cheerio.load( - renderComponent('header', { - ...EXAMPLE_HEADER_BASIC, - button: { - text: 'Save and sign out', - url: '#0', - iconType: 'exit', - iconPosition: 'after', + const faker = templateFaker(); + const buttonSpy = faker.spy('button', { suppressOutput: true }); + faker.renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + button, + }); + test('THEN: renders button with provided parameters', () => { + expect(buttonSpy.occurrences).toContainEqual({ + text: 'Save and sign out', + classes: 'ons-u-d-no@xxs@m', + variants: 'ghost', + name: 'button-name', + attributes: { + a: 'b', }, - }), - ); - - const titleGridDiv = $('.ons-header__main .ons-container .ons-grid'); - expect($(titleGridDiv).hasClass('ons-grid--gutterless')).toBe(false); + url: '#0', + iconType: 'exit', + iconPosition: 'after', + }); + }); + test('THEN: renders title grid without gutterless class', () => { + const titleGridDiv = $('.ons-header__main .ons-container .ons-grid'); + expect($(titleGridDiv).hasClass('ons-grid--gutterless')).toBe(false); + }); }); - - it('renders the phase banner with expected parameters', () => { + }); + describe('GIVEN: Params: PhaseBanner', () => { + describe('WHEN: phaseBanner parameters are provided', () => { const faker = templateFaker(); const phaseSpy = faker.spy('phase-banner'); @@ -535,14 +358,14 @@ describe('macro: header', () => { html: 'Example content with a link', }, }); - - expect(phaseSpy.occurrences).toContainEqual({ - badge: 'Example', - html: 'Example content with a link', + test('THEN: renders phase banner with provided parameters', () => { + expect(phaseSpy.occurrences).toContainEqual({ + badge: 'Example', + html: 'Example content with a link', + }); }); }); - - it('renders the phase banner in the correct container if `wide`', () => { + describe('WHEN: wide parameter is set to true', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, @@ -553,12 +376,12 @@ describe('macro: header', () => { }, }), ); - - const phaseContainer = $('.ons-phase-banner .ons-container'); - expect($(phaseContainer).hasClass('ons-container--wide')).toBe(true); + test('THEN: renders container with wide class', () => { + const phaseContainer = $('.ons-phase-banner .ons-container'); + expect($(phaseContainer).hasClass('ons-container--wide')).toBe(true); + }); }); - - it('renders the phase banner in the correct container if `fullWidth`', () => { + describe('WHEN: fullWidth parameter is set to true', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, @@ -569,112 +392,51 @@ describe('macro: header', () => { }, }), ); - - const phaseContainer = $('.ons-phase-banner .ons-container'); - expect($(phaseContainer).hasClass('ons-container--full-width')).toBe(true); + test('THEN: renders container with fullWidth class', () => { + const phaseContainer = $('.ons-phase-banner .ons-container'); + expect($(phaseContainer).hasClass('ons-container--full-width')).toBe(true); + }); }); }); - - describe('mode: with service links', () => { - it('has the correct display class when multiple links are provided', () => { + describe('GIVEN: Params: serviceLinks', () => { + describe('WHEN: multiple items are provided to itemsList parameter', () => { const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@m')).toBe(true); - }); - - it('has the correct display class when a single link and language is provided', () => { - const $ = cheerio.load( - renderComponent('header', { ...EXAMPLE_HEADER_SERVICE_LINKS_SINGLE, ...EXAMPLE_HEADER_LANGUAGE_CONFIG }), - ); - - expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@xs')).toBe(true); - }); - - it('does not have the display class when only single link is provided', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE)); - - expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@')).toBe(false); - }); - - it('has the provided custom class', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE)); - - expect($('.ons-header-service-nav--main').hasClass('custom-class')).toBe(true); - }); - - it('has the provided `aria-label`', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE)); - - expect($('.ons-header-service-nav--main').attr('aria-label')).toBe('Services menu'); - }); - - it('has the text for each list item', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LIST_ITEMS)); - - const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__item'), (node) => node.text().trim()); - expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']); - }); - - it('has the link text for each list item', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - - const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.text().trim()); - expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']); - }); - - it('has the link href for each list item', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - - const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.attr('href')); - expect(values).toEqual(['#1', '#2', '#3']); - }); - - it('has the provided custom class', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE)); - - expect($('.ons-header-service-nav--main').hasClass('custom-class')).toBe(true); - }); - - it('has the provided `aria-label` for the list for mobile', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE)); - - expect($('.ons-header-service-nav--mobile').attr('aria-label')).toBe('Services menu'); - }); - - it('has the link text for each list item for mobile', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - - const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.text().trim()); - expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']); - }); - - it('has the link href for each list item for mobile', () => { - const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - - const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.attr('href')); - expect(values).toEqual(['#1', '#2', '#3']); - }); - - it('renders a button with expected parameters', () => { const faker = templateFaker(); const buttonSpy = faker.spy('button', { suppressOutput: true }); - faker.renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE); - expect(buttonSpy.occurrences).toContainEqual({ - text: 'Menu', - classes: 'ons-u-d-no ons-js-toggle-services', - type: 'button', - variants: ['mobile', 'text-link'], - attributes: { - 'aria-label': 'Toggle services menu', - 'aria-controls': 'service-links', - 'aria-expanded': 'false', - }, + test('THEN: renders with correct display class on large screen', () => { + expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@m')).toBe(true); + }); + test('THEN: renders button on small screen', () => { + expect(buttonSpy.occurrences).toContainEqual({ + text: 'Menu', + classes: 'ons-u-d-no ons-js-toggle-services', + type: 'button', + variants: ['mobile', 'text-link'], + attributes: { + 'aria-label': 'Toggle services menu', + 'aria-controls': 'service-links', + 'aria-expanded': 'false', + }, + }); }); }); - - it('renders a button with correct variant if `internal`', () => { + describe('WHEN: one item is provided to the itemsList parameter', () => { + const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE)); + test('THEN: renders without multiple link display class on large screen', () => { + expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@m')).toBe(false); + expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@xs')).toBe(false); + }); + test('THEN: does not render button on small screen', () => { + expect($('.ons-js-toggle-services').length).toBe(0); + }); + test('THEN: renders with provided ariaLabel on small screen', () => { + expect($('.ons-header-service-nav--mobile').attr('aria-label')).toBe('Services menu'); + }); + }); + describe('WHEN: internal is provided to the variant parameter', () => { const faker = templateFaker(); const buttonSpy = faker.spy('button'); @@ -695,17 +457,37 @@ describe('macro: header', () => { ], }, }); - - expect(buttonSpy.occurrences[0]).toHaveProperty('variants', ['mobile', 'text-link', 'text-link-inverse']); + test('THEN: renders button with corresponding variants', () => { + expect(buttonSpy.occurrences[0]).toHaveProperty('variants', ['mobile', 'text-link', 'text-link-inverse']); + }); }); - - it('does not render a button for a single services link', () => { + describe('WHEN: classes parameter is provided', () => { const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE)); - - expect($('.ons-js-toggle-services').length).toBe(0); + test('THEN: renders with provided additional classes', () => { + expect($('.ons-header-service-nav--main').hasClass('custom-class')).toBe(true); + }); }); + describe('WHEN: item title and url parameters are provided', () => { + const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - it('has the correct list item icon', () => { + test('THEN: renders item with provided title on large screen', () => { + const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.text().trim()); + expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']); + }); + test('THEN: renders item with provided title on small screen', () => { + const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.text().trim()); + expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']); + }); + test('THEN: renders item with provided url on large screen', () => { + const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.attr('href')); + expect(values).toEqual(['#1', '#2', '#3']); + }); + test('THEN: renders item with provided url on small screen', () => { + const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.attr('href')); + expect(values).toEqual(['#1', '#2', '#3']); + }); + }); + describe('WHEN: item iconType parameter is provided', () => { const faker = templateFaker(); const iconsSpy = faker.spy('icon'); @@ -721,49 +503,30 @@ describe('macro: header', () => { ], }, }); - - expect(iconsSpy.occurrences[2].iconType).toBe('check'); + test('THEN: renders item with provided iconType', () => { + expect(iconsSpy.occurrences[2].iconType).toBe('check'); + }); }); - }); - - describe('mode: with language selector', () => { - it('displays the language selector with expected parameters', () => { - const faker = templateFaker(); - const languageSpy = faker.spy('language-selector', { suppressOutput: true }); - - faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, ...EXAMPLE_HEADER_LANGUAGE_CONFIG }); - - expect(languageSpy.occurrences).toContainEqual({ - languages: [ - { - url: '#0', - ISOCode: 'en', - text: 'English', - buttonAriaLabel: 'Language selector. Current language: English', - chooseLanguage: 'Choose language', - current: true, - }, - { - url: '#0', - ISOCode: 'cy', - text: 'Cymraeg', - buttonAriaLabel: 'Dewisydd iaith. Iaith gyfredol: Cymraeg', - chooseLanguage: 'Dewiswch iaith', - current: false, - }, - ], + describe('WHEN: language and a single item itemsList parameters are provided', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_SERVICE_LINKS_SINGLE, + ...EXAMPLE_HEADER_LANGUAGE_CONFIG, + }), + ); + test('THEN: renders with correct display class', () => { + expect($('.ons-header__links .ons-grid__col').hasClass('ons-u-d-no@xxs@xs')).toBe(true); }); }); }); - - describe('mode: with navigation', () => { - it('renders the navigation with expected parameters', () => { + describe('GIVEN: Params: navigation', () => { + describe('WHEN: navigation parameters are provided', () => { const faker = templateFaker(); const navigationSpy = faker.spy('navigation', { suppressOutput: true }); + const buttonSpy = faker.spy('button'); - faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, ...EXAMPLE_HEADER_NAVIGATION_CONFIG }); - - expect(navigationSpy.occurrences[0]).toEqual({ + faker.renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, navigation: { id: 'main-nav', ariaLabel: 'Main menu', @@ -783,32 +546,81 @@ describe('macro: header', () => { ariaLabel: 'Toggle main menu', }, }, - title: 'Header title', + }); + test('THEN: renders navigation with provided parameters', () => { + expect(navigationSpy.occurrences[0]).toEqual({ + navigation: { + id: 'main-nav', + ariaLabel: 'Main menu', + currentPath: '#home', + itemsList: [ + { + title: 'Home', + url: '#home', + }, + { + title: 'Guidance', + url: '#0', + }, + ], + toggleNavigationButton: { + text: 'Menu', + ariaLabel: 'Toggle main menu', + }, + }, + title: 'Header title', + }); + }); + test('THEN: renders button to toggle menu on small screen', () => { + expect(buttonSpy.occurrences[0]).toEqual({ + text: 'Menu', + classes: 'ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l', + variants: ['mobile', 'ghost'], + attributes: { + 'aria-label': 'Toggle main menu', + 'aria-controls': 'main-nav', + 'aria-expanded': 'false', + }, + }); }); }); - - it('renders a button to toggle the menu on mobile', () => { - const faker = templateFaker(); - const buttonSpy = faker.spy('button'); - - faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, ...EXAMPLE_HEADER_NAVIGATION_CONFIG }); - - expect(buttonSpy.occurrences[0]).toEqual({ - text: 'Menu', - classes: 'ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l', - variants: ['mobile', 'ghost'], - attributes: { - 'aria-label': 'Toggle main menu', - 'aria-controls': 'main-nav', - 'aria-expanded': 'false', - }, + describe('WHEN: fullWidth parameter is set to true', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + fullWidth: true, + ...EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG, + }), + ); + test('THEN: renders navigation container with fullWidth class', () => { + const navContainer = $('.ons-navigation-wrapper .ons-container'); + expect($(navContainer).hasClass('ons-container--full-width')).toBe(true); + }); + test('THEN: renders sub-navigation container with fullWidth class', () => { + const subNavContainer = $('.ons-navigation--sub .ons-container'); + expect($(subNavContainer).hasClass('ons-container--full-width')).toBe(true); }); }); - - it('renders a button to toggle the search on mobile', () => { + describe('WHEN: wide parameter is set to true', () => { + const $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_BASIC, + wide: true, + ...EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG, + }), + ); + test('THEN: renders navigation container with wide class', () => { + const navContainer = $('.ons-navigation-wrapper .ons-container'); + expect($(navContainer).hasClass('ons-container--wide')).toBe(true); + }); + test('THEN: renders sub-navigation container with wide class', () => { + const subNavContainer = $('.ons-navigation--sub .ons-container'); + expect($(subNavContainer).hasClass('ons-container--wide')).toBe(true); + }); + }); + describe('WHEN: navigation and siteSearchAutosuggest parameters are provided', () => { const faker = templateFaker(); const buttonSpy = faker.spy('button'); - faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, navigation: { @@ -832,114 +644,52 @@ describe('macro: header', () => { }, siteSearchAutosuggest: {}, }); - - expect(buttonSpy.occurrences[0]).toEqual({ - text: 'Search', - classes: 'ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search', - variants: ['small', 'ghost'], - iconType: 'search', - iconPosition: 'only', - attributes: { - 'aria-label': 'Toggle search', - 'aria-controls': 'ons-site-search', - 'aria-expanded': 'false', - }, + test('THEN: renders button to toggle search on small screen', () => { + expect(buttonSpy.occurrences[0]).toEqual({ + text: 'Search', + classes: 'ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search', + variants: ['small', 'ghost'], + iconType: 'search', + iconPosition: 'only', + attributes: { + 'aria-label': 'Toggle search', + 'aria-controls': 'ons-site-search', + 'aria-expanded': 'false', + }, + }); }); }); - - it('renders the navigation in the correct container if `wide`', () => { - const $ = cheerio.load( - renderComponent('header', { - ...EXAMPLE_HEADER_BASIC, - wide: true, - ...EXAMPLE_HEADER_NAVIGATION_CONFIG, - }), - ); - - const navContainer = $('.ons-navigation-wrapper .ons-container'); - expect($(navContainer).hasClass('ons-container--wide')).toBe(true); - }); - - it('renders the navigation in the correct container if `fullWidth`', () => { - const $ = cheerio.load( - renderComponent('header', { - ...EXAMPLE_HEADER_BASIC, - fullWidth: true, - ...EXAMPLE_HEADER_NAVIGATION_CONFIG, - }), - ); - - const navContainer = $('.ons-navigation-wrapper .ons-container'); - expect($(navContainer).hasClass('ons-container--full-width')).toBe(true); - }); - - it('renders the sub-navigation in the correct container if `wide`', () => { - const $ = cheerio.load( - renderComponent('header', { - ...EXAMPLE_HEADER_BASIC, - wide: true, - ...EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG, - }), - ); - - const subNavContainer = $('.ons-navigation--sub .ons-container'); - expect($(subNavContainer).hasClass('ons-container--wide')).toBe(true); - }); - - it('renders the sub-navigation in the correct container if `fullWidth`', () => { - const $ = cheerio.load( - renderComponent('header', { - ...EXAMPLE_HEADER_BASIC, - fullWidth: true, - ...EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG, - }), - ); - - const subNavContainer = $('.ons-navigation--sub .ons-container'); - expect($(subNavContainer).hasClass('ons-container--full-width')).toBe(true); - }); }); -}); - -describe('mode: with site search autosuggest', () => { - it('renders the search with expected parameters', () => { - const faker = templateFaker(); - const buttonSpy = faker.spy('autosuggest'); - - faker.renderComponent('header', EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST); - - expect(buttonSpy.occurrences[0]).toEqual({ - ariaLimitedResults: 'Type more characters to improve your search', - minChars: 3, - language: 'en-gb', - ariaMinChars: 'Enter 3 or more characters for suggestions.', - ariaNResults: 'There are {n} suggestions available.', - ariaOneResult: 'There is one suggestion available.', - ariaResultsLabel: 'Country suggestions', - ariaYouHaveSelected: 'You have selected', - containerClasses: 'ons-autosuggest--header', - id: 'ons-site-search', - input: { - accessiblePlaceholder: true, - autocomplete: 'off', - classes: 'ons-input-search ons-input-search--icon', - label: { - classes: 'ons-u-pl-l ons-label--white', - id: 'ons-site-search-label', - text: 'label', - }, - }, - instructions: 'Use up and down keys to navigate.', - moreResults: 'Continue entering to improve suggestions', - noResults: 'No suggestions found.', - resultsTitle: 'Suggestions', - typeMore: 'Continue entering to get suggestions', + describe('GIVEN: params: languages', () => { + describe('WHEN: language parameters are provided', () => { + const faker = templateFaker(); + const languageSpy = faker.spy('language-selector', { suppressOutput: true }); + faker.renderComponent('header', { ...EXAMPLE_HEADER_BASIC, ...EXAMPLE_HEADER_LANGUAGE_CONFIG }); + test('THEN: renders language selector with provided language options', () => { + expect(languageSpy.occurrences).toContainEqual({ + languages: [ + { + url: '#0', + ISOCode: 'en', + text: 'English', + buttonAriaLabel: 'Language selector. Current language: English', + chooseLanguage: 'Choose language', + current: true, + }, + { + url: '#0', + ISOCode: 'cy', + text: 'Cymraeg', + buttonAriaLabel: 'Dewisydd iaith. Iaith gyfredol: Cymraeg', + chooseLanguage: 'Dewiswch iaith', + current: false, + }, + ], + }); + }); }); }); - - describe('when the user inputs text', () => { - let $; // Initialize a Cheerio instance - + describe('GIVEN: Params: siteSearchAutosuggest', () => { const mockData = [ { en: 'England' }, { en: 'Wales' }, @@ -949,38 +699,80 @@ describe('mode: with site search autosuggest', () => { { en: 'Åland Islands' }, ]; - beforeEach(() => { - $ = cheerio.load( + describe('WHEN: autosuggest parameters are provided', () => { + const faker = templateFaker(); + const buttonSpy = faker.spy('autosuggest'); + + faker.renderComponent('header', EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST); + + test('THEN: renders search with provided parameters', () => { + expect(buttonSpy.occurrences[0]).toEqual({ + ariaLimitedResults: 'Type more characters to improve your search', + minChars: 3, + language: 'en-gb', + ariaMinChars: 'Enter 3 or more characters for suggestions.', + ariaNResults: 'There are {n} suggestions available.', + ariaOneResult: 'There is one suggestion available.', + ariaResultsLabel: 'Country suggestions', + ariaYouHaveSelected: 'You have selected', + containerClasses: 'ons-autosuggest--header', + id: 'ons-site-search', + input: { + accessiblePlaceholder: true, + autocomplete: 'off', + classes: 'ons-input-search ons-input-search--icon', + label: { + classes: 'ons-u-pl-l ons-label--white', + id: 'ons-site-search-label', + text: 'label', + }, + }, + instructions: 'Use up and down keys to navigate.', + moreResults: 'Continue entering to improve suggestions', + noResults: 'No suggestions found.', + resultsTitle: 'Suggestions', + typeMore: 'Continue entering to get suggestions', + }); + }); + }); + describe('WHEN: language is set', () => { + const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST, autosuggestData: mockData, }), ); + test('THEN: rendered search component accesses set language', () => { + $('.ons-js-autosuggest-input').val('Eng'); + const autosuggestElement = $('.ons-js-autosuggest').attr('data-lang'); + expect(autosuggestElement).toBe('en-gb'); + }); }); + describe('WHEN: user enters text', () => { + let $; // Initialize a Cheerio instance - it('does not show suggestions when input length < minimum characters', () => { - $('.ons-js-autosuggest-input').val('En'); - - setTimeout(() => { - const suggestionCount = $('.ons-autosuggest__option').length; - expect(suggestionCount).toBe(0); - }, 20); - }); - - it('shows suggestions when input length >= minimum characters', () => { - $('.ons-js-autosuggest-input').val('Eng'); - - setTimeout(() => { - const suggestionCount = $('.ons-autosuggest__option').length; - expect(suggestionCount).toBe(1); - }, 20); - }); - - it('gets the language if set', () => { - $('.ons-js-autosuggest-input').val('Eng'); - - const autosuggestElement = $('.ons-js-autosuggest').attr('data-lang'); - expect(autosuggestElement).toBe('en-gb'); + beforeEach(() => { + $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST, + autosuggestData: mockData, + }), + ); + }); + test('THEN: displays no suggestions when input length < minimum characters', () => { + $('.ons-js-autosuggest-input').val('En'); + setTimeout(() => { + const suggestionCount = $('.ons-autosuggest__option').length; + expect(suggestionCount).toBe(0); + }, 20); + }); + test('THEN: displays suggestions when input length >= minimum characters', () => { + $('.ons-js-autosuggest-input').val('Eng'); + setTimeout(() => { + const suggestionCount = $('.ons-autosuggest__option').length; + expect(suggestionCount).toBe(1); + }, 20); + }); }); }); }); diff --git a/src/components/header/_test_examples.js b/src/components/header/_test_examples.js new file mode 100644 index 0000000000..6f228fcd60 --- /dev/null +++ b/src/components/header/_test_examples.js @@ -0,0 +1,157 @@ +export { + EXAMPLE_HEADER_BASIC, + EXAMPLE_SERVICE_LINKS_CONFIG, + EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE, + EXAMPLE_HEADER_SERVICE_LINKS_SINGLE, + EXAMPLE_HEADER_LANGUAGE_CONFIG, + EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG, + EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST, +}; + +const EXAMPLE_HEADER_BASIC = { + title: 'Header title', +}; +const EXAMPLE_SERVICE_LINKS_CONFIG = { + id: 'service-links', + ariaLabel: 'Services menu', + classes: 'custom-class', + toggleServicesButton: { + text: 'Menu', + ariaLabel: 'Toggle services menu', + }, +}; +const EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE = { + ...EXAMPLE_HEADER_BASIC, + serviceLinks: { + ...EXAMPLE_SERVICE_LINKS_CONFIG, + itemsList: [ + { + title: 'Title 1', + url: '#1', + }, + { + title: 'Title 2', + url: '#2', + }, + { + title: 'Title 3', + url: '#3', + }, + ], + }, +}; +const EXAMPLE_HEADER_SERVICE_LINKS_SINGLE = { + ...EXAMPLE_HEADER_BASIC, + serviceLinks: { + ...EXAMPLE_SERVICE_LINKS_CONFIG, + itemsList: [ + { + title: 'Title', + url: '#0', + }, + ], + }, +}; +const EXAMPLE_HEADER_LANGUAGE_CONFIG = { + language: { + languages: [ + { + url: '#0', + ISOCode: 'en', + text: 'English', + buttonAriaLabel: 'Language selector. Current language: English', + chooseLanguage: 'Choose language', + current: true, + }, + { + url: '#0', + ISOCode: 'cy', + text: 'Cymraeg', + buttonAriaLabel: 'Dewisydd iaith. Iaith gyfredol: Cymraeg', + chooseLanguage: 'Dewiswch iaith', + current: false, + }, + ], + }, +}; +const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = { + navigation: { + id: 'main-nav', + ariaLabel: 'Main menu', + currentPath: '#1', + currentPageTitle: 'Guidance', + itemsList: [ + { + title: 'Home', + url: '#0', + }, + { + title: 'Guidance', + url: '#1', + }, + ], + toggleNavigationButton: { + text: 'Menu', + ariaLabel: 'Toggle main menu', + }, + subNavigation: { + id: 'sub-nav', + overviewURL: '#overview', + overviewText: 'Overview', + ariaLabel: 'Section menu', + currentPath: '#1', + itemsList: [ + { + title: 'Sub nav item 1', + url: '#0', + classes: 'custom-class-sub-item-1', + id: 'sub-item-1', + }, + { + title: 'Sub nav item 2', + url: '#1', + classes: 'custom-class-sub-item-2', + id: 'sub-item-2', + }, + ], + }, + }, +}; +const EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST = { + navigation: { + id: 'main-nav', + ariaLabel: 'Main menu', + currentPath: '#home', + itemsList: [ + { + title: 'Home', + url: '#home', + }, + { + title: 'Guidance', + url: '#0', + }, + ], + toggleNavigationButton: { + text: 'Menu', + ariaLabel: 'Toggle main menu', + }, + }, + siteSearchAutosuggest: { + label: 'label', + instructions: 'Use up and down keys to navigate.', + ariaYouHaveSelected: 'You have selected', + ariaMinChars: 'Enter 3 or more characters for suggestions.', + minChars: 3, + ariaResultsLabel: 'Country suggestions', + ariaOneResult: 'There is one suggestion available.', + ariaNResults: 'There are {n} suggestions available.', + ariaLimitedResults: 'Type more characters to improve your search', + moreResults: 'Continue entering to improve suggestions', + resultsTitle: 'Suggestions', + resultsTitleId: 'country-of-birth-suggestions', + noResults: 'No suggestions found.', + typeMore: 'Continue entering to get suggestions', + language: 'en-gb', + }, +};