test: make sure all components can be created with document.createEle…

packages/web-components/src/accordion-item/accordion-item.spec.ts

@@ -9,6 +9,22 @@ test.describe('Accordion item', () => {
     waitFor: ['fluent-accordion-item'],
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-accordion-item');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should set a default heading level of 2 when `headinglevel` is not provided', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/accordion/accordion.spec.ts

@@ -6,6 +6,22 @@ test.describe('Accordion', () => {
     tagName: 'fluent-accordion',
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-accordion');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should set an expand mode of `multi` when passed to the `expand-mode` attribute', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/anchor-button/anchor-button.spec.ts

@@ -7,6 +7,22 @@ test.describe('Anchor Button', () => {
     tagName: 'fluent-anchor-button',
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-anchor-button');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should set the `href` property to match the `href` attribute', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/avatar/avatar.spec.ts

@@ -6,6 +6,22 @@ test.describe('Avatar', () => {
     tagName: 'fluent-avatar',
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-avatar');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should have a `role` of `img`', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/badge/badge.spec.ts

@@ -7,6 +7,22 @@ test.describe('Badge', () => {
     innerHTML: 'Badge',
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-badge');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should set default attribute values', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/button/button.spec.ts

@@ -6,6 +6,22 @@ test.describe('Button', () => {
     innerHTML: 'Button',
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-button');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should NOT submit the parent form when clicked and `type` attribute is not set', async ({ fastPage, page }) => {
     const { element } = fastPage;
 

packages/web-components/src/checkbox/checkbox.spec.ts

@@ -8,6 +8,22 @@ test.describe('Checkbox', () => {
     waitFor: ['fluent-button'],
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-checkbox');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should have a role of `checkbox`', async ({ fastPage }) => {
     await expect(fastPage.element).toHaveJSProperty('elementInternals.role', 'checkbox');
   });

packages/web-components/src/counter-badge/counter-badge.spec.ts

@@ -12,6 +12,22 @@ test.describe('CounterBadge component', () => {
     tagName: 'fluent-counter-badge',
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-counter-badge');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should display the count when then the `count` attribute is equal to the `overflow-count` attribute', async ({
     fastPage,
   }) => {

packages/web-components/src/dialog/dialog.spec.ts

@@ -20,6 +20,22 @@ test.describe('Dialog', () => {
     };
   }
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-dialog');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should open and close programmatically', async ({ fastPage }) => {
     const { element } = fastPage;
     const content = element.locator('#content');

packages/web-components/src/divider/divider.spec.ts

@@ -5,6 +5,22 @@ import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole
 test.describe('Divider', () => {
   test.use({ tagName: 'fluent-divider' });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-divider');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should set a default `role` attribute of "separator"', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/drawer/drawer.spec.ts

@@ -19,6 +19,22 @@ test.describe('Drawer', () => {
     });
   }
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-drawer');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should set the `size` property to match the `size` attribute', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/dropdown/dropdown.spec.ts

@@ -19,6 +19,22 @@ test.describe('Dropdown', () => {
     waitFor: ['fluent-listbox', 'fluent-option'],
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-dropdown');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should render a dropdown', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/field/field.spec.ts

@@ -8,6 +8,22 @@ test.describe('Field', () => {
     waitFor: ['fluent-text-input'],
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-field');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should set the `disabled` state when the slotted input is disabled', async ({ fastPage }) => {
     const { element } = fastPage;
     const input = element.locator('input');

packages/web-components/src/image/image.spec.ts

@@ -10,6 +10,22 @@ test.describe('Image', () => {
     `,
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-image');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should set the `block` property to match the `block` attribute', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/label/label.spec.ts

@@ -19,6 +19,22 @@ test.describe('Label', () => {
     }
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-label');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should set the `weight` property to match the `weight` attribute', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/link/link.spec.ts

@@ -16,6 +16,22 @@ const attributes = {
 test.describe('Link', () => {
   test.use({ tagName: 'fluent-link' });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-link');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test(`should set each property to match its corresponding attribute`, async ({ fastPage }) => {
     const { element } = fastPage;
     const anchor = element.locator('a');

packages/web-components/src/listbox/listbox.spec.ts

@@ -17,6 +17,22 @@ test.describe('Listbox', () => {
     waitFor: ['fluent-option'],
   });
 
+  test('should create with document.createElement()', async ({ page, fastPage }) => {
+    await fastPage.setTemplate();
+
+    let hasError = false;
+
+    page.on('pageerror', () => {
+      hasError = true;
+    });
+
+    await page.evaluate(() => {
+      document.createElement('fluent-listbox');
+    });
+
+    expect(hasError).toBe(false);
+  });
+
   test('should render a listbox', async ({ fastPage }) => {
     const { element } = fastPage;