From de2fb83e6be5b063719fff38c13c3eafea5962cf Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Mon, 16 Sep 2024 12:15:45 +0100 Subject: [PATCH 1/4] Updated version no (#3334) Co-authored-by: Alessio Venturini <112873190+alessioventuriniAND@users.noreply.github.com> --- .github/workflows/release.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c62e1bc34b..139385b57e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -21,7 +21,7 @@ jobs: - name: Zip templates run: zip -r templates.zip templates/* - name: Release - uses: softprops/action-gh-release@v1 + uses: softprops/action-gh-release@v2 with: files: templates.zip env: From acfb5a79b9c8ceb2a7ffe6925e6f05bdb1197e76 Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Tue, 17 Sep 2024 11:56:44 +0100 Subject: [PATCH 2/4] Refactor browser banner test file to new format (#3330) * changes in macro.spec.js * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/browser-banner/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --------- Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> Co-authored-by: Alessio Venturini <112873190+alessioventuriniAND@users.noreply.github.com> --- src/components/browser-banner/_macro.spec.js | 185 +++++++++---------- 1 file changed, 92 insertions(+), 93 deletions(-) diff --git a/src/components/browser-banner/_macro.spec.js b/src/components/browser-banner/_macro.spec.js index 0263410bd9..518213f577 100644 --- a/src/components/browser-banner/_macro.spec.js +++ b/src/components/browser-banner/_macro.spec.js @@ -5,102 +5,101 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; -const EXAMPLE_BROWSER_BANNER_DEFAULT = {}; - -describe('macro: browser-banner', () => { - it('passes jest-axe checks with', async () => { - const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT)); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has the default `bannerLeadingText`', () => { - const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT)); - - const bannerLeadingText = $('.ons-browser-banner__lead').text().trim(); - expect(bannerLeadingText).toBe('This website no longer supports your browser.'); - }); - - it('has the default `bannerCTA`', () => { - const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT)); - - const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim(); - expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.'); - }); - - it('has the default `bannerLinkUrl`', () => { - const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT)); - - expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers'); - }); - - it('has `container--wide` class when `wide` is true', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - wide: true, - }), - ); - - expect($('.ons-container').hasClass('ons-container--wide')).toBe(true); +describe('FOR: browser-banner', () => { + describe('GIVEN: Params: default', () => { + describe('WHEN: params are at default state', () => { + const $ = cheerio.load(renderComponent('browser-banner', {})); + + it('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + it('THEN: has the english default bannerLeadingText', () => { + const bannerLeadingText = $('.ons-browser-banner__lead').text().trim(); + expect(bannerLeadingText).toBe('This website no longer supports your browser.'); + }); + + it('THEN: has the english default bannerCTA', () => { + const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim(); + expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.'); + }); + + it('THEN: has the english default bannerLinkUrl', () => { + expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers'); + }); + }); + + describe('WHEN: params are at default and language is set to welsh', () => { + const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' })); + + it('THEN: has the welsh default bannerLeadingText', () => { + const bannerLeadingText = $('.ons-browser-banner__lead').text().trim(); + expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.'); + }); + + it('THEN: has the welsh default bannerCTA', () => { + const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim(); + expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.'); + }); + + it('THEN: has the welsh default bannerLinkUrl', () => { + expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers'); + }); + }); }); - it('does not have `container--wide` class when `wide` is not set', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - }), - ); - - expect($('.ons-container').hasClass('ons-container--wide')).toBe(false); - }); - - it('has `container--full-width` class when `fullWidth` is true', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - fullWidth: true, - }), - ); - - expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true); - }); - - it('does not have `container--full-width` class when `fullWidth` is not set', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - }), - ); - - expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false); + describe('GIVEN: Params: wide', () => { + describe('WHEN: wide is set to true', () => { + it('THEN: has container--wide class', () => { + const $ = cheerio.load( + renderComponent('browser-banner', { + ...{}, + wide: true, + }), + ); + + expect($('.ons-container').hasClass('ons-container--wide')).toBe(true); + }); + }); + + describe('WHEN: wide is not set', () => { + it('THEN: does not have container--wide class', () => { + const $ = cheerio.load( + renderComponent('browser-banner', { + ...{}, + }), + ); + + expect($('.ons-container').hasClass('ons-container--wide')).toBe(false); + }); + }); }); -}); - -describe('mode: Welsh language', () => { - it('has the welsh version of default `bannerLeadingText`', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - lang: 'cy', - }), - ); - - const bannerLeadingText = $('.ons-browser-banner__lead').text().trim(); - expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.'); - }); - - it('has the welsh version of default `bannerCTA`', () => { - const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' })); - - const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim(); - expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.'); - }); - - it('has the welsh version of default `bannerLinkUrl`', () => { - const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' })); - expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers'); + describe('GIVEN: Params: fullWidth', () => { + describe('WHEN: fullWidth is set to true', () => { + it('THEN: has container--full-width class', () => { + const $ = cheerio.load( + renderComponent('browser-banner', { + ...{}, + fullWidth: true, + }), + ); + + expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true); + }); + }); + + describe('WHEN: fullWidth is not set', () => { + it('THEN: does not have container--full-width class', () => { + const $ = cheerio.load( + renderComponent('browser-banner', { + ...{}, + }), + ); + + expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false); + }); + }); }); }); From 961d4541c3f54296d4940c424c68e3571979d7db Mon Sep 17 00:00:00 2001 From: rmccar <42928680+rmccar@users.noreply.github.com> Date: Tue, 17 Sep 2024 14:53:57 +0100 Subject: [PATCH 3/4] Fix list summary variant spacing to match summary component (#3359) --- ...ponents_list_example-summary-list_0_document_0_desktop.png | 4 ++-- ...mponents_list_example-summary-list_0_document_1_tablet.png | 4 ++-- ...mponents_list_example-summary-list_0_document_2_mobile.png | 4 ++-- src/components/list/_list.scss | 2 ++ src/components/list/example-summary-list.njk | 4 +++- 5 files changed, 11 insertions(+), 7 deletions(-) diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_0_desktop.png index e1f1b1df74..6a1cbc60e7 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bb13667ddddf83ddda3c6386854e6d69e2f7c7fea3a8a32120af5ed95ed450df -size 16478 +oid sha256:a80837903241b6c9c9046cb9734b16944c992969e90625a964320f0f473d7ee3 +size 16714 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_1_tablet.png index cac1c01469..cef50594ff 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ead2dab152a3bbdd2af28b6465d62ac4553dc4721e3c2e48c260d7b874f671c6 -size 11399 +oid sha256:ee9c3aedb9fc7ecbd54df53141be63e18085387efa1396b2b2cb7ba8f5ac6bf4 +size 11625 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_2_mobile.png index df759651e7..875088032e 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:dad0ab15906634fa5fd940c8c1cc8b85d184f84db30d6c27039870900815bf4e -size 8326 +oid sha256:13ec35b4dd6ee7546d0671f19b1e48b6e8089218f2f8c0e6cca3acdf292e8f95 +size 8534 diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss index a55ca32eb3..9804928232 100644 --- a/src/components/list/_list.scss +++ b/src/components/list/_list.scss @@ -109,8 +109,10 @@ } .ons-list__prefix, .ons-list__suffix { + @extend .ons-u-m-no; &--icon-check .ons-icon { fill: var(--ons-color-leaf-green) !important; + @extend .ons-u-mr-s; } } } diff --git a/src/components/list/example-summary-list.njk b/src/components/list/example-summary-list.njk index 37abcf2290..8d2824d22f 100644 --- a/src/components/list/example-summary-list.njk +++ b/src/components/list/example-summary-list.njk @@ -1,10 +1,12 @@ {% from "components/list/_macro.njk" import onsList %} {{ onsList({ + "iconPosition": "before", "variants": "summary", "itemsList": [ { - "text": 'birth certificate' + "text": 'birth certificate', + "iconType": "check" }, { "text": 'national insurance number' From 1e4c58d848041d35675609286b0e9704ce6cdf0e Mon Sep 17 00:00:00 2001 From: rmccar <42928680+rmccar@users.noreply.github.com> Date: Tue, 17 Sep 2024 17:58:24 +0100 Subject: [PATCH 4/4] Add lighthouse files to git ignore (#3354) --- .gitignore | 4 ++++ README.md | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index f267d1ba6a..a94eba5847 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,10 @@ backstop_data/bitmaps_test/ backstop_data/html_report/ backstop.config-for-docker.json +# Generated from lighthouse tests +.lighthouseci/ +lighthouse/urls.json + # npm package folders /components/ /page-templates/ diff --git a/README.md b/README.md index 00a71a3f54..5be9bcc5ac 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ It is sometimes useful to adjust the following settings when writing tests or di ## Testing - Visual regression tests -This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository. +This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Puppeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository. The visual tests will run automatically on pull requests and the result will be available in the Github Action logs. If the tests fail, the process for viewing the failures and approving changes will need to be handled locally using the following workflow and commands.