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

95.52

/packages/button/src/ClearButton.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,
    SizedMixin,
    TemplateResult,
} from '@spectrum-web-components/base';
import { property } from '@spectrum-web-components/base/src/decorators.js';
import { StyledButton } from './StyledButton.js';
import buttonStyles from '@spectrum-web-components/clear-button/src/clear-button.css.js';
import '@spectrum-web-components/icons-ui/icons/sp-icon-cross75.js';
import '@spectrum-web-components/icons-ui/icons/sp-icon-cross100.js';
import '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';
import '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';
import crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';

const crossIcon: Record<string, () => TemplateResult> = {
    s: () => html`
        <sp-icon-cross75
            slot="icon"
            class="icon spectrum-UIIcon-Cross75"
        ></sp-icon-cross75>
    `,
    m: () => html`
        <sp-icon-cross100
            slot="icon"
            class="icon spectrum-UIIcon-Cross100"
        ></sp-icon-cross100>
    `,
    l: () => html`
        <sp-icon-cross200
            slot="icon"
            class="icon spectrum-UIIcon-Cross200"
        ></sp-icon-cross200>
    `,
    xl: () => html`
        <sp-icon-cross300
            slot="icon"
            class="icon spectrum-UIIcon-Cross300"
        ></sp-icon-cross300>
    `,
};

/**
 * @element sp-clear-button
 *
 * @slot - text label of the Clear Button
 */
export class ClearButton extends SizedMixin(StyledButton, {
    noDefaultSize: true,
}) {
    public static override get styles(): CSSResultArray {
        return [...super.styles, buttonStyles, crossMediumStyles];
    }

    @property({ type: Boolean, reflect: true })
    public quiet = false;

    /**
     * The visual variant to apply to this button.
     * @deprecated Use `static-color='white'` instead.
     */
    @property({ reflect: true })
    public set variant(variant: 'overBackground' | undefined) {
        const oldValue = this._variant;
        const oldStaticColor = this.staticColor;
        if (variant !== 'overBackground') {
            this.removeAttribute('variant');
            this._variant = undefined;
            this.staticColor = undefined;
            return;
        }

        this.setAttribute('variant', variant);
        this._variant = variant;
        // Set staticColor to white to reflect the updated and expected attribute
        this.staticColor = 'white';

        if (window.__swc.DEBUG) {
            window.__swc.warn(
                this,
                'The overBackground variant is deprecated. Please use `static-color="white"` instead.',
                'https://opensource.adobe.com/spectrum-web-components/components/clear-button/',
                { level: 'deprecation' }
            );
        }

        this.requestUpdate('variant', oldValue);
        this.requestUpdate('staticColor', oldStaticColor);
    }

    public get variant(): 'overBackground' | undefined {
        return this._variant;
    }

    private _variant: 'overBackground' | undefined;

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

    protected override get buttonContent(): TemplateResult[] {
        return [crossIcon[this.size]()];
    }

    protected override render(): TemplateResult {
        return html`
            <div class="fill">${super.render()}</div>
        `;
    }
}

1	/**	35✔
2	* Copyright 2025 Adobe. All rights reserved.	35✔
3	* This file is licensed to you under the Apache License, Version 2.0 (the "License");	35✔
4	* you may not use this file except in compliance with the License. You may obtain a copy	35✔
5	* of the License at http://www.apache.org/licenses/LICENSE-2.0	35✔
6	*	35✔
7	* Unless required by applicable law or agreed to in writing, software distributed under	35✔
8	* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS	35✔
9	* OF ANY KIND, either express or implied. See the License for the specific language	35✔
10	* governing permissions and limitations under the License.	35✔
11	*/	35✔
12		35✔
13	import {	35✔
14	CSSResultArray,	35✔
15	html,	35✔
16	SizedMixin,	35✔
17	TemplateResult,	35✔
18	} from '@spectrum-web-components/base';	35✔
19	import { property } from '@spectrum-web-components/base/src/decorators.js';	35✔
20	import { StyledButton } from './StyledButton.js';	35✔
21	import buttonStyles from '@spectrum-web-components/clear-button/src/clear-button.css.js';	35✔
22	import '@spectrum-web-components/icons-ui/icons/sp-icon-cross75.js';	35✔
23	import '@spectrum-web-components/icons-ui/icons/sp-icon-cross100.js';	35✔
24	import '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';	35✔
25	import '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';	35✔
26	import crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';	35✔
27		35✔
28	const crossIcon: Record<string, () => TemplateResult> = {	35✔
29	s: () => html`	35✔
30	<sp-icon-cross75	35✔
31	slot="icon"	35✔
32	class="icon spectrum-UIIcon-Cross75"	35✔
33	></sp-icon-cross75>	35✔
34	`,	35✔
35	m: () => html`	35✔
36	<sp-icon-cross100	35✔
37	slot="icon"	35✔
38	class="icon spectrum-UIIcon-Cross100"	35✔
39	></sp-icon-cross100>	35✔
40	`,	35✔
41	l: () => html`	35✔
42	<sp-icon-cross200	35✔
43	slot="icon"	35✔
44	class="icon spectrum-UIIcon-Cross200"	35✔
45	></sp-icon-cross200>	35✔
46	`,	35✔
47	xl: () => html`	35✔
48	<sp-icon-cross300	35✔
49	slot="icon"	35✔
50	class="icon spectrum-UIIcon-Cross300"	35✔
51	></sp-icon-cross300>	35✔
52	`,	35✔
53	};	35✔
54		35✔
55	/**	35✔
56	* @element sp-clear-button	35✔
57	*	35✔
58	* @slot - text label of the Clear Button	35✔
59	*/	35✔
60	export class ClearButton extends SizedMixin(StyledButton, {	35✔
61	noDefaultSize: true,	35✔
62	}) {	35✔
63	public static override get styles(): CSSResultArray {	44✔
64	return [...super.styles, buttonStyles, crossMediumStyles];	44✔
65	}	44✔
66		44✔
67	@property({ type: Boolean, reflect: true })	44✔
68	public quiet = false;	44✔
69		35✔
70	/**	35✔
71	* The visual variant to apply to this button.	35✔
72	* @deprecated Use `static-color='white'` instead.	35✔
73	*/	35✔
74	@property({ reflect: true })	35✔
75	public set variant(variant: 'overBackground' \| undefined) {	35✔
76	const oldValue = this._variant;	2✔
77	const oldStaticColor = this.staticColor;	2✔
78	if (variant !== 'overBackground') {	2!
UNCOV 79	this.removeAttribute('variant');	×
UNCOV 80	this._variant = undefined;	×
UNCOV 81	this.staticColor = undefined;	×
UNCOV 82	return;	×
UNCOV 83	}	×
84		2✔
85	this.setAttribute('variant', variant);	2✔
86	this._variant = variant;	2✔
87	// Set staticColor to white to reflect the updated and expected attribute	2✔
88	this.staticColor = 'white';	2✔
89		2✔
90	if (window.__swc.DEBUG) {	2✔
91	window.__swc.warn(	2✔
92	this,	2✔
93	'The overBackground variant is deprecated. Please use `static-color="white"` instead.',	2✔
94	'https://opensource.adobe.com/spectrum-web-components/components/clear-button/',	2✔
95	{ level: 'deprecation' }	2✔
96	);	2✔
97	}	2✔
98		2✔
99	this.requestUpdate('variant', oldValue);	2✔
100	this.requestUpdate('staticColor', oldStaticColor);	2✔
101	}	2✔
102		35✔
103	public get variant(): 'overBackground' \| undefined {	35✔
104	return this._variant;	50✔
105	}	50✔
106		35✔
107	private _variant: 'overBackground' \| undefined;	35✔
108		35✔
109	/**	35✔
110	* The visual variant to apply to this button.	35✔
111	*/	35✔
112	@property({ reflect: true, attribute: 'static-color' })	35✔
113	public staticColor: 'white' \| undefined;	35✔
114		35✔
115	protected override get buttonContent(): TemplateResult[] {	35✔
116	return [crossIcon[this.size]()];	44✔
117	}	44✔
118		35✔
119	protected override render(): TemplateResult {	35✔
120	return html`	44✔
121	<div class="fill">${super.render()}</div>	44✔
122	`;	44✔
123	}	44✔
124	}	35✔

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