From 5197e87cbcec239c4897dfe536e28631b054ff19 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Thu, 5 Dec 2024 16:06:07 +0100 Subject: [PATCH 1/4] fix: avoid bubbling of opening and close events BREAKING CHANGE: We stopped bubbling of `willOpen`, `didOpen`, `willClose` and `didClose` events. Furthermore, bubbling of the `willStick`, `didStick`, `willUnstick` and `didUnstick` was stopped. --- src/elements/accordion/accordion.ts | 16 ++++++-- src/elements/alert/alert-group/alert-group.ts | 19 +++++++--- .../container/sticky-bar/sticky-bar.ts | 15 ++++++-- .../base-elements/open-close-base-element.ts | 7 +++- .../expansion-panel/expansion-panel.ts | 4 ++ .../form-field/form-field/form-field.scss | 9 ++--- .../form-field/form-field/form-field.ts | 38 ++++++++----------- src/elements/notification/notification.ts | 4 ++ src/elements/popover/popover/popover.ts | 2 + .../selection-expansion-panel.ts | 4 ++ .../tabs/tab-group/tab-group.stories.ts | 1 + 11 files changed, 79 insertions(+), 40 deletions(-) diff --git a/src/elements/accordion/accordion.ts b/src/elements/accordion/accordion.ts index 35d90333c1..92c2289e43 100644 --- a/src/elements/accordion/accordion.ts +++ b/src/elements/accordion/accordion.ts @@ -5,8 +5,9 @@ import { customElement, property } from 'lit/decorators.js'; import { SbbConnectedAbortController } from '../core/controllers.js'; import { forceType, handleDistinctChange } from '../core/decorators.js'; import { isLean } from '../core/dom.js'; +import { isEventPrevented } from '../core/eventing.js'; import { SbbHydrationMixin } from '../core/mixins.js'; -import { SbbExpansionPanelElement } from '../expansion-panel.js'; +import type { SbbExpansionPanelElement } from '../expansion-panel.js'; import type { SbbTitleLevel } from '../title.js'; import style from './accordion.scss?lit&inline'; @@ -48,9 +49,16 @@ class SbbAccordionElement extends SbbHydrationMixin(LitElement) { super.connectedCallback(); const signal = this._abort.signal; this.addEventListener( - SbbExpansionPanelElement.events.willOpen, - (e: CustomEvent) => this._closePanels(e), - { signal }, + 'willOpen', + async (e: CustomEvent) => { + if (!(await isEventPrevented(e))) { + this._closePanels(e); + } + }, + { + signal, + capture: true, + }, ); } diff --git a/src/elements/alert/alert-group/alert-group.ts b/src/elements/alert/alert-group/alert-group.ts index 6874a947f6..2eb6d497af 100644 --- a/src/elements/alert/alert-group/alert-group.ts +++ b/src/elements/alert/alert-group/alert-group.ts @@ -5,10 +5,10 @@ import { html, unsafeStatic } from 'lit/static-html.js'; import { SbbConnectedAbortController } from '../../core/controllers.js'; import { forceType } from '../../core/decorators.js'; -import { EventEmitter } from '../../core/eventing.js'; +import { EventEmitter, isEventPrevented } from '../../core/eventing.js'; import { SbbHydrationMixin } from '../../core/mixins.js'; import type { SbbTitleLevel } from '../../title.js'; -import { SbbAlertElement } from '../alert.js'; +import type { SbbAlertElement } from '../alert.js'; import style from './alert-group.scss?lit&inline'; @@ -56,9 +56,18 @@ class SbbAlertGroupElement extends SbbHydrationMixin(LitElement) { public override connectedCallback(): void { super.connectedCallback(); const signal = this._abort.signal; - this.addEventListener(SbbAlertElement.events.didClose, (e) => this._alertClosed(e), { - signal, - }); + this.addEventListener( + 'didClose', + async (e: CustomEvent) => { + if (!(await isEventPrevented(e))) { + this._alertClosed(e); + } + }, + { + signal, + capture: true, + }, + ); } private _alertClosed(event: Event): void { diff --git a/src/elements/container/sticky-bar/sticky-bar.ts b/src/elements/container/sticky-bar/sticky-bar.ts index eeee047574..9e26a9e2e3 100644 --- a/src/elements/container/sticky-bar/sticky-bar.ts +++ b/src/elements/container/sticky-bar/sticky-bar.ts @@ -57,13 +57,22 @@ class SbbStickyBarElement extends SbbUpdateSchedulerMixin(LitElement) { return this.getAttribute('data-state') as StickyState; } - private _willStick: EventEmitter = new EventEmitter(this, SbbStickyBarElement.events.willStick); - private _didStick: EventEmitter = new EventEmitter(this, SbbStickyBarElement.events.didStick); + private _willStick: EventEmitter = new EventEmitter(this, SbbStickyBarElement.events.willStick, { + cancelable: true, + }); + private _didStick: EventEmitter = new EventEmitter(this, SbbStickyBarElement.events.didStick, { + cancelable: true, + }); private _willUnstick: EventEmitter = new EventEmitter( this, SbbStickyBarElement.events.willUnstick, + { cancelable: true }, + ); + private _didUnstick: EventEmitter = new EventEmitter( + this, + SbbStickyBarElement.events.didUnstick, + { cancelable: true }, ); - private _didUnstick: EventEmitter = new EventEmitter(this, SbbStickyBarElement.events.didUnstick); private _intersector?: HTMLSpanElement; private _observer = new IntersectionController(this, { diff --git a/src/elements/core/base-elements/open-close-base-element.ts b/src/elements/core/base-elements/open-close-base-element.ts index 19f2efcab3..306feee3cb 100644 --- a/src/elements/core/base-elements/open-close-base-element.ts +++ b/src/elements/core/base-elements/open-close-base-element.ts @@ -36,21 +36,26 @@ export abstract class SbbOpenCloseBaseElement extends LitElement { protected willOpen: EventEmitter = new EventEmitter( this, SbbOpenCloseBaseElement.events.willOpen, + { cancelable: true }, ); /** Emits whenever the component is opened. */ - protected didOpen: EventEmitter = new EventEmitter(this, SbbOpenCloseBaseElement.events.didOpen); + protected didOpen: EventEmitter = new EventEmitter(this, SbbOpenCloseBaseElement.events.didOpen, { + cancelable: true, + }); /** Emits whenever the component begins the closing transition. */ protected willClose: EventEmitter = new EventEmitter( this, SbbOpenCloseBaseElement.events.willClose, + { cancelable: true }, ); /** Emits whenever the component is closed. */ protected didClose: EventEmitter = new EventEmitter( this, SbbOpenCloseBaseElement.events.didClose, + { cancelable: true }, ); /** Opens the component. */ diff --git a/src/elements/expansion-panel/expansion-panel/expansion-panel.ts b/src/elements/expansion-panel/expansion-panel/expansion-panel.ts index 938655dba3..b1dcc2d5cd 100644 --- a/src/elements/expansion-panel/expansion-panel/expansion-panel.ts +++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.ts @@ -90,24 +90,28 @@ class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) { private _willOpen: EventEmitter = new EventEmitter( this, SbbExpansionPanelElement.events.willOpen, + { cancelable: true }, ); /** Emits whenever the `sbb-expansion-panel` is opened. */ private _didOpen: EventEmitter = new EventEmitter( this, SbbExpansionPanelElement.events.didOpen, + { cancelable: true }, ); /** Emits whenever the `sbb-expansion-panel` begins the closing transition. */ private _willClose: EventEmitter = new EventEmitter( this, SbbExpansionPanelElement.events.willClose, + { cancelable: true }, ); /** Emits whenever the `sbb-expansion-panel` is closed. */ private _didClose: EventEmitter = new EventEmitter( this, SbbExpansionPanelElement.events.didClose, + { cancelable: true }, ); private _progressiveId = `-${++nextId}`; diff --git a/src/elements/form-field/form-field/form-field.scss b/src/elements/form-field/form-field/form-field.scss index b2cc24c727..628ec29c40 100644 --- a/src/elements/form-field/form-field/form-field.scss +++ b/src/elements/form-field/form-field/form-field.scss @@ -154,7 +154,7 @@ --sbb-form-field-prefix-color: var(--sbb-color-granite); } -:host(:is([data-input-focused], [data-has-popup-open])) { +:host(:is([data-input-focused])) { --sbb-form-field-border-color: var(--sbb-color-charcoal); --sbb-form-field-prefix-color: var(--sbb-color-charcoal); --sbb-form-field-border-width: var(--sbb-border-width-2x); @@ -165,7 +165,7 @@ } } -:host(:is([data-input-focused], [data-has-popup-open])[negative]) { +:host(:is([data-input-focused])[negative]) { --sbb-form-field-border-color: var(--sbb-color-milk); --sbb-form-field-prefix-color: var(--sbb-color-milk); } @@ -251,7 +251,7 @@ } } - :host(:is([data-input-focused], [data-has-popup-open], [data-disabled])[borderless]) & { + :host(:is([data-input-focused], [data-disabled])[borderless]) & { &::after { content: ''; position: absolute; @@ -368,8 +368,7 @@ } // If floating-label is activated and there is no focus in it (except for select) and no popup is open - // and input is empty - // then apply the label transition. + // and input is empty then apply the label transition. // If it is empty and readonly, always apply transition :host( [floating-label]:is( diff --git a/src/elements/form-field/form-field/form-field.ts b/src/elements/form-field/form-field/form-field.ts index 19684f5bc6..fb38750df3 100644 --- a/src/elements/form-field/form-field/form-field.ts +++ b/src/elements/form-field/form-field/form-field.ts @@ -1,10 +1,17 @@ -import { type CSSResultGroup, isServer, type PropertyValues, type TemplateResult } from 'lit'; -import { html, LitElement, nothing } from 'lit'; +import { + type CSSResultGroup, + html, + isServer, + LitElement, + nothing, + type PropertyValues, + type TemplateResult, +} from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import type { SbbInputModality } from '../../core/a11y.js'; import { sbbInputModalityDetector } from '../../core/a11y.js'; -import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js'; +import { SbbLanguageController } from '../../core/controllers.js'; import { forceType, slotState } from '../../core/decorators.js'; import { isFirefox, isLean, setOrRemoveAttribute } from '../../core/dom.js'; import { i18nOptional } from '../../core/i18n.js'; @@ -18,8 +25,6 @@ import '../../icon.js'; let nextId = 0; let nextFormFieldErrorId = 0; -const supportedPopupTagNames = ['sbb-autocomplete', 'sbb-autocomplete-grid', 'sbb-select']; - /** * It wraps an input element adding label, errors, icon, etc. * @@ -118,7 +123,6 @@ class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement) return this._input; } - private _abort = new SbbConnectedAbortController(this); private _language = new SbbLanguageController(this); /** @@ -136,9 +140,6 @@ class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement) public override connectedCallback(): void { super.connectedCallback(); - const signal = this._abort.signal; - this.addEventListener('willOpen', (e: CustomEvent) => this._onPopupOpen(e), { signal }); - this.addEventListener('didClose', (e: CustomEvent) => this._onPopupClose(e), { signal }); this._registerInputListener(); this._syncNegative(); } @@ -157,18 +158,6 @@ class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement) this._inputAbortController.abort(); } - private _onPopupOpen({ target }: CustomEvent): void { - if (supportedPopupTagNames.includes((target as HTMLElement).localName)) { - this.toggleAttribute('data-has-popup-open', true); - } - } - - private _onPopupClose({ target }: CustomEvent): void { - if (supportedPopupTagNames.includes((target as HTMLElement).localName)) { - this.removeAttribute('data-has-popup-open'); - } - } - private _handleWrapperClick(event: Event): void { if (this._isButtonOrPopup(event)) { return; @@ -228,7 +217,7 @@ class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement) this._formFieldAttributeObserver?.disconnect(); this._formFieldAttributeObserver?.observe(this._input, { attributes: true, - attributeFilter: ['readonly', 'disabled', 'class', 'data-sbb-invalid'], + attributeFilter: ['readonly', 'disabled', 'class', 'data-sbb-invalid', 'data-state'], }); this.setAttribute('data-input-type', this._input.localName); this._syncLabelInputReferences(); @@ -385,6 +374,11 @@ class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement) (this._input.classList.contains('ng-touched') && this._input.classList.contains('ng-invalid')), ); + this.toggleAttribute( + 'data-has-popup-open', + this._input.localName === 'sbb-select' && + ['opening', 'opened'].includes(this._input!.getAttribute('data-state')!), + ); } /** diff --git a/src/elements/notification/notification.ts b/src/elements/notification/notification.ts index b112de59c6..101287f62c 100644 --- a/src/elements/notification/notification.ts +++ b/src/elements/notification/notification.ts @@ -101,24 +101,28 @@ class SbbNotificationElement extends LitElement { private _willOpen: EventEmitter = new EventEmitter( this, SbbNotificationElement.events.willOpen, + { cancelable: true }, ); /** Emits whenever the `sbb-notification` is opened. */ private _didOpen: EventEmitter = new EventEmitter( this, SbbNotificationElement.events.didOpen, + { cancelable: true }, ); /** Emits whenever the `sbb-notification` begins the closing transition. */ private _willClose: EventEmitter = new EventEmitter( this, SbbNotificationElement.events.willClose, + { cancelable: true }, ); /** Emits whenever the `sbb-notification` is closed. */ private _didClose: EventEmitter = new EventEmitter( this, SbbNotificationElement.events.didClose, + { cancelable: true }, ); private _open(): void { diff --git a/src/elements/popover/popover/popover.ts b/src/elements/popover/popover/popover.ts index 5e8e7726d1..701fe50c6d 100644 --- a/src/elements/popover/popover/popover.ts +++ b/src/elements/popover/popover/popover.ts @@ -89,12 +89,14 @@ class SbbPopoverElement extends SbbHydrationMixin(SbbOpenCloseBaseElement) { protected override willClose: EventEmitter<{ closeTarget?: HTMLElement }> = new EventEmitter( this, SbbPopoverElement.events.willClose, + { cancelable: true }, ); /** Emits whenever the `sbb-popover` is closed. */ protected override didClose: EventEmitter<{ closeTarget?: HTMLElement }> = new EventEmitter( this, SbbPopoverElement.events.didClose, + { cancelable: true }, ); private _overlay!: HTMLDivElement; diff --git a/src/elements/selection-expansion-panel/selection-expansion-panel.ts b/src/elements/selection-expansion-panel/selection-expansion-panel.ts index 6ecd936a7a..bbc7b84a00 100644 --- a/src/elements/selection-expansion-panel/selection-expansion-panel.ts +++ b/src/elements/selection-expansion-panel/selection-expansion-panel.ts @@ -83,24 +83,28 @@ class SbbSelectionExpansionPanelElement extends SbbHydrationMixin(LitElement) { private _willOpen: EventEmitter = new EventEmitter( this, SbbSelectionExpansionPanelElement.events.willOpen, + { cancelable: true }, ); /** Emits whenever the content section is opened. */ private _didOpen: EventEmitter = new EventEmitter( this, SbbSelectionExpansionPanelElement.events.didOpen, + { cancelable: true }, ); /** Emits whenever the content section begins the closing transition. */ private _willClose: EventEmitter = new EventEmitter( this, SbbSelectionExpansionPanelElement.events.willClose, + { cancelable: true }, ); /** Emits whenever the content section is closed. */ private _didClose: EventEmitter = new EventEmitter( this, SbbSelectionExpansionPanelElement.events.didClose, + { cancelable: true }, ); private _language = new SbbLanguageController(this); diff --git a/src/elements/tabs/tab-group/tab-group.stories.ts b/src/elements/tabs/tab-group/tab-group.stories.ts index c62025a5e5..864149d289 100644 --- a/src/elements/tabs/tab-group/tab-group.stories.ts +++ b/src/elements/tabs/tab-group/tab-group.stories.ts @@ -70,6 +70,7 @@ const tabPanelFour = (): TemplateResult => html` `; +// TODO: check whether didChange can be replaced with change const DefaultTemplate = ({ size, label, ...args }: Args): TemplateResult => html` Date: Thu, 5 Dec 2024 16:47:01 +0100 Subject: [PATCH 2/4] fix: lint --- src/elements/accordion/accordion.ssr.spec.ts | 2 ++ src/elements/alert/alert-group/alert-group.ssr.spec.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/elements/accordion/accordion.ssr.spec.ts b/src/elements/accordion/accordion.ssr.spec.ts index 15a5bbfbd9..13a96b2352 100644 --- a/src/elements/accordion/accordion.ssr.spec.ts +++ b/src/elements/accordion/accordion.ssr.spec.ts @@ -5,6 +5,8 @@ import { ssrHydratedFixture } from '../core/testing/private.js'; import { SbbAccordionElement } from './accordion.js'; +import '../expansion-panel.js'; + describe(`sbb-accordion ssr`, () => { let root: SbbAccordionElement; diff --git a/src/elements/alert/alert-group/alert-group.ssr.spec.ts b/src/elements/alert/alert-group/alert-group.ssr.spec.ts index e96874a987..8c2a14c6b9 100644 --- a/src/elements/alert/alert-group/alert-group.ssr.spec.ts +++ b/src/elements/alert/alert-group/alert-group.ssr.spec.ts @@ -5,6 +5,8 @@ import { ssrHydratedFixture } from '../../core/testing/private.js'; import { SbbAlertGroupElement } from './alert-group.js'; +import '../alert/alert.js'; + describe(`sbb-alert-group ssr`, () => { let root: SbbAlertGroupElement; From 03c25d6ada47884a8c7b633b7c0ed6788b7ea861 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Thu, 5 Dec 2024 17:40:59 +0100 Subject: [PATCH 3/4] fix: fix tests --- src/elements/accordion/accordion.spec.ts | 35 +++++--- src/elements/alert/alert/alert.spec.ts | 14 ++-- .../autocomplete-grid.spec.ts | 28 +++---- .../autocomplete/autocomplete.spec.ts | 20 ++--- src/elements/core/testing/event-spy.ts | 15 ++-- .../datepicker-toggle.spec.ts | 28 +++++-- src/elements/dialog/dialog/dialog.spec.ts | 56 ++++++------- .../expansion-panel/expansion-panel.spec.ts | 8 +- src/elements/header/header/header.spec.ts | 4 +- src/elements/menu/menu/menu.spec.ts | 46 +++++----- .../navigation/navigation/navigation.spec.ts | 48 +++++------ .../notification/notification.spec.ts | 8 +- src/elements/overlay/overlay.spec.ts | 34 ++++---- .../paginator/paginator/paginator.spec.ts | 10 ++- .../popover-trigger/popover-trigger.spec.ts | 6 +- src/elements/popover/popover/popover.spec.ts | 84 ++++++++++--------- src/elements/select/select.spec.ts | 36 ++++---- .../selection-expansion-panel.spec.ts | 48 ++++++++--- src/elements/toast/toast.spec.ts | 26 +++--- 19 files changed, 310 insertions(+), 244 deletions(-) diff --git a/src/elements/accordion/accordion.spec.ts b/src/elements/accordion/accordion.spec.ts index 043872e4a3..6e69ace686 100644 --- a/src/elements/accordion/accordion.spec.ts +++ b/src/elements/accordion/accordion.spec.ts @@ -1,4 +1,4 @@ -import { assert, expect } from '@open-wc/testing'; +import { assert, aTimeout, expect } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { fixture } from '../core/testing/private.js'; @@ -120,7 +120,9 @@ describe(`sbb-accordion`, () => { }); it('should close others when expanding and multi = false', async () => { - const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen, null, { + capture: true, + }); const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1')!; const headerOne: SbbExpansionPanelHeaderElement = @@ -140,30 +142,35 @@ describe(`sbb-accordion`, () => { headerTwo.click(); await willOpenEventSpy.calledOnce(); + await aTimeout(0); expect(willOpenEventSpy.count).to.be.equal(1); - expect(panelOne.expanded).to.be.equal(false); - expect(panelTwo.expanded).to.be.equal(true); - expect(panelThree.expanded).to.be.equal(false); + expect(panelOne.expanded, 'headerTwo panelOne.expanded').to.be.equal(false); + expect(panelTwo.expanded, 'headerTwo panelTwo.expanded').to.be.equal(true); + expect(panelThree.expanded, 'headerTwo panelThree.expanded').to.be.equal(false); headerOne.click(); await willOpenEventSpy.calledTimes(2); + await aTimeout(0); expect(willOpenEventSpy.count).to.be.equal(2); - expect(panelOne.expanded).to.be.equal(true); - expect(panelTwo.expanded).to.be.equal(false); - expect(panelThree.expanded).to.be.equal(false); + expect(panelOne.expanded, 'headerOne panelOne.expanded').to.be.equal(true); + expect(panelTwo.expanded, 'headerOne panelTwo.expanded').to.be.equal(false); + expect(panelThree.expanded, 'headerOne panelThree.expanded').to.be.equal(false); headerThree.click(); await willOpenEventSpy.calledTimes(3); + await aTimeout(0); expect(willOpenEventSpy.count).to.be.equal(3); - expect(panelOne.expanded).to.be.equal(false); - expect(panelTwo.expanded).to.be.equal(false); - expect(panelThree.expanded).to.be.equal(true); + expect(panelOne.expanded, 'headerThree panelOne.expanded').to.be.equal(false); + expect(panelTwo.expanded, 'headerThree panelTwo.expanded').to.be.equal(false); + expect(panelThree.expanded, 'headerThree panelThree.expanded').to.be.equal(true); }); it('should not change others when expanding and multi = false', async () => { element.multi = true; await waitForLitRender(element); - const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen, null, { + capture: true, + }); const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1')!; const headerOne: SbbExpansionPanelHeaderElement = @@ -221,7 +228,9 @@ describe(`sbb-accordion`, () => { expect(panel.expanded).to.be.equal(false); } - const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen, null, { + capture: true, + }); headerTwo.click(); await willOpenEventSpy.calledOnce(); diff --git a/src/elements/alert/alert/alert.spec.ts b/src/elements/alert/alert/alert.spec.ts index e2af45215e..2c3b3625bf 100644 --- a/src/elements/alert/alert/alert.spec.ts +++ b/src/elements/alert/alert/alert.spec.ts @@ -15,10 +15,10 @@ describe(`sbb-alert`, () => { }); it('should fire animation events', async () => { - const willOpenSpy = new EventSpy(SbbAlertElement.events.willOpen); - const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen); - const willCloseSpy = new EventSpy(SbbAlertElement.events.willClose); - const didCloseSpy = new EventSpy(SbbAlertElement.events.didClose); + const willOpenSpy = new EventSpy(SbbAlertElement.events.willOpen, null, { capture: true }); + const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen, null, { capture: true }); + const willCloseSpy = new EventSpy(SbbAlertElement.events.willClose, null, { capture: true }); + const didCloseSpy = new EventSpy(SbbAlertElement.events.didClose, null, { capture: true }); const alert: SbbAlertElement = await fixture( html`Interruption`, @@ -37,9 +37,9 @@ describe(`sbb-alert`, () => { }); it('should respect canceled willClose event', async () => { - const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen); - const willCloseSpy = new EventSpy(SbbAlertElement.events.willClose); - const didCloseSpy = new EventSpy(SbbAlertElement.events.didClose); + const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen, null, { capture: true }); + const willCloseSpy = new EventSpy(SbbAlertElement.events.willClose, null, { capture: true }); + const didCloseSpy = new EventSpy(SbbAlertElement.events.didClose, null, { capture: true }); const alert: SbbAlertElement = await fixture( html`Interruption`, diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts index d427fe5ad5..fef7f2791d 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts @@ -94,10 +94,10 @@ describe(`sbb-autocomplete-grid`, () => { }); it('opens and closes with mouse and keyboard', async () => { - const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose, element); input.click(); await willOpenEventSpy.calledOnce(); @@ -146,7 +146,7 @@ describe(`sbb-autocomplete-grid`, () => { }); it('select by mouse', async () => { - const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element); const optionSelectedEventSpy = new EventSpy( SbbAutocompleteGridOptionElement.events.optionSelected, ); @@ -170,8 +170,8 @@ describe(`sbb-autocomplete-grid`, () => { }); it('select button and get related option', async () => { - const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element); const clickSpy = new EventSpy('click'); input.focus(); @@ -195,7 +195,7 @@ describe(`sbb-autocomplete-grid`, () => { }); it('keyboard navigation', async () => { - const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element); const optOne = element.querySelector('#option-1'); const buttonOne = element.querySelector('#button-1'); const optTwo = element.querySelector('#option-2'); @@ -239,8 +239,8 @@ describe(`sbb-autocomplete-grid`, () => { }); it('opens and select with keyboard', async () => { - const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose, element); const optionSelectedEventSpy = new EventSpy( SbbAutocompleteGridOptionElement.events.optionSelected, ); @@ -275,7 +275,7 @@ describe(`sbb-autocomplete-grid`, () => { }); it('opens and select button with keyboard', async () => { - const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element); const clickSpy = new EventSpy('click'); const optOne = element.querySelector('#option-1'); const buttonOne = element.querySelector('#button-1'); @@ -342,7 +342,7 @@ describe(`sbb-autocomplete-grid`, () => { }); it('does not open if prevented', async () => { - const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen, element); element.addEventListener(SbbAutocompleteGridElement.events.willOpen, (ev) => ev.preventDefault(), @@ -357,8 +357,8 @@ describe(`sbb-autocomplete-grid`, () => { }); it('does not close if prevented', async () => { - const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose); + const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose, element); element.open(); await didOpenEventSpy.calledOnce(); diff --git a/src/elements/autocomplete/autocomplete.spec.ts b/src/elements/autocomplete/autocomplete.spec.ts index 5bc0f17cf6..8aa4ae589e 100644 --- a/src/elements/autocomplete/autocomplete.spec.ts +++ b/src/elements/autocomplete/autocomplete.spec.ts @@ -64,10 +64,10 @@ describe(`sbb-autocomplete`, () => { }); it('opens and closes with mouse and keyboard', async () => { - const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose, element); input.click(); await willOpenEventSpy.calledOnce(); @@ -116,7 +116,7 @@ describe(`sbb-autocomplete`, () => { }); it('select by mouse', async () => { - const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen, element); const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected); const inputEventSpy = new EventSpy('input', input); const changeEventSpy = new EventSpy('change', input); @@ -143,8 +143,8 @@ describe(`sbb-autocomplete`, () => { }); it('opens and select with keyboard', async () => { - const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose, element); const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected); const inputEventSpy = new EventSpy('input', input); const changeEventSpy = new EventSpy('change', input); @@ -213,7 +213,7 @@ describe(`sbb-autocomplete`, () => { }); it('does not open if prevented', async () => { - const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen, element); element.addEventListener(SbbAutocompleteElement.events.willOpen, (ev) => ev.preventDefault()); element.open(); @@ -226,8 +226,8 @@ describe(`sbb-autocomplete`, () => { }); it('does not close if prevented', async () => { - const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.willClose); + const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.willClose, element); element.open(); await didOpenEventSpy.calledOnce(); diff --git a/src/elements/core/testing/event-spy.ts b/src/elements/core/testing/event-spy.ts index a6905f7116..82266ef5c8 100644 --- a/src/elements/core/testing/event-spy.ts +++ b/src/elements/core/testing/event-spy.ts @@ -32,6 +32,7 @@ export class EventSpy { public constructor( private _event: string, private readonly _target: Node | null = null, + private readonly _options: AddEventListenerOptions | null = null, ) { if (!this._target) { this._target = document; @@ -87,10 +88,14 @@ export class EventSpy { } private _listenForEvent(): void { - this._target?.addEventListener(this._event, (ev) => { - this._events.push(ev as T); - this._count++; - this._promiseEventMap.get(this.count)?.resolve(ev as T); - }); + this._target?.addEventListener( + this._event, + (ev) => { + this._events.push(ev as T); + this._count++; + this._promiseEventMap.get(this.count)?.resolve(ev as T); + }, + this._options ?? undefined, + ); } } diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.spec.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.spec.ts index 1043fc5bb5..6596beffc7 100644 --- a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.spec.ts +++ b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.spec.ts @@ -40,7 +40,10 @@ describe(`sbb-datepicker-toggle`, () => { root.querySelector('sbb-datepicker-toggle')!; assert.instanceOf(element, SbbDatepickerToggleElement); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const didOpenEventSpy = new EventSpy( + SbbPopoverElement.events.didOpen, + element.shadowRoot!.querySelector('sbb-popover'), + ); const popoverTrigger: SbbMiniButtonElement = element.shadowRoot!.querySelector('sbb-mini-button')!; const popover: SbbPopoverElement = @@ -65,7 +68,10 @@ describe(`sbb-datepicker-toggle`, () => { `); const element: SbbDatepickerToggleElement = root.querySelector('sbb-datepicker-toggle')!; - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const didOpenEventSpy = new EventSpy( + SbbPopoverElement.events.didOpen, + element.shadowRoot!.querySelector('sbb-popover'), + ); const popoverTrigger: SbbMiniButtonElement = element.shadowRoot!.querySelector('sbb-mini-button')!; const popover: SbbPopoverElement = @@ -178,7 +184,10 @@ describe(`sbb-datepicker-toggle`, () => { const popover: SbbPopoverElement = element.shadowRoot!.querySelector('sbb-popover')!; expect(popover).to.have.attribute('data-state', 'closed'); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const didOpenEventSpy = new EventSpy( + SbbPopoverElement.events.didOpen, + element.shadowRoot!.querySelector('sbb-popover')!, + ); const changeSpy = new EventSpy('change', input); const blurSpy = new EventSpy('blur', input); assert.instanceOf(element, SbbDatepickerToggleElement); @@ -213,7 +222,7 @@ describe(`sbb-datepicker-toggle`, () => { }); it('handles view property', async () => { - const element: SbbDatepickerToggleElement = await fixture( + const element: SbbFormFieldElement = await fixture( html` @@ -221,11 +230,18 @@ describe(`sbb-datepicker-toggle`, () => { `, ); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); const datepickerToggle = element.querySelector('sbb-datepicker-toggle')!; + const didOpenEventSpy = new EventSpy( + SbbPopoverElement.events.didOpen, + datepickerToggle.shadowRoot!.querySelector('sbb-popover'), + ); + const didCloseEventSpy = new EventSpy( + SbbPopoverElement.events.didClose, + datepickerToggle.shadowRoot!.querySelector('sbb-popover'), + ); + // Open calendar datepickerToggle.open(); await didOpenEventSpy.calledOnce(); diff --git a/src/elements/dialog/dialog/dialog.spec.ts b/src/elements/dialog/dialog/dialog.spec.ts index 94c0e7df32..32eff2b722 100644 --- a/src/elements/dialog/dialog/dialog.spec.ts +++ b/src/elements/dialog/dialog/dialog.spec.ts @@ -14,8 +14,8 @@ import '../dialog-content.js'; import '../dialog-actions.js'; async function openDialog(element: SbbDialogElement): Promise { - const willOpen = new EventSpy(SbbDialogElement.events.willOpen); - const didOpen = new EventSpy(SbbDialogElement.events.didOpen); + const willOpen = new EventSpy(SbbDialogElement.events.willOpen, element); + const didOpen = new EventSpy(SbbDialogElement.events.didOpen, element); element.open(); await waitForLitRender(element); @@ -55,8 +55,8 @@ describe('sbb-dialog', () => { }); it('does not open the dialog if prevented', async () => { - const willOpen = new EventSpy(SbbDialogElement.events.willOpen); - const didOpen = new EventSpy(SbbDialogElement.events.didOpen); + const willOpen = new EventSpy(SbbDialogElement.events.willOpen, element); + const didOpen = new EventSpy(SbbDialogElement.events.didOpen, element); element.addEventListener(SbbDialogElement.events.willOpen, (ev) => ev.preventDefault()); @@ -72,8 +72,8 @@ describe('sbb-dialog', () => { }); it('closes the dialog', async () => { - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose, element); + const didClose = new EventSpy(SbbDialogElement.events.didClose, element); await openDialog(element); @@ -95,8 +95,8 @@ describe('sbb-dialog', () => { }); it('does not close the dialog if prevented', async () => { - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose, element); + const didClose = new EventSpy(SbbDialogElement.events.didClose, element); await openDialog(element); @@ -114,8 +114,8 @@ describe('sbb-dialog', () => { }); it('closes the dialog on backdrop click', async () => { - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose, element); + const didClose = new EventSpy(SbbDialogElement.events.didClose, element); await openDialog(element); @@ -136,8 +136,8 @@ describe('sbb-dialog', () => { }); it('does not close the dialog on backdrop click', async () => { - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose, element); + const didClose = new EventSpy(SbbDialogElement.events.didClose, element); element.backdropAction = 'none'; await waitForLitRender(element); @@ -159,8 +159,8 @@ describe('sbb-dialog', () => { }); it('does not close the dialog on backdrop click if pointerdown is on dialog', async () => { - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose, element); + const didClose = new EventSpy(SbbDialogElement.events.didClose, element); await openDialog(element); @@ -181,8 +181,8 @@ describe('sbb-dialog', () => { }); it('does not close the dialog on backdrop click if pointerup is on dialog', async () => { - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose, element); + const didClose = new EventSpy(SbbDialogElement.events.didClose, element); await openDialog(element); @@ -206,8 +206,8 @@ describe('sbb-dialog', () => { const closeButton = element .querySelector('sbb-dialog-title')! .shadowRoot!.querySelector('[sbb-dialog-close]') as HTMLElement; - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose, element); + const didClose = new EventSpy(SbbDialogElement.events.didClose, element); await openDialog(element); @@ -226,8 +226,8 @@ describe('sbb-dialog', () => { }); it('closes the dialog on Esc key press', async () => { - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose, element); + const didClose = new EventSpy(SbbDialogElement.events.didClose, element); await openDialog(element); @@ -263,10 +263,10 @@ describe('sbb-dialog', () => { `); - const willOpen = new EventSpy(SbbDialogElement.events.willOpen); - const didOpen = new EventSpy(SbbDialogElement.events.didOpen); - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willOpen = new EventSpy(SbbDialogElement.events.willOpen, null, { capture: true }); + const didOpen = new EventSpy(SbbDialogElement.events.didOpen, null, { capture: true }); + const willClose = new EventSpy(SbbDialogElement.events.willClose, null, { capture: true }); + const didClose = new EventSpy(SbbDialogElement.events.didClose, null, { capture: true }); await openDialog(element); @@ -333,10 +333,10 @@ describe('sbb-dialog', () => { `); - const willOpen = new EventSpy(SbbDialogElement.events.willOpen); - const didOpen = new EventSpy(SbbDialogElement.events.didOpen); - const willClose = new EventSpy(SbbDialogElement.events.willClose); - const didClose = new EventSpy(SbbDialogElement.events.didClose); + const willOpen = new EventSpy(SbbDialogElement.events.willOpen, null, { capture: true }); + const didOpen = new EventSpy(SbbDialogElement.events.didOpen, null, { capture: true }); + const willClose = new EventSpy(SbbDialogElement.events.willClose, null, { capture: true }); + const didClose = new EventSpy(SbbDialogElement.events.didClose, null, { capture: true }); const innerElement = element.querySelector('sbb-dialog') as SbbDialogElement; await openDialog(element); diff --git a/src/elements/expansion-panel/expansion-panel/expansion-panel.spec.ts b/src/elements/expansion-panel/expansion-panel/expansion-panel.spec.ts index 4a38141810..d8bff065b5 100644 --- a/src/elements/expansion-panel/expansion-panel/expansion-panel.spec.ts +++ b/src/elements/expansion-panel/expansion-panel/expansion-panel.spec.ts @@ -65,10 +65,10 @@ describe(`sbb-expansion-panel`, () => { const toggleExpandedEventSpy = new EventSpy( SbbExpansionPanelHeaderElement.events.toggleExpanded, ); - const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen); - const willCloseEventSpy = new EventSpy(SbbExpansionPanelElement.events.willClose); - const didOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbExpansionPanelElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen, element); + const willCloseEventSpy = new EventSpy(SbbExpansionPanelElement.events.willClose, element); + const didOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbExpansionPanelElement.events.didClose, element); await waitForLitRender(element); diff --git a/src/elements/header/header/header.spec.ts b/src/elements/header/header/header.spec.ts index e9ecd32435..93fc31aab1 100644 --- a/src/elements/header/header/header.spec.ts +++ b/src/elements/header/header/header.spec.ts @@ -161,8 +161,8 @@ describe(`sbb-header`, () => { expect(element).to.have.attribute('data-visible'); // Open menu - const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen, null, { capture: true }); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen, null, { capture: true }); const menuTrigger = root.querySelector('sbb-header-button')!; menuTrigger.click(); await waitForLitRender(element); diff --git a/src/elements/menu/menu/menu.spec.ts b/src/elements/menu/menu/menu.spec.ts index 15eeb960ce..d1a8d41b61 100644 --- a/src/elements/menu/menu/menu.spec.ts +++ b/src/elements/menu/menu/menu.spec.ts @@ -44,8 +44,8 @@ describe(`sbb-menu`, () => { }); it('opens on trigger click', async () => { - const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen, element); trigger.click(); await waitForLitRender(element); @@ -61,10 +61,10 @@ describe(`sbb-menu`, () => { }); it('closes on Esc keypress', async () => { - const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbMenuElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbMenuElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbMenuElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbMenuElement.events.didClose, element); trigger.click(); await waitForLitRender(element); @@ -97,10 +97,10 @@ describe(`sbb-menu`, () => { }); it('closes on menu action click', async () => { - const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbMenuElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbMenuElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbMenuElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbMenuElement.events.didClose, element); const menuAction = element.querySelector(':scope > sbb-menu-button') as HTMLElement; trigger.click(); @@ -131,10 +131,10 @@ describe(`sbb-menu`, () => { }); it('closes on interactive element click', async () => { - const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbMenuElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbMenuElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbMenuElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbMenuElement.events.didClose, element); const menuLink = element.querySelector(':scope > sbb-block-link') as HTMLElement; trigger.click(); @@ -166,8 +166,8 @@ describe(`sbb-menu`, () => { }); it('is correctly positioned on desktop', async () => { - const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen, element); await setViewport({ width: 1200, height: 800 }); if (isWebkit) { // Needed to let media queries get applied on Webkit @@ -206,8 +206,8 @@ describe(`sbb-menu`, () => { }); it('is correctly positioned on mobile', async () => { - const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen, element); await setViewport({ width: 800, height: 600 }); const menu: HTMLDivElement = element.shadowRoot!.querySelector('.sbb-menu')!; @@ -233,8 +233,8 @@ describe(`sbb-menu`, () => { }); it('sets the focus to the first focusable element when the menu is opened by keyboard', async () => { - const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen, element); trigger.focus(); @@ -256,7 +256,7 @@ describe(`sbb-menu`, () => { }); it('does not open if prevented', async () => { - const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen, element); element.addEventListener(SbbMenuElement.events.willOpen, (ev) => ev.preventDefault()); element.open(); @@ -269,8 +269,8 @@ describe(`sbb-menu`, () => { }); it('does not close if prevented', async () => { - const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbMenuElement.events.willClose); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbMenuElement.events.willClose, element); element.open(); await didOpenEventSpy.calledOnce(); diff --git a/src/elements/navigation/navigation/navigation.spec.ts b/src/elements/navigation/navigation/navigation.spec.ts index d0340af8db..57210dd052 100644 --- a/src/elements/navigation/navigation/navigation.spec.ts +++ b/src/elements/navigation/navigation/navigation.spec.ts @@ -45,7 +45,7 @@ describe(`sbb-navigation`, () => { }); it('opens the navigation', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); element.open(); await waitForLitRender(element); @@ -76,7 +76,7 @@ describe(`sbb-navigation`, () => { `); - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); const action2 = element.querySelector( ':scope > sbb-navigation-marker > sbb-navigation-button#action-active-1', )!; @@ -119,7 +119,7 @@ describe(`sbb-navigation`, () => { `); - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); const actionActive = element.querySelector( ':scope > sbb-navigation-marker > sbb-navigation-button#action-active', )!; @@ -165,8 +165,8 @@ describe(`sbb-navigation`, () => { `); - const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose); - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); + const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose, element); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); const action1 = element.querySelector('#first-action')!; const action2 = element.querySelector('#second-action')!; const action3 = element.querySelector('#third-action')!; @@ -222,8 +222,8 @@ describe(`sbb-navigation`, () => { }); it('closes the navigation', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose, element); element.open(); await waitForLitRender(element); @@ -245,8 +245,8 @@ describe(`sbb-navigation`, () => { }); it('closes the navigation on close button click', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose, element); const closeButton: SbbButtonElement = element.shadowRoot!.querySelector('.sbb-navigation__close')!; @@ -270,8 +270,8 @@ describe(`sbb-navigation`, () => { }); it('closes the navigation on Esc key press', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose, element); element.open(); await waitForLitRender(element); @@ -296,8 +296,8 @@ describe(`sbb-navigation`, () => { }); it('closes navigation with sbb-navigation-close', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose, element); const section = element.querySelector('#first-section')!; const action = element.querySelector( 'sbb-navigation-marker > sbb-navigation-button#action-1', @@ -331,7 +331,7 @@ describe(`sbb-navigation`, () => { }); it('opens navigation and opens section', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); const section = element.querySelector('#first-section')!; const action = element.querySelector( ':scope > sbb-navigation-marker > sbb-navigation-button#action-1', @@ -356,7 +356,7 @@ describe(`sbb-navigation`, () => { }); it('opens navigation and toggles sections', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); const firstSection = element.querySelector('#first-section')!; const secondSection = element.querySelector('#second-section')!; const firstAction = element.querySelector( @@ -391,8 +391,8 @@ describe(`sbb-navigation`, () => { }); it('closes the navigation and the section on close button click', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose, element); const section = element.querySelector('#first-section')!; const action = element.querySelector( ':scope > sbb-navigation-marker > sbb-navigation-button#action-1', @@ -428,8 +428,8 @@ describe(`sbb-navigation`, () => { }); it('closes the navigation and the section on Esc key press', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbNavigationElement.events.didClose, element); const section = element.querySelector('#first-section')!; const action = element.querySelector( ':scope > sbb-navigation-marker > sbb-navigation-button#action-1', @@ -463,7 +463,7 @@ describe(`sbb-navigation`, () => { }); it('closes section with sbb-navigation-section-close', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); const section = element.querySelector('#first-section')!; const action = element.querySelector( ':scope > sbb-navigation-marker > sbb-navigation-button#action-1', @@ -494,7 +494,7 @@ describe(`sbb-navigation`, () => { }); it('does not open if prevented', async () => { - const willOpenEventSpy = new EventSpy(SbbNavigationElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbNavigationElement.events.willOpen, element); element.addEventListener(SbbNavigationElement.events.willOpen, (ev) => ev.preventDefault()); element.open(); @@ -507,8 +507,8 @@ describe(`sbb-navigation`, () => { }); it('does not close if prevented', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbNavigationElement.events.willClose); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbNavigationElement.events.willClose, element); element.open(); await didOpenEventSpy.calledOnce(); @@ -524,7 +524,7 @@ describe(`sbb-navigation`, () => { }); it('should re-enable scrolling when removed from the DOM', async () => { - const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen); + const didOpenEventSpy = new EventSpy(SbbNavigationElement.events.didOpen, element); element.open(); await didOpenEventSpy.calledOnce(); diff --git a/src/elements/notification/notification.spec.ts b/src/elements/notification/notification.spec.ts index b2af8a186d..e514162f76 100644 --- a/src/elements/notification/notification.spec.ts +++ b/src/elements/notification/notification.spec.ts @@ -27,8 +27,8 @@ describe(`sbb-notification`, () => { it('closes the notification and removes it from the DOM', async () => { const parent = element.parentElement!; - const willCloseEventSpy = new EventSpy(SbbNotificationElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbNotificationElement.events.didClose); + const willCloseEventSpy = new EventSpy(SbbNotificationElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbNotificationElement.events.didClose, element); await waitForCondition(() => element.getAttribute('data-state') === 'opened'); expect(element).to.have.attribute('data-state', 'opened'); @@ -53,8 +53,8 @@ describe(`sbb-notification`, () => { it('closes the notification and removes it from the DOM on close button click', async () => { const parent = element.parentElement!; - const willCloseEventSpy = new EventSpy(SbbNotificationElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbNotificationElement.events.didClose); + const willCloseEventSpy = new EventSpy(SbbNotificationElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbNotificationElement.events.didClose, element); const closeButton = element.shadowRoot!.querySelector( '.sbb-notification__close', ) as SbbSecondaryButtonElement; diff --git a/src/elements/overlay/overlay.spec.ts b/src/elements/overlay/overlay.spec.ts index 1b68c922f7..d6d1f2f6ff 100644 --- a/src/elements/overlay/overlay.spec.ts +++ b/src/elements/overlay/overlay.spec.ts @@ -12,8 +12,8 @@ import '../button.js'; import '../icon.js'; async function openOverlay(element: SbbOverlayElement): Promise { - const willOpen = new EventSpy(SbbOverlayElement.events.willOpen); - const didOpen = new EventSpy(SbbOverlayElement.events.didOpen); + const willOpen = new EventSpy(SbbOverlayElement.events.willOpen, element); + const didOpen = new EventSpy(SbbOverlayElement.events.didOpen, element); element.open(); await waitForLitRender(element); @@ -51,8 +51,8 @@ describe('sbb-overlay', () => { }); it('does not open the overlay if prevented', async () => { - const willOpen = new EventSpy(SbbOverlayElement.events.willOpen); - const didOpen = new EventSpy(SbbOverlayElement.events.didOpen); + const willOpen = new EventSpy(SbbOverlayElement.events.willOpen, element); + const didOpen = new EventSpy(SbbOverlayElement.events.didOpen, element); element.addEventListener(SbbOverlayElement.events.willOpen, (ev) => ev.preventDefault()); @@ -68,8 +68,8 @@ describe('sbb-overlay', () => { }); it('closes the overlay', async () => { - const willClose = new EventSpy(SbbOverlayElement.events.willClose); - const didClose = new EventSpy(SbbOverlayElement.events.didClose); + const willClose = new EventSpy(SbbOverlayElement.events.willClose, element); + const didClose = new EventSpy(SbbOverlayElement.events.didClose, element); await openOverlay(element); @@ -91,8 +91,8 @@ describe('sbb-overlay', () => { }); it('does not close the overlay if prevented', async () => { - const willClose = new EventSpy(SbbOverlayElement.events.willClose); - const didClose = new EventSpy(SbbOverlayElement.events.didClose); + const willClose = new EventSpy(SbbOverlayElement.events.willClose, element); + const didClose = new EventSpy(SbbOverlayElement.events.didClose, element); await openOverlay(element); @@ -111,8 +111,8 @@ describe('sbb-overlay', () => { it('closes the overlay on close button click', async () => { const closeButton = element.shadowRoot!.querySelector('[sbb-overlay-close]') as HTMLElement; - const willClose = new EventSpy(SbbOverlayElement.events.willClose); - const didClose = new EventSpy(SbbOverlayElement.events.didClose); + const willClose = new EventSpy(SbbOverlayElement.events.willClose, element); + const didClose = new EventSpy(SbbOverlayElement.events.didClose, element); await openOverlay(element); @@ -144,7 +144,7 @@ describe('sbb-overlay', () => { const overlay = element.querySelector('sbb-overlay')!; const closeButton = element.querySelector('[type="submit"]')!; const form = element.querySelector('form')!; - const willClose = new EventSpy(SbbOverlayElement.events.willClose); + const willClose = new EventSpy(SbbOverlayElement.events.willClose, overlay); await openOverlay(overlay); @@ -157,8 +157,8 @@ describe('sbb-overlay', () => { }); it('closes the overlay on Esc key press', async () => { - const willClose = new EventSpy(SbbOverlayElement.events.willClose); - const didClose = new EventSpy(SbbOverlayElement.events.didClose); + const willClose = new EventSpy(SbbOverlayElement.events.willClose, element); + const didClose = new EventSpy(SbbOverlayElement.events.didClose, element); await openOverlay(element); @@ -190,10 +190,10 @@ describe('sbb-overlay', () => { `); - const willOpen = new EventSpy(SbbOverlayElement.events.willOpen); - const didOpen = new EventSpy(SbbOverlayElement.events.didOpen); - const willClose = new EventSpy(SbbOverlayElement.events.willClose); - const didClose = new EventSpy(SbbOverlayElement.events.didClose); + const willOpen = new EventSpy(SbbOverlayElement.events.willOpen, null, { capture: true }); + const didOpen = new EventSpy(SbbOverlayElement.events.didOpen, null, { capture: true }); + const willClose = new EventSpy(SbbOverlayElement.events.willClose, null, { capture: true }); + const didClose = new EventSpy(SbbOverlayElement.events.didClose, null, { capture: true }); await openOverlay(element); diff --git a/src/elements/paginator/paginator/paginator.spec.ts b/src/elements/paginator/paginator/paginator.spec.ts index 221dac53fe..9ae5006ef2 100644 --- a/src/elements/paginator/paginator/paginator.spec.ts +++ b/src/elements/paginator/paginator/paginator.spec.ts @@ -107,8 +107,14 @@ describe('sbb-paginator', () => { const select: SbbSelectElement = element.shadowRoot!.querySelector('sbb-select')!; expect(select).not.to.be.null; - const willOpen = new EventSpy(SbbSelectElement.events.willOpen); - const didOpen = new EventSpy(SbbSelectElement.events.didOpen); + const willOpen = new EventSpy( + SbbSelectElement.events.willOpen, + element.shadowRoot!.querySelector('sbb-select'), + ); + const didOpen = new EventSpy( + SbbSelectElement.events.didOpen, + element.shadowRoot!.querySelector('sbb-select'), + ); select.click(); await willOpen.calledOnce(); expect(willOpen.count).to.be.equal(1); diff --git a/src/elements/popover/popover-trigger/popover-trigger.spec.ts b/src/elements/popover/popover-trigger/popover-trigger.spec.ts index cc0887663a..e0de9ec4e6 100644 --- a/src/elements/popover/popover-trigger/popover-trigger.spec.ts +++ b/src/elements/popover/popover-trigger/popover-trigger.spec.ts @@ -33,8 +33,8 @@ describe(`sbb-popover-trigger`, () => { }); it('shows popover on popover-trigger click', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, popover); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, popover); element.click(); @@ -47,7 +47,7 @@ describe(`sbb-popover-trigger`, () => { }); it("doesn't show popover on disabled popover-trigger click", async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, popover); element.disabled = true; await waitForLitRender(element); diff --git a/src/elements/popover/popover/popover.spec.ts b/src/elements/popover/popover/popover.spec.ts index b4c87586c9..f19c7238b2 100644 --- a/src/elements/popover/popover/popover.spec.ts +++ b/src/elements/popover/popover/popover.spec.ts @@ -39,8 +39,8 @@ describe(`sbb-popover`, () => { }); it('shows the popover', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); element.open(); @@ -54,8 +54,8 @@ describe(`sbb-popover`, () => { }); it('shows on trigger click', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); trigger.click(); @@ -69,10 +69,10 @@ describe(`sbb-popover`, () => { }); it('closes the popover', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); element.open(); @@ -94,10 +94,10 @@ describe(`sbb-popover`, () => { }); it('closes the popover on close button click', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); const closeButton = element.shadowRoot!.querySelector('[sbb-popover-close]')!; element.open(); @@ -123,10 +123,10 @@ describe(`sbb-popover`, () => { }); it('closes on interactive element click', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); const popoverLink = element.querySelector(':scope > sbb-link') as HTMLElement; trigger.click(); @@ -154,8 +154,8 @@ describe(`sbb-popover`, () => { }); it('is correctly positioned on screen', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); await setViewport({ width: 1200, height: 800 }); @@ -185,8 +185,8 @@ describe(`sbb-popover`, () => { }); it('should set correct focus attribute on trigger after backdrop click', async () => { - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); element.open(); @@ -206,8 +206,8 @@ describe(`sbb-popover`, () => { const interactiveBackgroundElement = element.parentElement!.querySelector( '#interactive-background-element', )!; - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); element.open(); @@ -227,8 +227,8 @@ describe(`sbb-popover`, () => { }); it('closes on interactive element click by keyboard', async () => { - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); const popoverLink = element.querySelector(':scope > sbb-link')!; trigger.click(); @@ -249,8 +249,8 @@ describe(`sbb-popover`, () => { }); it('sets the focus to the first focusable element when the popover is opened by keyboard', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); await sendKeys({ press: tabKey }); await sendKeys({ press: 'Enter' }); @@ -270,8 +270,8 @@ describe(`sbb-popover`, () => { }); it('closes the popover on close button click by keyboard', async () => { - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); const closeButton = document .querySelector('sbb-popover')! .shadowRoot!.querySelector('[sbb-popover-close]')!; @@ -293,10 +293,10 @@ describe(`sbb-popover`, () => { }); it('closes on Esc keypress', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); trigger.click(); @@ -323,7 +323,7 @@ describe(`sbb-popover`, () => { }); it('does not open if prevented', async () => { - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.willOpen, element); element.addEventListener(SbbPopoverElement.events.willOpen, (ev) => ev.preventDefault()); element.open(); @@ -336,8 +336,8 @@ describe(`sbb-popover`, () => { }); it('does not close if prevented', async () => { - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.willClose, element); element.open(); await didOpenEventSpy.calledOnce(); @@ -465,10 +465,16 @@ describe(`sbb-popover`, () => { const secondTrigger = root.querySelector('#another-popover-trigger'); const secondElement = root.querySelector('#another-popover'); - const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose); - const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, element); + const willOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, null, { + capture: true, + }); + const didOpenEventSpy = new EventSpy(SbbPopoverElement.events.didOpen, null, { capture: true }); + const willCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, null, { + capture: true, + }); + const didCloseEventSpy = new EventSpy(SbbPopoverElement.events.didClose, null, { + capture: true, + }); expect(secondTrigger).not.to.be.null; expect(secondElement).not.to.be.null; diff --git a/src/elements/select/select.spec.ts b/src/elements/select/select.spec.ts index f1539b73e5..88aef1362a 100644 --- a/src/elements/select/select.spec.ts +++ b/src/elements/select/select.spec.ts @@ -44,10 +44,10 @@ describe(`sbb-select`, () => { }); it('opens and closes the select', async () => { - const willOpen = new EventSpy(SbbSelectElement.events.willOpen); - const didOpen = new EventSpy(SbbSelectElement.events.didOpen); - const willClose = new EventSpy(SbbSelectElement.events.willClose); - const didClose = new EventSpy(SbbSelectElement.events.didClose); + const willOpen = new EventSpy(SbbSelectElement.events.willOpen, element); + const didOpen = new EventSpy(SbbSelectElement.events.didOpen, element); + const willClose = new EventSpy(SbbSelectElement.events.willClose, element); + const didClose = new EventSpy(SbbSelectElement.events.didClose, element); element.dispatchEvent(new CustomEvent('click')); await waitForLitRender(element); await willOpen.calledOnce(); @@ -162,8 +162,8 @@ describe(`sbb-select`, () => { expect(displayValue).to.have.trimmed.text('First'); expect(element.value).to.be.equal('1'); - const willOpen = new EventSpy(SbbSelectElement.events.willOpen); - const didOpen = new EventSpy(SbbSelectElement.events.didOpen); + const willOpen = new EventSpy(SbbSelectElement.events.willOpen, element); + const didOpen = new EventSpy(SbbSelectElement.events.didOpen, element); element.click(); await willOpen.calledOnce(); @@ -182,8 +182,8 @@ describe(`sbb-select`, () => { const selectionChange = new EventSpy(SbbOptionElement.events.selectionChange); const optionSelected = new EventSpy(SbbOptionElement.events.optionSelected); - const willClose = new EventSpy(SbbSelectElement.events.willClose); - const didClose = new EventSpy(SbbSelectElement.events.didClose); + const willClose = new EventSpy(SbbSelectElement.events.willClose, element); + const didClose = new EventSpy(SbbSelectElement.events.didClose, element); secondOption.click(); await waitForLitRender(element); @@ -206,8 +206,8 @@ describe(`sbb-select`, () => { element.toggleAttribute('multiple', true); await waitForLitRender(element); - const willOpen = new EventSpy(SbbSelectElement.events.willOpen); - const didOpen = new EventSpy(SbbSelectElement.events.didOpen); + const willOpen = new EventSpy(SbbSelectElement.events.willOpen, element); + const didOpen = new EventSpy(SbbSelectElement.events.didOpen, element); element.dispatchEvent(new CustomEvent('click')); await willOpen.calledOnce(); @@ -245,8 +245,8 @@ describe(`sbb-select`, () => { }); it('handles keypress on host', async () => { - const didOpen = new EventSpy(SbbSelectElement.events.didOpen); - const didClose = new EventSpy(SbbSelectElement.events.didClose); + const didOpen = new EventSpy(SbbSelectElement.events.didOpen, element); + const didClose = new EventSpy(SbbSelectElement.events.didClose, element); focusableElement.focus(); await sendKeys({ press: 'Enter' }); @@ -288,7 +288,7 @@ describe(`sbb-select`, () => { }); it('handles keyboard selection', async () => { - const didOpen = new EventSpy(SbbSelectElement.events.didOpen); + const didOpen = new EventSpy(SbbSelectElement.events.didOpen, element); focusableElement.focus(); await sendKeys({ press: ' ' }); await didOpen.calledOnce(); @@ -329,8 +329,8 @@ describe(`sbb-select`, () => { element.toggleAttribute('multiple', true); await waitForLitRender(element); - const didOpen = new EventSpy(SbbSelectElement.events.didOpen); - const didClose = new EventSpy(SbbSelectElement.events.didClose); + const didOpen = new EventSpy(SbbSelectElement.events.didOpen, element); + const didClose = new EventSpy(SbbSelectElement.events.didClose, element); focusableElement.focus(); await sendKeys({ press: 'ArrowUp' }); await didOpen.calledOnce(); @@ -372,7 +372,7 @@ describe(`sbb-select`, () => { }); it('does not open if prevented', async () => { - const willOpenEventSpy = new EventSpy(SbbSelectElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbSelectElement.events.willOpen, element); element.addEventListener(SbbSelectElement.events.willOpen, (ev) => ev.preventDefault()); element.open(); @@ -385,8 +385,8 @@ describe(`sbb-select`, () => { }); it('does not close if prevented', async () => { - const didOpenEventSpy = new EventSpy(SbbSelectElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbSelectElement.events.willClose); + const didOpenEventSpy = new EventSpy(SbbSelectElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbSelectElement.events.willClose, element); element.open(); await didOpenEventSpy.calledOnce(); diff --git a/src/elements/selection-expansion-panel/selection-expansion-panel.spec.ts b/src/elements/selection-expansion-panel/selection-expansion-panel.spec.ts index 4772c9051f..4ee2d6f27c 100644 --- a/src/elements/selection-expansion-panel/selection-expansion-panel.spec.ts +++ b/src/elements/selection-expansion-panel/selection-expansion-panel.spec.ts @@ -138,8 +138,12 @@ describe(`sbb-selection-expansion-panel`, () => { let didOpenEventSpy: EventSpy; beforeEach(async () => { - willOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willOpen); - didOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didOpen); + willOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willOpen, null, { + capture: true, + }); + didOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didOpen, null, { + capture: true, + }); wrapper = await fixture(getPageContent('radio-button')); elements = Array.from(wrapper.querySelectorAll('sbb-selection-expansion-panel')); @@ -163,8 +167,12 @@ describe(`sbb-selection-expansion-panel`, () => { }); it('selects input on click and shows related content', async () => { - willOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willOpen); - didOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didOpen); + willOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willOpen, null, { + capture: true, + }); + didOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didOpen, null, { + capture: true, + }); await waitForLitRender(wrapper); @@ -328,10 +336,18 @@ describe(`sbb-selection-expansion-panel`, () => { let didCloseEventSpy: EventSpy; beforeEach(async () => { - willOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willOpen); - didOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didOpen); - willCloseEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willClose); - didCloseEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didClose); + willOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willOpen, null, { + capture: true, + }); + didOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didOpen, null, { + capture: true, + }); + willCloseEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willClose, null, { + capture: true, + }); + didCloseEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didClose, null, { + capture: true, + }); nestedElement = await fixture(html` @@ -531,10 +547,18 @@ describe(`sbb-selection-expansion-panel`, () => { let didCloseEventSpy: EventSpy; beforeEach(async () => { - willOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willOpen); - didOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didOpen); - willCloseEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willClose); - didCloseEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didClose); + willOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willOpen, null, { + capture: true, + }); + didOpenEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didOpen, null, { + capture: true, + }); + willCloseEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.willClose, null, { + capture: true, + }); + didCloseEventSpy = new EventSpy(SbbSelectionExpansionPanelElement.events.didClose, null, { + capture: true, + }); wrapper = await fixture(getPageContent('checkbox')); elements = Array.from(wrapper.querySelectorAll('sbb-selection-expansion-panel')); diff --git a/src/elements/toast/toast.spec.ts b/src/elements/toast/toast.spec.ts index 9ff9f98434..e7e026ce99 100644 --- a/src/elements/toast/toast.spec.ts +++ b/src/elements/toast/toast.spec.ts @@ -25,10 +25,10 @@ describe(`sbb-toast`, () => { }); it('opens and closes after timeout', async () => { - const willOpenEventSpy = new EventSpy(SbbToastElement.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbToastElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbToastElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbToastElement.events.didClose); + const willOpenEventSpy = new EventSpy(SbbToastElement.events.willOpen, element); + const didOpenEventSpy = new EventSpy(SbbToastElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbToastElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbToastElement.events.didClose, element); element.setAttribute('timeout', '50'); await waitForLitRender(element); @@ -59,9 +59,9 @@ describe(`sbb-toast`, () => { }); it('closes by dismiss button click', async () => { - const didOpenEventSpy = new EventSpy(SbbToastElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbToastElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbToastElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbToastElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbToastElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbToastElement.events.didClose, element); element.toggleAttribute('dismissible', true); await waitForLitRender(element); @@ -94,9 +94,9 @@ describe(`sbb-toast`, () => { `); const actionBtn = element.querySelector('sbb-transparent-button') as HTMLElement; - const didOpenEventSpy = new EventSpy(SbbToastElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbToastElement.events.willClose); - const didCloseEventSpy = new EventSpy(SbbToastElement.events.didClose); + const didOpenEventSpy = new EventSpy(SbbToastElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbToastElement.events.willClose, element); + const didCloseEventSpy = new EventSpy(SbbToastElement.events.didClose, element); element.open(); await waitForLitRender(element); @@ -168,7 +168,7 @@ describe(`sbb-toast`, () => { }); it('does not open if prevented', async () => { - const willOpenEventSpy = new EventSpy(SbbToastElement.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbToastElement.events.willOpen, element); element.addEventListener(SbbToastElement.events.willOpen, (ev) => ev.preventDefault()); element.open(); @@ -181,8 +181,8 @@ describe(`sbb-toast`, () => { }); it('does not close if prevented', async () => { - const didOpenEventSpy = new EventSpy(SbbToastElement.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbToastElement.events.willClose); + const didOpenEventSpy = new EventSpy(SbbToastElement.events.didOpen, element); + const willCloseEventSpy = new EventSpy(SbbToastElement.events.willClose, element); element.open(); await didOpenEventSpy.calledOnce(); From 1004b6ad4da1fe1ef2100c34c8337a7e633eed5e Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Dec 2024 08:48:53 +0100 Subject: [PATCH 4/4] test: fix visual tests --- .../autocomplete-grid-optgroup.visual.spec.ts | 4 +--- .../autocomplete-grid-option.visual.spec.ts | 8 ++------ .../autocomplete-grid.visual.spec.ts | 2 -- .../autocomplete/autocomplete.visual.spec.ts | 2 -- .../option/optgroup/optgroup.visual.spec.ts | 20 ++++++++++--------- .../option/option/option.visual.spec.ts | 12 +++++------ src/elements/select/select.visual.spec.ts | 6 ++++++ 7 files changed, 26 insertions(+), 28 deletions(-) diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts index 4534621db5..8c7d26102a 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts @@ -96,9 +96,7 @@ describe(`sbb-autocomplete-grid-optgroup`, () => { visualDiffDefault.name, visualDiffDefault.with(async (setup) => { await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '800px' }); - setup.withPostSetupAction(() => - setup.snapshotElement.querySelector('sbb-autocomplete-grid')!.open(), - ); + setup.withPostSetupAction(() => setup.snapshotElement.querySelector('input')!.focus()); }), ); }); diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts index d809b6b7e7..be4ba3d558 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts @@ -92,9 +92,7 @@ describe(`sbb-autocomplete-grid-option`, () => { visualDiffDefault.name, visualDiffDefault.with(async (setup) => { await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '400px' }); - setup.withPostSetupAction(() => - setup.snapshotElement.querySelector('sbb-autocomplete-grid')!.open(), - ); + setup.withPostSetupAction(() => setup.snapshotElement.querySelector('input')!.focus()); }), ); @@ -104,9 +102,7 @@ describe(`sbb-autocomplete-grid-option`, () => { await setup.withFixture(autocompleteTemplate({ ...defaultArgs, disabled: true }), { minHeight: '400px', }); - setup.withPostSetupAction(() => - setup.snapshotElement.querySelector('sbb-autocomplete-grid')!.open(), - ); + setup.withPostSetupAction(() => setup.snapshotElement.querySelector('input')!.focus()); }), ); }); diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts index 0d1fd0966a..47d957ab62 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts @@ -151,8 +151,6 @@ describe('sbb-autocomplete-grid', () => { `; const openAutocomplete = async (setup: VisualDiffSetupBuilder): Promise => { - const ac = setup.snapshotElement.querySelector('sbb-autocomplete-grid')!; - ac.open(); const input = setup.snapshotElement.querySelector('input')!; input.focus(); await sendKeys({ press: 'O' }); diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts index 2a52cdaad9..6929965949 100644 --- a/src/elements/autocomplete/autocomplete.visual.spec.ts +++ b/src/elements/autocomplete/autocomplete.visual.spec.ts @@ -110,8 +110,6 @@ describe('sbb-autocomplete', () => { `; const openAutocomplete = async (setup: VisualDiffSetupBuilder): Promise => { - const ac = setup.snapshotElement.querySelector('sbb-autocomplete')!; - ac.open(); const input = setup.snapshotElement.querySelector('input')!; input.focus(); await sendKeys({ press: 'O' }); diff --git a/src/elements/option/optgroup/optgroup.visual.spec.ts b/src/elements/option/optgroup/optgroup.visual.spec.ts index a50bdd2469..a1a715de75 100644 --- a/src/elements/option/optgroup/optgroup.visual.spec.ts +++ b/src/elements/option/optgroup/optgroup.visual.spec.ts @@ -101,9 +101,7 @@ describe(`sbb-optgroup`, () => { visualDiffDefault.name, visualDiffDefault.with(async (setup) => { await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '600px' }); - setup.withPostSetupAction(() => - setup.snapshotElement.querySelector('sbb-autocomplete')!.open(), - ); + setup.withPostSetupAction(() => setup.snapshotElement.querySelector('input')!.focus()); }), ); }); @@ -113,9 +111,11 @@ describe(`sbb-optgroup`, () => { visualDiffDefault.name, visualDiffDefault.with(async (setup) => { await setup.withFixture(selectTemplate(defaultArgs, false), { minHeight: '600px' }); - setup.withPostSetupAction(() => - setup.snapshotElement.querySelector('sbb-select')!.open(), - ); + setup.withPostSetupAction(() => { + const select = setup.snapshotElement.querySelector('sbb-select')!; + select.focus(); + select.open(); + }); }), ); @@ -123,9 +123,11 @@ describe(`sbb-optgroup`, () => { 'multiple', visualDiffDefault.with(async (setup) => { await setup.withFixture(selectTemplate(defaultArgs, true), { minHeight: '600px' }); - setup.withPostSetupAction(() => - setup.snapshotElement.querySelector('sbb-select')!.open(), - ); + setup.withPostSetupAction(() => { + const select = setup.snapshotElement.querySelector('sbb-select')!; + select.focus(); + select.open(); + }); }), ); }); diff --git a/src/elements/option/option/option.visual.spec.ts b/src/elements/option/option/option.visual.spec.ts index 3a2dbf269f..7c8f8dc5d6 100644 --- a/src/elements/option/option/option.visual.spec.ts +++ b/src/elements/option/option/option.visual.spec.ts @@ -107,9 +107,7 @@ describe(`sbb-option`, () => { visualDiffDefault.name, visualDiffDefault.with(async (setup) => { await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '400px' }); - setup.withPostSetupAction(() => - setup.snapshotElement.querySelector('sbb-autocomplete')!.open(), - ); + setup.withPostSetupAction(() => setup.snapshotElement.querySelector('input')!.focus()); }), ); }); @@ -119,9 +117,11 @@ describe(`sbb-option`, () => { visualDiffDefault.name, visualDiffDefault.with(async (setup) => { await setup.withFixture(selectTemplate(defaultArgs), { minHeight: '400px' }); - setup.withPostSetupAction(() => - setup.snapshotElement.querySelector('sbb-select')!.open(), - ); + setup.withPostSetupAction(() => { + const select = setup.snapshotElement.querySelector('sbb-select')!; + select.focus(); + select.open(); + }); }), ); }); diff --git a/src/elements/select/select.visual.spec.ts b/src/elements/select/select.visual.spec.ts index 462e6bdd2b..14a16aa6e4 100644 --- a/src/elements/select/select.visual.spec.ts +++ b/src/elements/select/select.visual.spec.ts @@ -107,6 +107,7 @@ describe('sbb-select', () => { ); setup.withPostSetupAction(() => { const select = setup.snapshotElement.querySelector('sbb-select')!; + select.focus(); select.open(); }); }), @@ -186,6 +187,7 @@ describe('sbb-select', () => { }); setup.withPostSetupAction(() => { const select = setup.snapshotElement.querySelector('sbb-select')!; + select.focus(); select.open(); }); }), @@ -203,6 +205,7 @@ describe('sbb-select', () => { ); setup.withPostSetupAction(() => { const select = setup.snapshotElement.querySelector('sbb-select')!; + select.focus(); select.open(); }); }), @@ -227,6 +230,7 @@ describe('sbb-select', () => { ); setup.withPostSetupAction(() => { const select = setup.snapshotElement.querySelector('sbb-select')!; + select.focus(); select.open(); }); }), @@ -244,6 +248,7 @@ describe('sbb-select', () => { ); setup.withPostSetupAction(() => { const select = setup.snapshotElement.querySelector('sbb-select')!; + select.focus(); select.open(); }); }), @@ -268,6 +273,7 @@ describe('sbb-select', () => { ); setup.withPostSetupAction(() => { const select = setup.snapshotElement.querySelector('sbb-select')!; + select.focus(); select.open(); }); }),