From bfe1606a24d989cc502d1926a9eac936de0eeec5 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Fri, 10 Nov 2023 14:14:12 +0000 Subject: [PATCH 1/3] Feature/add tests for autosuggest component (#2893) * added example header * update test example * add tests * update visual tests * add test cases * fix failing test --- ...gation-and-search_0_document_0_desktop.png | 3 + ...igation-and-search_0_document_1_tablet.png | 3 + ...igation-and-search_0_document_2_mobile.png | 3 + src/components/header/_macro.spec.js | 133 +++++++++++++++++- ...er-external-with-navigation-and-search.njk | 57 ++++++++ src/components/navigation/_macro.njk | 4 +- 6 files changed, 197 insertions(+), 6 deletions(-) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_2_mobile.png create mode 100644 src/components/header/example-header-external-with-navigation-and-search.njk diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_0_desktop.png new file mode 100644 index 0000000000..8254803ff5 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:90c6981731b715a7dafcd54606bffdf14dd3a6b0f4ad01a04a8308be1730fcc9 +size 25521 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_1_tablet.png new file mode 100644 index 0000000000..e24448df49 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8e5cba58f8519f9b4a0bdf6e3091a3ff7f66a65998ad413e69c766609f895ad1 +size 16028 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_2_mobile.png new file mode 100644 index 0000000000..18c77f3624 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d7cf7a8fd6cef93fdd86e21a10cbdc634ec510e6081678acaedc0ee0995355c5 +size 13097 diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js index 658ac1a991..620bcd36eb 100644 --- a/src/components/header/_macro.spec.js +++ b/src/components/header/_macro.spec.js @@ -161,6 +161,45 @@ const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = { }, }; +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 () => { @@ -453,21 +492,21 @@ describe('macro: header', () => { 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()); + 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()); + 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')); + const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.attr('href')); expect(values).toEqual(['#1', '#2', '#3']); }); @@ -486,14 +525,14 @@ describe('macro: header', () => { 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()); + 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')); + const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.attr('href')); expect(values).toEqual(['#1', '#2', '#3']); }); @@ -742,3 +781,87 @@ describe('macro: header', () => { }); }); }); + +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-m 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 the user inputs text', () => { + let $; // Initialize a Cheerio instance + + const mockData = [ + { en: 'England' }, + { en: 'Wales' }, + { en: 'Scotland' }, + { en: 'United States of America' }, + { en: 'United States Virgin Islands' }, + { en: 'Åland Islands' }, + ]; + + beforeEach(() => { + $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST, + autosuggestData: mockData, + }), + ); + }); + + 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'); + }); + }); +}); diff --git a/src/components/header/example-header-external-with-navigation-and-search.njk b/src/components/header/example-header-external-with-navigation-and-search.njk new file mode 100644 index 0000000000..7ba91845b7 --- /dev/null +++ b/src/components/header/example-header-external-with-navigation-and-search.njk @@ -0,0 +1,57 @@ +--- +"fullWidth": true +--- +{% from "components/header/_macro.njk" import onsHeader %} + +{{ + onsHeader({ + "title": 'Design system', + "titleUrl": '#0', + "navigation": { + "id": 'main-nav', + "ariaLabel": 'Main menu', + "currentPath": '#home', + "itemsList": [ + { + "text": 'Home', + "url": '#home' + }, + { + "text": 'Guidance', + "url": '#0' + }, + { + "text": 'Foundations', + "url": '#0' + }, + { + "text": 'Components', + "url": '#0' + }, + { + "text": 'Patterns', + "url": '#0' + } + ], + "toggleNavigationButton": { + "text": 'Menu', + "ariaLabel": 'Toggle main menu' + } + }, + 'siteSearchAutosuggest': { + "autosuggestData": "/examples/data/country-of-birth.json", + "label": "search", + "instructions": "instructions", + "ariaYouHaveSelected": "ariaYouHaveSelected", + "ariaMinChars": "ariaMinChars", + "ariaResultsLabel": "ariaResultsLabel", + "ariaOneResult": "ariaOneResult", + "ariaNResults": "ariaNResults", + "ariaLimitedResults": "ariaLimitedResults", + "moreResults": "moreResults", + "resultsTitle": "resultsTitle", + "noResults": "noResults", + "typeMore": "typeMore" + } + }) +}} diff --git a/src/components/navigation/_macro.njk b/src/components/navigation/_macro.njk index 76986e8d53..8b4dff91aa 100644 --- a/src/components/navigation/_macro.njk +++ b/src/components/navigation/_macro.njk @@ -27,6 +27,7 @@ }, "instructions": params.siteSearchAutosuggest.instructions, "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected, + "minChars": params.siteSearchAutosuggest.minChars, "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars, "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel, "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult, @@ -36,7 +37,8 @@ "resultsTitle": params.siteSearchAutosuggest.resultsTitle, "autosuggestData": params.siteSearchAutosuggest.autosuggestData, "noResults": params.siteSearchAutosuggest.noResults, - "typeMore": params.siteSearchAutosuggest.typeMore + "typeMore": params.siteSearchAutosuggest.typeMore, + "language": params.siteSearchAutosuggest.language }) }} {% endif %} From c60eb312b0eaeec9dddfd09402b7f230652dc3f9 Mon Sep 17 00:00:00 2001 From: rmccar <42928680+rmccar@users.noreply.github.com> Date: Thu, 16 Nov 2023 09:52:29 +0000 Subject: [PATCH 2/3] Use node-version-file in Github actions to improve node version setting (#2886) --- .github/workflows/lighthouse-ci.yml | 5 +- .github/workflows/macro-and-script-tests.yml | 5 +- .github/workflows/npm-bundle.yml | 5 +- .github/workflows/release.yml | 5 +- .github/workflows/visual-regression-tests.yml | 5 +- .../accordion/example-accordion-open.njk | 4 +- src/components/checkboxes/_macro.njk | 2 +- ...oxes-with-revealed-checkboxes-expanded.njk | 2 +- ...le-checkboxes-with-revealed-checkboxes.njk | 2 +- src/components/footer/_macro.njk | 2 +- src/components/label/_macro.njk | 4 +- src/components/related-content/_macro.njk | 58 +++++---- src/components/section-navigation/_macro.njk | 111 +++++++++--------- src/components/video/_macro.njk | 22 ++-- src/layout/_template.njk | 58 ++++----- src/patterns/guide/example-guide-overview.njk | 35 ++++-- src/patterns/guide/example-guide.njk | 43 ++++--- 17 files changed, 191 insertions(+), 177 deletions(-) diff --git a/.github/workflows/lighthouse-ci.yml b/.github/workflows/lighthouse-ci.yml index c2a4481ba5..9fd17a1ba8 100644 --- a/.github/workflows/lighthouse-ci.yml +++ b/.github/workflows/lighthouse-ci.yml @@ -12,13 +12,10 @@ jobs: - uses: actions/checkout@v3 with: ref: ${{ github.event.pull_request.head.sha }} - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" - name: Install dependencies run: yarn install - name: Build pages diff --git a/.github/workflows/macro-and-script-tests.yml b/.github/workflows/macro-and-script-tests.yml index 5f20c4c1fb..0220d89974 100644 --- a/.github/workflows/macro-and-script-tests.yml +++ b/.github/workflows/macro-and-script-tests.yml @@ -12,13 +12,10 @@ jobs: steps: - name: Checkout uses: actions/checkout@v3 - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" - name: Install dependencies run: yarn install - name: Run macro and script tests diff --git a/.github/workflows/npm-bundle.yml b/.github/workflows/npm-bundle.yml index 2dc0b4faa7..12631cbc70 100644 --- a/.github/workflows/npm-bundle.yml +++ b/.github/workflows/npm-bundle.yml @@ -10,9 +10,6 @@ jobs: build: runs-on: ubuntu-latest steps: - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Use Node.js uses: actions/checkout@v3 with: @@ -20,7 +17,7 @@ jobs: - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" registry-url: https://registry.npmjs.org/ - run: yarn install - run: git config --global user.name "${{ github.actor }}" diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 8a50c3eb18..c8db6937f5 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -8,13 +8,10 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" - name: Install dependencies run: yarn install - name: Build templates diff --git a/.github/workflows/visual-regression-tests.yml b/.github/workflows/visual-regression-tests.yml index be5864b1e7..3d2cf558cb 100644 --- a/.github/workflows/visual-regression-tests.yml +++ b/.github/workflows/visual-regression-tests.yml @@ -15,13 +15,10 @@ jobs: with: lfs: true url: https://github.com/ONSdigital/design-system.git - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" - name: Install dependencies run: yarn install - name: Install Docker diff --git a/src/components/accordion/example-accordion-open.njk b/src/components/accordion/example-accordion-open.njk index e2cf45ec88..a276c18769 100644 --- a/src/components/accordion/example-accordion-open.njk +++ b/src/components/accordion/example-accordion-open.njk @@ -62,7 +62,7 @@ "text": "Areas (0)" }, "value": "areas" - } + } ] }) }} @@ -98,7 +98,7 @@ "text": "Disability (67)" }, "value": "disability" - } + } ] }) }} diff --git a/src/components/checkboxes/_macro.njk b/src/components/checkboxes/_macro.njk index 933838c4b4..8fbef54388 100644 --- a/src/components/checkboxes/_macro.njk +++ b/src/components/checkboxes/_macro.njk @@ -7,7 +7,7 @@ {% set fields %} {% if params.checkboxesLabel is defined %}
{{ params.checkboxesLabel }}
- {% endif %} + {% endif %} {% set hasOther = false %} {% for checkbox in params.checkboxes %} {% if checkbox.other %} diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk index 7bc0cfa595..d34ea82bfd 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk @@ -82,7 +82,7 @@ "text": "Areas (0)" }, "value": "areas" - } + } ] }) }} diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk index f31021a79e..fe2c463062 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk @@ -80,7 +80,7 @@ "text": "Areas (0)" }, "value": "areas" - } + } ] }) }} diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk index ed7412ff87..38cd41d0e0 100644 --- a/src/components/footer/_macro.njk +++ b/src/components/footer/_macro.njk @@ -179,7 +179,7 @@ {% endif %} {% if params.copyrightDeclaration %} -The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales. The census is unique. There’s simply nothing else that gives so much detail about us and the society we live in.
All kinds of organisations, from local authorities to charities, use the information to help provide the services we all need, including transport, education and healthcare. Without the census, it would be much more difficult to do this.
By taking part, you’ll be helping make sure you and your community get the services needed now and in the future.
The first census was in 1801 and the most recent in 2011. The Office for National Statistics (ONS) runs the census in England Wales and the next one will happen on Sunday 21 March 2021. To prepare for it, we held a census rehearsal in 2019 to check our processes, systems and services were running smoothly ahead of the real thing.
We also need your help between each census. At the ONS, we rely on ongoing surveys to provide detailed, up-to-date information about changes to society. To make sure that we represent everyone, we ask people to take part in these surveys. We carry out interviews in person, by phone or online.
These surveys do not stop while the census takes place. To find out more about the types of surveys we run throughout the year, visit the ONS website.
At the ONS, we’re responsible for planning and running the census for England and Wales.
Find out more about the censuses in Scotland and Northern Ireland from National Records of Scotland and Northern Ireland Statistics and Research Agency.
+The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales. The census is unique. There’s simply nothing else that gives so much detail about us and the society we live in.
+All kinds of organisations, from local authorities to charities, use the information to help provide the services we all need, including transport, education and healthcare. Without the census, it would be much more difficult to do this.
+By taking part, you’ll be helping make sure you and your community get the services needed now and in the future.
+ +The first census was in 1801 and the most recent in 2011. The Office for National Statistics (ONS) runs the census in England Wales and the next one will happen on Sunday 21 March 2021. To prepare for it, we held a census rehearsal in 2019 to check our processes, systems and services were running smoothly ahead of the real thing.
+ +We also need your help between each census. At the ONS, we rely on ongoing surveys to provide detailed, up-to-date information about changes to society. To make sure that we represent everyone, we ask people to take part in these surveys. We carry out interviews in person, by phone or online.
+These surveys do not stop while the census takes place. To find out more about the types of surveys we run throughout the year, visit the ONS website.
+ +At the ONS, we’re responsible for planning and running the census for England and Wales.
+ +Find out more about the censuses in Scotland and Northern Ireland from National Records of Scotland and Northern Ireland Statistics and Research Agency.
+It’s important you take part in the census. The information it gives has the power to make a real impact on our everyday lives.
The census helps us understand what our society needs now and what it’s likely to need in the future. The information it collects helps plan and fund services in your area. This could include transport, education and healthcare.
Charities also use census information to help get the funding they need. Businesses use it to decide where to set up, which creates job opportunities.
Census 2021 will help give the best picture of the needs of everyone living in England and Wales.
A total of 94% of people took part in the last census, helping each area receive its share of public funding. Without the census, it would be much more difficult to provide the services you and your community need.
You must complete the census by law. If you do not, or if you supply false information, you could be fined up to £1,000. Some questions are clearly labelled as voluntary. It is not an offence if you do not answer these.
It’s important you take part in the census. The information it gives has the power to make a real impact on our everyday lives.
+ +The census helps us understand what our society needs now and what it’s likely to need in the future. The information it collects helps plan and fund services in your area. This could include transport, education and healthcare.
+Charities also use census information to help get the funding they need. Businesses use it to decide where to set up, which creates job opportunities.
+ +Census 2021 will help give the best picture of the needs of everyone living in England and Wales.
+A total of 94% of people took part in the last census, helping each area receive its share of public funding. Without the census, it would be much more difficult to provide the services you and your community need.
+ +You must complete the census by law. If you do not, or if you supply false information, you could be fined up to £1,000. Some questions are clearly labelled as voluntary. It is not an offence if you do not answer these.
+ +