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.

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 %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+          {{ govukErrorSummary({
+            titleText: "There is a problem"
+          })}}
+
+        {{ govukNotificationBanner({
+          text: "Invite sent to example@email.com",
+          type: "success"
+        })}}
+
+    </div>
+  </div>
+{% endblock %}

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 %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+        {{ govukNotificationBanner({
+          text: "Invite sent to example@email.com",
+          type: "success"
+        })}}
+
+        {{ govukNotificationBanner({
+          text: "You need to respond within two days",
+          type: "success"
+        })}}
+
+        <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>
+
+        <p class="govuk-body">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.</p>
+    </div>
+  </div>
+{% endblock %}

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 %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+        {{ govukNotificationBanner({
+          text: "Invite sent to example@email.com",
+          type: "success"
+        })}}
+
+        <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+    </div>
+  </div>
+{% endblock %}

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')
+      })
+    })
+  })
+})

src/govuk/components/notification-banner/notification-banner.yaml

@@ -87,6 +87,16 @@ examples:
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v3-FINAL.pdf</a></li>
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v4-FINAL-v2.pdf</a></li>
       </ul>
+- 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

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()