fix(tabs): imperative instantiation of tabs-panel (#2521)

bennypowers · web-flow · commit 5f2e653c1fc7 · 2023-06-20T11:13:43.000-04:00
* fix(tabs): imperatively instantiate tabs panel

* test: imperative instantiation

* fix(create-element): imperative instantiation in tests
diff --git a/.changeset/generator-instance-check.md b/.changeset/generator-instance-check.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/create-element": patch
+---
+Tests: check for imperative element instantiation
diff --git a/.changeset/tabs-imperative-instance.md b/.changeset/tabs-imperative-instance.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-tabs>`: prevent error when using tabs-panel with certain frameworks or imperative javascript code
diff --git a/elements/pf-accordion/test/pf-accordion.spec.ts b/elements/pf-accordion/test/pf-accordion.spec.ts
@@ -63,6 +63,12 @@ describe('<pf-accordion>', function() {
     };
   }
 
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-accordion')).to.be.an.instanceof(PfAccordion);
+    expect(document.createElement('pf-accordion-header')).to.be.an.instanceof(PfAccordionHeader);
+    expect(document.createElement('pf-accordion-panel')).to.be.an.instanceof(PfAccordionPanel);
+  });
+
   it('simply instantiating', async function() {
     element = await createFixture<PfAccordion>(html`<pf-accordion></pf-accordion>`);
     expect(element, 'pf-accordion should be an instance of PfAccordion')
diff --git a/elements/pf-avatar/test/pf-avatar.spec.ts b/elements/pf-avatar/test/pf-avatar.spec.ts
@@ -4,6 +4,10 @@ import { PfAvatar } from '@patternfly/elements/pf-avatar/pf-avatar.js';
 import { AvatarLoadEvent } from '../BaseAvatar';
 
 describe('<pf-avatar>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-avatar')).to.be.an.instanceof(PfAvatar);
+  });
+
   it('should upgrade', async function() {
     const el = await createFixture(html`<pf-avatar></pf-avatar>`);
     expect(el, 'pf-badge should be an instance of PfAvatar')
diff --git a/elements/pf-badge/test/pf-badge.spec.ts b/elements/pf-badge/test/pf-badge.spec.ts
@@ -13,6 +13,10 @@ const states = {
 const element = html`<pf-badge number="10">10</pf-badge>`;
 
 describe('<pf-badge>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-badge')).to.be.an.instanceof(PfBadge);
+  });
+
   it('should upgrade', async function() {
     const el = await createFixture<PfBadge>(element);
     expect(el, 'pf-badge should be an instance of PfBadge')
diff --git a/elements/pf-button/test/pf-button.spec.ts b/elements/pf-button/test/pf-button.spec.ts
@@ -7,6 +7,10 @@ import { PfButton } from '@patternfly/elements/pf-button/pf-button.js';
 import '@patternfly/pfe-tools/test/stub-logger.js';
 
 describe('<pf-button>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-button')).to.be.an.instanceof(PfButton);
+  });
+
   it('should upgrade', async function() {
     const el = await createFixture(html`<pf-button>Button</pf-button>`);
     expect(el, 'pf-button should be an instance of PfButton')
diff --git a/elements/pf-card/test/pf-card.spec.ts b/elements/pf-card/test/pf-card.spec.ts
@@ -5,6 +5,10 @@ import '@patternfly/pfe-tools/test/stub-logger.js';
 import { PfCard } from '@patternfly/elements/pf-card/pf-card.js';
 
 describe('<pf-card>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-card')).to.be.an.instanceof(PfCard);
+  });
+
   it('should upgrade', async function() {
     expect(await createFixture<PfCard>(html`<pf-card></pf-card>`))
       .to.be.an.instanceof(customElements.get('pf-card'))
diff --git a/elements/pf-clipboard-copy/test/pf-clipboard-copy.spec.ts b/elements/pf-clipboard-copy/test/pf-clipboard-copy.spec.ts
@@ -23,6 +23,10 @@ describe('<pf-clipboard-copy>', function() {
     `);
   });
 
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-clipboard-copy')).to.be.an.instanceof(PfClipboardCopy);
+  });
+
   it('should upgrade', async function() {
     const klass = customElements.get('pf-clipboard-copy');
     expect(element)
diff --git a/elements/pf-code-block/test/pf-code-block.spec.ts b/elements/pf-code-block/test/pf-code-block.spec.ts
@@ -48,6 +48,10 @@ const expandElementByDefault = html`
 `;
 
 describe('<pf-code-block>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-code-block')).to.be.an.instanceof(PfCodeBlock);
+  });
+
   it('should upgrade', async function() {
     const el = await createFixture <PfCodeBlock>(element);
     const klass = customElements.get('pf-code-block');
diff --git a/elements/pf-icon/test/pf-icon.spec.ts b/elements/pf-icon/test/pf-icon.spec.ts
@@ -25,6 +25,10 @@ describe('<pf-icon>', function() {
     element = await fixture(html`<pf-icon></pf-icon>`);
   });
 
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-icon')).to.be.an.instanceof(PfIcon);
+  });
+
   it('should upgrade', function() {
     expect(element, 'pf-icon should be an instance of PfIcon')
       .to.be.an.instanceOf(customElements.get('pf-icon'))
diff --git a/elements/pf-jump-links/test/pf-jump-links.spec.ts b/elements/pf-jump-links/test/pf-jump-links.spec.ts
@@ -27,6 +27,12 @@ describe('<pf-jump-links>', function() {
     [firstItem, secondItem] = element.querySelectorAll<PfJumpLinksItem>('pf-jump-links-item');
   });
 
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-jump-links')).to.be.an.instanceof(PfJumpLinks);
+    expect(document.createElement('pf-jump-links-item')).to.be.an.instanceof(PfJumpLinksItem);
+    expect(document.createElement('pf-jump-links-list')).to.be.an.instanceof(PfJumpLinksList);
+  });
+
   describe('tabbing to first item', function() {
     let initialActiveElement: Element | null;
     beforeEach(async function() {
diff --git a/elements/pf-label/test/pf-label.spec.ts b/elements/pf-label/test/pf-label.spec.ts
@@ -45,6 +45,10 @@ describe('<pf-label>', function() {
     });
   });
 
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-label')).to.be.an.instanceof(PfLabel);
+  });
+
   it('should upgrade', async function() {
     const el = await createFixture<PfLabel>(example);
     const klass = customElements.get('pf-label');
diff --git a/elements/pf-modal/test/pf-modal.spec.ts b/elements/pf-modal/test/pf-modal.spec.ts
@@ -33,6 +33,10 @@ const TEMPLATES = {
 };
 
 describe('<pf-modal>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-modal')).to.be.an.instanceof(PfModal);
+  });
+
   it('should upgrade', async function() {
     const el = await createFixture<PfModal>(TEMPLATES.testElement);
     expect(el, 'pf-modal should be an instance of PfModal')
diff --git a/elements/pf-panel/test/pf-panel.spec.ts b/elements/pf-panel/test/pf-panel.spec.ts
@@ -8,6 +8,11 @@ describe('<pf-panel>', function() {
     beforeEach(async function() {
       element = await createFixture <PfPanel>(html`<pf-panel></pf-panel>`);
     });
+
+    it('imperatively instantiates', function() {
+      expect(document.createElement('pf-panel')).to.be.an.instanceof(PfPanel);
+    });
+
     it('should upgrade', function() {
       const klass = customElements.get('pf-panel');
       expect(element)
diff --git a/elements/pf-popover/test/pf-popover.spec.ts b/elements/pf-popover/test/pf-popover.spec.ts
@@ -20,6 +20,10 @@ describe('<pf-popover>', function() {
     snapshot = await a11ySnapshot();
   });
 
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-popover')).to.be.an.instanceof(PfPopover);
+  });
+
   it('should upgrade', async function() {
     const klass = customElements.get('pf-popover');
     expect(element).to.be.an.instanceOf(klass).and.to.be.an.instanceOf(PfPopover);
diff --git a/elements/pf-progress-stepper/test/pf-progress-stepper.spec.ts b/elements/pf-progress-stepper/test/pf-progress-stepper.spec.ts
@@ -3,8 +3,14 @@ import { html, expect } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 
 import { PfProgressStepper } from '@patternfly/elements/pf-progress-stepper/pf-progress-stepper.js';
+import { PfProgressStep } from '../pf-progress-step.js';
 
 describe('<pf-progress-stepper>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-progress-stepper')).to.be.an.instanceof(PfProgressStepper);
+    expect(document.createElement('pf-progress-step')).to.be.an.instanceof(PfProgressStep);
+  });
+
   it('it should upgrade', async function() {
     const el = await createFixture<PfProgressStepper>(html`<pf-progress-stepper></pf-progress-stepper>`);
     expect(el)
diff --git a/elements/pf-spinner/test/pf-spinner.spec.ts b/elements/pf-spinner/test/pf-spinner.spec.ts
@@ -3,6 +3,10 @@ import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { PfSpinner } from '@patternfly/elements/pf-spinner/pf-spinner.js';
 
 describe('<pf-spinner>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-spinner')).to.be.an.instanceof(PfSpinner);
+  });
+
   it('should upgrade', async function() {
     const element = await createFixture<PfSpinner>(html`<pf-spinner>Loading...</pf-spinner>`);
     expect(element, 'pf-spinner should be an instance of PfeSpinner')
diff --git a/elements/pf-switch/test/pf-switch.spec.ts b/elements/pf-switch/test/pf-switch.spec.ts
@@ -6,6 +6,10 @@ import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 import { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';
 
 describe('<pf-switch>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-switch')).to.be.an.instanceof(PfSwitch);
+  });
+
   describe('simply instantiating', function() {
     let element: PfSwitch;
     let snapshot: A11yTreeSnapshot;
diff --git a/elements/pf-tabs/BaseTabPanel.ts b/elements/pf-tabs/BaseTabPanel.ts
@@ -7,8 +7,6 @@ import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 export abstract class BaseTabPanel extends LitElement {
   static readonly styles = [style];
 
-  hidden = true;
-
   #internals = this.attachInternals();
 
   render() {
@@ -20,7 +18,9 @@ export abstract class BaseTabPanel extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.id ||= getRandomId('pf-tab-panel');
+    this.hidden ??= true;
     this.#internals.role = 'tabpanel';
+
     /*
      To make it easy for screen reader users to navigate from a tab
      to the beginning of content in the active tabpanel, the tabpanel
diff --git a/elements/pf-tabs/test/pf-tabs.spec.ts b/elements/pf-tabs/test/pf-tabs.spec.ts
@@ -6,6 +6,7 @@ import { setViewport, sendKeys } from '@web/test-runner-commands';
 import { BaseTab } from '../BaseTab.js';
 import { PfTabs } from '../pf-tabs.js';
 import { PfTab } from '../pf-tab.js';
+import { PfTabPanel } from '../pf-tab-panel.js';
 
 import '@patternfly/pfe-tools/test/stub-logger.js';
 
@@ -40,6 +41,12 @@ const DISABLED = html`
 `;
 
 describe('<pf-tabs>', function() {
+  it('instantiates imperatively', function() {
+    expect(document.createElement('pf-tabs')).to.be.an.instanceof(PfTabs);
+    expect(document.createElement('pf-tab')).to.be.an.instanceof(PfTab);
+    expect(document.createElement('pf-tab-panel')).to.be.an.instanceof(PfTabPanel);
+  });
+
   it('should upgrade', async function() {
     const el = await createFixture<PfTabs>(TEMPLATE);
     expect(el, 'pf-tabs should be an instance of PfeTabs')
diff --git a/elements/pf-tile/test/pf-tile.spec.ts b/elements/pf-tile/test/pf-tile.spec.ts
@@ -12,6 +12,10 @@ const TEMPLATE = html`
 
 
 describe('<pf-tile>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-tile')).to.be.an.instanceof(PfTile);
+  });
+
   it('should upgrade', async function() {
     const el = await createFixture <PfTile>(TEMPLATE);
     const klass = customElements.get('pf-tile');
diff --git a/elements/pf-timestamp/test/pf-timestamp.spec.ts b/elements/pf-timestamp/test/pf-timestamp.spec.ts
@@ -3,6 +3,10 @@ import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { PfTimestamp } from '@patternfly/elements/pf-timestamp/pf-timestamp.js';
 
 describe('<pf-timestamp>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-timestamp')).to.be.an.instanceof(PfTimestamp);
+  });
+
   it('should upgrade', async function() {
     const element = await createFixture<PfTimestamp>(html`<pf-timestamp></pf-timestamp>`);
     expect(element, 'the <pf-timestamp> should be an instance of PfTimestamp')
diff --git a/elements/pf-tooltip/test/pf-tooltip.spec.ts b/elements/pf-tooltip/test/pf-tooltip.spec.ts
@@ -12,6 +12,11 @@ describe('<pf-tooltip>', function() {
   beforeEach(async function() {
     await setViewport({ width: 1000, height: 1000 });
   });
+
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-tooltip')).to.be.an.instanceof(PfTooltip);
+  });
+
   it('should upgrade', async function() {
     element = await fixture<PfTooltip>(html`<pf-tooltip></pf-tooltip>`);
     const klass = customElements.get('pf-tooltip');
@@ -55,4 +60,3 @@ describe('<pf-tooltip>', function() {
     });
   });
 });
-
diff --git a/tools/create-element/templates/element/test/element.spec.ts b/tools/create-element/templates/element/test/element.spec.ts
@@ -5,6 +5,10 @@ import { <%= className %> } from '<%= importSpecifier %>';
 describe('<<%= tagName %>>', function() {
   describe('simply instantiating', function() {
     let element: <%= className %>;
+    it('imperatively instantiates', function() {
+      expect(document.createElement('<%= tagName %>')).to.be.an.instanceof(<%= className %>);
+    });
+
     it('should upgrade', async function() {
       element = await createFixture<<%= className %>>(html`<<%= tagName %>></<%= tagName %>>`);
       const klass = customElements.get('<%= tagName %>');

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +---
 +"@patternfly/create-element": patch
 +---
 +Tests: check for imperative element instantiation