-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
There's an [ongoing issue][1] with the accessible autocomplete that stops the arrow from opening the options menu when `showAllValues: true` is enabled. The `showAllValues: true` option shows all values when focused on the autocomplete element without having typed anything I tried getting this to work in Capybara with Selenium in `granting_permissions_test.rb` and `account_applications_test.rb`, but the click event listener on the arrow is making it a challenge to click on it in a test. Per the Jasmine test, you need to dispatch a click event rather than just using the `click()` method directly. I tried doing this in the Capybara test with `execute_script` and various other methods, but couldn't get the right results Instead, I've opted for a small single function Jasmine test This also hides the arrow when the autocomplete input is focused. Initially I wanted to make the arrow stay but have it toggle the menu, but I was trying to do this by checking whether the input was the active element, and it's no longer the active element once you click on the arrow! I didn't want to get into storing state in a variable, as there's too much under the hood autocomplete functionality that would affect visibility and therefore make the conditional logic complicated [1]: alphagov/accessible-autocomplete#202
- Loading branch information
Showing
3 changed files
with
64 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
spec/javascripts/modules/accessible-autocomplete-dropdown-spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
describe('GOVUK.Modules.AccessibleAutocomplete', function () { | ||
let component, module | ||
|
||
beforeEach(async function () { | ||
component = document.createElement('div') | ||
component.setAttribute('data-module', 'accessible-autocomplete') | ||
component.innerHTML = ` | ||
<label class="govuk-label govuk-label--m" for="new_permission_id">Add a permission</label> | ||
<div id="hint-1234" class="gem-c-hint govuk-hint"> | ||
Search for the permission you want to add. | ||
<select name="application[new_permission_id]" id="new_permission_id" class="govuk-select" aria-describedby="hint-1234"> | ||
<option value=""></option> | ||
<option value="1">permission-1</option> | ||
<option value="2">permission-2</option> | ||
<option value="3">permission-3</option> | ||
<option value="4">permission-4</option> | ||
<option value="5">permission-5</option> | ||
<option value="6">permission-6</option> | ||
<option value="7">permission-7</option> | ||
<option value="8">permission-8</option> | ||
<option value="9">permission-9</option> | ||
</select> | ||
</div> | ||
` | ||
module = new GOVUK.Modules.AccessibleAutocomplete(component) | ||
module.init() | ||
}) | ||
|
||
it("opens the menu when clicking the arrow", async function () { | ||
const menuElement = component.querySelector('.autocomplete__menu') | ||
const menuElementClassesBefore = Array.from(menuElement.classList) | ||
expect(menuElementClassesBefore.includes('autocomplete__menu--visible')).toBe(false) | ||
expect(menuElementClassesBefore.includes('autocomplete__menu--hidden')).toBe(true) | ||
|
||
const arrowElement = component.querySelector('.autocomplete__dropdown-arrow-down') | ||
arrowElement.dispatchEvent(new Event('click')) | ||
|
||
await wait() | ||
|
||
const menuElementClassesAfter = Array.from(menuElement.classList) | ||
expect(menuElementClassesAfter.includes('autocomplete__menu--visible')).toBe(true) | ||
expect(menuElementClassesAfter.includes('autocomplete__menu--hidden')).toBe(false) | ||
}) | ||
}) | ||
|
||
const wait = async () => await new Promise(resolve => setTimeout(resolve, 100)) |