ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add remaining internal usages of isActiveElement in tests

Browse source
This commit is contained in:
Thijs Louisse 2024-11-27 22:47:00 +01:00 committed by Thijs Louisse
parent 382a9aab64
commit 9dcb361dfb
8 changed files with 63 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/ui/components/core/test/SlotMixin.test.js
View file

@ -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)', () => {

12
packages/ui/components/form-core/test-suites/NativeTextFieldMixin.suite.js
View file

@ -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}></${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;
});
});
}

10
packages/ui/components/form-core/test/FocusMixin.test.js
View file

@ -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 () => {

28
packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js
View file

@ -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<LionInputTelDropdown>} */ (
@ -206,12 +208,14 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
it('syncs disabled attribute to dropdown', async () => {
const el = await fixture(html` <${tag} disabled></${tag}> `);
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></${tag}> `);
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;
});
});

22
packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js
View file

@ -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;
}
});
});

17
packages/ui/components/select-rich/test/lion-select-rich.test.js
View file

@ -31,10 +31,11 @@ const fixture = /** @type {(arg: TemplateResult) => Promise<LionSelectRich>} */
describe('lion-select-rich', () => {
it('clicking the label should focus the invoker', async () => {
const el = await fixture(html` <lion-select-rich label="foo"> </lion-select-rich> `);
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', () => {
<lion-select-rich .config=${{ trapsKeyboardFocus: true }}></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;
});
});

2
packages/ui/components/switch/test/lion-switch.test.js
View file

@ -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 () => {

17
packages/ui/components/tabs/test/lion-tabs.test.js
View file

@ -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('<lion-tabs>', () => {
`)
);
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('<lion-tabs>', () => {
`)
);
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('<lion-tabs>', () => {
`)
);
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('<lion-tabs>', () => {
);
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', () => {