Allow forcing polyfill for tests

alphagov · Aug 8, 2019 · 5cf4fa1 · 5cf4fa1
1 parent 3a04113
commit 5cf4fa1
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 42 deletions.
diff --git a/app/views/examples/details-polyfill/index.njk b/app/views/examples/details-polyfill/index.njk
@@ -0,0 +1,60 @@
+{% from "back-link/macro.njk" import govukBackLink %}
+
+{% extends "layout.njk" %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    "href": "/"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+      <h1 class="govuk-heading-xl">
+        Details polyfill examples
+      </h1>
+
+      <p class="govuk-body">
+        In order to test our polyfill code for details we need to have examples that do not use the native elements.
+      </p>
+
+
+      <h2 class="govuk-heading-m">
+        Default
+      </h2>
+
+      <div class="govuk-details" data-module="govuk-details" id="default">
+        <summary class="govuk-details__summary">
+          <span class="govuk-details__summary-text">
+            Help with nationality
+          </span>
+        </summary>
+        <div class="govuk-details__text">
+          We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
+        </div>
+      </div>
+
+      <h2 class="govuk-heading-m">
+        Expanded
+      </h2>
+
+      <div class="govuk-details" data-module="govuk-details" open id="expanded">
+        <summary class="govuk-details__summary">
+          <span class="govuk-details__summary-text">
+            Help with nationality
+          </span>
+        </summary>
+        <div class="govuk-details__text">
+          We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
+        </div>
+      </div>
+
+      <script>
+        window.__GOVUKFRONTEND_FORCE_DETAILS_POLYFILL = true
+      </script>
+
+    </div>
+  </div>
+{% endblock %}
diff --git a/src/govuk/components/details/details.js b/src/govuk/components/details/details.js
@@ -16,10 +16,12 @@ function Details ($module) {
 }
 
 Details.prototype.init = function () {
+  // So we can run automated tests we need to be able to force the polyfill to run
+  var shouldForcePolyfill = typeof window.__GOVUKFRONTEND_FORCE_DETAILS_POLYFILL !== 'undefined'
   // If there is native details support, we want to avoid running code to polyfill native behaviour.
   var hasNativeDetails = typeof document.createElement('details').open === 'boolean'
 
-  if (!this.$module || hasNativeDetails) {
+  if (!this.$module || (!shouldForcePolyfill && hasNativeDetails)) {
     return
   }
 

diff --git a/src/govuk/components/details/details.test.js b/src/govuk/components/details/details.test.js
@@ -5,130 +5,162 @@ const PORT = configPaths.ports.test
 
 const baseUrl = 'http://localhost:' + PORT
 
-describe('/components/details', () => {
-  describe('/components/details/preview', () => {
+describe('details', () => {
+  describe('/examples/details-polyfill', () => {
     it('should add to summary the button role', async () => {
-      await page.goto(baseUrl + '/components/details/preview', { waitUntil: 'load' })
+      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-      const summaryRole = await page.evaluate(() => document.body.getElementsByTagName('summary')[0].getAttribute('role'))
+      const summaryRole = await page.evaluate(() => {
+        return document.getElementById('default').querySelector('summary').getAttribute('role')
+      })
       expect(summaryRole).toBe('button')
     })
 
     it('should set the element controlled by the summary using aria-controls', async () => {
-      await page.goto(baseUrl + '/components/details/preview', { waitUntil: 'load' })
+      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-      const summaryAriaControls = await page.evaluate(() => document.body.getElementsByTagName('summary')[0].getAttribute('aria-controls'))
-      const controlledContainerId = await page.evaluate(() => document.body.getElementsByTagName('details')[0].querySelectorAll('div')[0].getAttribute('id'))
+      const summaryAriaControls = await page.evaluate(() => {
+        return document.getElementById('default').querySelector('summary').getAttribute('aria-controls')
+      })
+      const controlledContainerId = await page.evaluate(() => {
+        return document.getElementById('default').querySelector('.govuk-details__text').getAttribute('id')
+      })
       expect(summaryAriaControls).toBe(controlledContainerId)
     })
 
     it('should set the expanded state of the summary to false using aria-expanded', async () => {
-      await page.goto(baseUrl + '/components/details/preview', { waitUntil: 'load' })
+      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-      const summaryAriaExpanded = await page.evaluate(() => document.body.getElementsByTagName('summary')[0].getAttribute('aria-expanded'))
+      const summaryAriaExpanded = await page.evaluate(() => {
+        return document.getElementById('default').querySelector('summary').getAttribute('aria-expanded')
+      })
       expect(summaryAriaExpanded).toBe('false')
     })
 
     it('should present the content as hidden using aria-hidden', async () => {
-      await page.goto(baseUrl + '/components/details/preview', { waitUntil: 'load' })
+      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-      const hiddenContainerAriaHidden = await page.evaluate(() => document.body.getElementsByTagName('details')[0].querySelectorAll('div')[0].getAttribute('aria-hidden'))
+      const hiddenContainerAriaHidden = await page.evaluate(() => {
+        return document.getElementById('default').querySelector('.govuk-details__text').getAttribute('aria-hidden')
+      })
       expect(hiddenContainerAriaHidden).toBe('true')
     })
 
     it('should indicate the open state of the content', async () => {
-      await page.goto(baseUrl + '/components/details/preview', { waitUntil: 'load' })
+      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-      const detailsOpen = await page.evaluate(() => document.body.getElementsByTagName('details')[0].getAttribute('open'))
+      const detailsOpen = await page.evaluate(() => {
+        return document.getElementById('default').getAttribute('open')
+      })
       expect(detailsOpen).toBeNull()
     })
 
     describe('when details is triggered', () => {
       it('should indicate the expanded state of the summary using aria-expanded', async () => {
-        await page.goto(baseUrl + '/components/details/preview', { waitUntil: 'load' })
+        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-        await page.click('summary')
+        await page.click('#default summary')
 
-        const summaryAriaExpanded = await page.evaluate(() => document.body.getElementsByTagName('summary')[0].getAttribute('aria-expanded'))
+        const summaryAriaExpanded = await page.evaluate(() => {
+          return document.getElementById('default').querySelector('summary').getAttribute('aria-expanded')
+        })
         expect(summaryAriaExpanded).toBe('true')
       })
 
       it('should indicate the visible state of the content using aria-hidden', async () => {
-        await page.goto(baseUrl + '/components/details/preview', { waitUntil: 'load' })
+        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-        await page.click('summary')
+        await page.click('#default summary')
 
-        const hiddenContainerAriaHidden = await page.evaluate(() => document.body.getElementsByTagName('details')[0].querySelectorAll('div')[0].getAttribute('aria-hidden'))
+        const hiddenContainerAriaHidden = await page.evaluate(() => {
+          return document.getElementById('default').querySelector('.govuk-details__text').getAttribute('aria-hidden')
+        })
         expect(hiddenContainerAriaHidden).toBe('false')
       })
 
       it('should indicate the open state of the content', async () => {
-        await page.goto(baseUrl + '/components/details/preview', { waitUntil: 'load' })
+        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-        await page.click('summary')
+        await page.click('#default summary')
 
-        const detailsOpen = await page.evaluate(() => document.body.getElementsByTagName('details')[0].getAttribute('open'))
+        const detailsOpen = await page.evaluate(() => {
+          return document.getElementById('default').getAttribute('open')
+        })
         expect(detailsOpen).not.toBeNull()
       })
     })
   })
 
-  describe('/components/details/expanded/preview', () => {
+  describe('expanded', () => {
     it('should indicate the expanded state of the summary using aria-expanded', async () => {
-      await page.goto(baseUrl + '/components/details/expanded/preview', { waitUntil: 'load' })
+      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-      const summaryAriaExpanded = await page.evaluate(() => document.body.getElementsByTagName('summary')[0].getAttribute('aria-expanded'))
+      const summaryAriaExpanded = await page.evaluate(() => {
+        return document.getElementById('expanded').querySelector('summary').getAttribute('aria-expanded')
+      })
       expect(summaryAriaExpanded).toBe('true')
     })
 
     it('should indicate the visible state of the content using aria-hidden', async () => {
-      await page.goto(baseUrl + '/components/details/expanded/preview', { waitUntil: 'load' })
+      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-      const hiddenContainerAriaHidden = await page.evaluate(() => document.body.getElementsByTagName('details')[0].querySelectorAll('div')[0].getAttribute('aria-hidden'))
+      const hiddenContainerAriaHidden = await page.evaluate(() => {
+        return document.getElementById('expanded').querySelector('.govuk-details__text').getAttribute('aria-hidden')
+      })
       expect(hiddenContainerAriaHidden).toBe('false')
     })
 
     it('should indicate the open state of the content', async () => {
-      await page.goto(baseUrl + '/components/details/expanded/preview', { waitUntil: 'load' })
+      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-      const detailsOpen = await page.evaluate(() => document.body.getElementsByTagName('details')[0].getAttribute('open'))
+      const detailsOpen = await page.evaluate(() => {
+        return document.getElementById('expanded').getAttribute('open')
+      })
       expect(detailsOpen).not.toBeNull()
     })
 
     it('should not be affected when clicking the revealed content', async () => {
-      await page.goto(baseUrl + '/components/details/expanded/preview', { waitUntil: 'load' })
+      await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-      await page.click('.govuk-details__text')
+      await page.click('#expanded .govuk-details__text')
 
-      const summaryAriaExpanded = await page.evaluate(() => document.body.getElementsByTagName('summary')[0].getAttribute('aria-expanded'))
+      const summaryAriaExpanded = await page.evaluate(() => {
+        return document.getElementById('expanded').querySelector('summary').getAttribute('aria-expanded')
+      })
       expect(summaryAriaExpanded).toBe('true')
     })
 
     describe('when details is triggered', () => {
       it('should indicate the expanded state of the summary using aria-expanded', async () => {
-        await page.goto(baseUrl + '/components/details/expanded/preview', { waitUntil: 'load' })
+        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-        await page.click('summary')
+        await page.click('#expanded summary')
 
-        const summaryAriaExpanded = await page.evaluate(() => document.body.getElementsByTagName('summary')[0].getAttribute('aria-expanded'))
+        const summaryAriaExpanded = await page.evaluate(() => {
+          return document.getElementById('expanded').querySelector('summary').getAttribute('aria-expanded')
+        })
         expect(summaryAriaExpanded).toBe('false')
       })
 
       it('should indicate the visible state of the content using aria-hidden', async () => {
-        await page.goto(baseUrl + '/components/details/expanded/preview', { waitUntil: 'load' })
+        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-        await page.click('summary')
+        await page.click('#expanded summary')
 
-        const hiddenContainerAriaHidden = await page.evaluate(() => document.body.getElementsByTagName('details')[0].querySelectorAll('div')[0].getAttribute('aria-hidden'))
+        const hiddenContainerAriaHidden = await page.evaluate(() => {
+          return document.getElementById('expanded').querySelector('.govuk-details__text').getAttribute('aria-hidden')
+        })
         expect(hiddenContainerAriaHidden).toBe('true')
       })
 
       it('should indicate the open state of the content', async () => {
-        await page.goto(baseUrl + '/components/details/expanded/preview', { waitUntil: 'load' })
+        await page.goto(baseUrl + '/examples/details-polyfill', { waitUntil: 'load' })
 
-        await page.click('summary')
+        await page.click('#expanded summary')
 
-        const detailsOpen = await page.evaluate(() => document.body.getElementsByTagName('details')[0].getAttribute('open'))
+        const detailsOpen = await page.evaluate(() => {
+          return document.getElementById('expanded').getAttribute('open')
+        })
         expect(detailsOpen).toBeNull()
       })
     })