test: Setup SSR fixtures for package components

package.json

@@ -60,6 +60,7 @@
     "@biomejs/biome": "1.9.1",
     "@custom-elements-manifest/analyzer": "^0.10.3",
     "@igniteui/material-icons-extended": "^3.0.2",
+    "@lit-labs/testing": "^0.2.4",
     "@open-wc/testing": "^4.0.0",
     "@storybook/addon-a11y": "^8.3.0",
     "@storybook/addon-actions": "^8.3.0",

scripts/tsconfig.prod.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "exclude": [
+    "../**/*-auto-register.ts",
     "../vite.config.ts",
     "../**/*.spec.ts",
     "../stories"
@@ -12,7 +13,5 @@
     "declarationMap": false,
     "removeComments": true
   },
-  "include": [
-    "../**/*.ts"
-  ]
+  "include": ["../**/*.ts"]
 }

src/components/accordion/accordion-auto-register.ts

@@ -0,0 +1,5 @@
+// NOTE: Self-registering import for SSR fixtures.
+import Component from './accordion.js';
+Component.register();
+
+export default Component;

src/components/accordion/accordion.ssr.spec.ts

@@ -0,0 +1,40 @@
+import {
+  cleanupFixtures,
+  csrFixture,
+  ssrHydratedFixture,
+  ssrNonHydratedFixture,
+} from '@lit-labs/testing/fixtures.js';
+
+import { html } from 'lit';
+import { isSsrRendered, isSsrStyled } from '../common/utils.spec.js';
+import type IgcAccordionComponent from './accordion.js';
+
+afterEach(() => cleanupFixtures());
+
+const template = html`
+  <igc-accordion>
+    <igc-expansion-panel open>
+      <h1 slot="title">Expansion panel 1 title</h1>
+      <h2 slot="subtitle">Expansion panel 1 subtitle</h2>
+      <p>Sample content</p>
+    </igc-expansion-panel>
+    <igc-expansion-panel open>
+      <h1 slot="title">Expansion panel 2 title</h1>
+      <h2 slot="subtitle">Expansion panel 2 subtitle</h2>
+      <p>Sample content</p>
+    </igc-expansion-panel>
+  </igc-accordion>
+`;
+
+for (const fixture of [csrFixture, ssrHydratedFixture, ssrNonHydratedFixture]) {
+  describe(`[${fixture.name}] - igc-accordion`, () => {
+    it('renders as expected', async () => {
+      const element = await fixture<IgcAccordionComponent>(template, {
+        modules: ['./accordion-auto-register.js'],
+      });
+
+      isSsrRendered(element);
+      isSsrStyled(element);
+    });
+  });
+}

src/components/accordion/accordion.ts

@@ -11,8 +11,10 @@ import {
   shiftKey,
 } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { ssrAddEventListener } from '../common/util.js';
 import { first, last } from '../common/util.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
+import type { IgcExpansionPanelComponentEventMap } from '../expansion-panel/expansion-panel.js';
 import { styles } from './themes/accordion.base.css.js';
 
 /**
@@ -52,7 +54,11 @@ export default class IgcAccordionComponent extends LitElement {
   constructor() {
     super();
 
-    this.addEventListener('igcOpening', this.handlePanelOpening);
+    ssrAddEventListener<IgcExpansionPanelComponentEventMap>(
+      this,
+      'igcOpening',
+      this.handlePanelOpening
+    );
 
     addKeybindings(this, {
       skip: this.skipKeybinding,
@@ -111,15 +117,15 @@ export default class IgcAccordionComponent extends LitElement {
     }
   }
 
-  private handlePanelOpening(event: Event) {
-    const current = event.target as IgcExpansionPanelComponent;
-
-    if (!(this.singleExpand && this.panels.includes(current))) {
+  private handlePanelOpening({
+    detail,
+  }: CustomEvent<IgcExpansionPanelComponent>) {
+    if (!(this.singleExpand && this.panels.includes(detail))) {
       return;
     }
 
     for (const panel of this.enabledPanels) {
-      if (panel.open && panel !== current) {
+      if (panel.open && panel !== detail) {
         this.closePanel(panel);
       }
     }

src/components/avatar/avatar-auto-register.ts

@@ -0,0 +1,5 @@
+// NOTE: Self-registering import for SSR fixtures.
+import Component from './avatar.js';
+Component.register();
+
+export default Component;

src/components/avatar/avatar.ssr.spec.ts

@@ -0,0 +1,27 @@
+import {
+  cleanupFixtures,
+  csrFixture,
+  ssrHydratedFixture,
+  ssrNonHydratedFixture,
+} from '@lit-labs/testing/fixtures.js';
+
+import { html } from 'lit';
+import { isSsrRendered, isSsrStyled } from '../common/utils.spec.js';
+import type IgcAvatarComponent from './avatar.js';
+
+afterEach(() => cleanupFixtures());
+
+const template = html`<igc-avatar initials="IG"></igc-avatar>`;
+
+for (const fixture of [csrFixture, ssrHydratedFixture, ssrNonHydratedFixture]) {
+  describe(`[${fixture.name}] - igc-avatar`, () => {
+    it('renders as expected', async () => {
+      const element = await fixture<IgcAvatarComponent>(template, {
+        modules: ['./avatar-auto-register.js'],
+      });
+
+      isSsrRendered(element);
+      isSsrStyled(element);
+    });
+  });
+}

src/components/badge/badge-auto-register.ts

@@ -0,0 +1,5 @@
+// NOTE: Self-registering import for SSR fixtures.
+import Component from './badge.js';
+Component.register();
+
+export default Component;

src/components/badge/badge.ssr.spec.ts

@@ -0,0 +1,27 @@
+import {
+  cleanupFixtures,
+  csrFixture,
+  ssrHydratedFixture,
+  ssrNonHydratedFixture,
+} from '@lit-labs/testing/fixtures.js';
+
+import { html } from 'lit';
+import { isSsrRendered, isSsrStyled } from '../common/utils.spec.js';
+import type IgcBadgeComponent from './badge.js';
+
+afterEach(() => cleanupFixtures());
+
+const template = html`<igc-badge shape="square"></igc-badge>`;
+
+for (const fixture of [csrFixture, ssrHydratedFixture, ssrNonHydratedFixture]) {
+  describe(`[${fixture.name}] - igc-badge`, () => {
+    it('renders as expected', async () => {
+      const element = await fixture<IgcBadgeComponent>(template, {
+        modules: ['./badge-auto-register.js'],
+      });
+
+      isSsrRendered(element);
+      isSsrStyled(element);
+    });
+  });
+}

src/components/banner/banner-auto-register.ts

@@ -0,0 +1,5 @@
+// NOTE: Self-registering import for SSR fixtures.
+import Component from './banner.js';
+Component.register();
+
+export default Component;

src/components/banner/banner.ssr.spec.ts

@@ -0,0 +1,27 @@
+import {
+  cleanupFixtures,
+  csrFixture,
+  ssrHydratedFixture,
+  ssrNonHydratedFixture,
+} from '@lit-labs/testing/fixtures.js';
+
+import { html } from 'lit';
+import { isSsrRendered, isSsrStyled } from '../common/utils.spec.js';
+import type IgcBannerComponent from './banner.js';
+
+afterEach(() => cleanupFixtures());
+
+const template = html`<igc-banner>You are currently offline!</igc-banner>`;
+
+for (const fixture of [csrFixture, ssrHydratedFixture, ssrNonHydratedFixture]) {
+  describe(`[${fixture.name}] - igc-banner`, () => {
+    it('renders as expected', async () => {
+      const element = await fixture<IgcBannerComponent>(template, {
+        modules: ['./banner-auto-register.js'],
+      });
+
+      isSsrRendered(element);
+      isSsrStyled(element);
+    });
+  });
+}

src/components/button-group/button-group-auto-register.ts

@@ -0,0 +1,5 @@
+// NOTE: Self-registering import for SSR fixtures.
+import Component from './button-group.js';
+Component.register();
+
+export default Component;

src/components/button-group/button-group.ssr.spec.ts

@@ -0,0 +1,33 @@
+import {
+  cleanupFixtures,
+  csrFixture,
+  ssrHydratedFixture,
+  ssrNonHydratedFixture,
+} from '@lit-labs/testing/fixtures.js';
+
+import { html } from 'lit';
+import { isSsrRendered, isSsrStyled } from '../common/utils.spec.js';
+import type IgcButtonGroupComponent from './button-group.js';
+
+afterEach(() => cleanupFixtures());
+
+const template = html`
+  <igc-button-group>
+    <igc-toggle-button value="left">Left</igc-toggle-button>
+    <igc-toggle-button value="center">Center</igc-toggle-button>
+    <igc-toggle-button value="right">Right</igc-toggle-button>
+  </igc-button-group>
+`;
+
+for (const fixture of [csrFixture, ssrHydratedFixture, ssrNonHydratedFixture]) {
+  describe(`[${fixture.name}] - igc-button-group`, () => {
+    it('renders as expected', async () => {
+      const element = await fixture<IgcButtonGroupComponent>(template, {
+        modules: ['./button-group-auto-register.js'],
+      });
+
+      isSsrRendered(element);
+      isSsrStyled(element);
+    });
+  });
+}

src/components/button/button-auto-register.ts

@@ -0,0 +1,5 @@
+// NOTE: Self-registering import for SSR fixtures.
+import Component from './button.js';
+Component.register();
+
+export default Component;

src/components/button/button.ssr.spec.ts

@@ -0,0 +1,27 @@
+import {
+  cleanupFixtures,
+  csrFixture,
+  ssrHydratedFixture,
+  ssrNonHydratedFixture,
+} from '@lit-labs/testing/fixtures.js';
+
+import { html } from 'lit';
+import { isSsrRendered, isSsrStyled } from '../common/utils.spec.js';
+import type IgcButtonComponent from './button.js';
+
+afterEach(() => cleanupFixtures());
+
+const template = html`<igc-button variant="outlined">Click</igc-button>`;
+
+for (const fixture of [csrFixture, ssrHydratedFixture, ssrNonHydratedFixture]) {
+  describe(`[${fixture.name}] - igc-button`, () => {
+    it('renders as expected', async () => {
+      const element = await fixture<IgcButtonComponent>(template, {
+        modules: ['./button-auto-register.js'],
+      });
+
+      isSsrRendered(element);
+      isSsrStyled(element);
+    });
+  });
+}

src/components/button/icon-button-auto-register.ts

@@ -0,0 +1,5 @@
+// NOTE: Self-registering import for SSR fixtures.
+import Component from './icon-button.js';
+Component.register();
+
+export default Component;

src/components/button/icon-button.ssr.spec.ts

@@ -0,0 +1,29 @@
+import {
+  cleanupFixtures,
+  csrFixture,
+  ssrHydratedFixture,
+  ssrNonHydratedFixture,
+} from '@lit-labs/testing/fixtures.js';
+
+import { html } from 'lit';
+import { isSsrRendered, isSsrStyled } from '../common/utils.spec.js';
+import type IgcIconButtonComponent from './icon-button.js';
+
+afterEach(() => cleanupFixtures());
+
+const template = html`
+  <igc-icon-button name="icon" variant="outlined">Click</igc-icon-button>
+`;
+
+for (const fixture of [csrFixture, ssrHydratedFixture, ssrNonHydratedFixture]) {
+  describe(`[${fixture.name}] - igc-icon-button`, () => {
+    it('renders as expected', async () => {
+      const element = await fixture<IgcIconButtonComponent>(template, {
+        modules: ['./icon-button-auto-register.js'],
+      });
+
+      isSsrRendered(element);
+      isSsrStyled(element);
+    });
+  });
+}

src/components/calendar/calendar-auto-register.ts

@@ -0,0 +1,5 @@
+// NOTE: Self-registering import for SSR fixtures.
+import Component from './calendar.js';
+Component.register();
+
+export default Component;

src/components/calendar/calendar.ssr.spec.ts

@@ -0,0 +1,27 @@
+import {
+  cleanupFixtures,
+  csrFixture,
+  ssrHydratedFixture,
+  ssrNonHydratedFixture,
+} from '@lit-labs/testing/fixtures.js';
+
+import { html } from 'lit';
+import { isSsrRendered, isSsrStyled } from '../common/utils.spec.js';
+import type IgcCalendarComponent from './calendar.js';
+
+afterEach(() => cleanupFixtures());
+
+const template = html`<igc-calendar></igc-calendar>`;
+
+for (const fixture of [csrFixture, ssrHydratedFixture, ssrNonHydratedFixture]) {
+  describe(`[${fixture.name}] - igc-calendar`, () => {
+    it('renders as expected', async () => {
+      const element = await fixture<IgcCalendarComponent>(template, {
+        modules: ['./calendar-auto-register.js'],
+      });
+
+      isSsrRendered(element);
+      isSsrStyled(element);
+    });
+  });
+}

src/components/calendar/days-view/days-view.ts

@@ -11,7 +11,14 @@ import { IgcCalendarResourceStringEN } from '../../common/i18n/calendar.resource
 import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { chunk, first, last, partNameMap, take } from '../../common/util.js';
+import {
+  chunk,
+  first,
+  last,
+  partNameMap,
+  ssrAddEventListener,
+  take,
+} from '../../common/util.js';
 import { IgcCalendarBaseComponent } from '../base.js';
 import {
   areSameMonth,
@@ -137,7 +144,7 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
       bindingDefaults: { preventDefault: true },
     }).setActivateHandler(this.handleInteraction);
 
-    this.addEventListener('click', this.handleInteraction);
+    ssrAddEventListener(this, 'click', this.handleInteraction);
   }
 
   public override connectedCallback() {

src/components/card/card-auto-register.ts

@@ -0,0 +1,5 @@
+// NOTE: Self-registering import for SSR fixtures.
+import Component from './card.js';
+Component.register();
+
+export default Component;