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

chore(dialog): add focus tests

Browse source
This commit is contained in:
gerjanvangeest 2023-05-16 12:01:18 +02:00
parent 251de2c84e
commit 56b3d334f6
2 changed files with 74 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
packages/ui/components/dialog/test/lion-dialog.test.js
View file

@ -1,3 +1,4 @@
/* eslint-disable lit-a11y/no-autofocus */
import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing'; import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js'; import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
import '@lion/ui/define/lion-dialog.js'; import '@lion/ui/define/lion-dialog.js';
@ -72,4 +73,59 @@ describe('lion-dialog', () => {
expect(nestedDialogEl.opened).to.be.true; expect(nestedDialogEl.opened).to.be.true;
}); });
}); });
describe('focus', () => {
it('sets focus on contentSlot by default', async () => {
const el = await fixture(html`
<lion-dialog>
<button slot="invoker">invoker button</button>
<div slot="content">
<label for="myInput">Label</label>
<input id="myInput" />
</div>
</lion-dialog>
`);
// @ts-expect-error [allow-protected-in-tests]
const invokerNode = el._overlayInvokerNode;
invokerNode.focus();
invokerNode.click();
const contentNode = el.querySelector('[slot="content"]');
expect(document.activeElement).to.equal(contentNode);
});
it('sets focus on autofocused element', async () => {
const el = await fixture(html`
<lion-dialog>
<button slot="invoker">invoker button</button>
<div slot="content">
<label for="myInput">Label</label>
<input id="myInput" autofocus />
</div>
</lion-dialog>
`);
// @ts-expect-error [allow-protected-in-tests]
const invokerNode = el._overlayInvokerNode;
invokerNode.focus();
invokerNode.click();
const input = el.querySelector('input');
expect(document.activeElement).to.equal(input);
});
it('with trapsKeyboardFocus set to false the focus stays on the invoker', async () => {
const el = /** @type {LionDialog} */ await fixture(html`
<lion-dialog .config=${{ trapsKeyboardFocus: false }}>
<button slot="invoker">invoker button</button>
<div slot="content">
<label for="myInput">Label</label>
<input id="myInput" autofocus />
</div>
</lion-dialog>
`);
// @ts-expect-error [allow-protected-in-tests]
const invokerNode = el._overlayInvokerNode;
invokerNode.focus();
invokerNode.click();
expect(document.activeElement).to.equal(invokerNode);
});
});
}); });

18
packages/ui/components/form-integrations/test/dialog-integrations.test.js
View file

@ -1,3 +1,4 @@
/* eslint-disable lit-a11y/no-autofocus */
import { expect, fixture } from '@open-wc/testing'; import { expect, fixture } from '@open-wc/testing';
import { html } from 'lit'; import { html } from 'lit';
import { getAllTagNames } from './helpers/helpers.js'; import { getAllTagNames } from './helpers/helpers.js';
@ -70,4 +71,21 @@ describe('Form inside dialog Integrations', () => {
'lion-textarea', 'lion-textarea',
]); ]);
}); });
it('sets focus on first focusable element with autofocus', async () => {
const el = /** @type {LionDialog} */ await fixture(html`
<lion-dialog>
<button slot="invoker">invoker button</button>
<div slot="content">
<lion-input label="label" name="input" autofocus></lion-input>
<lion-textarea label="label" name="textarea" autofocus></lion-textarea>
</div>
</lion-dialog>
`);
// @ts-expect-error [allow-protected-in-tests]
el._overlayInvokerNode.click();
const lionInput = el.querySelector('[name="input"]');
// @ts-expect-error [allow-protected-in-tests]
expect(document.activeElement).to.equal(lionInput._focusableNode);
});
}); });