From af0bd0cee18552bff5f469229728d94db63b1cf0 Mon Sep 17 00:00:00 2001 From: Margaree Peacocke Date: Thu, 13 Nov 2025 13:28:31 -0500 Subject: [PATCH 1/2] Enhance Tests: button-move --- components/button/test/button-move.axe.js | 30 ++++++++ components/button/test/button-move.test.js | 89 +++++++++++++++++++++- 2 files changed, 118 insertions(+), 1 deletion(-) diff --git a/components/button/test/button-move.axe.js b/components/button/test/button-move.axe.js index 8ab61b2a78d..bfc3ad81d29 100644 --- a/components/button/test/button-move.axe.js +++ b/components/button/test/button-move.axe.js @@ -29,4 +29,34 @@ describe('d2l-button-move', () => { expect(description.innerText).to.equal('secondary'); }); + it('partially disabled (up)', async() => { + const el = await fixture(html``); + await expect(el).to.be.accessible(); + }); + + it('partially disabled (down)', async() => { + const el = await fixture(html``); + await expect(el).to.be.accessible(); + }); + + it('partially disabled (left)', async() => { + const el = await fixture(html``); + await expect(el).to.be.accessible(); + }); + + it('partially disabled (right)', async() => { + const el = await fixture(html``); + await expect(el).to.be.accessible(); + }); + + it('autofocus', async() => { + const el = await fixture(html``); + await expect(el).to.be.accessible(); + }); + + it('dark theme', async() => { + const el = await fixture(html``); + await expect(el).to.be.accessible(); + }); + }); diff --git a/components/button/test/button-move.test.js b/components/button/test/button-move.test.js index 27ef932206c..bf4b812a06e 100644 --- a/components/button/test/button-move.test.js +++ b/components/button/test/button-move.test.js @@ -1,4 +1,4 @@ -import { clickElem, expect, fixture, html, oneEvent, runConstructor, sendKeysElem } from '@brightspace-ui/testing'; +import { aTimeout, clickElem, expect, fixture, html, oneEvent, runConstructor, sendKeysElem } from '@brightspace-ui/testing'; import { moveActions } from '../button-move.js'; describe('d2l-button-move', () => { @@ -33,6 +33,93 @@ describe('d2l-button-move', () => { }); }); + it('does not bubble events', async() => { + const el = await fixture(html`
`); + const button = el.querySelector('d2l-button-move'); + let bubbledEvent = false; + el.addEventListener('d2l-button-move-action', () => bubbledEvent = true); + await clickElem(button.shadowRoot.querySelector('.up-layer')); + expect(bubbledEvent).to.be.false; + }); + + }); + + describe('disabled states prevent events', () => { + + [ + { name: 'disabled-up prevents up click', disabledProp: 'disabledUp', action: el => clickElem(el.shadowRoot.querySelector('.up-layer')) }, + { name: 'disabled-down prevents down click', disabledProp: 'disabledDown', action: el => clickElem(el.shadowRoot.querySelector('.down-layer')) }, + { name: 'disabled-up prevents up key', disabledProp: 'disabledUp', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowUp') }, + { name: 'disabled-down prevents down key', disabledProp: 'disabledDown', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowDown') }, + { name: 'disabled-left prevents left key', disabledProp: 'disabledLeft', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowLeft') }, + { name: 'disabled-right prevents right key', disabledProp: 'disabledRight', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowRight') }, + { name: 'disabled-home prevents home key', disabledProp: 'disabledHome', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'Home') }, + { name: 'disabled-home prevents ctrl-home key', disabledProp: 'disabledHome', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'Control+Home') }, + { name: 'disabled-end prevents end key', disabledProp: 'disabledEnd', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'End') }, + { name: 'disabled-end prevents ctrl-end key', disabledProp: 'disabledEnd', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'Control+End') } + ].forEach(info => { + it(`${info.name}`, async() => { + const el = await fixture(html``); + el[info.disabledProp] = true; + await el.updateComplete; + let eventDispatched = false; + el.addEventListener('d2l-button-move-action', () => eventDispatched = true); + await info.action(el); + await aTimeout(50); // wait to ensure event is not dispatched + expect(eventDispatched).to.be.false; + }); + }); + + }); + + describe('properties', () => { + + it('button is disabled when all directions are disabled', async() => { + const el = await fixture(html``); + const button = el.shadowRoot.querySelector('button'); + expect(button.disabled).to.be.true; + }); + + it('button is not disabled when only some directions are disabled', async() => { + const el = await fixture(html``); + const button = el.shadowRoot.querySelector('button'); + expect(button.disabled).to.be.false; + }); + + it('text property sets aria-label and title', async() => { + const el = await fixture(html``); + const button = el.shadowRoot.querySelector('button'); + expect(button.getAttribute('aria-label')).to.equal('Reorder Item'); + expect(button.getAttribute('title')).to.equal('Reorder Item'); + }); + + it('description property sets aria-describedby', async() => { + const el = await fixture(html``); + const button = el.shadowRoot.querySelector('button'); + const describedBy = button.getAttribute('aria-describedby'); + const descriptionElem = el.shadowRoot.querySelector(`#${describedBy}`); + expect(descriptionElem.textContent).to.equal('secondary'); + }); + + }); + + describe('focus', () => { + + it('focus() method focuses the button', async() => { + const el = await fixture(html``); + el.focus(); + const button = el.shadowRoot.querySelector('button'); + expect(document.activeElement).to.equal(el); + expect(el.shadowRoot.activeElement).to.equal(button); + }); + + it('autofocus property focuses button on render', async() => { + const el = await fixture(html``); + await el.updateComplete; + const button = el.shadowRoot.querySelector('button'); + expect(button.hasAttribute('autofocus')).to.be.true; + }); + }); }); From 9cb6dedf32372c6427d6fd8e743058ea5e96cf33 Mon Sep 17 00:00:00 2001 From: Margaree Peacocke Date: Thu, 13 Nov 2025 13:31:49 -0500 Subject: [PATCH 2/2] remove duplicate test --- components/button/test/button-move.test.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/components/button/test/button-move.test.js b/components/button/test/button-move.test.js index bf4b812a06e..4cb186ca05d 100644 --- a/components/button/test/button-move.test.js +++ b/components/button/test/button-move.test.js @@ -93,14 +93,6 @@ describe('d2l-button-move', () => { expect(button.getAttribute('title')).to.equal('Reorder Item'); }); - it('description property sets aria-describedby', async() => { - const el = await fixture(html``); - const button = el.shadowRoot.querySelector('button'); - const describedBy = button.getAttribute('aria-describedby'); - const descriptionElem = el.shadowRoot.querySelector(`#${describedBy}`); - expect(descriptionElem.textContent).to.equal('secondary'); - }); - }); describe('focus', () => {