diff --git a/packages/web-components/src/avatar/avatar.spec.ts b/packages/web-components/src/avatar/avatar.spec.ts index cd7640a2547c5..3473dda59c6c0 100644 --- a/packages/web-components/src/avatar/avatar.spec.ts +++ b/packages/web-components/src/avatar/avatar.spec.ts @@ -83,6 +83,10 @@ test.describe('Avatar Component', () => { test('should have a role of img', async ({ page }) => { const element = page.locator('fluent-avatar'); + await page.setContent(/* html */ ` + + `); + await expect(element).toHaveJSProperty('elementInternals.role', 'img'); }); @@ -121,6 +125,10 @@ test.describe('Avatar Component', () => { test('should render correctly in active state', async ({ page }) => { const element = page.locator('fluent-avatar'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Avatar) => { node.active = 'active'; }); @@ -131,6 +139,10 @@ test.describe('Avatar Component', () => { test('should render correctly in inactive state', async ({ page }) => { const element = page.locator('fluent-avatar'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Avatar) => { node.active = 'inactive'; }); @@ -141,6 +153,10 @@ test.describe('Avatar Component', () => { test('default color should be neutral', async ({ page }) => { const element = page.locator('fluent-avatar'); + await page.setContent(/* html */ ` + + `); + await expect(element).toHaveCustomState('neutral'); }); @@ -167,6 +183,10 @@ test.describe('Avatar Component', () => { test(`should set the color attribute on the internal control`, async ({ page }) => { const element = page.locator('fluent-avatar'); + await page.setContent(/* html */ ` + + `); + for (const [, value] of Object.entries(colorAttributes)) { await test.step(value, async () => { await element.evaluate((node: Avatar, colorValue: string) => { @@ -183,6 +203,10 @@ test.describe('Avatar Component', () => { test(`should set the size attribute on the internal control`, async ({ page }) => { const element = page.locator('fluent-avatar'); + await page.setContent(/* html */ ` + + `); + for (const [, value] of Object.entries(sizeAttributes)) { await test.step(`${value}`, async () => { await element.evaluate((node: Avatar, sizeValue: number) => { @@ -199,6 +223,10 @@ test.describe('Avatar Component', () => { test(`should set and reflect the appearance attribute on the internal control`, async ({ page }) => { const element = page.locator('fluent-avatar'); + await page.setContent(/* html */ ` + + `); + for (const [, value] of Object.entries(appearanceAttributes)) { await test.step(value, async () => { await element.evaluate((node: Avatar, appearanceValue: string) => { diff --git a/packages/web-components/src/checkbox/checkbox.spec.ts b/packages/web-components/src/checkbox/checkbox.spec.ts index a3723ca78da35..4cdd23c69dad7 100644 --- a/packages/web-components/src/checkbox/checkbox.spec.ts +++ b/packages/web-components/src/checkbox/checkbox.spec.ts @@ -14,6 +14,10 @@ test.describe('Checkbox', () => { test('should set and retrieve the `shape` property correctly', async ({ page }) => { const element = page.locator('fluent-checkbox'); + await page.setContent(/* html */ ` + + `); + await expect(element).toHaveCount(1); await test.step('should set the `shape` property to `circular`', async () => { @@ -72,6 +76,10 @@ test.describe('Checkbox', () => { test('should set and retrieve the `size` property correctly', async ({ page }) => { const element = page.locator('fluent-checkbox'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Checkbox) => { node.size = 'medium'; }); diff --git a/packages/web-components/src/divider/divider.spec.ts b/packages/web-components/src/divider/divider.spec.ts index 6f4ff343d3d7c..66c3a99ce48b8 100644 --- a/packages/web-components/src/divider/divider.spec.ts +++ b/packages/web-components/src/divider/divider.spec.ts @@ -75,6 +75,11 @@ test.describe('Divider', () => { test('should add a custom state matching the `orientation` attribute when provided', async ({ page }) => { const element = page.locator('fluent-divider'); + await page.setContent(/* html */ ` + + `); + + await element.evaluate((node: Divider) => { node.orientation = 'vertical'; }); @@ -148,6 +153,10 @@ test.describe('Divider', () => { test('should add a custom state matching the `appearance` attribute when provided', async ({ page }) => { const element = page.locator('fluent-divider'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Divider) => { node.appearance = 'strong'; }); @@ -174,6 +183,10 @@ test.describe('Divider', () => { test('should add a custom state of `inset` when the value is true', async ({ page }) => { const element = page.locator('fluent-divider'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Divider) => { node.inset = true; }); @@ -190,6 +203,10 @@ test.describe('Divider', () => { test('should add a custom state matching the `align-content` attribute value when provided', async ({ page }) => { const element = page.locator('fluent-divider'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Divider) => { node.alignContent = 'start'; }); diff --git a/packages/web-components/src/image/image.spec.ts b/packages/web-components/src/image/image.spec.ts index 4d89c3e28b8f8..d3bf50d3e7904 100644 --- a/packages/web-components/src/image/image.spec.ts +++ b/packages/web-components/src/image/image.spec.ts @@ -32,6 +32,12 @@ test.describe('Image', () => { test('should add a custom state of `block` when a value of true is provided', async ({ page }) => { const element = page.locator('fluent-image'); + await page.setContent(/* html */ ` + + Short image description + + `); + await element.evaluate((node: Image) => { node.block = true; }); @@ -66,6 +72,12 @@ test.describe('Image', () => { test('should add a custom state of `bordered` when a value of true is provided', async ({ page }) => { const element = page.locator('fluent-image'); + await page.setContent(/* html */ ` + + Short image description + + `); + await element.evaluate((node: Image) => { node.bordered = true; }); @@ -100,6 +112,12 @@ test.describe('Image', () => { test('should add a custom state of `shadow` when a value of true is provided', async ({ page }) => { const element = page.locator('fluent-image'); + await page.setContent(/* html */ ` + + Short image description + + `); + await element.evaluate((node: Image) => { node.shadow = true; }); @@ -152,6 +170,12 @@ test.describe('Image', () => { test('should add a custom state matching the `fit` attribute when provided', async ({ page }) => { const element = page.locator('fluent-image'); + await page.setContent(/* html */ ` + + Short image description + + `); + await element.evaluate((node: Image) => { node.fit = 'contain'; }); @@ -202,6 +226,12 @@ test.describe('Image', () => { test('should add a custom state matching the `shape` attribute when provided', async ({ page }) => { const element = page.locator('fluent-image'); + await page.setContent(/* html */ ` + + Short image description + + `); + await element.evaluate((node: Image) => { node.shape = 'circular'; }); diff --git a/packages/web-components/src/link/link.spec.ts b/packages/web-components/src/link/link.spec.ts index 6d5381e181ed3..86ebe50223906 100644 --- a/packages/web-components/src/link/link.spec.ts +++ b/packages/web-components/src/link/link.spec.ts @@ -62,6 +62,10 @@ test.describe('Link', () => { test('should add a custom state matching the `appearance` attribute when provided', async ({ page }) => { const element = page.locator('fluent-link'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Link) => { node.appearance = 'subtle'; }); @@ -78,6 +82,10 @@ test.describe('Link', () => { test('should add a custom state of `inline` when true', async ({ page }) => { const element = page.locator('fluent-link'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Link) => { node.inline = true; }); 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 6305705322406..e842bc37f89d1 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 @@ -8,6 +8,9 @@ test.describe('Message Bar', () => { test.beforeEach(async ({ page }) => { await page.goto(fixtureURL(storybookDocId)); await page.waitForFunction(() => customElements.whenDefined('fluent-message-bar')); + await page.setContent(/* html */ ` + + `); }); test('should include a role of status', 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 1f518516cc66a..f947683421d49 100644 --- a/packages/web-components/src/progress-bar/progress-bar.spec.ts +++ b/packages/web-components/src/progress-bar/progress-bar.spec.ts @@ -9,6 +9,10 @@ test.describe('Progress Bar', () => { await page.goto(fixtureURL(storybookDocId)); await page.waitForFunction(() => customElements.whenDefined('fluent-progress-bar')); + + await page.setContent(/* html */ ` + + `); }); test('should include a role of progressbar', async ({ page }) => { 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 59cb8e9ca0c6f..cd4ae86ee3515 100644 --- a/packages/web-components/src/rating-display/rating-display.spec.ts +++ b/packages/web-components/src/rating-display/rating-display.spec.ts @@ -12,6 +12,10 @@ test.describe('Rating Display', () => { await page.goto(fixtureURL(storybookDocId)); await page.waitForFunction(() => customElements.whenDefined('fluent-rating-display')); + await page.setContent(/* html */ ` + + `); + element = page.locator('fluent-rating-display'); }); diff --git a/packages/web-components/src/slider/slider.spec.ts b/packages/web-components/src/slider/slider.spec.ts index 1affb53ef4085..7cb6313b8c2e9 100644 --- a/packages/web-components/src/slider/slider.spec.ts +++ b/packages/web-components/src/slider/slider.spec.ts @@ -222,6 +222,10 @@ test.describe('Slider', () => { test('should set and retrieve the `size` property correctly', async ({ page }) => { const element = page.locator('fluent-slider'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Slider) => { node.size = 'small'; }); diff --git a/packages/web-components/src/spinner/spinner.spec.ts b/packages/web-components/src/spinner/spinner.spec.ts index fc5cd19afcb17..d3b79e98ed144 100644 --- a/packages/web-components/src/spinner/spinner.spec.ts +++ b/packages/web-components/src/spinner/spinner.spec.ts @@ -16,6 +16,10 @@ test.describe('Spinner', () => { test(`should set and retrieve the \`appearance\` property correctly to ${thisAppearance}`, async ({ page }) => { const element = page.locator('fluent-spinner'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Spinner, appearance) => { node.appearance = appearance; }, thisAppearance as SpinnerAppearance); @@ -39,6 +43,10 @@ test.describe('Spinner', () => { test(`should set and retrieve the \`size\` property correctly to ${thisSize}`, async ({ page }) => { const element = page.locator('fluent-spinner'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: Spinner, size) => { node.size = size; }, thisSize as SpinnerSize); diff --git a/packages/web-components/src/tablist/tablist.spec.ts b/packages/web-components/src/tablist/tablist.spec.ts index f0c7eba6eec30..6c648ce45edf0 100644 --- a/packages/web-components/src/tablist/tablist.spec.ts +++ b/packages/web-components/src/tablist/tablist.spec.ts @@ -19,7 +19,7 @@ test.describe('Tablist', () => { const element = page.locator('fluent-tablist'); const tabs = element.locator('fluent-tab'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -39,7 +39,7 @@ test.describe('Tablist', () => { const tabs = element.locator('fluent-tab'); const tab = tabs.nth(2); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -57,7 +57,7 @@ test.describe('Tablist', () => { test('should have reflect disabled attribute on control', async ({ page }) => { const element = page.locator('fluent-tablist'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -77,7 +77,7 @@ test.describe('Tablist', () => { test('should have role of `tablist`', async ({ page }) => { const element = page.locator('fluent-tablist'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -93,7 +93,7 @@ test.describe('Tablist', () => { }) => { const element = page.locator('fluent-tablist'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -108,7 +108,7 @@ test.describe('Tablist', () => { const element = page.locator('fluent-tablist'); const tabs = element.locator('fluent-tab'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -136,7 +136,7 @@ test.describe('Tablist', () => { const element = page.locator('fluent-tablist'); const tabs = element.locator('fluent-tab'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -164,7 +164,7 @@ test.describe('Tablist', () => { const element = page.locator('fluent-tablist'); const tabs = element.locator('fluent-tab'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -183,7 +183,7 @@ test.describe('Tablist', () => { const element = page.locator('fluent-tablist'); const tabs = element.locator('fluent-tab'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -206,7 +206,7 @@ test.describe('Tablist', () => { const element = page.locator('fluent-tablist'); const tabs = element.locator('fluent-tab'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -232,7 +232,7 @@ test.describe('Tablist', () => { test(`should set appearance to \`${appearance}\``, async ({ page }) => { const element = page.locator('fluent-tablist'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -250,7 +250,7 @@ test.describe('Tablist', () => { test(`should set size to \`${size}\``, async ({ page }) => { const element = page.locator('fluent-tablist'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two @@ -351,7 +351,7 @@ test.describe('Tablist', () => { const element = page.locator('fluent-tablist'); const tabs = element.locator('fluent-tab'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one @@ -379,7 +379,7 @@ test.describe('Tablist', () => { const element = page.locator('fluent-tablist'); const tabs = element.locator('fluent-tab'); - page.setContent(/* html */ ` + await page.setContent(/* html */ ` Tab one Tab two 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 43b30c23b999f..8cd5879100138 100644 --- a/packages/web-components/src/text-input/text-input.spec.ts +++ b/packages/web-components/src/text-input/text-input.spec.ts @@ -201,6 +201,10 @@ test.describe('TextInput', () => { test('should reflect `appearance` attribute values', async ({ page }) => { const element = page.locator('fluent-text-input'); + await page.setContent(/* html */ ` + + `); + await element.evaluate((node: TextInput) => { node.appearance = 'outline'; }); diff --git a/packages/web-components/src/text/text.spec.ts b/packages/web-components/src/text/text.spec.ts index 04e190743b554..0b150cbf4b318 100644 --- a/packages/web-components/src/text/text.spec.ts +++ b/packages/web-components/src/text/text.spec.ts @@ -76,9 +76,9 @@ test.describe('Text Component', () => { test(`should set and reflect the align attribute to \`${value}\` when provided`, async ({ page }) => { const element = page.locator('fluent-text'); - await element.evaluate((node: Text, alignValue: string) => { - node.align = alignValue as TextAlign; - }, value as string); + await page.setContent(/* html */ ` + Text + `); await expect(element).toHaveJSProperty('align', value); @@ -92,9 +92,9 @@ test.describe('Text Component', () => { test(`should set and reflect the font attribute to \`${value}\` when provided`, async ({ page }) => { const element = page.locator('fluent-text'); - await element.evaluate((node: Text, fontValue: string) => { - node.font = fontValue as TextFont; - }, value as string); + await page.setContent(/* html */ ` + Text + `); await expect(element).toHaveJSProperty('font', value);