Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test: stabilize a couple of tests #2525

Merged
merged 9 commits into from
Mar 27, 2024
Merged

test: stabilize a couple of tests #2525

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f7d645c
test: stabilize some tests
jeripeierSBB Mar 26, 2024
100659e
fix: review
jeripeierSBB Mar 26, 2024
3f6078c
fix: review
jeripeierSBB Mar 26, 2024
8e7591b
fix: focus tests
jeripeierSBB Mar 26, 2024
3a732ae
fix: fix snapshot spaces
jeripeierSBB Mar 26, 2024
485a03f
fix: retry a11y snapshots
jeripeierSBB Mar 27, 2024
12f93c1
Revert "fix: retry a11y snapshots"
jeripeierSBB Mar 27, 2024
44c7ac4
fix: disable a11y tests for Safari
jeripeierSBB Mar 27, 2024
05e5166
fix: fix tests
jeripeierSBB Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions src/components/autocomplete/autocomplete.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,38 +13,40 @@ import './autocomplete';

describe(`sbb-autocomplete`, () => {
describe('renders standalone', async () => {
let elem: SbbAutocompleteElement;
let element: SbbAutocompleteElement;

beforeEach(async () => {
await fixture(html`
<div id="origin"></div>
<input id="trigger" />
<sbb-autocomplete origin="origin" trigger="trigger">
<sbb-option value="1">1</sbb-option>
<sbb-option value="2">2</sbb-option>
</sbb-autocomplete>
`);
elem = document.querySelector('sbb-autocomplete')!;
await waitForLitRender(elem);
const testFixture = await fixture(
html`<div>
<div id="origin"></div>
<input id="trigger" />
<sbb-autocomplete origin="origin" trigger="trigger">
<sbb-option value="1">1</sbb-option>
<sbb-option value="2">2</sbb-option>
</sbb-autocomplete>
</div> `,
);
await waitForLitRender(testFixture);
jeripeierSBB marked this conversation as resolved.
Show resolved Hide resolved
element = testFixture.querySelector('sbb-autocomplete')!;
});

describeIf(!isSafari(), 'Chrome-Firefox', async () => {
it('Dom', async () => {
await expect(elem).dom.to.be.equalSnapshot();
await expect(element).dom.to.be.equalSnapshot();
});

it('ShadowDom', async () => {
await expect(elem).shadowDom.to.be.equalSnapshot();
await expect(element).shadowDom.to.be.equalSnapshot();
});
});

describeIf(isSafari(), 'Safari', async () => {
it('Dom', async () => {
await expect(elem).dom.to.be.equalSnapshot();
await expect(element).dom.to.be.equalSnapshot();
});

it('ShadowDom', async () => {
await expect(elem).shadowDom.to.be.equalSnapshot();
await expect(element).shadowDom.to.be.equalSnapshot();
});
});
});
Expand Down
8 changes: 2 additions & 6 deletions src/components/card/card-button/card-button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,9 +124,7 @@ describe(`sbb-card-button with ${fixture.name}`, () => {
);

// Add a button to slot
document
.querySelector<SbbCardElement>('sbb-card')!
.insertBefore(document.createElement('button'), element.querySelector('#content'));
element.insertBefore(document.createElement('button'), element.querySelector('#content'));
await waitForLitRender(element);

// Button should be marked as focusable
Expand All @@ -142,9 +140,7 @@ describe(`sbb-card-button with ${fixture.name}`, () => {
);

// Add a sbb-card-button
document
.querySelector<SbbCardElement>('sbb-card')!
.appendChild(document.createElement('sbb-card-button'));
element.appendChild(document.createElement('sbb-card-button'));
await waitForLitRender(element);

// Button should be marked as focusable
Expand Down
236 changes: 120 additions & 116 deletions src/components/core/a11y/focus.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,160 +6,164 @@ import { fixture } from '../testing/private';

import { FocusHandler, getFirstFocusableElement, getFocusableElements } from './focus';

import '../../button';

describe(`getFocusables`, () => {
let lightDOM: HTMLElement, shadowDOM: HTMLElement;

customElements.define(
'my-custom-element',
class extends HTMLElement {
public constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<div><button id="shadow-button">Button</button><slot></slot></div>`;
}
},
);

beforeEach(async () => {
lightDOM = await fixture(html`
<div>
<sbb-button tabindex="0" id="sbb-button">Button</sbb-button>
<a href="#" id="a">Link</a>
describe('focus', () => {
describe(`getFocusables`, () => {
let lightDOM: HTMLElement, shadowDOM: HTMLElement;

customElements.define(
'my-custom-element',
class extends HTMLElement {
public constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<div><button id="shadow-button">Button</button><slot></slot></div>`;
}
},
);

beforeEach(async () => {
await customElements.whenDefined('my-custom-element');
lightDOM = await fixture(html`
<div>
<input id="input" />
<button style="visibility: hidden" id="hidden-button">Button</button>
<span tabindex="0" id="sbb-button">Button</span>
<a href="#" id="a">Link</a>
<div>
<input id="input" />
<button style="visibility: hidden" id="hidden-button">Button</button>
</div>
</div>
</div>
`);
`);

shadowDOM = await fixture(html` <my-custom-element></my-custom-element> `);
});
shadowDOM = await fixture(html` <my-custom-element></my-custom-element> `);
});

it('should retrieve focusable elements', () => {
const elements = getFocusableElements([lightDOM, shadowDOM]);
it('should retrieve focusable elements', () => {
const elements = getFocusableElements([lightDOM, shadowDOM]);

expect(elements.map((el) => el.id)).to.deep.equal([
'sbb-button',
'a',
'input',
'shadow-button',
]);
});
expect(elements.map((el) => el.id)).to.deep.equal([
'sbb-button',
'a',
'input',
'shadow-button',
]);
});

it('should retrieve focusable elements including invisible ones', () => {
const elements = getFocusableElements([lightDOM, shadowDOM], {
includeInvisibleElements: true,
it('should retrieve focusable elements including invisible ones', () => {
const elements = getFocusableElements([lightDOM, shadowDOM], {
includeInvisibleElements: true,
});

expect(elements.map((el) => el.id)).to.deep.equal([
'sbb-button',
'a',
'input',
'hidden-button',
'shadow-button',
]);
});

expect(elements.map((el) => el.id)).to.deep.equal([
'sbb-button',
'a',
'input',
'hidden-button',
'shadow-button',
]);
});
it('should retrieve filtered focusable elements', () => {
const elements = getFocusableElements([lightDOM, shadowDOM], {
filter: (el) => ['div', 'a'].includes(el.localName),
});

it('should retrieve filtered focusable elements', () => {
const elements = getFocusableElements([lightDOM, shadowDOM], {
filter: (el) => el.tagName === 'DIV' || el.tagName === 'A',
expect(elements.map((el) => el.id)).to.deep.equal(['a']);
});

expect(elements.map((el) => el.id)).to.deep.equal(['a']);
});

it('should prefer slotted over shadow DOM', () => {
shadowDOM.innerHTML = '<button id="slotted-button">Button</button>';
it('should prefer slotted over shadow DOM', () => {
shadowDOM.innerHTML = '<button id="slotted-button">Button</button>';

const elements = getFocusableElements([shadowDOM]);
const elements = getFocusableElements([shadowDOM]);

expect(elements.map((el) => el.id)).to.deep.equal(['slotted-button']);
});
expect(elements.map((el) => el.id)).to.deep.equal(['slotted-button']);
});

it('should retrieve first focusable element', () => {
const element = getFirstFocusableElement([lightDOM, shadowDOM]);
it('should retrieve first focusable element', () => {
const element = getFirstFocusableElement([lightDOM, shadowDOM]);

expect(element!.id).to.equal('sbb-button');
expect(element!.id).to.equal('sbb-button');
});
});
});

describe(`focus trap`, () => {
let element: HTMLElement;

customElements.define(
'my-container-element',
class extends HTMLElement {
public constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<sbb-button tabindex="0" id="sbb-button">Button</sbb-button>
describe(`focus trap`, () => {
let element: HTMLElement;

customElements.define(
'my-container-element',
class extends HTMLElement {
public constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<span tabindex="0" id="sbb-button">Button</span>
<a href="#" id="a">Link</a>
<div>
<input id="input" />
<button style="visibility: hidden" id="hidden-button">Button</button>
</div>
<slot></slot>
`;
}
},
);

beforeEach(async () => {
element = await fixture(html`
<my-container-element><button id="slotted-button">Button</button></my-container-element>
`);
});
}
},
);

beforeEach(async () => {
await customElements.whenDefined('my-container-element');
element = await fixture(html`
<my-container-element><button id="slotted-button">Button</button></my-container-element>
`);
});

it('should focus next element', async () => {
const focusHandler = new FocusHandler();
focusHandler.trap(element);
it('should focus next element', async () => {
const focusHandler = new FocusHandler();
focusHandler.trap(element);

element.shadowRoot!.querySelector('sbb-button')!.focus();
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('sbb-button');
element.shadowRoot!.querySelector<HTMLSpanElement>('#sbb-button')!.focus();
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('sbb-button');

await sendKeys({ down: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('a');
await sendKeys({ press: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('a');

await sendKeys({ down: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('input');
await sendKeys({ press: 'Tab' });

await sendKeys({ down: 'Tab' });
expect(document.activeElement!.id).to.equal('slotted-button');
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('input');

// Wrap around
await sendKeys({ down: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('sbb-button');
});
await sendKeys({ press: 'Tab' });

expect(document.activeElement!.id).to.equal('slotted-button');

it('should focus next element with filter', async () => {
const focusHandler = new FocusHandler();
focusHandler.trap(element, {
filter: (el) => ['DIV', 'INPUT'].includes(el.tagName),
// Wrap around
await sendKeys({ press: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('sbb-button');
});

element.shadowRoot!.querySelector('input')!.focus();
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('input');
it('should focus next element with filter', async () => {
const focusHandler = new FocusHandler();
focusHandler.trap(element, {
filter: (el) => ['div', 'input'].includes(el.localName),
});

await sendKeys({ down: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('input');
});
element.shadowRoot!.querySelector('input')!.focus();
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('input');

it('should focus next element with post filter', async () => {
const focusHandler = new FocusHandler();
focusHandler.trap(element, {
postFilter: (el) => ['SBB-BUTTON', 'A'].includes(el.tagName),
await sendKeys({ press: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('input');
});

element.shadowRoot!.querySelector('sbb-button')!.focus();
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('sbb-button');
it('should focus next element with post filter', async () => {
const focusHandler = new FocusHandler();
focusHandler.trap(element, {
postFilter: (el) => ['sbb-button', 'a'].includes(el.id),
});

await sendKeys({ down: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('a');
element.shadowRoot!.querySelector<HTMLSpanElement>('#sbb-button')!.focus();
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('sbb-button');

await sendKeys({ down: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('sbb-button');
await sendKeys({ press: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('a');

await sendKeys({ press: 'Tab' });
expect(document.activeElement!.shadowRoot!.activeElement!.id).to.equal('sbb-button');
});
});
});
Loading
Loading