diff --git a/packages/ui/components/core/test/SlotMixin.test.js b/packages/ui/components/core/test/SlotMixin.test.js index ffdce2c0a..c6bb70779 100644 --- a/packages/ui/components/core/test/SlotMixin.test.js +++ b/packages/ui/components/core/test/SlotMixin.test.js @@ -273,13 +273,13 @@ describe('SlotMixin', () => { el._focusableNode._buttonNode.focus(); - expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode); + expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true; el.currentValue = 1; await el.updateComplete; expect(isActiveElement(el._focusableNode)).to.be.true; - expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode); + expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true; }); it('allows for rerendering complex shadow root into slot as a direct child', async () => { @@ -342,7 +342,7 @@ describe('SlotMixin', () => { await el.updateComplete; expect(isActiveElement(el._focusableNode)).to.be.true; - expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode); + expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true; }); describe('firstRenderOnConnected (for backwards compatibility)', () => { diff --git a/packages/ui/components/form-core/test-suites/NativeTextFieldMixin.suite.js b/packages/ui/components/form-core/test-suites/NativeTextFieldMixin.suite.js index d3249a390..c4af58bfd 100644 --- a/packages/ui/components/form-core/test-suites/NativeTextFieldMixin.suite.js +++ b/packages/ui/components/form-core/test-suites/NativeTextFieldMixin.suite.js @@ -51,7 +51,7 @@ export function runNativeTextFieldMixinSuite(customConfig) { expect(_inputNode.selectionEnd).to.equal(2); }); - it('move focus to a next focusable element after writing some text', async () => { + it('moves focus to a next focusable element after writing some text', async () => { const el = /** @type {NativeTextFieldClass} */ (await fixture(html`<${tag}>`)); // @ts-ignore [allow-protected] in test const setValueAndPreserveCaretSpy = spy(el, '_setValueAndPreserveCaret'); @@ -59,12 +59,8 @@ export function runNativeTextFieldMixinSuite(customConfig) { await triggerFocusFor(el); await el.updateComplete; expect(isActiveElement(_inputNode)).to.be.true; - await sendKeys({ - press: 'h', - }); - await sendKeys({ - press: 'Tab', - }); + await sendKeys({ press: 'h' }); + await sendKeys({ press: 'Tab' }); expect(setValueAndPreserveCaretSpy.calledOnce).to.be.false; @@ -73,7 +69,7 @@ export function runNativeTextFieldMixinSuite(customConfig) { return; } - expect(document.activeElement).to.not.equal(_inputNode); + expect(isActiveElement(_inputNode)).to.be.false; }); }); } diff --git a/packages/ui/components/form-core/test/FocusMixin.test.js b/packages/ui/components/form-core/test/FocusMixin.test.js index 3638e55f8..fb3bc2b1b 100644 --- a/packages/ui/components/form-core/test/FocusMixin.test.js +++ b/packages/ui/components/form-core/test/FocusMixin.test.js @@ -1,7 +1,9 @@ -import { LitElement } from 'lit'; import { defineCE, expect, fixture, html, oneEvent, unsafeStatic } from '@open-wc/testing'; -import sinon from 'sinon'; import { FocusMixin } from '@lion/ui/form-core.js'; +import { LitElement } from 'lit'; +import sinon from 'sinon'; + +import { isActiveElement } from '../../core/test-helpers/isActiveElement.js'; const windowWithOptionalPolyfill = /** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ (window); @@ -84,9 +86,9 @@ describe('FocusMixin', () => { const { _focusableNode } = el; el.focus(); - expect(document.activeElement === _focusableNode).to.be.true; + expect(isActiveElement(_focusableNode)).to.be.true; el.blur(); - expect(document.activeElement === _focusableNode).to.be.false; + expect(isActiveElement(_focusableNode)).to.be.false; }); it('has an attribute focused when focused', async () => { diff --git a/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js b/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js index 8701fc518..750c7c3f8 100644 --- a/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js +++ b/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js @@ -1,22 +1,24 @@ -import { PhoneUtilManager } from '@lion/ui/input-tel.js'; import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js'; +import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js'; +import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js'; +import { PhoneUtilManager } from '@lion/ui/input-tel.js'; +import sinon from 'sinon'; import { + fixtureSync as _fixtureSync, + fixture as _fixture, + unsafeStatic, aTimeout, defineCE, expect, - fixture as _fixture, - fixtureSync as _fixtureSync, html, - unsafeStatic, } from '@open-wc/testing'; -import sinon from 'sinon'; -import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js'; -import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js'; + +import { isActiveElement } from '../../core/test-helpers/isActiveElement.js'; /** - * @typedef {import('lit').TemplateResult} TemplateResult - * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement * @typedef {import('../types/index.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel + * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement + * @typedef {import('lit').TemplateResult} TemplateResult */ const fixture = /** @type {(arg: string | TemplateResult) => Promise} */ ( @@ -206,12 +208,14 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo it('syncs disabled attribute to dropdown', async () => { const el = await fixture(html` <${tag} disabled> `); - expect(el.refs.dropdown.value?.hasAttribute('disabled')).to.be.true; + expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be + .true; }); it('disables dropdown on readonly', async () => { const el = await fixture(html` <${tag} readonly> `); - expect(el.refs.dropdown.value?.hasAttribute('disabled')).to.be.true; + expect(/** @type {HTMLElement} */ (el.refs.dropdown.value)?.hasAttribute('disabled')).to.be + .true; }); it('renders to prefix slot in light dom', async () => { @@ -332,7 +336,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo mimicUserChangingDropdown(dropdownElement, 'BE'); await el.updateComplete; // @ts-expect-error [allow-protected-in-tests] - expect(el._inputNode).to.not.equal(document.activeElement); + expect(isActiveElement(el._inputNode)).to.be.false; }); }); diff --git a/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js b/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js index e1e6a8558..3ec5629ab 100644 --- a/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js +++ b/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js @@ -1,20 +1,22 @@ +import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js'; +import { runInputTelDropdownSuite } from '@lion/ui/input-tel-dropdown-test-suites.js'; +import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js'; import { runInputTelSuite } from '@lion/ui/input-tel-test-suites.js'; +import { aTimeout, expect, fixture } from '@open-wc/testing'; +import { LionSelectRich } from '@lion/ui/select-rich.js'; import { repeat } from 'lit/directives/repeat.js'; +import { LionOption } from '@lion/ui/listbox.js'; import { ref } from 'lit/directives/ref.js'; import { html } from 'lit'; -import { aTimeout, expect, fixture } from '@open-wc/testing'; -import { LionInputTelDropdown } from '@lion/ui/input-tel-dropdown.js'; -import { LionOption } from '@lion/ui/listbox.js'; -import { LionSelectRich } from '@lion/ui/select-rich.js'; -import { runInputTelDropdownSuite } from '@lion/ui/input-tel-dropdown-test-suites.js'; -import { mimicUserChangingDropdown } from '@lion/ui/input-tel-dropdown-test-helpers.js'; + +import { isActiveElement } from '../../core/test-helpers/isActiveElement.js'; import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js'; /** - * @typedef {import('lit').TemplateResult} TemplateResult - * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement * @typedef {import('../types/index.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel + * @typedef {HTMLSelectElement|HTMLElement & {modelValue:string}} DropdownElement * @typedef {import('../types/index.js').RegionMeta} RegionMeta + * @typedef {import('lit').TemplateResult} TemplateResult */ class WithFormControlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdown) { @@ -114,7 +116,7 @@ describe('WithFormControlInputTelDropdown', () => { await el.updateComplete; await aTimeout(0); // @ts-expect-error [allow-protected-in-tests] - expect(el._inputNode).to.equal(document.activeElement); + expect(isActiveElement(el._inputNode)).to.be.true; } }); @@ -167,7 +169,7 @@ describe('WithFormControlInputTelDropdown', () => { await el.updateComplete; await aTimeout(0); // @ts-expect-error [allow-protected-in-tests] - expect(el._inputNode).to.not.equal(document.activeElement); + expect(isActiveElement(el._inputNode)).to.be.false; } }); }); diff --git a/packages/ui/components/select-rich/test/lion-select-rich.test.js b/packages/ui/components/select-rich/test/lion-select-rich.test.js index fb7681bfa..e131bc2fb 100644 --- a/packages/ui/components/select-rich/test/lion-select-rich.test.js +++ b/packages/ui/components/select-rich/test/lion-select-rich.test.js @@ -31,10 +31,11 @@ const fixture = /** @type {(arg: TemplateResult) => Promise} */ describe('lion-select-rich', () => { it('clicking the label should focus the invoker', async () => { const el = await fixture(html` `); - expect(document.activeElement === document.body).to.be.true; + expect(isActiveElement(document.body)).to.be.true; + const { _labelNode, _invokerNode } = getSelectRichMembers(el); _labelNode.click(); - expect(document.activeElement === _invokerNode).to.be.true; + expect(isActiveElement(_invokerNode)).to.be.true; }); it('has an attribute focused when focused', async () => { @@ -276,14 +277,14 @@ describe('lion-select-rich', () => { await _overlayCtrl.show(); await el.updateComplete; - expect(document.activeElement === _listboxNode).to.be.true; - expect(document.activeElement === _invokerNode).to.be.false; + expect(isActiveElement(_listboxNode)).to.be.true; + expect(isActiveElement(_invokerNode)).to.be.false; el.opened = false; await el.updateComplete; await el.updateComplete; // safari takes a little longer - expect(document.activeElement === _listboxNode).to.be.false; - expect(document.activeElement === _invokerNode).to.be.true; + expect(isActiveElement(_listboxNode)).to.be.false; + expect(isActiveElement(_invokerNode)).to.be.true; }); it('opens the listbox with checked option as active', async () => { @@ -472,7 +473,7 @@ describe('lion-select-rich', () => { `); const { _listboxNode } = getSelectRichMembers(el); - expect(document.activeElement).to.not.equal(_listboxNode); + expect(isActiveElement(_listboxNode)).to.be.false; el.opened = true; await el.updateComplete; @@ -481,7 +482,7 @@ describe('lion-select-rich', () => { el.opened = false; await el.updateComplete; await el.updateComplete; // safari takes a little longer - expect(document.activeElement).to.not.equal(_listboxNode); + expect(isActiveElement(_listboxNode)).to.be.false; }); }); diff --git a/packages/ui/components/switch/test/lion-switch.test.js b/packages/ui/components/switch/test/lion-switch.test.js index 359f846a9..79ee68192 100644 --- a/packages/ui/components/switch/test/lion-switch.test.js +++ b/packages/ui/components/switch/test/lion-switch.test.js @@ -69,7 +69,7 @@ describe('lion-switch', () => { const { _inputNode, _labelNode } = getSwitchMembers(el); _labelNode.click(); - expect(document.activeElement).to.not.equal(_inputNode); + expect(isActiveElement(_inputNode)).to.be.false; }); it('should sync its "disabled" state to child button', async () => { diff --git a/packages/ui/components/tabs/test/lion-tabs.test.js b/packages/ui/components/tabs/test/lion-tabs.test.js index d7a4a929e..0a3aa75c0 100644 --- a/packages/ui/components/tabs/test/lion-tabs.test.js +++ b/packages/ui/components/tabs/test/lion-tabs.test.js @@ -2,6 +2,8 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import sinon from 'sinon'; +import { isActiveElement } from '../../core/test-helpers/isActiveElement.js'; + /** * @typedef {import('../src/LionTabs.js').LionTabs} LionTabs */ @@ -397,9 +399,11 @@ describe('', () => { `) ); + const secondTab = /** @type {HTMLElement} */ ( + el.querySelector('[slot="tab"]:nth-of-type(2)') + ); el.selectedIndex = 1; - expect(el.querySelector('[slot="tab"]:nth-of-type(2)') === document.activeElement).to.be - .false; + expect(isActiveElement(secondTab)).to.be.false; }); it('does not focus a tab on firstUpdate', async () => { @@ -414,7 +418,7 @@ describe('', () => { `) ); const tabs = Array.from(el.children).filter(child => child.slot === 'tab'); - expect(tabs.some(tab => tab === document.activeElement)).to.be.false; + expect(tabs.some(tab => isActiveElement(tab))).to.be.false; }); it('focuses on a tab when setting with _setSelectedIndexWithFocus method', async () => { @@ -429,9 +433,12 @@ describe('', () => { `) ); + const secondTab = /** @type {HTMLElement} */ ( + el.querySelector('[slot="tab"]:nth-of-type(2)') + ); // @ts-ignore : this el is LionTabs el._setSelectedIndexWithFocus(1); - expect(el.querySelector('[slot="tab"]:nth-of-type(2)') === document.activeElement).to.be.true; + expect(isActiveElement(secondTab)).to.be.true; }); }); @@ -448,7 +455,7 @@ describe('', () => { ); const secondTab = /** @type {Element} */ (el.querySelector('[slot="tab"]:nth-of-type(2)')); secondTab.dispatchEvent(new MouseEvent('click')); - expect(secondTab === document.activeElement).to.be.true; + expect(isActiveElement(secondTab)).to.be.true; }); describe('Accessibility', () => {