18017563598

Committed 25 Sep 2025 06:48PM UTC coverage: 97.916% (-0.09%) from 98.002%

Build # 18017563598

Build Type

push

github

Committed by

web-flow

Commit Message

chore: update playwright and @web/test-runner dependencies with comprehensive test refactoring (#5578)

This pull request represents a comprehensive update to testing infrastructure and dependencies across the entire Spectrum Web Components codebase. The changes include major dependency updates for Playwright and @web/test-runner packages, extensive test refactoring for improved reliability and maintainability, and enhanced CI/CD configurations.

Major Dependency Updates
Playwright:

Updated Docker image in CI from mcr.microsoft.com/playwright:v1.44.0 to v1.53.1
Updated @playwright/test version from ^1.44.0 to ^1.53.1
@web/test-runner Ecosystem:

Updated @web/test-runner from ^0.18.3 to ^0.20.2 across multiple packages
Updated @web/test-runner-junit-reporter from ^0.7.2 to ^0.8.0
Updated @web/test-runner-playwright from ^0.11.0 to ^0.11.1
Updated @web/test-runner-visual-regression from ^0.9.0 to ^0.10.0
Updated wireit from ^0.14.3 to ^0.14.12
Infrastructure Improvements
CI/CD Configuration:

Enhanced CircleCI configuration with updated Docker images and improved parallelism
Added new Chromium memory testing configuration (web-test-runner.config.ci-chromium-memory.js)
Updated GitHub Actions workflows for better coverage reporting
Added concurrency settings across all browser test configurations
ESLint and Code Quality:

Expanded ESLint coverage to include **/stories/*.ts files
Updated ESM import syntax from assert { type: 'json' } to with { type: 'json' }
Fixed import paths for visual regression commands
Dependency Management:

Added comprehensive patching system documentation in CONTRIBUTING.md
Created Yarn patches for @web/test-runner-playwright and @web/test-runner-visual-regression
Removed legacy patch-package dependency in favor of Yarn 4's built-in patching
Comprehensive Test Suite Refactoring (132 files affected)
Testing Helper Functions:

Refactored mouse interaction helpers: sendMouse → mouseClickOn, mouseClickAway, mouseMoveOver, mouseMoveAwa... (continued)

Run Details

5324 of 5638 branches covered (94.43%)

Branch coverage included in aggregate %.

91 of 93 new or added lines in 8 files covered. (97.85%)

204 existing lines in 31 files now uncovered.

34050 of 34574 relevant lines covered (98.48%)

628.74 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.83

/packages/button/src/Button.ts

/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
import {
    CSSResultArray,
    html,
    PropertyValues,
    SizedMixin,
    TemplateResult,
} from '@spectrum-web-components/base';
import { property } from '@spectrum-web-components/base/src/decorators.js';
import { ButtonBase } from './ButtonBase.js';
import buttonStyles from './button.css.js';
import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';

export type DeprecatedButtonVariants = 'cta' | 'overBackground';
export type ButtonStaticColors = 'white' | 'black';
export type ButtonVariants =
    | 'accent'
    | 'primary'
    | 'secondary'
    | 'negative'
    | ButtonStaticColors
    | DeprecatedButtonVariants;
export const VALID_VARIANTS = [
    'accent',
    'primary',
    'secondary',
    'negative',
    'white',
    'black',
];
export const VALID_STATIC_COLORS = ['white', 'black'];

export type ButtonTreatments = 'fill' | 'outline';

/**
 * @element sp-button
 *
 * @slot - text label of the Button
 * @slot icon - The icon to use for Button
 */
export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
    public static override get styles(): CSSResultArray {
        return [...super.styles, buttonStyles];
    }

    @property({ type: String, attribute: 'pending-label' })
    public pendingLabel = 'Pending';

    // Use this property to set the button into a pending state
    @property({ type: Boolean, reflect: true, attribute: true })
    public pending = false;

    public pendingStateController: PendingStateController<this>;

    /**
     * Initializes the `PendingStateController` for the Button component.
     * The `PendingStateController` manages the pending state of the Button.
     */
    constructor() {
        super();
        this.pendingStateController = new PendingStateController(this);
    }

    public override click(): void {
        if (this.pending) {
            return;
        }
        super.click();
    }

    /**
     * The visual variant to apply to this button.
     */
    @property()
    public get variant(): ButtonVariants {
        return this._variant;
    }
    public set variant(variant: ButtonVariants) {
        if (variant === this.variant) return;

        this.requestUpdate('variant', this.variant);
        switch (variant) {
            case 'cta':
                this._variant = 'accent';
                if (window.__swc.DEBUG) {
                    window.__swc.warn(
                        this,
                        `The "cta" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "variant='accent'" instead.`,
                        'https://opensource.adobe.com/spectrum-web-components/components/button/#variants',
                        { level: 'deprecation' }
                    );
                }
                break;
            case 'overBackground':
                this.removeAttribute('variant');
                this.staticColor = 'white';
                this.treatment = 'outline';
                if (window.__swc.DEBUG) {
                    window.__swc.warn(
                        this,
                        `The "overBackground" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "staticColor='white'" with "treatment='outline'" instead.`,
                        'https://opensource.adobe.com/spectrum-web-components/components/button',
                        { level: 'deprecation' }
                    );
                }
                return;
            case 'white':
                this.staticColor = 'white';
                if (window.__swc.DEBUG) {
                    window.__swc.warn(
                        this,
                        `The "white" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='white'" instead.`,
                        'https://opensource.adobe.com/spectrum-web-components/components/button/api',
                        { level: 'deprecation' }
                    );
                }
                return;
            case 'black':
                this.staticColor = 'black';
                if (window.__swc.DEBUG) {
                    window.__swc.warn(
                        this,
                        `The "black" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='black'" instead.`,
                        'https://opensource.adobe.com/spectrum-web-components/components/button/api',
                        { level: 'deprecation' }
                    );
                }
                return;
            case null:
                return;
            default:
                if (!VALID_VARIANTS.includes(variant)) {
                    this._variant = 'accent';
                } else {
                    this._variant = variant;
                }
                break;
        }
        this.setAttribute('variant', this.variant);
    }
    private _variant: ButtonVariants = 'accent';

    /**
     * The static color variant to use for this button.
     */
    @property({ reflect: true, attribute: 'static-color' })
    public staticColor?: 'black' | 'white';

    /**
     * The visual treatment to apply to this button.
     */
    @property({ reflect: true })
    public treatment: ButtonTreatments = 'fill';

    /**
     * Style this button to be less obvious
     */
    @property({ type: Boolean })
    public set quiet(quiet: boolean) {
        this.treatment = quiet ? 'outline' : 'fill';
    }

    /**
     * Disables text wrapping within the button component's label.
     * Please note that this option is not a part of the design specification
     * and should be used carefully, with consideration of this overflow behavior
     * and the readability of the button's content.
     */
    @property({ type: Boolean, attribute: 'no-wrap', reflect: true })
    public noWrap = false;

    public get quiet(): boolean {
        return this.treatment === 'outline';
    }

    protected override firstUpdated(changes: PropertyValues<this>): void {
        super.firstUpdated(changes);
        // There is no Spectrum design context for an `<sp-button>` without a variant
        // apply one manually when a consumer has not applied one themselves.

        if (!this.hasAttribute('variant')) {
            this.setAttribute('variant', this.variant);
        }
        if (this.pending) {
            this.pendingStateController.hostUpdated();
        }
    }

    protected override renderButton(): TemplateResult {
        return html`
            ${this.buttonContent}
            ${this.pendingStateController.renderPendingState()}
        `;
    }
}

1	/**	51✔
2	* Copyright 2025 Adobe. All rights reserved.	51✔
3	* This file is licensed to you under the Apache License, Version 2.0 (the "License");	51✔
4	* you may not use this file except in compliance with the License. You may obtain a copy	51✔
5	* of the License at http://www.apache.org/licenses/LICENSE-2.0	51✔
6	*	51✔
7	* Unless required by applicable law or agreed to in writing, software distributed under	51✔
8	* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS	51✔
9	* OF ANY KIND, either express or implied. See the License for the specific language	51✔
10	* governing permissions and limitations under the License.	51✔
11	*/	51✔
12	import {	51✔
13	CSSResultArray,	51✔
14	html,	51✔
15	PropertyValues,	51✔
16	SizedMixin,	51✔
17	TemplateResult,	51✔
18	} from '@spectrum-web-components/base';	51✔
19	import { property } from '@spectrum-web-components/base/src/decorators.js';	51✔
20	import { ButtonBase } from './ButtonBase.js';	51✔
21	import buttonStyles from './button.css.js';	51✔
22	import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';	51✔
23		51✔
24	export type DeprecatedButtonVariants = 'cta' \| 'overBackground';	51✔
25	export type ButtonStaticColors = 'white' \| 'black';	51✔
26	export type ButtonVariants =	51✔
27	\| 'accent'	51✔
28	\| 'primary'	51✔
29	\| 'secondary'	51✔
30	\| 'negative'	51✔
31	\| ButtonStaticColors	51✔
32	\| DeprecatedButtonVariants;	51✔
33	export const VALID_VARIANTS = [	51✔
34	'accent',	51✔
35	'primary',	51✔
36	'secondary',	51✔
37	'negative',	51✔
38	'white',	51✔
39	'black',	51✔
40	];	51✔
41	export const VALID_STATIC_COLORS = ['white', 'black'];	51✔
42		51✔
43	export type ButtonTreatments = 'fill' \| 'outline';	51✔
44		51✔
45	/**	51✔
46	* @element sp-button	51✔
47	*	51✔
48	* @slot - text label of the Button	51✔
49	* @slot icon - The icon to use for Button	51✔
50	*/	51✔
51	export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {	51✔
52	public static override get styles(): CSSResultArray {	51✔
53	return [...super.styles, buttonStyles];	51✔
54	}	51✔
55		51✔
56	@property({ type: String, attribute: 'pending-label' })	51✔
57	public pendingLabel = 'Pending';	51✔
58		51✔
59	// Use this property to set the button into a pending state	51✔
60	@property({ type: Boolean, reflect: true, attribute: true })	51✔
61	public pending = false;	51✔
62		51✔
63	public pendingStateController: PendingStateController<this>;	51✔
64		51✔
65	/**	51✔
66	* Initializes the `PendingStateController` for the Button component.	51✔
67	* The `PendingStateController` manages the pending state of the Button.	51✔
68	*/	51✔
69	constructor() {	51✔
70	super();	421✔
71	this.pendingStateController = new PendingStateController(this);	421✔
72	}	421✔
73		51✔
74	public override click(): void {	51✔
75	if (this.pending) {	100!
76	return;	×
77	}	×
78	super.click();	100✔
79	}	100✔
80		51✔
81	/**	51✔
82	* The visual variant to apply to this button.	51✔
83	*/	51✔
84	@property()	51✔
85	public get variant(): ButtonVariants {	51✔
86	return this._variant;	2,527✔
87	}	2,527✔
88	public set variant(variant: ButtonVariants) {	51✔
89	if (variant === this.variant) return;	463✔
90		150✔
91	this.requestUpdate('variant', this.variant);	150✔
92	switch (variant) {	150✔
93	case 'cta':	429✔
94	this._variant = 'accent';	1✔
95	if (window.__swc.DEBUG) {	1✔
96	window.__swc.warn(	1✔
97	this,	1✔
98	`The "cta" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "variant='accent'" instead.`,	1✔
99	'https://opensource.adobe.com/spectrum-web-components/components/button/#variants',	1✔
100	{ level: 'deprecation' }	1✔
101	);	1✔
102	}	1✔
103	break;	1✔
104	case 'overBackground':	463✔
105	this.removeAttribute('variant');	1✔
106	this.staticColor = 'white';	1✔
107	this.treatment = 'outline';	1✔
108	if (window.__swc.DEBUG) {	1✔
109	window.__swc.warn(	1✔
110	this,	1✔
111	`The "overBackground" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "staticColor='white'" with "treatment='outline'" instead.`,	1✔
112	'https://opensource.adobe.com/spectrum-web-components/components/button',	1✔
113	{ level: 'deprecation' }	1✔
114	);	1✔
115	}	1✔
116	return;	1✔
117	case 'white':	463✔
118	this.staticColor = 'white';	2✔
119	if (window.__swc.DEBUG) {	2✔
120	window.__swc.warn(	2✔
121	this,	2✔
122	`The "white" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='white'" instead.`,	2✔
123	'https://opensource.adobe.com/spectrum-web-components/components/button/api',	2✔
124	{ level: 'deprecation' }	2✔
125	);	2✔
126	}	2✔
127	return;	2✔
128	case 'black':	463✔
129	this.staticColor = 'black';	1✔
130	if (window.__swc.DEBUG) {	1✔
131	window.__swc.warn(	1✔
132	this,	1✔
133	`The "black" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='black'" instead.`,	1✔
134	'https://opensource.adobe.com/spectrum-web-components/components/button/api',	1✔
135	{ level: 'deprecation' }	1✔
136	);	1✔
137	}	1✔
138	return;	1✔
139	case null:	463!
UNCOV 140	return;	×
141	default:	463✔
142	if (!VALID_VARIANTS.includes(variant)) {	145✔
143	this._variant = 'accent';	1✔
144	} else {	144✔
145	this._variant = variant;	144✔
146	}	144✔
147	break;	145✔
148	}	463✔
149	this.setAttribute('variant', this.variant);	146✔
150	}	463✔
151	private _variant: ButtonVariants = 'accent';	51✔
152		51✔
153	/**	51✔
154	* The static color variant to use for this button.	51✔
155	*/	51✔
156	@property({ reflect: true, attribute: 'static-color' })	51✔
157	public staticColor?: 'black' \| 'white';	51✔
158		51✔
159	/**	51✔
160	* The visual treatment to apply to this button.	51✔
161	*/	51✔
162	@property({ reflect: true })	51✔
163	public treatment: ButtonTreatments = 'fill';	51✔
164		51✔
165	/**	51✔
166	* Style this button to be less obvious	51✔
167	*/	51✔
168	@property({ type: Boolean })	51✔
169	public set quiet(quiet: boolean) {	51✔
170	this.treatment = quiet ? 'outline' : 'fill';	2✔
171	}	2✔
172		51✔
173	/**	51✔
174	* Disables text wrapping within the button component's label.	51✔
175	* Please note that this option is not a part of the design specification	51✔
176	* and should be used carefully, with consideration of this overflow behavior	51✔
177	* and the readability of the button's content.	51✔
178	*/	51✔
179	@property({ type: Boolean, attribute: 'no-wrap', reflect: true })	51✔
180	public noWrap = false;	51✔
181		51✔
182	public get quiet(): boolean {	51✔
183	return this.treatment === 'outline';	425✔
184	}	425✔
185		51✔
186	protected override firstUpdated(changes: PropertyValues<this>): void {	51✔
187	super.firstUpdated(changes);	421✔
188	// There is no Spectrum design context for an `<sp-button>` without a variant	421✔
189	// apply one manually when a consumer has not applied one themselves.	421✔
190		421✔
191	if (!this.hasAttribute('variant')) {	421✔
192	this.setAttribute('variant', this.variant);	265✔
193	}	265✔
194	if (this.pending) {	421✔
195	this.pendingStateController.hostUpdated();	1✔
196	}	1✔
197	}	421✔
198		51✔
199	protected override renderButton(): TemplateResult {	51✔
200	return html`	544✔
201	${this.buttonContent}	544✔
202	${this.pendingStateController.renderPendingState()}	544✔
203	`;	544✔
204	}	544✔
205	}	51✔

adobe / spectrum-web-components / 18017563598

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous