From db74b5be3e584f066c0c4a0be96dfa8453275611 Mon Sep 17 00:00:00 2001 From: Victor Araya Date: Fri, 22 Mar 2024 15:17:58 -0500 Subject: [PATCH 1/5] multiple selection unit tests Signed-off-by: Victor Araya --- lib/multiSelectOptions.js | 11 +++++ test/lib/multiple.js | 95 +++++++++++++++++++++++++++++++++++++ test/snippets/multiple.html | 12 +++++ 3 files changed, 118 insertions(+) create mode 100644 lib/multiSelectOptions.js create mode 100644 test/lib/multiple.js create mode 100644 test/snippets/multiple.html diff --git a/lib/multiSelectOptions.js b/lib/multiSelectOptions.js new file mode 100644 index 00000000..c4b94b4f --- /dev/null +++ b/lib/multiSelectOptions.js @@ -0,0 +1,11 @@ +module.exports = (option, config, announce, groupChanged, element) => { + const selectedOptions = Array.from( + element.querySelectorAll('option[aria-selected="true"]') + ); + const selectedText = config.announcement.selected; + + let msg = selectedOptions.map((option) => option.innerText).join(' '); + msg = selectedText ? `${msg} ${selectedText}` : msg; + + announce(msg.trim(), 500); +}; diff --git a/test/lib/multiple.js b/test/lib/multiple.js new file mode 100644 index 00000000..c20b42b3 --- /dev/null +++ b/test/lib/multiple.js @@ -0,0 +1,95 @@ +'use strict'; + +const assert = require('chai').assert; +const queryAll = require('../../lib/utils/select').all; +const aa = require('../../lib/announce-active'); +const multiSelectOptions = require('../../lib/multiSelectOptions'); +const Fixture = require('../fixture'); +const simpleSnippet = require('../snippets/multiple.html'); +const Combobo = require('../../index'); + +describe('multiselect config', () => { + let fixture, simpleBox, opts; + + before(() => (fixture = new Fixture())); + beforeEach(() => { + fixture.create(`${simpleSnippet}`); + simpleBox = new Combobo({ multiselect: false }); + opts = queryAll('.combobo option', fixture.element); + }); + afterEach(() => fixture.destroy()); + after(() => fixture.cleanUp()); + + it('should be a function', () => { + assert.equal('function', typeof aa); + assert.equal('function', typeof multiSelectOptions); + }); + + it('should return the options set in the dropdown', () => { + const options = opts.map((opt) => opt.innerText); + assert.deepEqual(options, ['Red', 'Yellow']); + }); + + it('should return the dropdown option set', () => { + let msg; + + var yellowOption = Array.prototype.find.call( + simpleBox.cachedOpts, + function (opt) { + return opt.textContent.trim() === 'Yellow'; + } + ); + + yellowOption.setAttribute('aria-selected', 'true'); + simpleBox.selectedOpts = [yellowOption]; + + aa( + yellowOption, + { + announcement: { selected: 'Yellow' }, + }, + function (text) { + msg = text; + }, + false + ); + + assert.equal( + msg, + 'Yellow Yellow', + 'The message does not correctly reflect the "Yellow" selection' + ); + }); + + it('should return the selected two options', () => { + let msg; + + const redOption = opts.find((option) => option.innerText.trim() === 'Red'); + const yellowOption = opts.find( + (option) => option.innerText.trim() === 'Yellow' + ); + + redOption.setAttribute('aria-selected', 'true'); + yellowOption.setAttribute('aria-selected', 'true'); + + multiSelectOptions( + opts[0], + { + announcement: { selected: '' }, + }, + function (text) { + msg = text.trim(); + }, + false, + fixture.element + ); + + const expectedMsg = 'Red Yellow'; + + assert.equal( + msg, + expectedMsg, + 'The message does not correctly announce the selected options' + ); + }); +}); diff --git a/test/snippets/multiple.html b/test/snippets/multiple.html new file mode 100644 index 00000000..c7abd6f5 --- /dev/null +++ b/test/snippets/multiple.html @@ -0,0 +1,12 @@ +
+
+ +
+ +
From e5fbed6d74c5358922c5dcd2907a9cec04e8f4f0 Mon Sep 17 00:00:00 2001 From: Stephy Miehle Date: Fri, 5 Apr 2024 14:30:14 -0500 Subject: [PATCH 2/5] VCC-2970 Update the `for` attribute on the label to match the ID on the select/input When a ``) or there is a `