mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

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

* add regression test for checkbox focusing

* change number of checkboxes / switches

* change max-height to 400px so it fails

* re-add positon: relative;
pull/1336/head
Konnor Rogers 2023-05-10 16:54:44 -04:00 zatwierdzone przez GitHub
rodzic b1bdedd3a3
commit be1c38f0e5
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
2 zmienionych plików z 113 dodań i 1 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

54
src/components/checkbox/checkbox.test.ts
Wyświetl plik

@ -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
Wyświetl plik

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