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 */ `
+
+
+
+ `);
+
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 */ `
+
+
+
+ `);
+
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 */ `
+
+
+
+ `);
+
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 */ `
+
+
+
+ `);
+
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 */ `
+
+
+
+ `);
+
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
Tab two
@@ -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);