diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json index de70568e5b64f..e14897a0e9b5b 100644 --- a/apps/vr-tests-web-components/package.json +++ b/apps/vr-tests-web-components/package.json @@ -12,9 +12,6 @@ "type-check": "tsc -p . --baseUrl . --noEmit", "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true" }, - "devDependencies": { - "@types/web": "^0.0.142" - }, "dependencies": { "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/vr-tests-web-components/tsconfig.json b/apps/vr-tests-web-components/tsconfig.json index e702905030d13..5d883fb3e5d65 100644 --- a/apps/vr-tests-web-components/tsconfig.json +++ b/apps/vr-tests-web-components/tsconfig.json @@ -8,7 +8,7 @@ "resolveJsonModule": true, "allowJs": true, "jsx": "react", - "types": ["jest", "node", "web"] + "types": ["jest", "node"] }, "include": ["./src", "./.storybook/*"], "files": ["./typings/html-react-parser/index.d.ts"] diff --git a/change/@fluentui-web-components-4594b9fa-9988-4133-a618-7ef4862061f2.json b/change/@fluentui-web-components-4594b9fa-9988-4133-a618-7ef4862061f2.json new file mode 100644 index 0000000000000..c22ebe86222ff --- /dev/null +++ b/change/@fluentui-web-components-4594b9fa-9988-4133-a618-7ef4862061f2.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "remove web types package and configuration", + "packageName": "@fluentui/web-components", + "email": "863023+radium-v@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/web-components/.storybook/tsconfig.json b/packages/web-components/.storybook/tsconfig.json index ea51024beda2f..78905f4f65971 100644 --- a/packages/web-components/.storybook/tsconfig.json +++ b/packages/web-components/.storybook/tsconfig.json @@ -4,7 +4,7 @@ "allowJs": true, "checkJs": true, "noEmit": true, - "types": ["node", "web"] + "types": ["node"] }, "include": ["*", "../public", "../src/**/*.stories.*"] } diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 969f3645e601c..03193e0d7f7f5 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -4,8 +4,6 @@ ```ts -/// - import { CaptureType } from '@microsoft/fast-element'; import { CSSDirective } from '@microsoft/fast-element'; import { Direction } from '@microsoft/fast-web-utilities'; @@ -118,7 +116,6 @@ export const accordionStyles: ElementStyles; export const accordionTemplate: ElementViewTemplate; // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag -// Warning: (ae-forgotten-export) The symbol "BaseAnchor" needs to be exported by the entry point index.d.ts // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AnchorButton" because one of its declarations is marked as @internal // // @public @@ -451,6 +448,30 @@ export class BaseAccordionItem extends FASTElement { id: string; } +// @public +export class BaseAnchor extends FASTElement { + constructor(); + // @internal + clickHandler(e: PointerEvent): boolean; + // (undocumented) + connectedCallback(): void; + // (undocumented) + disconnectedCallback(): void; + download?: string; + // @internal + elementInternals: ElementInternals; + // @internal + handleChange(source: any, propertyName: string): void; + href?: string; + hreflang?: string; + keydownHandler(e: KeyboardEvent): boolean | void; + ping?: string; + referrerpolicy?: string; + rel: string; + target?: AnchorTarget; + type?: string; +} + // @public export class BaseAvatar extends FASTElement { constructor(); @@ -2646,7 +2667,7 @@ export class Menu extends FASTElement { setComponent(): void; slottedMenuList: MenuList[]; slottedTriggers: HTMLElement[]; - toggleHandler: (e: Event | ToggleEvent) => void; + toggleHandler: (e: Event) => void; toggleMenu: () => void; triggerKeydownHandler: (e: KeyboardEvent) => boolean | void; } @@ -2728,7 +2749,7 @@ export class MenuItem extends FASTElement { // @internal (undocumented) submenu: HTMLElement | undefined; // @internal - toggleHandler: (e: ToggleEvent | Event) => void; + toggleHandler: (e: Event) => void; } // @internal @@ -2815,15 +2836,16 @@ export const MenuStyles: ElementStyles; export const MenuTemplate: ElementViewTemplate; // @public -export class ProgressBar extends BaseProgressBar { +class ProgressBar_2 extends BaseProgressBar { shape?: ProgressBarShape; shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined): void; thickness?: ProgressBarThickness; thicknessChanged(prev: ProgressBarThickness | undefined, next: ProgressBarThickness | undefined): void; } +export { ProgressBar_2 as ProgressBar } // @public -export const ProgressBarDefinition: FASTElementDefinition; +export const ProgressBarDefinition: FASTElementDefinition; // @public export const ProgressBarShape: { @@ -2840,7 +2862,7 @@ export const ProgressBarStyles: ElementStyles; // Warning: (ae-missing-release-tag) "template" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const ProgressBarTemplate: ElementViewTemplate; +export const ProgressBarTemplate: ElementViewTemplate; // @public export const ProgressBarThickness: { diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 8191915018784..58c4b40323e93 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -252,7 +252,6 @@ "devDependencies": { "@microsoft/fast-element": "2.0.0-beta.26", "@tensile-perf/web-components": "~0.2.0", - "@types/web": "^0.0.142", "@storybook/html": "7.6.20", "@storybook/html-webpack5": "7.6.20", "chromedriver": "^125.0.0" diff --git a/packages/web-components/src/accordion-item/accordion-item.spec.ts b/packages/web-components/src/accordion-item/accordion-item.spec.ts index dcc42cb82ea04..c504df0a12c7b 100644 --- a/packages/web-components/src/accordion-item/accordion-item.spec.ts +++ b/packages/web-components/src/accordion-item/accordion-item.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { AccordionItem } from './accordion-item.js'; test.describe('Accordion item', () => { diff --git a/packages/web-components/src/accordion/accordion.spec.ts b/packages/web-components/src/accordion/accordion.spec.ts index 9da06f9a2484f..26e9733fbedc4 100644 --- a/packages/web-components/src/accordion/accordion.spec.ts +++ b/packages/web-components/src/accordion/accordion.spec.ts @@ -1,6 +1,6 @@ import type { Locator } from '@playwright/test'; -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; test.describe('Accordion', () => { test.beforeEach(async ({ page }) => { diff --git a/packages/web-components/src/anchor-button/anchor-button.spec.ts b/packages/web-components/src/anchor-button/anchor-button.spec.ts index 079d82d42dd46..0c02e9a52d3cf 100644 --- a/packages/web-components/src/anchor-button/anchor-button.spec.ts +++ b/packages/web-components/src/anchor-button/anchor-button.spec.ts @@ -1,6 +1,6 @@ import { spinalCase } from '@microsoft/fast-web-utilities'; -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; const proxyAttributes = { href: 'href', diff --git a/packages/web-components/src/avatar/avatar.spec.ts b/packages/web-components/src/avatar/avatar.spec.ts index e2e10cdb8151a..e87a47ea52e98 100644 --- a/packages/web-components/src/avatar/avatar.spec.ts +++ b/packages/web-components/src/avatar/avatar.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Avatar } from './avatar.js'; import { AvatarAppearance, AvatarColor, AvatarSize } from './avatar.options.js'; @@ -139,7 +139,7 @@ test.describe('Avatar Component', () => { test('default color should be neutral', async ({ page }) => { const element = page.locator('fluent-avatar'); - expect(await element.evaluate((node: Avatar) => node.elementInternals.states.has('neutral'))).toBe(true); + await expect(element).toHaveCustomState('neutral'); }); test('should add a custom state of `brand` when `brand is provided as the color', async ({ page }) => { @@ -149,7 +149,7 @@ test.describe('Avatar Component', () => { `); - expect(await element.evaluate((node: Avatar) => node.elementInternals.states.has('brand'))).toBe(true); + await expect(element).toHaveCustomState('brand'); }); test('should prioritize color derivation from colorId over name when set to "colorful"', async ({ page }) => { @@ -159,7 +159,7 @@ test.describe('Avatar Component', () => { `); - expect(await element.evaluate((node: Avatar) => node.elementInternals.states.has('pumpkin'))).toBe(true); + await expect(element).toHaveCustomState('pumpkin'); }); test(`should set the color attribute on the internal control`, async ({ page }) => { diff --git a/packages/web-components/src/badge/badge.spec.ts b/packages/web-components/src/badge/badge.spec.ts index a4b75f9a93325..9482c86f25bda 100644 --- a/packages/web-components/src/badge/badge.spec.ts +++ b/packages/web-components/src/badge/badge.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Badge } from './badge.js'; test.describe('Badge component', () => { diff --git a/packages/web-components/src/button/button.spec.ts b/packages/web-components/src/button/button.spec.ts index 116b6e826d43c..7348cb470abc5 100644 --- a/packages/web-components/src/button/button.spec.ts +++ b/packages/web-components/src/button/button.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; test.describe('Button', () => { test.beforeEach(async ({ page }) => { diff --git a/packages/web-components/src/checkbox/checkbox.spec.ts b/packages/web-components/src/checkbox/checkbox.spec.ts index 64fae184f17a6..1d945a1f09bd4 100644 --- a/packages/web-components/src/checkbox/checkbox.spec.ts +++ b/packages/web-components/src/checkbox/checkbox.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Checkbox } from './checkbox.js'; test.describe('Checkbox', () => { @@ -50,21 +50,21 @@ test.describe('Checkbox', () => { node.shape = 'circular'; }); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('circular'))).toBe(true); + await expect(element).toHaveCustomState('circular'); await element.evaluate((node: Checkbox) => { node.shape = 'square'; }); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('circular'))).toBe(false); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('square'))).toBe(true); + await expect(element).not.toHaveCustomState('circular'); + await expect(element).toHaveCustomState('square'); await element.evaluate((node: Checkbox) => { node.shape = undefined; }); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('circular'))).toBe(false); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('square'))).toBe(false); + await expect(element).not.toHaveCustomState('circular'); + await expect(element).not.toHaveCustomState('square'); }); test('should set and retrieve the `size` property correctly', async ({ page }) => { @@ -110,21 +110,21 @@ test.describe('Checkbox', () => { node.size = 'medium'; }); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('medium'))).toBe(true); + await expect(element).toHaveCustomState('medium'); await element.evaluate((node: Checkbox) => { node.size = 'large'; }); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('medium'))).toBe(false); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('large'))).toBe(true); + await expect(element).not.toHaveCustomState('medium'); + await expect(element).toHaveCustomState('large'); await element.evaluate((node: Checkbox) => { node.size = undefined; }); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('medium'))).toBe(false); - expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('large'))).toBe(false); + await expect(element).not.toHaveCustomState('medium'); + await expect(element).not.toHaveCustomState('large'); }); test('should have a role of `checkbox`', async ({ page }) => { diff --git a/packages/web-components/src/counter-badge/counter-badge.spec.ts b/packages/web-components/src/counter-badge/counter-badge.spec.ts index e98c092754dd3..dada9b854fd54 100644 --- a/packages/web-components/src/counter-badge/counter-badge.spec.ts +++ b/packages/web-components/src/counter-badge/counter-badge.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { CounterBadge } from './counter-badge.js'; import { CounterBadgeAppearance, @@ -188,7 +188,7 @@ test.describe('CounterBadge component', () => { await expect(element).toHaveJSProperty('shape', shape); - expect(await element.evaluate((node, shape) => node.matches(`:state(${shape})`), shape)).toEqual(true); + await expect(element).toHaveCustomState(shape); }); } @@ -206,7 +206,7 @@ test.describe('CounterBadge component', () => { await expect(element).toHaveJSProperty('color', color); - expect(await element.evaluate((node, color) => node.matches(`:state(${color})`), color)).toEqual(true); + await expect(element).toHaveCustomState(color); }); } @@ -222,7 +222,7 @@ test.describe('CounterBadge component', () => { await expect(element).toHaveJSProperty('size', size); - expect(await element.evaluate((node, size) => node.matches(`:state(${size})`), size)).toEqual(true); + await expect(element).toHaveCustomState(size); }); } @@ -244,9 +244,7 @@ test.describe('CounterBadge component', () => { await expect(element).toHaveJSProperty('appearance', appearance); - expect(await element.evaluate((node, appearance) => node.matches(`:state(${appearance})`), appearance)).toEqual( - true, - ); + await expect(element).toHaveCustomState(appearance); }); } }); diff --git a/packages/web-components/src/dialog-body/dialog-body.spec.ts b/packages/web-components/src/dialog-body/dialog-body.spec.ts index 5367481096e06..c791aa6dce0e6 100644 --- a/packages/web-components/src/dialog-body/dialog-body.spec.ts +++ b/packages/web-components/src/dialog-body/dialog-body.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Dialog } from '../dialog/dialog.js'; import type { DialogBody } from './dialog-body.js'; diff --git a/packages/web-components/src/divider/divider.spec.ts b/packages/web-components/src/divider/divider.spec.ts index 3b432d0ce4aed..bd0d7ab853d02 100644 --- a/packages/web-components/src/divider/divider.spec.ts +++ b/packages/web-components/src/divider/divider.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import { Divider } from './divider.js'; test.describe('Divider', () => { @@ -77,15 +77,15 @@ test.describe('Divider', () => { node.orientation = 'vertical'; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('vertical'))).toBe(true); + await expect(element).toHaveCustomState('vertical'); await element.evaluate((node: Divider) => { node.orientation = 'horizontal'; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('vertical'))).toBe(false); + await expect(element).not.toHaveCustomState('vertical'); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('horizontal'))).toBe(true); + await expect(element).toHaveCustomState('horizontal'); }); test('should initialize to the provided value attribute if set post-connection', async ({ page }) => { @@ -150,23 +150,23 @@ test.describe('Divider', () => { node.appearance = 'strong'; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('strong'))).toBe(true); + await expect(element).toHaveCustomState('strong'); await element.evaluate((node: Divider) => { node.appearance = 'brand'; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('strong'))).toBe(false); + await expect(element).not.toHaveCustomState('strong'); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('brand'))).toBe(true); + await expect(element).toHaveCustomState('brand'); await element.evaluate((node: Divider) => { node.appearance = 'subtle'; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('brand'))).toBe(false); + await expect(element).not.toHaveCustomState('brand'); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('subtle'))).toBe(true); + await expect(element).toHaveCustomState('subtle'); }); test('should add a custom state of `inset` when the value is true', async ({ page }) => { @@ -176,13 +176,13 @@ test.describe('Divider', () => { node.inset = true; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('inset'))).toBe(true); + await expect(element).toHaveCustomState('inset'); await element.evaluate((node: Divider) => { node.inset = false; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('inset'))).toBe(false); + await expect(element).not.toHaveCustomState('inset'); }); test('should add a custom state matching the `align-content` attribute value when provided', async ({ page }) => { @@ -192,22 +192,22 @@ test.describe('Divider', () => { node.alignContent = 'start'; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('align-start'))).toBe(true); + await expect(element).toHaveCustomState('align-start'); await element.evaluate((node: Divider) => { node.alignContent = 'end'; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('align-start'))).toBe(false); + await expect(element).not.toHaveCustomState('align-start'); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('align-end'))).toBe(true); + await expect(element).toHaveCustomState('align-end'); await element.evaluate((node: Divider) => { node.alignContent = undefined; }); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('align-start'))).toBe(false); + await expect(element).not.toHaveCustomState('align-start'); - expect(await element.evaluate((node: Divider) => node.elementInternals.states.has('align-end'))).toBe(false); + await expect(element).not.toHaveCustomState('align-end'); }); }); diff --git a/packages/web-components/src/field/field.spec.ts b/packages/web-components/src/field/field.spec.ts index d713a678cb8b2..d661608b8a2e4 100644 --- a/packages/web-components/src/field/field.spec.ts +++ b/packages/web-components/src/field/field.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import { TextInput } from '../index.js'; import type { Field } from './field.js'; @@ -20,7 +20,7 @@ test.describe('Field', () => { `); await test.step('should set the `disabled` state when the input is disabled', async () => { - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('disabled'))).toBe(true); + await expect(element).toHaveCustomState('disabled'); }); await test.step('should remove the `disabled` state when the input is enabled', async () => { @@ -28,7 +28,7 @@ test.describe('Field', () => { node.querySelector('input')?.removeAttribute('disabled'); }); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('disabled'))).toBe(false); + await expect(element).not.toHaveCustomState('disabled'); }); }); @@ -42,7 +42,7 @@ test.describe('Field', () => { `); await test.step('should set the `required` state when the input is required', async () => { - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('required'))).toBe(true); + await expect(element).toHaveCustomState('required'); }); await test.step('should remove the `required` state when the input is not required', async () => { @@ -50,7 +50,7 @@ test.describe('Field', () => { node.querySelector('input')?.removeAttribute('required'); }); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('required'))).toBe(false); + await expect(element).not.toHaveCustomState('required'); }); }); @@ -64,7 +64,7 @@ test.describe('Field', () => { `); await test.step('should set the `readonly` state when the input is readonly', async () => { - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('readonly'))).toBe(true); + await expect(element).toHaveCustomState('readonly'); }); await test.step('should remove the `readonly` state when the input is not readonly', async () => { @@ -72,7 +72,7 @@ test.describe('Field', () => { node.querySelector('input')?.removeAttribute('readonly'); }); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('readonly'))).toBe(false); + await expect(element).not.toHaveCustomState('readonly'); }); }); @@ -94,7 +94,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('value-missing'))).toBe(false); + await expect(element).not.toHaveCustomState('value-missing'); await expect(message).toBeHidden(); @@ -102,7 +102,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('value-missing'))).toBe(true); + await expect(element).toHaveCustomState('value-missing'); await expect(message).toBeVisible(); }); @@ -125,7 +125,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('pattern-mismatch'))).toBe(false); + await expect(element).not.toHaveCustomState('pattern-mismatch'); await expect(message).toBeHidden(); @@ -133,7 +133,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('pattern-mismatch'))).toBe(true); + await expect(element).toHaveCustomState('pattern-mismatch'); await expect(message).toBeVisible(); }); @@ -156,7 +156,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('too-short'))).toBe(false); + await expect(element).not.toHaveCustomState('too-short'); await expect(message).toBeHidden(); @@ -164,7 +164,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('too-short'))).toBe(true); + await expect(element).toHaveCustomState('too-short'); await expect(message).toBeVisible(); }); @@ -187,7 +187,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('too-long'))).toBe(false); + await expect(element).not.toHaveCustomState('too-long'); await expect(message).toBeHidden(); @@ -204,7 +204,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('too-long'))).toBe(true); + await expect(element).toHaveCustomState('too-long'); await expect(message).toBeVisible(); }); @@ -227,7 +227,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('range-underflow'))).toBe(false); + await expect(element).not.toHaveCustomState('range-underflow'); await expect(message).toBeHidden(); @@ -235,7 +235,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('range-underflow'))).toBe(true); + await expect(element).toHaveCustomState('range-underflow'); await expect(message).toBeVisible(); }); @@ -258,7 +258,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('range-overflow'))).toBe(false); + await expect(element).not.toHaveCustomState('range-overflow'); await expect(message).toBeHidden(); @@ -266,7 +266,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('range-overflow'))).toBe(true); + await expect(element).toHaveCustomState('range-overflow'); await expect(message).toBeVisible(); }); @@ -289,7 +289,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('step-mismatch'))).toBe(false); + await expect(element).not.toHaveCustomState('step-mismatch'); await expect(message).toBeHidden(); @@ -297,7 +297,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('step-mismatch'))).toBe(true); + await expect(element).toHaveCustomState('step-mismatch'); await expect(message).toBeVisible(); }); @@ -320,7 +320,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('type-mismatch'))).toBe(false); + await expect(element).not.toHaveCustomState('type-mismatch'); await expect(message).toBeHidden(); @@ -328,7 +328,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('type-mismatch'))).toBe(true); + await expect(element).toHaveCustomState('type-mismatch'); await expect(message).toBeVisible(); }); @@ -356,7 +356,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('custom-error'))).toBe(true); + await expect(element).toHaveCustomState('custom-error'); await expect(message).toBeVisible(); @@ -369,7 +369,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('custom-error'))).toBe(false); + await expect(element).not.toHaveCustomState('custom-error'); await expect(message).toBeHidden(); }); @@ -388,7 +388,7 @@ test.describe('Field', () => { `); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('bad-input'))).toBe(false); + await expect(element).not.toHaveCustomState('bad-input'); await expect(message).toBeHidden(); @@ -397,7 +397,7 @@ test.describe('Field', () => { node.reportValidity(); }); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('bad-input'))).toBe(true); + await expect(element).toHaveCustomState('bad-input'); await expect(message).toBeVisible(); }); @@ -420,7 +420,7 @@ test.describe('Field', () => { await input.dispatchEvent('change'); - expect(await element.evaluate((node: Field) => node.elementInternals.states.has('valid'))).toBe(true); + await expect(element).toHaveCustomState('valid'); await expect(message).toBeVisible(); }); diff --git a/packages/web-components/src/image/image.spec.ts b/packages/web-components/src/image/image.spec.ts index 9f8afbb237f23..5ff754a011e07 100644 --- a/packages/web-components/src/image/image.spec.ts +++ b/packages/web-components/src/image/image.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Image } from './image.js'; test.describe('Image', () => { @@ -34,13 +34,13 @@ test.describe('Image', () => { node.block = true; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('block'))).toBe(true); + await expect(element).toHaveCustomState('block'); await element.evaluate((node: Image) => { node.block = false; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('block'))).toBe(false); + await expect(element).not.toHaveCustomState('block'); }); test('should initialize to the `bordered` attribute', async ({ page }) => { @@ -68,13 +68,13 @@ test.describe('Image', () => { node.bordered = true; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('bordered'))).toBe(true); + await expect(element).toHaveCustomState('bordered'); await element.evaluate((node: Image) => { node.bordered = false; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('bordered'))).toBe(false); + await expect(element).not.toHaveCustomState('bordered'); }); test('should initialize to the `shadow` attribute', async ({ page }) => { @@ -102,13 +102,13 @@ test.describe('Image', () => { node.shadow = true; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('shadow'))).toBe(true); + await expect(element).toHaveCustomState('shadow'); await element.evaluate((node: Image) => { node.shadow = false; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('shadow'))).toBe(false); + await expect(element).not.toHaveCustomState('shadow'); }); test('should initialize to the `fit` attribute', async ({ page }) => { @@ -154,23 +154,23 @@ test.describe('Image', () => { node.fit = 'contain'; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('fit-contain'))).toBe(true); + await expect(element).toHaveCustomState('fit-contain'); await element.evaluate((node: Image) => { node.fit = 'none'; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('fit-contain'))).toBe(false); + await expect(element).not.toHaveCustomState('fit-contain'); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('fit-none'))).toBe(true); + await expect(element).toHaveCustomState('fit-none'); await element.evaluate((node: Image) => { node.fit = 'cover'; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('fit-none'))).toBe(false); + await expect(element).not.toHaveCustomState('fit-none'); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('fit-cover'))).toBe(true); + await expect(element).toHaveCustomState('fit-cover'); }); test('should initialize to the `shape` attribute', async ({ page }) => { @@ -204,32 +204,32 @@ test.describe('Image', () => { node.shape = 'circular'; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('circular'))).toBe(true); + await expect(element).toHaveCustomState('circular'); await element.evaluate((node: Image) => { node.shape = 'rounded'; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('circular'))).toBe(false); + await expect(element).not.toHaveCustomState('circular'); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('rounded'))).toBe(true); + await expect(element).toHaveCustomState('rounded'); await element.evaluate((node: Image) => { node.shape = 'square'; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('rounded'))).toBe(false); + await expect(element).not.toHaveCustomState('rounded'); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('square'))).toBe(true); + await expect(element).toHaveCustomState('square'); await element.evaluate((node: Image) => { node.shape = undefined; }); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('rounded'))).toBe(false); + await expect(element).not.toHaveCustomState('rounded'); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('square'))).toBe(false); + await expect(element).not.toHaveCustomState('square'); - expect(await element.evaluate((node: Image) => node.elementInternals.states.has('circular'))).toBe(false); + await expect(element).not.toHaveCustomState('circular'); }); }); diff --git a/packages/web-components/src/label/label.spec.ts b/packages/web-components/src/label/label.spec.ts index 0ccf6a03fc77a..441a0a2cfd3a5 100644 --- a/packages/web-components/src/label/label.spec.ts +++ b/packages/web-components/src/label/label.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Label } from './label.js'; test.describe('Label', () => { @@ -20,7 +20,7 @@ test.describe('Label', () => { await expect(element).toHaveJSProperty('size', 'small'); - expect(await element.evaluate((node: Label) => node.elementInternals.states.has('small'))).toBe(true); + await expect(element).toHaveCustomState('small'); await element.evaluate((node: Label) => { node.size = 'medium'; @@ -30,9 +30,9 @@ test.describe('Label', () => { await expect(element).toHaveJSProperty('size', 'medium'); - expect(await element.evaluate((node: Label) => node.elementInternals.states.has('small'))).toBe(false); + await expect(element).not.toHaveCustomState('small'); - expect(await element.evaluate((node: Label) => node.elementInternals.states.has('medium'))).toBe(true); + await expect(element).toHaveCustomState('medium'); await element.evaluate((node: Label) => { node.size = 'large'; @@ -42,9 +42,9 @@ test.describe('Label', () => { await expect(element).toHaveJSProperty('size', 'large'); - expect(await element.evaluate((node: Label) => node.elementInternals.states.has('medium'))).toBe(false); + await expect(element).not.toHaveCustomState('medium'); - expect(await element.evaluate((node: Label) => node.elementInternals.states.has('large'))).toBe(true); + await expect(element).toHaveCustomState('large'); }); test('should reflect weight attribute', async ({ page }) => { @@ -58,7 +58,7 @@ test.describe('Label', () => { await expect(element).toHaveJSProperty('weight', 'regular'); - expect(await element.evaluate((node: Label) => node.elementInternals.states.has('regular'))).toBe(true); + await expect(element).toHaveCustomState('regular'); await element.evaluate((node: Label) => { node.weight = 'semibold'; @@ -68,9 +68,9 @@ test.describe('Label', () => { await expect(element).toHaveJSProperty('weight', 'semibold'); - expect(await element.evaluate((node: Label) => node.elementInternals.states.has('regular'))).toBe(false); + await expect(element).not.toHaveCustomState('regular'); - expect(await element.evaluate((node: Label) => node.elementInternals.states.has('semibold'))).toBe(true); + await expect(element).toHaveCustomState('semibold'); }); test('should reflect disabled attribute', async ({ page }) => { @@ -84,7 +84,7 @@ test.describe('Label', () => { await expect(element).toHaveJSProperty('disabled', true); - expect(await element.evaluate((node: Label) => node.elementInternals.states.has('disabled'))).toBe(true); + await expect(element).toHaveCustomState('disabled'); }); test('should reflect required attribute and show asterisk', async ({ page }) => { diff --git a/packages/web-components/src/link/link.spec.ts b/packages/web-components/src/link/link.spec.ts index c8d46aee141bf..06becb0bf1fc7 100644 --- a/packages/web-components/src/link/link.spec.ts +++ b/packages/web-components/src/link/link.spec.ts @@ -1,6 +1,6 @@ import { spinalCase } from '@microsoft/fast-web-utilities'; -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import { Link } from './link.js'; const proxyAttributes = { @@ -64,13 +64,13 @@ test.describe('Link', () => { node.appearance = 'subtle'; }); - expect(await element.evaluate((node: Link) => node.elementInternals.states.has('subtle'))).toBe(true); + await expect(element).toHaveCustomState('subtle'); await element.evaluate((node: Link) => { node.appearance = undefined; }); - expect(await element.evaluate((node: Link) => node.elementInternals.states.has('subtle'))).toBe(false); + await expect(element).not.toHaveCustomState('subtle'); }); test('should add a custom state of `inline` when true', async ({ page }) => { @@ -80,12 +80,12 @@ test.describe('Link', () => { node.inline = true; }); - expect(await element.evaluate((node: Link) => node.elementInternals.states.has('inline'))).toBe(true); + await expect(element).toHaveCustomState('inline'); await element.evaluate((node: Link) => { node.inline = false; }); - expect(await element.evaluate((node: Link) => node.elementInternals.states.has('inline'))).toBe(false); + await expect(element).not.toHaveCustomState('inline'); }); }); diff --git a/packages/web-components/src/menu-item/menu-item.template.ts b/packages/web-components/src/menu-item/menu-item.template.ts index 0bd4204994718..dc85ee5215b48 100644 --- a/packages/web-components/src/menu-item/menu-item.template.ts +++ b/packages/web-components/src/menu-item/menu-item.template.ts @@ -18,7 +18,9 @@ export function menuItemTemplate(options: MenuItemOptions = @click="${(x, c) => x.handleMenuItemClick(c.event as MouseEvent)}" @mouseover="${(x, c) => x.handleMouseOver(c.event as MouseEvent)}" @mouseout="${(x, c) => x.handleMouseOut(c.event as MouseEvent)}" - @toggle="${(x, c) => x.toggleHandler(c.event as ToggleEvent)}" + @toggle="${(x, c) => + // @ts-expect-error - Baseline 2024 + x.toggleHandler(c.event as ToggleEvent)}" > ${staticallyCompose(options.indicator)} ${startSlotTemplate(options)} diff --git a/packages/web-components/src/menu-item/menu-item.ts b/packages/web-components/src/menu-item/menu-item.ts index b3ba0b3fe9808..9e4ffb34bfb09 100644 --- a/packages/web-components/src/menu-item/menu-item.ts +++ b/packages/web-components/src/menu-item/menu-item.ts @@ -1,11 +1,11 @@ import { attr, ElementsFilter, FASTElement, observable } from '@microsoft/fast-element'; import { keyArrowLeft, keyArrowRight, keyEnter, keySpace } from '@microsoft/fast-web-utilities'; -import type { StaticallyComposableHTML } from '../utils/template-helpers.js'; -import { toggleState } from '../utils/element-internals.js'; +import { MenuList } from '../menu-list/menu-list.js'; import type { StartEndOptions } from '../patterns/start-end.js'; import { StartEnd } from '../patterns/start-end.js'; import { applyMixins } from '../utils/apply-mixins.js'; -import { MenuList } from '../menu-list/menu-list.js'; +import { toggleState } from '../utils/element-internals.js'; +import type { StaticallyComposableHTML } from '../utils/template-helpers.js'; import { MenuItemRole, roleForMenuItem } from './menu-item.options.js'; export type MenuItemColumnCount = 0 | 1 | 2; @@ -183,6 +183,7 @@ export class MenuItem extends FASTElement { case keyArrowRight: //open/focus on submenu if (!this.disabled) { + // @ts-expect-error - Baseline 2024 this.submenu?.togglePopover(true); this.submenu?.focus(); } @@ -192,6 +193,7 @@ export class MenuItem extends FASTElement { case keyArrowLeft: //close submenu if (this.parentElement?.hasAttribute('popover')) { + // @ts-expect-error - Baseline 2024 this.parentElement.togglePopover(false); // focus the menu item containing the submenu this.parentElement.parentElement?.focus(); @@ -222,7 +224,7 @@ export class MenuItem extends FASTElement { if (this.disabled) { return false; } - + // @ts-expect-error - Baseline 2024 this.submenu?.togglePopover(true); return false; }; @@ -234,7 +236,7 @@ export class MenuItem extends FASTElement { if (this.contains(document.activeElement)) { return false; } - + // @ts-expect-error - Baseline 2024 this.submenu?.togglePopover(false); return false; @@ -244,12 +246,14 @@ export class MenuItem extends FASTElement { * Setup required ARIA on open/close * @internal */ - public toggleHandler = (e: ToggleEvent | Event): void => { + public toggleHandler = (e: Event): void => { + // @ts-expect-error - Baseline 2024 if (e instanceof ToggleEvent && e.newState === 'open') { this.setAttribute('tabindex', '-1'); this.elementInternals.ariaExpanded = 'true'; this.setSubmenuPosition(); } + // @ts-expect-error - Baseline 2024 if (e instanceof ToggleEvent && e.newState === 'closed') { this.elementInternals.ariaExpanded = 'false'; this.setAttribute('tabindex', '0'); @@ -271,6 +275,7 @@ export class MenuItem extends FASTElement { case MenuItemRole.menuitem: if (!!this.submenu) { + // @ts-expect-error - Baseline 2024 this.submenu.togglePopover(true); this.submenu.focus(); break; diff --git a/packages/web-components/src/menu-list/menu-list.spec.ts b/packages/web-components/src/menu-list/menu-list.spec.ts index b2d6fdeffadac..d4dcf9cd0447e 100644 --- a/packages/web-components/src/menu-list/menu-list.spec.ts +++ b/packages/web-components/src/menu-list/menu-list.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import { MenuItemRole } from '../menu-item/menu-item.options.js'; test.describe('Menu', () => { diff --git a/packages/web-components/src/menu/menu.spec.ts b/packages/web-components/src/menu/menu.spec.ts index a03c39edd3b98..87aa9a9af1770 100644 --- a/packages/web-components/src/menu/menu.spec.ts +++ b/packages/web-components/src/menu/menu.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Menu } from './menu.js'; test.describe('Menu', () => { diff --git a/packages/web-components/src/menu/menu.ts b/packages/web-components/src/menu/menu.ts index 30d9f7e668986..86f4328014a3c 100644 --- a/packages/web-components/src/menu/menu.ts +++ b/packages/web-components/src/menu/menu.ts @@ -145,6 +145,7 @@ export class Menu extends FASTElement { * @public */ public toggleMenu = () => { + // @ts-expect-error - Baseline 2024 this._menuList?.togglePopover(!this._open); }; @@ -161,7 +162,7 @@ export class Menu extends FASTElement { ) { return; } - + // @ts-expect-error - Baseline 2024 this._menuList?.togglePopover(false); if (this.closeOnScroll) { @@ -174,6 +175,7 @@ export class Menu extends FASTElement { * @public */ public openMenu = (e?: Event) => { + // @ts-expect-error - Baseline 2024 this._menuList?.togglePopover(true); if (e && this.openOnContext) { @@ -211,8 +213,10 @@ export class Menu extends FASTElement { * @param e - the event * @returns void */ - public toggleHandler = (e: Event | ToggleEvent): void => { - if (e instanceof ToggleEvent) { + public toggleHandler = (e: Event): void => { + // @ts-expect-error - Baseline 2024 + if (e.type === 'toggle' && e.newState) { + // @ts-expect-error - Baseline 2024 const newState = e.newState === 'open' ? true : false; this._trigger?.setAttribute('aria-expanded', `${newState}`); this._open = newState; diff --git a/packages/web-components/src/message-bar/message-bar.integration.spec.ts b/packages/web-components/src/message-bar/message-bar.integration.spec.ts index 34e1a747b5e95..3c8a00e78632c 100644 --- a/packages/web-components/src/message-bar/message-bar.integration.spec.ts +++ b/packages/web-components/src/message-bar/message-bar.integration.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { MessageBar } from './message-bar.js'; test.describe('Message Bar', () => { @@ -22,31 +22,31 @@ test.describe('Message Bar', () => { }); await expect(element).toHaveJSProperty('intent', 'success'); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('success'))).toBe(true); + await expect(element).toHaveCustomState('success'); await element.evaluate((node: MessageBar) => { node.intent = 'warning'; }); await expect(element).toHaveJSProperty('intent', 'warning'); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('success'))).toBe(false); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('warning'))).toBe(true); + await expect(element).not.toHaveCustomState('success'); + await expect(element).toHaveCustomState('warning'); await element.evaluate((node: MessageBar) => { node.intent = 'error'; }); await expect(element).toHaveJSProperty('intent', 'error'); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('warning'))).toBe(false); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('error'))).toBe(true); + await expect(element).not.toHaveCustomState('warning'); + await expect(element).toHaveCustomState('error'); await element.evaluate((node: MessageBar) => { node.intent = 'info'; }); await expect(element).toHaveJSProperty('intent', 'info'); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('error'))).toBe(false); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('info'))).toBe(true); + await expect(element).not.toHaveCustomState('error'); + await expect(element).toHaveCustomState('info'); }); test('should set and retrieve the `shape` property correctly', async ({ page }) => { @@ -57,15 +57,15 @@ test.describe('Message Bar', () => { }); await expect(element).toHaveJSProperty('shape', 'square'); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('square'))).toBe(true); + await expect(element).toHaveCustomState('square'); await element.evaluate((node: MessageBar) => { node.shape = 'rounded'; }); await expect(element).toHaveJSProperty('shape', 'rounded'); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('square'))).toBe(false); - expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('rounded'))).toBe(true); + await expect(element).not.toHaveCustomState('square'); + await expect(element).toHaveCustomState('rounded'); }); test('should set and retrieve the `layout` property correctly', async ({ page }) => { diff --git a/packages/web-components/src/progress-bar/progress-bar.spec.ts b/packages/web-components/src/progress-bar/progress-bar.spec.ts index 1b5a700a38114..bf5b2e9a421c4 100644 --- a/packages/web-components/src/progress-bar/progress-bar.spec.ts +++ b/packages/web-components/src/progress-bar/progress-bar.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { ProgressBar } from './progress-bar.js'; test.describe('Progress Bar', () => { @@ -101,15 +101,15 @@ test.describe('Progress Bar', () => { }); await expect(element).toHaveJSProperty('thickness', 'medium'); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('medium'))).toBe(true); + await expect(element).toHaveCustomState('medium'); await element.evaluate((node: ProgressBar) => { node.thickness = 'large'; }); await expect(element).toHaveJSProperty('thickness', 'large'); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('medium'))).toBe(false); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('large'))).toBe(true); + await expect(element).not.toHaveCustomState('medium'); + await expect(element).toHaveCustomState('large'); }); test('should set and retrieve the `shape` property correctly', async ({ page }) => { @@ -120,15 +120,15 @@ test.describe('Progress Bar', () => { }); await expect(element).toHaveJSProperty('shape', 'square'); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('square'))).toBe(true); + await expect(element).toHaveCustomState('square'); await element.evaluate((node: ProgressBar) => { node.shape = 'rounded'; }); await expect(element).toHaveJSProperty('shape', 'rounded'); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('square'))).toBe(false); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('rounded'))).toBe(true); + await expect(element).not.toHaveCustomState('square'); + await expect(element).toHaveCustomState('rounded'); }); test('should set and retrieve the `validationState` property correctly', async ({ page }) => { @@ -139,30 +139,30 @@ test.describe('Progress Bar', () => { }); await expect(element).toHaveJSProperty('validationState', 'success'); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('success'))).toBe(true); + await expect(element).toHaveCustomState('success'); await element.evaluate((node: ProgressBar) => { node.validationState = 'warning'; }); await expect(element).toHaveJSProperty('validationState', 'warning'); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('success'))).toBe(false); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('warning'))).toBe(true); + await expect(element).not.toHaveCustomState('success'); + await expect(element).toHaveCustomState('warning'); await element.evaluate((node: ProgressBar) => { node.validationState = 'error'; }); await expect(element).toHaveJSProperty('validationState', 'error'); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('warning'))).toBe(false); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('error'))).toBe(true); + await expect(element).not.toHaveCustomState('warning'); + await expect(element).toHaveCustomState('error'); await element.evaluate((node: ProgressBar) => { node.validationState = null; }); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('success'))).toBe(false); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('warning'))).toBe(false); - expect(await element.evaluate((node: ProgressBar) => node.elementInternals.states.has('error'))).toBe(false); + await expect(element).not.toHaveCustomState('success'); + await expect(element).not.toHaveCustomState('warning'); + await expect(element).not.toHaveCustomState('error'); }); }); diff --git a/packages/web-components/src/radio-group/radio-group.spec.ts b/packages/web-components/src/radio-group/radio-group.spec.ts index d31655bcb99fd..efda17debdf0e 100644 --- a/packages/web-components/src/radio-group/radio-group.spec.ts +++ b/packages/web-components/src/radio-group/radio-group.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Radio } from '../radio/index.js'; import type { RadioGroup } from './radio-group.js'; diff --git a/packages/web-components/src/radio/radio.spec.ts b/packages/web-components/src/radio/radio.spec.ts index 897d7c760d38a..6e8cf6ae07491 100644 --- a/packages/web-components/src/radio/radio.spec.ts +++ b/packages/web-components/src/radio/radio.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Radio } from './radio.js'; test.describe('Radio', () => { diff --git a/packages/web-components/src/rating-display/rating-display.spec.ts b/packages/web-components/src/rating-display/rating-display.spec.ts index b1e674f90242d..10c1a074ce751 100644 --- a/packages/web-components/src/rating-display/rating-display.spec.ts +++ b/packages/web-components/src/rating-display/rating-display.spec.ts @@ -1,5 +1,5 @@ -import { expect, Locator, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { Locator, test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import { RatingDisplaySize } from './rating-display.options.js'; import { RatingDisplay } from './rating-display.js'; @@ -77,7 +77,7 @@ test.describe('Rating Display', () => { }); expect(await element.evaluate((node: RatingDisplay) => node.color)).toBe('brand'); - expect(await element.evaluate((node: RatingDisplay) => node.elementInternals.states.has('brand'))).toBe(true); + await expect(element).toHaveCustomState('brand'); for (const icon of await page.locator('svg:nth-child(-n+8 of [aria-hidden="true"])').all()) { await expect(icon).toHaveCSS('fill', 'rgb(15, 108, 189)'); @@ -92,7 +92,7 @@ test.describe('Rating Display', () => { }); expect(await element.evaluate((node: RatingDisplay) => node.color)).toBe('neutral'); - expect(await element.evaluate((node: RatingDisplay) => node.elementInternals.states.has('neutral'))).toBe(true); + await expect(element).toHaveCustomState('neutral'); for (const icon of await page.locator('svg:nth-child(-n+8 of [aria-hidden="true"])').all()) { await expect(icon).toHaveCSS('fill', 'rgb(36, 36, 36)'); @@ -151,7 +151,7 @@ test.describe('Rating Display', () => { }); expect(await element.evaluate((node: RatingDisplay) => node.size)).toBe('small'); - expect(await element.evaluate((node: RatingDisplay) => node.elementInternals.states.has('small'))).toBe(true); + await expect(element).toHaveCustomState('small'); await expect(element).toHaveJSProperty('size', RatingDisplaySize.small); await expect(icon).toHaveCSS('width', '12px'); @@ -165,7 +165,7 @@ test.describe('Rating Display', () => { }); expect(await element.evaluate((node: RatingDisplay) => node.size)).toBe('large'); - expect(await element.evaluate((node: RatingDisplay) => node.elementInternals.states.has('large'))).toBe(true); + await expect(element).toHaveCustomState('large'); await expect(element).toHaveJSProperty('size', RatingDisplaySize.large); await expect(icon).toHaveCSS('width', '20px'); diff --git a/packages/web-components/src/slider/slider.spec.ts b/packages/web-components/src/slider/slider.spec.ts index 95c10e0252c0f..ac63388a34df0 100644 --- a/packages/web-components/src/slider/slider.spec.ts +++ b/packages/web-components/src/slider/slider.spec.ts @@ -1,6 +1,6 @@ import type { Direction } from '@microsoft/fast-web-utilities'; -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Slider } from './slider.js'; test.describe('Slider', () => { diff --git a/packages/web-components/src/spinner/spinner.spec.ts b/packages/web-components/src/spinner/spinner.spec.ts index ae4703ab8e31b..5a837f2601fe1 100644 --- a/packages/web-components/src/spinner/spinner.spec.ts +++ b/packages/web-components/src/spinner/spinner.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Spinner } from './spinner.js'; import { SpinnerAppearance, SpinnerSize } from './spinner.options.js'; @@ -22,12 +22,12 @@ test.describe('Spinner', () => { await test.step('should add a custom state matching the `appearance` attribute when provided', async () => { for (const appearance in SpinnerAppearance) { - const hasState = await element.evaluate( - (node, appearance) => node.matches(`:state(${appearance})`), - appearance, - ); - - expect(hasState).toEqual(appearance === thisAppearance); + // eslint-disable-next-line playwright/no-conditional-in-test + if (appearance === thisAppearance) { + await expect(element).toHaveCustomState(appearance); + } else { + await expect(element).not.toHaveCustomState(appearance); + } } }); }); @@ -45,9 +45,12 @@ test.describe('Spinner', () => { await test.step('should add a custom state matching the `appearance` attribute when provided', async () => { for (const size in SpinnerSize) { - const hasState = await element.evaluate((node, size) => node.matches(`:state(${size})`), size); - - expect(hasState).toEqual(size === thisSize); + // eslint-disable-next-line playwright/no-conditional-in-test + if (size === thisSize) { + await expect(element).toHaveCustomState(size); + } else { + await expect(element).not.toHaveCustomState(size); + } } }); }); diff --git a/packages/web-components/src/switch/switch.spec.ts b/packages/web-components/src/switch/switch.spec.ts index b8a6d05895116..3b9617428ea86 100644 --- a/packages/web-components/src/switch/switch.spec.ts +++ b/packages/web-components/src/switch/switch.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Switch } from './switch.js'; test.describe('Switch', () => { diff --git a/packages/web-components/src/tab-panel/tab-panel.spec.ts b/packages/web-components/src/tab-panel/tab-panel.spec.ts index f52ac461a8d22..ceb8738db7c26 100644 --- a/packages/web-components/src/tab-panel/tab-panel.spec.ts +++ b/packages/web-components/src/tab-panel/tab-panel.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; test.describe('TabPanel', () => { test.beforeEach(async ({ page }) => { diff --git a/packages/web-components/src/tab/tab.spec.ts b/packages/web-components/src/tab/tab.spec.ts index 01e5966876647..aa83c6f4d379d 100644 --- a/packages/web-components/src/tab/tab.spec.ts +++ b/packages/web-components/src/tab/tab.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Tab } from './tab.js'; test.describe('Tab', () => { diff --git a/packages/web-components/src/tablist/tablist.spec.ts b/packages/web-components/src/tablist/tablist.spec.ts index a660763143683..c5acaddae169a 100644 --- a/packages/web-components/src/tablist/tablist.spec.ts +++ b/packages/web-components/src/tablist/tablist.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Tab } from '../tab/tab.js'; import type { Tablist } from './tablist.js'; import { TablistAppearance, TablistSize } from './tablist.options.js'; @@ -240,9 +240,7 @@ test.describe('Tablist', () => { await expect(element).toHaveJSProperty('appearance', appearance); - expect(await element.evaluate((node, appearance) => node.matches(`:state(${appearance})`), appearance)).toEqual( - true, - ); + await expect(element).toHaveCustomState(appearance); }); } @@ -260,7 +258,7 @@ test.describe('Tablist', () => { await expect(element).toHaveJSProperty('size', size); - expect(await element.evaluate((node, size) => node.matches(`:state(${size})`), size)).toEqual(true); + await expect(element).toHaveCustomState(size); }); } diff --git a/packages/web-components/src/tabs/tabs.spec.ts b/packages/web-components/src/tabs/tabs.spec.ts index 05234b7de2479..2ebfdb55fbad9 100644 --- a/packages/web-components/src/tabs/tabs.spec.ts +++ b/packages/web-components/src/tabs/tabs.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Tab } from '../tab/tab.js'; import type { Tabs } from './tabs.js'; import { TabsAppearance, TabsSize } from './tabs.options.js'; diff --git a/packages/web-components/src/text-input/text-input.spec.ts b/packages/web-components/src/text-input/text-input.spec.ts index 2ab3f009794a3..45da21d5ee193 100644 --- a/packages/web-components/src/text-input/text-input.spec.ts +++ b/packages/web-components/src/text-input/text-input.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { TextInput } from './text-input.js'; import { ImplicitSubmissionBlockingTypes } from './text-input.options.js'; @@ -171,29 +171,29 @@ test.describe('TextInput', () => { node.controlSize = 'small'; }); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('small'))).toBe(true); + await expect(element).toHaveCustomState('small'); await element.evaluate((node: TextInput) => { node.controlSize = 'medium'; }); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('small'))).toBe(false); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('medium'))).toBe(true); + await expect(element).not.toHaveCustomState('small'); + await expect(element).toHaveCustomState('medium'); await element.evaluate((node: TextInput) => { node.controlSize = 'large'; }); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('medium'))).toBe(false); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('large'))).toBe(true); + await expect(element).not.toHaveCustomState('medium'); + await expect(element).toHaveCustomState('large'); await element.evaluate((node: TextInput) => { node.controlSize = undefined; }); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('small'))).toBe(false); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('medium'))).toBe(false); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('large'))).toBe(false); + await expect(element).not.toHaveCustomState('small'); + await expect(element).not.toHaveCustomState('medium'); + await expect(element).not.toHaveCustomState('large'); }); test('should reflect `appearance` attribute values', async ({ page }) => { @@ -237,36 +237,36 @@ test.describe('TextInput', () => { node.appearance = 'outline'; }); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('outline'))).toBe(true); + await expect(element).toHaveCustomState('outline'); await element.evaluate((node: TextInput) => { node.appearance = 'underline'; }); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('outline'))).toBe(false); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('underline'))).toBe(true); + await expect(element).not.toHaveCustomState('outline'); + await expect(element).toHaveCustomState('underline'); await element.evaluate((node: TextInput) => { node.appearance = 'filled-lighter'; }); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('underline'))).toBe(false); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('filled-lighter'))).toBe(true); + await expect(element).not.toHaveCustomState('underline'); + await expect(element).toHaveCustomState('filled-lighter'); await element.evaluate((node: TextInput) => { node.appearance = 'filled-darker'; }); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('filled-lighter'))).toBe(false); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('filled-darker'))).toBe(true); + await expect(element).not.toHaveCustomState('filled-lighter'); + await expect(element).toHaveCustomState('filled-darker'); await element.evaluate((node: TextInput) => { node.appearance = undefined; }); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('outline'))).toBe(false); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('underline'))).toBe(false); - expect(await element.evaluate((node: TextInput) => node.elementInternals.states.has('filled-lighter'))).toBe(false); + await expect(element).not.toHaveCustomState('outline'); + await expect(element).not.toHaveCustomState('underline'); + await expect(element).not.toHaveCustomState('filled-lighter'); }); test('should have an undefined `value` property when no `value` attribute is set', async ({ page }) => { diff --git a/packages/web-components/src/text/text.spec.ts b/packages/web-components/src/text/text.spec.ts index fbbedfd7cf07d..52a1dc3c313cf 100644 --- a/packages/web-components/src/text/text.spec.ts +++ b/packages/web-components/src/text/text.spec.ts @@ -1,5 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; import type { Text } from './text.js'; import { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js'; @@ -24,9 +24,7 @@ test.describe('Text Component', () => { await expect(element).toHaveJSProperty(attribute, true); - expect( - await element.evaluate((node: Text, attribute) => node.matches(`:state(${attribute})`), attribute), - ).toEqual(true); + await expect(element).toHaveCustomState(attribute); await element.evaluate((node: any, attribute) => { node[attribute] = false; @@ -36,9 +34,7 @@ test.describe('Text Component', () => { await expect(element).toHaveJSProperty(attribute, false); - expect( - await element.evaluate((node: Text, attribute) => node.matches(`:state(${attribute})`), attribute), - ).toEqual(false); + await expect(element).not.toHaveCustomState(attribute); }); } @@ -54,9 +50,7 @@ test.describe('Text Component', () => { await expect(element).toHaveAttribute('size', value); - expect( - await element.evaluate((node: Text, value: string) => node.matches(`:state(size-${value})`), value), - ).toEqual(true); + await expect(element).toHaveCustomState(`size-${value}`); }); } @@ -72,9 +66,7 @@ test.describe('Text Component', () => { await expect(element).toHaveAttribute('weight', value); - expect(await element.evaluate((node: Text, value: string) => node.matches(`:state(${value})`), value)).toEqual( - true, - ); + await expect(element).toHaveCustomState(value); }); } @@ -90,9 +82,7 @@ test.describe('Text Component', () => { await expect(element).toHaveAttribute('align', value); - expect(await element.evaluate((node: Text, value: string) => node.matches(`:state(${value})`), value)).toEqual( - true, - ); + await expect(element).toHaveCustomState(value); }); } @@ -108,9 +98,7 @@ test.describe('Text Component', () => { await expect(element).toHaveAttribute('font', value); - expect(await element.evaluate((node: Text, value: string) => node.matches(`:state(${value})`), value)).toEqual( - true, - ); + await expect(element).toHaveCustomState(value); }); } }); diff --git a/packages/web-components/src/theme/set-theme.ts b/packages/web-components/src/theme/set-theme.ts index 81a09e3a12e09..0f2b564e5054f 100644 --- a/packages/web-components/src/theme/set-theme.ts +++ b/packages/web-components/src/theme/set-theme.ts @@ -47,6 +47,7 @@ export const setTheme = (theme: Theme) => { const initialValue = tokenValue.toString(); if (SUPPORTS_REGISTER_PROPERTY) { try { + // @ts-expect-error - Baseline 2024 CSS.registerProperty({ name, initialValue, diff --git a/packages/web-components/src/toggle-button/toggle-button.spec.ts b/packages/web-components/src/toggle-button/toggle-button.spec.ts index 0b9b3769ab1b1..07e46ca5f9f12 100644 --- a/packages/web-components/src/toggle-button/toggle-button.spec.ts +++ b/packages/web-components/src/toggle-button/toggle-button.spec.ts @@ -1,6 +1,5 @@ -import { expect, test } from '@playwright/test'; -import { fixtureURL } from '../helpers.tests.js'; -import { ToggleButton } from './toggle-button.js'; +import { test } from '@playwright/test'; +import { expect, fixtureURL } from '../helpers.tests.js'; test.describe('Toggle Button', () => { test.beforeEach(async ({ page }) => { @@ -40,19 +39,19 @@ test.describe('Toggle Button', () => { await expect(element).toHaveJSProperty('elementInternals.ariaPressed', 'false'); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(false); + await expect(element).not.toHaveCustomState('pressed'); await element.click(); await expect(element).toHaveJSProperty('elementInternals.ariaPressed', 'true'); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(true); + await expect(element).toHaveCustomState('pressed'); await element.click(); await expect(element).toHaveJSProperty('elementInternals.ariaPressed', 'false'); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(false); + await expect(element).not.toHaveCustomState('pressed'); }); test('should NOT toggle the `pressed` attribute when clicked when the `disabled` attribute is present', async ({ @@ -66,19 +65,19 @@ test.describe('Toggle Button', () => { await expect(element).toHaveJSProperty('elementInternals.ariaPressed', 'false'); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(false); + await expect(element).not.toHaveCustomState('pressed'); await element.click(); await expect(element).toHaveJSProperty('elementInternals.ariaPressed', 'false'); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(false); + await expect(element).not.toHaveCustomState('pressed'); await element.click(); await expect(element).toHaveJSProperty('elementInternals.ariaPressed', 'false'); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(false); + await expect(element).not.toHaveCustomState('pressed'); }); test('should NOT toggle the `pressed` attribute when clicked when the `disabled-focusable` attribute is present', async ({ @@ -92,19 +91,19 @@ test.describe('Toggle Button', () => { await expect(element).toHaveJSProperty('elementInternals.ariaPressed', 'false'); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(false); + await expect(element).not.toHaveCustomState('pressed'); await element.click(); await expect(element).toHaveJSProperty('elementInternals.ariaPressed', 'false'); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(false); + await expect(element).not.toHaveCustomState('pressed'); await element.click(); await expect(element).toHaveJSProperty('elementInternals.ariaPressed', 'false'); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(false); + await expect(element).not.toHaveCustomState('pressed'); }); test('should set the `aria-pressed` attribute to `mixed` when the `mixed` attribute is present', async ({ page }) => { @@ -124,7 +123,7 @@ test.describe('Toggle Button', () => { Toggle `); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(true); + await expect(element).toHaveCustomState('pressed'); }); test('should set the `aria-pressed` attribute to match the `pressed` attribute when the `mixed` attribute is removed', async ({ @@ -152,12 +151,12 @@ test.describe('Toggle Button', () => { Toggle `); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(true); + await expect(element).toHaveCustomState('pressed'); await element.evaluate(node => { node.removeAttribute('mixed'); }); - expect(await element.evaluate((node: ToggleButton) => node.elementInternals.states.has('pressed'))).toBe(true); + await expect(element).toHaveCustomState('pressed'); }); }); diff --git a/packages/web-components/src/utils/element-internals.ts b/packages/web-components/src/utils/element-internals.ts index 4fe4e02798306..937cc4775f012 100644 --- a/packages/web-components/src/utils/element-internals.ts +++ b/packages/web-components/src/utils/element-internals.ts @@ -23,13 +23,12 @@ export function toggleState(elementInternals: ElementInternals, state: string, f elementInternals.shadowRoot!.host.toggleAttribute(`state--${state}`, force); return; } - - force = force ?? !elementInternals.states.has(state); - - if (force) { + // @ts-expect-error - Baseline 2024 + if (force ?? !elementInternals.states.has(state)) { + // @ts-expect-error - Baseline 2024 elementInternals.states.add(state); return; } - + // @ts-expect-error - Baseline 2024 elementInternals.states.delete(state); } diff --git a/packages/web-components/tsconfig.lib.json b/packages/web-components/tsconfig.lib.json index bf93d258dee52..c4d92fe979201 100644 --- a/packages/web-components/tsconfig.lib.json +++ b/packages/web-components/tsconfig.lib.json @@ -7,8 +7,7 @@ "declaration": true, "declarationDir": "dist/dts", "outDir": "dist/esm", - "importHelpers": true, - "types": ["web"] + "importHelpers": true }, "include": ["src"], "exclude": ["**/*.stories.*", "**/*.test.*", "**/*.spec.*"] diff --git a/packages/web-components/tsconfig.spec.json b/packages/web-components/tsconfig.spec.json index 07c449cea8c22..6287b1ce0f8d5 100644 --- a/packages/web-components/tsconfig.spec.json +++ b/packages/web-components/tsconfig.spec.json @@ -3,7 +3,7 @@ "compilerOptions": { "module": "ESNext", "outDir": "dist/esm", - "types": ["web", "node", "webpack-env"] + "types": ["node"] }, "include": ["src/**/*.test.*", "src/**/*.spec.*"] } diff --git a/yarn.lock b/yarn.lock index ff0d2d11cade6..35cdf73b9fa2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5845,11 +5845,6 @@ "@types/expect" "^1.20.4" "@types/node" "*" -"@types/web@^0.0.142": - version "0.0.142" - resolved "https://registry.yarnpkg.com/@types/web/-/web-0.0.142.tgz#62eff3c6b24e2429d084a5a9d4061021cfe7c648" - integrity sha512-QWDvMW+P3sdq8rhiw3dNyBR64O5adSY80gBjRd2xI3BADGsAFpAglblWucsGUjKVKyPm4EbYZkvFs7BRxPsBOg== - "@types/webpack-bundle-analyzer@4.7.0": version "4.7.0" resolved "https://registry.yarnpkg.com/@types/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz#fe199e724ce3d38705f6f1ba4d62429b7c360541"