js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

tests: add regression tests for checkbox and toggle focus behavior (#1330)

Browse Source 
* add regression test for checkbox focusing

* change number of checkboxes / switches

* change max-height to 400px so it fails

* re-add positon: relative;
This commit is contained in:
Konnor Rogers
2023-05-10 16:54:44 -04:00
committed by konnorrogers
parent ca539055eb
commit 8317cb38e4
2 changed files with 113 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/checkbox/checkbox.test.ts
View File

@@ -1,5 +1,5 @@
import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
import { clickOnElement } from '../../internal/test';
import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests';
import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
@@ -274,6 +274,58 @@ describe('<sl-checkbox>', () => {
expect(focusSpy.called).to.equal(true);
expect(el.shadowRoot!.activeElement).to.equal(checkbox);
});
it('should not jump the page to the bottom when focusing a checkbox at the bottom of an element with overflow: auto;', async () => {
// https://github.com/shoelace-style/shoelace/issues/1169
const el = await fixture<HTMLDivElement>(html`
<div style="display: flex; flex-direction: column; overflow: auto; max-height: 400px; gap: 8px;">
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
<sl-checkbox>Checkbox</sl-checkbox>
</div>
;
`);
const checkboxes = el.querySelectorAll<SlCheckbox>('sl-checkbox');
const lastSwitch = checkboxes[checkboxes.length - 1];
expect(window.scrollY).to.equal(0);
// Without these 2 timeouts, tests will pass unexpectedly in Safari.
await aTimeout(10);
lastSwitch.focus();
await aTimeout(10);
expect(window.scrollY).to.equal(0);
});
});
describe('blur', () => {

60
src/components/switch/switch.test.ts
View File

@@ -262,5 +262,65 @@ describe('<sl-switch>', () => {
});
});
it('should not jump the page to the bottom when focusing a switch at the bottom of an element with overflow: auto;', async () => {
// https://github.com/shoelace-style/shoelace/issues/1169
const el = await fixture<HTMLDivElement>(html`
<div style="display: flex; flex-direction: column; overflow: auto; max-height: 400px;">
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
<sl-switch>Switch</sl-switch>
</div>
;
`);
const switches = el.querySelectorAll<SlSwitch>('sl-switch');
const lastSwitch = switches[switches.length - 1];
expect(window.scrollY).to.equal(0);
// Without these 2 timeouts, tests will pass unexpectedly in Safari.
await aTimeout(10);
lastSwitch.focus();
await aTimeout(10);
expect(window.scrollY).to.equal(0);
});
runFormControlBaseTests('sl-switch');
});