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

[marchbox]

Previous Behavior

No tests to make sure components can be created with document.createElement().

New Behavior

Added tests.

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[radium-v]

Should this instead create the element and insert it onto the page, then expect it to be attached?

test('should create with `document.createElement()`', async ({ fastPage, page }) => {
    const { element } = fastPage;

    await fastPage.setTemplate('');

    await page.evaluate(() => {
      const node = document.createElement('fluent-accordion-item');
      document.body.append(node);
    });

    await expect(element).toBeAttached();
  });

[marchbox]

Should this instead create the element and insert it onto the page, then expect it to be attached?

test('should create with `document.createElement()`', async ({ fastPage, page }) => {
    const { element } = fastPage;

    await fastPage.setTemplate('');

    await page.evaluate(() => {
      const node = document.createElement('fluent-accordion-item');
      document.body.append(node);
    });

    await expect(element).toBeAttached();
  });

@radium-v That will not catch this particular issue, because if the JS class has code to modify attribute (e.g. by calling this.setAttribute()) in constructor, the browser will emit error, but the element will still be successfully created and can be attached to document.body. This test is to make sure browser doesn't throw any error from the document.createElement() call. Another weird thing is that this error can not be caught inside a try...catch, apparently as per the spec: https://issues.chromium.org/issues/382473086.