From ac4831d8e300803c323b74b67dd178d7f8b66a49 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Thu, 22 Oct 2020 11:06:36 +0100 Subject: [PATCH] Test autofocusing behaviour of notification banner Test if the element focuses and is scrolled into. Also test if there is an error summary on the page, in which case don't focus the notification banner. Also test if another notification banner on the page has already received focus. --- .../index.njk | 29 +++++++ .../notification-banner-multiple/index.njk | 32 ++++++++ .../examples/notification-banner/index.njk | 35 ++++++++ .../notification-banner.test.js | 79 +++++++++++++++++++ .../notification-banner.yaml | 16 ++-- .../notification-banner/template.test.js | 2 +- 6 files changed, 186 insertions(+), 7 deletions(-) create mode 100644 app/views/examples/notification-banner-and-error-summary/index.njk create mode 100644 app/views/examples/notification-banner-multiple/index.njk create mode 100644 app/views/examples/notification-banner/index.njk create mode 100644 src/govuk/components/notification-banner/notification-banner.test.js diff --git a/app/views/examples/notification-banner-and-error-summary/index.njk b/app/views/examples/notification-banner-and-error-summary/index.njk new file mode 100644 index 0000000000..3dea1727cb --- /dev/null +++ b/app/views/examples/notification-banner-and-error-summary/index.njk @@ -0,0 +1,29 @@ +{% extends "_generic.njk" %} + +{% from "error-summary/macro.njk" import govukErrorSummary %} +{% from "notification-banner/macro.njk" import govukNotificationBanner %} + +{% set pageTitle = "Notification banner and error summary" %} +{% block pageTitle %}{{ "Error: " if errors }}{{ pageTitle }} - GOV.UK{% endblock %} + +{% block header %} + {% include "../../partials/banner.njk" %} + {{ govukHeader({}) }} +{% endblock %} + +{% block content %} +
+
+ + {{ govukErrorSummary({ + titleText: "There is a problem" + })}} + + {{ govukNotificationBanner({ + text: "Invite sent to example@email.com", + type: "success" + })}} + +
+
+{% endblock %} diff --git a/app/views/examples/notification-banner-multiple/index.njk b/app/views/examples/notification-banner-multiple/index.njk new file mode 100644 index 0000000000..1f5a999fcc --- /dev/null +++ b/app/views/examples/notification-banner-multiple/index.njk @@ -0,0 +1,32 @@ +{% extends "_generic.njk" %} + +{% from "notification-banner/macro.njk" import govukNotificationBanner %} + +{% set pageTitle = "Notification banner" %} +{% block pageTitle %}{{ "Error: " if errors }}{{ pageTitle }} - GOV.UK{% endblock %} + +{% block header %} + {% include "../../partials/banner.njk" %} + {{ govukHeader({}) }} +{% endblock %} + +{% block content %} +
+
+ + {{ govukNotificationBanner({ + text: "Invite sent to example@email.com", + type: "success" + })}} + + {{ govukNotificationBanner({ + text: "You need to respond within two days", + type: "success" + })}} + +

{{ pageTitle }}

+ +

Please note that it's not recommended to have multiple banners of the same type on the page. This page is an example for testing purposes.

+
+
+{% endblock %} diff --git a/app/views/examples/notification-banner/index.njk b/app/views/examples/notification-banner/index.njk new file mode 100644 index 0000000000..5cc1fcc483 --- /dev/null +++ b/app/views/examples/notification-banner/index.njk @@ -0,0 +1,35 @@ +{% extends "_generic.njk" %} + +{% from "notification-banner/macro.njk" import govukNotificationBanner %} + +{% set pageTitle = "Notification banner" %} +{% block pageTitle %}{{ "Error: " if errors }}{{ pageTitle }} - GOV.UK{% endblock %} + +{% block header %} + {% include "../../partials/banner.njk" %} + {{ govukHeader({}) }} +{% endblock %} + +{% block content %} +
+
+ + {{ govukNotificationBanner({ + text: "Invite sent to example@email.com", + type: "success" + })}} + +

{{ pageTitle }}

+ +

These paragraphs make the page taller so that we can test the scrolling behaviour.

+ +

These paragraphs make the page taller so that we can test the scrolling behaviour.

+ +

These paragraphs make the page taller so that we can test the scrolling behaviour.

+ +

These paragraphs make the page taller so that we can test the scrolling behaviour.

+ +

These paragraphs make the page taller so that we can test the scrolling behaviour.

+
+
+{% endblock %} diff --git a/src/govuk/components/notification-banner/notification-banner.test.js b/src/govuk/components/notification-banner/notification-banner.test.js new file mode 100644 index 0000000000..0998081d5a --- /dev/null +++ b/src/govuk/components/notification-banner/notification-banner.test.js @@ -0,0 +1,79 @@ +/* eslint-env jest */ + +const configPaths = require('../../../../config/paths.json') +const PORT = configPaths.ports.test + +const baseUrl = 'http://localhost:' + PORT + +describe('/components/notification-banner', () => { + describe('/examples/notification-banner', () => { + describe('when JavaScript is available', () => { + it('focuses the notification banner', async () => { + await page.goto(`${baseUrl}/examples/notification-banner`, { waitUntil: 'load' }) + + const activeElement = await page.evaluate(() => document.activeElement.dataset.module) + + expect(activeElement).toBe('govuk-notification-banner') + }) + + it('scrolls the notification banner to the top of the screen', async () => { + // Wait until 'domcontentloaded' to have correct coordinates for element position + await page.goto(`${baseUrl}/examples/notification-banner`, { waitUntil: 'domcontentloaded' }) + + const positionFromTopOfViewport = await page.$eval('.govuk-notification-banner', (elem) => { + return elem.getBoundingClientRect().top + }) + + expect(positionFromTopOfViewport).toEqual(0) + }) + }) + }) + + describe('/examples/notification-banner-and-error-summary', () => { + describe('when there is an error summary on the page', () => { + it('the notification banner is not focused and the error summary is', async () => { + await page.goto(`${baseUrl}/examples/notification-banner-and-error-summary`, { waitUntil: 'load' }) + + const activeElement = await page.evaluate(() => document.activeElement.dataset.module) + + expect(activeElement).toBe('govuk-error-summary') + }) + }) + }) + + describe('/examples/notification-banner-multiple', () => { + describe('when there are multiple notification banners on the page', () => { + it('the first one on the page is focused', async () => { + await page.goto(`${baseUrl}/examples/notification-banner-multiple`, { waitUntil: 'load' }) + + const activeElementTextContent = await page.evaluate(() => document.activeElement.textContent) + + expect(activeElementTextContent).toContain('Invite sent to example@email.com') + }) + }) + }) + + describe('components/notification-banner/auto-focus-as-is-set-to-false,-with-type-as-success', () => { + describe('when auto-focus is set to false', () => { + it('does not focus the notification banner', async () => { + await page.goto(`${baseUrl}/components/notification-banner/auto-focus-as-is-set-to-false,-with-type-as-success/preview`, { waitUntil: 'load' }) + + const activeElement = await page.evaluate(() => document.activeElement.dataset.module) + + expect(activeElement).not.toBe('govuk-notification-banner') + }) + }) + }) + + describe('components/notification-banner/data-auto-focus-is-set-without-role=alert/', () => { + describe('when role="alert" is not set', () => { + it('does not focus the notification banner', async () => { + await page.goto(`${baseUrl}/components/notification-banner/data-auto-focus-is-set-without-role=alert/preview`, { waitUntil: 'load' }) + + const activeElement = await page.evaluate(() => document.activeElement.dataset.module) + + expect(activeElement).not.toBe('govuk-notification-banner') + }) + }) + }) +}) diff --git a/src/govuk/components/notification-banner/notification-banner.yaml b/src/govuk/components/notification-banner/notification-banner.yaml index 2403588177..f2dd03b86a 100644 --- a/src/govuk/components/notification-banner/notification-banner.yaml +++ b/src/govuk/components/notification-banner/notification-banner.yaml @@ -87,6 +87,16 @@ examples:
  • government-strategy-v3-FINAL.pdf
  • government-strategy-v4-FINAL-v2.pdf
    • +- name: auto-focus as is set to false, with type as success + data: + type: success + autoFocus: false + text: Email sent to example@email.com +- name: data-auto-focus is set without role=alert + data: + type: success + role: banner + text: Email sent to example@email.com # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures @@ -164,12 +174,6 @@ examples: data: autoFocus: true text: This publication was withdrawn on 7 March 2014. -- name: autoFocus as false and type as success - hidden: true - data: - type: success - autoFocus: false - text: Email sent to example@email.com - name: classes hidden: true diff --git a/src/govuk/components/notification-banner/template.test.js b/src/govuk/components/notification-banner/template.test.js index 787d9dddff..32bb1c6950 100644 --- a/src/govuk/components/notification-banner/template.test.js +++ b/src/govuk/components/notification-banner/template.test.js @@ -156,7 +156,7 @@ describe('Notification-banner', () => { }) it('removes data-auto-focus attribute so component is not focused on page load', () => { - const $ = render('notification-banner', examples['autoFocus as false and type as success']) + const $ = render('notification-banner', examples['auto-focus as is set to false, with type as success']) const $component = $('.govuk-notification-banner') expect($component.attr('data-auto-focus')).toBeUndefined()