fix tests

microsoft · Oct 7, 2024 · 81156d6 · 81156d6
1 parent 1ffb9c8
commit 81156d6
Show file tree

Hide file tree

Showing 13 changed files with 138 additions and 20 deletions.
diff --git 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 */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     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 */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     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 */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     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 */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     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 */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     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 */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     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 */ `
+      <fluent-avatar></fluent-avatar>
+    `);
+
     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
@@ -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 */ `
+        <fluent-checkbox></fluent-checkbox>
+    `);
+
     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 */ `
+      <fluent-checkbox></fluent-checkbox>
+  `);
+
     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
@@ -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 */ `
+      <fluent-divider></fluent-divider>
+    `);
+
+
     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 */ `
+      <fluent-divider></fluent-divider>
+    `);
+
     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 */ `
+      <fluent-divider></fluent-divider>
+    `);
+
     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 */ `
+      <fluent-divider></fluent-divider>
+    `);
+
     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
@@ -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 */ `
+      <fluent-image block>
+        <img alt="Short image description" src="300x100.png" />
+      </fluent-image>
+    `);
+
     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 */ `
+      <fluent-image block>
+        <img alt="Short image description" src="300x100.png" />
+      </fluent-image>
+    `);
+
     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 */ `
+      <fluent-image block>
+        <img alt="Short image description" src="300x100.png" />
+      </fluent-image>
+    `);
+
     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 */ `
+      <fluent-image block>
+        <img alt="Short image description" src="300x100.png" />
+      </fluent-image>
+    `);
+
     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 */ `
+      <fluent-image block>
+        <img alt="Short image description" src="300x100.png" />
+      </fluent-image>
+    `);
+
     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
@@ -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 */ `
+      <fluent-link></fluent-link>
+    `);
+
     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 */ `
+      <fluent-link></fluent-link>
+    `);
+
     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
@@ -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 */ `
+      <fluent-message-bar></fluent-message-bar>
+    `);
   });
 
   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
@@ -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 */ `
+        <fluent-progress-bar></fluent-progress-bar>
+    `);
   });
 
   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
@@ -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 */ `
+      <fluent-rating-display></fluent-rating-display>
+    `);
+
     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
@@ -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 */ `
+      <fluent-slider></fluent-slider>
+    `);
+
     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
@@ -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 */ `
+        <fluent-spinner></fluent-spinner>
+      `);
+
       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 */ `
+        <fluent-spinner></fluent-spinner>
+      `);
+
       await element.evaluate((node: Spinner, size) => {
         node.size = size;
       }, thisSize as SpinnerSize);