test: make sure all components can be created with document.createEle… (#34977)

Author: marchbox

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;