govuk_publishing_components 12.13.0 → 12.14.0

data/node_modules/accessible-autocomplete/test/functional/wrapper.js

@@ -0,0 +1,267 @@
+/* global before, beforeEach, after, describe, expect, it */
+import accessibleAutocomplete from '../../src/wrapper'
+
+const DEFAULT_OPTIONS = {
+  '': 'Select',
+  fr: 'France',
+  de: 'Germany',
+  gb: 'United Kingdom of Great Britain & Northern Ireland'
+}
+
+const injectSelectToEnhanceIntoDOM = (element, settings) => {
+  settings = settings || {}
+  settings.options = settings.options || DEFAULT_OPTIONS
+  settings.id = settings.id !== undefined ? settings.id : 'location-picker-id'
+  settings.name = settings.name !== undefined ? settings.name : 'location-picker-name'
+  var $select = document.createElement('select')
+  if (settings.id) {
+    $select.id = settings.id
+  }
+  if (settings.name) {
+    $select.name = settings.name
+  }
+
+  Object.keys(settings.options)
+    .map(optionKey => {
+      const option = document.createElement('option')
+      option.value = optionKey
+      option.text = settings.options[optionKey]
+      option.selected = (settings.selected === optionKey)
+      return option
+    })
+    .forEach(option => $select.appendChild(option))
+
+  element.appendChild($select)
+
+  return $select
+}
+
+describe('Wrapper', () => {
+  let scratch
+  before(() => {
+    scratch = document.createElement('div');
+    (document.body || document.documentElement).appendChild(scratch)
+  })
+
+  beforeEach(() => {
+    scratch.innerHTML = ''
+  })
+
+  after(() => {
+    scratch.parentNode.removeChild(scratch)
+    scratch = null
+  })
+
+  it('throws an error when called on nonexistent element', () => {
+    expect(
+      accessibleAutocomplete.bind(null, {
+        element: document.querySelector('#nothing-container'),
+        id: 'scratch',
+        source: () => {}
+      })
+    ).to.throw('element is not defined')
+  })
+
+  it('throws an error when called without an id ', () => {
+    expect(
+      accessibleAutocomplete.bind(null, {
+        element: scratch,
+        source: () => {}
+      })
+    ).to.throw('id is not defined')
+  })
+
+  it('throws an error when called without a source', () => {
+    expect(
+      accessibleAutocomplete.bind(null, {
+        element: scratch,
+        id: 'scratch'
+      })
+    ).to.throw('source is not defined')
+  })
+
+  it('throws an error when called on nonexistent selectElement', () => {
+    expect(
+      accessibleAutocomplete.enhanceSelectElement.bind(null, {
+        selectElement: document.querySelector('#nothing')
+      })
+    ).to.throw('selectElement is not defined')
+  })
+
+  it('can enhance a select element', () => {
+    const select = injectSelectToEnhanceIntoDOM(scratch)
+    const id = select.id
+
+    accessibleAutocomplete.enhanceSelectElement({
+      selectElement: select
+    })
+
+    const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
+    expect(autocompleteInstances.length).to.equal(1)
+
+    const autocompleteInstance = autocompleteInstances[0]
+
+    const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
+    expect(autocompleteInput.tagName.toLowerCase()).to.equal('input')
+    expect(autocompleteInput.id).to.equal(id)
+  })
+
+  it('uses the defaultValue setting to populate the input field if no option is selected', () => {
+    const select = injectSelectToEnhanceIntoDOM(scratch, { selected: '' })
+    accessibleAutocomplete.enhanceSelectElement({
+      defaultValue: '',
+      selectElement: select
+    })
+
+    const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
+    const autocompleteInstance = autocompleteInstances[0]
+
+    const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
+    expect(autocompleteInput.value).to.equal('')
+  })
+
+  it('uses the option label as the default input element value if an option is selected', () => {
+    const select = injectSelectToEnhanceIntoDOM(scratch, { selected: 'de' })
+    accessibleAutocomplete.enhanceSelectElement({
+      defaultValue: '',
+      selectElement: select
+    })
+
+    const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
+    const autocompleteInstance = autocompleteInstances[0]
+
+    const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
+    expect(autocompleteInput.value).to.equal('Germany')
+  })
+
+  it('gives the autocomplete element a blank name attribute by default', () => {
+    const select = injectSelectToEnhanceIntoDOM(scratch)
+
+    accessibleAutocomplete.enhanceSelectElement({
+      selectElement: select
+    })
+
+    const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
+
+    const autocompleteInstance = autocompleteInstances[0]
+
+    const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
+    expect(autocompleteInput.name).to.equal('')
+  })
+
+  it('can define a name for the autocomplete element', () => {
+    const select = injectSelectToEnhanceIntoDOM(scratch)
+
+    accessibleAutocomplete.enhanceSelectElement({
+      name: 'location-picker-autocomplete',
+      selectElement: select
+    })
+
+    const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
+
+    const autocompleteInstance = autocompleteInstances[0]
+
+    const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
+    expect(autocompleteInput.name).to.equal('location-picker-autocomplete')
+  })
+
+  it('does not include "null" options in autocomplete', (done) => {
+    const select = injectSelectToEnhanceIntoDOM(scratch)
+
+    accessibleAutocomplete.enhanceSelectElement({
+      selectElement: select
+    })
+
+    const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
+    const autocompleteInstance = autocompleteInstances[0]
+    const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
+
+    // Using setTimeouts here since changes in values take a while to reflect in lists
+    autocompleteInput.value = 'e'
+    setTimeout(() => {
+      const autocompleteOptions = autocompleteInstance.querySelectorAll('.autocomplete__option')
+      expect(autocompleteOptions.length).to.equal(3)
+      expect([].map.call(autocompleteOptions, o => o.textContent)).not.to.contain('Select')
+      done()
+    }, 250)
+  })
+
+  it('includes "null" options in autocomplete if `preserveNullOptions` flag is true', (done) => {
+    const select = injectSelectToEnhanceIntoDOM(scratch)
+
+    accessibleAutocomplete.enhanceSelectElement({
+      preserveNullOptions: true,
+      selectElement: select
+    })
+
+    const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
+    const autocompleteInstance = autocompleteInstances[0]
+    const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
+
+    // Using setTimeouts here since changes in values take a while to reflect in lists
+    autocompleteInput.value = 'e'
+    setTimeout(() => {
+      const autocompleteOptions = autocompleteInstance.querySelectorAll('.autocomplete__option')
+      expect(autocompleteOptions.length).to.equal(4)
+      expect([].map.call(autocompleteOptions, o => o.textContent)).to.contain('Select')
+      done()
+    }, 250)
+  })
+
+  it('has all options when typing', (done) => {
+    const select = injectSelectToEnhanceIntoDOM(scratch)
+
+    accessibleAutocomplete.enhanceSelectElement({
+      selectElement: select
+    })
+
+    const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
+    const autocompleteInstance = autocompleteInstances[0]
+    const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
+    const autocompleteOption = autocompleteInstance.querySelector('.autocomplete__option')
+
+    // Using setTimeouts here since changes in values take a while to reflect in lists
+    autocompleteInput.value = 'Fran'
+    setTimeout(() => {
+      expect(autocompleteOption.textContent).to.equal('France')
+      autocompleteInput.value = 'Ger'
+      setTimeout(() => {
+        expect(autocompleteOption.textContent).to.equal('Germany')
+        autocompleteInput.value = 'United'
+        setTimeout(() => {
+          const autocompleteHint = autocompleteInstance.querySelector('.autocomplete__hint')
+          expect(autocompleteOption.textContent).to.equal('United Kingdom of Great Britain & Northern Ireland')
+          expect(autocompleteHint.value).to.equal('United Kingdom of Great Britain & Northern Ireland')
+          done()
+        }, 250)
+      }, 250)
+    }, 250)
+  })
+
+  it('onConfirm updates original select', (done) => {
+    const select = injectSelectToEnhanceIntoDOM(scratch, { selected: 'de' })
+
+    accessibleAutocomplete.enhanceSelectElement({
+      selectElement: select
+    })
+
+    const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
+    const autocompleteInstance = autocompleteInstances[0]
+    const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
+    const autocompleteOption = autocompleteInstance.querySelector('.autocomplete__option')
+
+    // Check the initial value of the original selectElement
+    expect(select.value).to.equal('de')
+    // Using setTimeouts here since changes in values take a while to reflect in lists
+    autocompleteInput.value = 'United'
+    setTimeout(() => {
+      expect(autocompleteOption.textContent).to.equal('United Kingdom of Great Britain & Northern Ireland')
+      autocompleteOption.click()
+      expect(select.value).to.equal('gb')
+      setTimeout(() => {
+        expect(autocompleteInput.value).to.equal('United Kingdom of Great Britain & Northern Ireland')
+        done()
+      }, 250)
+    }, 250)
+  })
+})

data/node_modules/accessible-autocomplete/test/integration/index.js

@@ -0,0 +1,188 @@
+/* global afterEach, before, beforeEach, browser, describe, it */
+const expect = require('chai').expect
+const { browserName, version } = browser.desiredCapabilities
+const isChrome = browserName === 'chrome'
+const isFireFox = browserName === 'firefox'
+const isIE = browserName === 'internet explorer'
+// const isIE9 = isIE && version === '9'
+// const isIE10 = isIE && version === '10'
+// const isIE11 = isIE && version === '11.103'
+
+const basicExample = () => {
+  describe('basic example', function () {
+    this.retries(3)
+
+    const input = 'input#autocomplete-default'
+    const menu = `${input} + ul`
+    const firstOption = `${menu} > li:first-child`
+    const secondOption = `${menu} > li:nth-child(2)`
+
+    beforeEach(() => {
+      browser.setValue(input, '') // Prevent autofilling, IE likes to do this.
+    })
+
+    it('should show the input', () => {
+      browser.waitForExist(input)
+      expect(browser.isVisible(input)).to.equal(true)
+    })
+
+    it('should allow focusing the input', () => {
+      browser.click(input)
+      expect(browser.hasFocus(input)).to.equal(true)
+    })
+
+    it('should display suggestions', () => {
+      browser.click(input)
+      browser.setValue(input, 'ita')
+      browser.waitForVisible(menu)
+      expect(browser.isVisible(menu)).to.equal(true)
+    })
+
+    describe('keyboard use', () => {
+      it('should allow typing', () => {
+        browser.click(input)
+        browser.addValue(input, 'ita')
+        expect(browser.getValue(input)).to.equal('ita')
+      })
+
+      it('should allow selecting an option', () => {
+        browser.click(input)
+        browser.setValue(input, 'ita')
+        browser.addValue(input, ['ArrowDown'])
+        expect(browser.hasFocus(input)).to.equal(false)
+        expect(browser.hasFocus(firstOption)).to.equal(true)
+        browser.addValue(firstOption, ['ArrowDown'])
+        expect(browser.isVisible(menu)).to.equal(true)
+        expect(browser.getValue(input)).to.equal('ita')
+        expect(browser.hasFocus(firstOption)).to.equal(false)
+        expect(browser.hasFocus(secondOption)).to.equal(true)
+      })
+
+      it('should allow confirming an option', () => {
+        browser.click(input)
+        browser.setValue(input, 'ita')
+        browser.addValue(input, ['ArrowDown', 'Enter'])
+        browser.waitUntil(() => browser.getValue(input) !== 'ita')
+        expect(browser.hasFocus(input)).to.equal(true)
+        expect(browser.getValue(input)).to.equal('Italy')
+      })
+
+      it('should redirect keypresses on an option to input', () => {
+        if (!isIE) {
+          browser.click(input)
+          browser.setValue(input, 'ita')
+          browser.addValue(input, ['ArrowDown'])
+          expect(browser.hasFocus(input)).to.equal(false)
+          expect(browser.hasFocus(firstOption)).to.equal(true)
+          browser.addValue(firstOption, ['l'])
+          expect(browser.hasFocus(input)).to.equal(true)
+          expect(browser.getValue(input)).to.equal('ital')
+        } else {
+          // FIXME: This feature does not work correctly on IE 9 to 11.
+        }
+      })
+    })
+
+    describe('mouse use', () => {
+      it('should allow confirming an option', () => {
+        browser.click(input)
+        browser.setValue(input, 'ita')
+        browser.click(firstOption)
+        expect(browser.hasFocus(input)).to.equal(true)
+        expect(browser.getValue(input)).to.equal('Italy')
+      })
+    })
+  })
+}
+
+const customTemplatesExample = () => {
+  describe('custom templates example', function () {
+    this.retries(3)
+
+    const input = 'input#autocomplete-customTemplates'
+    const menu = `${input} + ul`
+    const firstOption = `${menu} > li:first-child`
+    const firstOptionInnerElement = `${firstOption} > strong`
+
+    beforeEach(() => {
+      browser.setValue(input, '') // Prevent autofilling, IE likes to do this.
+    })
+
+    describe('mouse use', () => {
+      it('should allow confirming an option by clicking on child elements', () => {
+        browser.setValue(input, 'uni')
+        if (isChrome) {
+          const errorRegex = /Other element would receive the click/
+          expect(browser.click.bind(browser, firstOptionInnerElement)).to.throw(errorRegex)
+          expect(browser.hasFocus(input)).to.equal(true)
+          expect(browser.getValue(input)).to.equal('uni')
+        }
+        if (isFireFox) {
+          browser.click(firstOptionInnerElement)
+          expect(browser.hasFocus(input)).to.equal(true)
+          expect(browser.getValue(input)).to.equal('United Kingdom')
+        }
+        if (isIE) {
+          // FIXME: This feature works correctly on IE but testing it doesn't seem to work.
+        }
+      })
+    })
+  })
+}
+
+const takeScreenshotsIfFail = () => {
+  afterEach(function () {
+    const testFailed = this.currentTest.state === 'failed'
+    if (testFailed) {
+      const timestamp = +new Date()
+      const browserVariant = isIE ? `ie${version}` : browserName
+      const testTitle = this.currentTest.title.replace(/\W/g, '-')
+      const filename = `./screenshots/${timestamp}-${browserVariant}-${testTitle}.png`
+      browser.saveScreenshot(filename)
+      console.log(`Test failed, created: ${filename}`)
+    }
+  })
+}
+
+describe('Accessible Autocomplete', () => {
+  before(() => {
+    browser.url('/')
+  })
+
+  it('should have the right title', () => {
+    expect(browser.getTitle()).to.equal('Accessible Autocomplete examples')
+  })
+
+  basicExample()
+  customTemplatesExample()
+
+  takeScreenshotsIfFail()
+})
+
+describe('Accessible Autocomplete Preact', () => {
+  before(() => {
+    browser.url('/preact')
+  })
+
+  it('should have the right title', () => {
+    expect(browser.getTitle()).to.equal('Accessible Autocomplete Preact examples')
+  })
+
+  basicExample()
+
+  takeScreenshotsIfFail()
+})
+
+describe('Accessible Autocomplete React', () => {
+  before(() => {
+    browser.url('/react')
+  })
+
+  it('should have the right title', () => {
+    expect(browser.getTitle()).to.equal('Accessible Autocomplete React examples')
+  })
+
+  basicExample()
+
+  takeScreenshotsIfFail()
+})