chore: add options tile wc tests

config/babel-preset-ibm-cloud-cognitive/index.js

@@ -29,6 +29,7 @@ module.exports = () => {
       '@babel/plugin-proposal-export-namespace-from',
       '@babel/plugin-proposal-export-default-from',
       '@babel/plugin-transform-react-constant-elements',
+      '@babel/plugin-transform-class-static-block',
     ],
   };
 };

config/babel-preset-ibm-cloud-cognitive/package.json

@@ -29,6 +29,7 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-default-from": "^7.25.9",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-transform-class-static-block": "^7.27.1",
     "@babel/plugin-transform-react-constant-elements": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",

config/jest-config-ibm-cloud-cognitive/package.json

@@ -32,6 +32,7 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-default-from": "^7.25.9",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-transform-class-static-block": "^7.27.1",
     "@babel/plugin-transform-runtime": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",

package.json

@@ -85,7 +85,6 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/carbon__layout": "^0.0.3",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "accessibility-checker": "^4.0.2",
     "commander": "^13.0.0",
     "copyfiles": "^2.4.1",
     "cspell": "^8.17.5",
@@ -122,6 +121,7 @@
   "//resolutions:http-signature": "package 'request' deprecated but still used, asks for http-signature ~1.2.0 which indirectly has vulnerabilities",
   "//resolutions:minimist": "https://security.snyk.io/vuln/SNYK-JS-MINIMIST-2429795 (version <=1.2.5)",
   "resolutions": {
+    "accessibility-checker": "4.0.2",
     "body-parser": "2.2.0",
     "braces": "^3.0.3",
     "cross-spawn": "7.0.6",

packages/ibm-products-web-components/src/components/options-tile/options-tile.stories.ts

@@ -20,12 +20,6 @@ const argTypes = {
     control: 'boolean',
     description: 'If `true` the body of the component is shown',
   },
-  onClose: {
-    description: 'Callback fired when the component requests to be closed',
-  },
-  onOpen: {
-    description: 'Callback fired when the component requests to be opened',
-  },
   size: {
     control: 'radio',
     options: ['lg', 'xl'],

packages/ibm-products-web-components/src/components/options-tile/options-tile.test.ts

@@ -0,0 +1,144 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { describe, expect, it } from 'vitest';
+import { fixture, html, oneEvent } from '@open-wc/testing';
+import CDSOptionsTile, { blockClass } from './options-tile';
+
+const defaultEvents = {
+  handleOpen: () => {},
+  handleClose: () => {},
+};
+
+const defaultProps = {
+  open: false,
+  size: 'lg',
+  title: 'Test title',
+  titleId: 'test-title',
+};
+
+const defaultSlots = {
+  body: 'Test body content.',
+  summary: 'Test summary',
+  toggle: 'Toggle element',
+};
+
+const templateArgs = {
+  events: defaultEvents,
+  props: defaultProps,
+  slots: defaultSlots,
+};
+
+const template = (args = {}) => {
+  const { props, slots, events } = { ...templateArgs, ...args };
+  return html`
+    <c4p-options-tile
+      id="my-tile"
+      ?open=${props.open}
+      size=${props.size}
+      title=${props.title}
+      titleId=${props.titleId}
+      @c4p-options-tile-open=${events.handleOpen}
+      @c4p-options-tile-close=${events.handleClose}
+    >
+      <div slot="summary">
+        <span class="summary">${slots.summary}</span>
+      </div>
+      <div slot="toggle">
+        <span class="toggle">${slots.toggle}</span>
+      </div>
+      <div slot="body">
+        <span class="body">${slots.body}</span>
+      </div>
+    </c4p-options-tile>
+  `;
+};
+
+describe('c4p-options-tile', () => {
+  it('renders options tile', async () => {
+    const el: CDSOptionsTile = await fixture(template());
+    expect(el).toBeDefined();
+  });
+
+  it('renders a title', async () => {
+    const el: CDSOptionsTile = await fixture(template());
+    expect(el).toBeDefined();
+    expect(el.title).to.equal(defaultProps.title);
+    const titleEl = el.shadowRoot?.querySelector(`.${blockClass}__title`);
+    expect(titleEl).toBeDefined();
+    const id = titleEl?.getAttribute('id');
+    expect(id).to.equal(defaultProps.titleId);
+  });
+
+  it('renders a summary', async () => {
+    const el: CDSOptionsTile = await fixture(template());
+    const slot = el.shadowRoot?.querySelector(
+      `slot[name="summary"]`
+    ) as HTMLSlotElement;
+    expect(slot).toBeTruthy();
+    const node = slot.assignedNodes()[0] as HTMLElement;
+    const { innerText } = node;
+    expect(innerText).toBe(defaultSlots.summary);
+  });
+
+  it('renders a toggle', async () => {
+    const el: CDSOptionsTile = await fixture(template());
+    const slot = el.shadowRoot?.querySelector(
+      `slot[name="toggle"]`
+    ) as HTMLSlotElement;
+    expect(slot).toBeTruthy();
+    const node = slot.assignedNodes()[0] as HTMLElement;
+    const { innerText } = node;
+    expect(innerText).toBe(defaultSlots.toggle);
+  });
+
+  it('renders a body', async () => {
+    const el: CDSOptionsTile = await fixture(
+      template({ props: { open: true } })
+    );
+    const slot = el.shadowRoot?.querySelector(
+      `slot[name="body"]`
+    ) as HTMLSlotElement;
+    expect(slot).toBeTruthy();
+    const node = slot.assignedNodes()[0] as HTMLElement;
+    const { innerText } = node;
+    expect(innerText).toBe(defaultSlots.body);
+  });
+
+  it('fires open handler', async () => {
+    const el: CDSOptionsTile = await fixture(template());
+    const chevron = el.shadowRoot?.querySelector(
+      `.${blockClass}__chevron`
+    ) as HTMLElement;
+    const listener = oneEvent(el, 'c4p-options-tile-open');
+    chevron?.click();
+    const { detail } = await listener;
+    expect(detail).toBeTruthy();
+  });
+
+  it('fires close handler', async () => {
+    const el: CDSOptionsTile = await fixture(
+      template({ props: { open: true } })
+    );
+    const chevron = el.shadowRoot?.querySelector(
+      `.${blockClass}__chevron`
+    ) as HTMLElement;
+    const listener = oneEvent(el, 'c4p-options-tile-close');
+    chevron?.click();
+    const { detail } = await listener;
+    expect(detail).toBeTruthy();
+  });
+
+  it('has xl class when size is xl', async () => {
+    const el: CDSOptionsTile = await fixture(
+      template({ props: { size: 'xl' } })
+    );
+    const node = el.shadowRoot?.querySelector(
+      `.${blockClass}--xl`
+    ) as HTMLSlotElement;
+    expect(node).toBeTruthy();
+  });
+});

packages/ibm-products-web-components/src/components/options-tile/options-tile.ts

@@ -16,7 +16,7 @@ import styles from './options-tile.scss?lit';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
 import ChevronDown20 from '@carbon/web-components/es/icons/chevron--down/20';
 
-const blockClass = `${prefix}--options-tile`;
+export const blockClass = `${prefix}--options-tile`;
 const blockEvent = `${prefix}-options-tile`;
 
 /**
@@ -36,18 +36,6 @@ class CDSOptionsTile extends HostListenerMixin(LitElement) {
   @property({ type: Boolean, reflect: true })
   open: boolean = false;
 
-  /**
-   * Callback fired when the component requests to be closed
-   */
-  @property({ type: Function })
-  onClose?: (evt: Event) => void;
-
-  /**
-   * Callback fired when the component requests to be opened
-   */
-  @property({ type: Function })
-  onOpen?: (evt: Event) => void;
-
   /**
    * Determines the size of the header
    */
@@ -82,6 +70,9 @@ class CDSOptionsTile extends HostListenerMixin(LitElement) {
     const init = {
       bubbles: true,
       composed: true,
+      detail: {
+        open: this.open,
+      },
     };
     this.dispatchEvent(
       new CustomEvent(
@@ -95,6 +86,9 @@ class CDSOptionsTile extends HostListenerMixin(LitElement) {
     const init = {
       bubbles: true,
       composed: true,
+      detail: {
+        open: this.open,
+      },
     };
     this.dispatchEvent(
       new CustomEvent(

packages/ibm-products/package.json

@@ -66,6 +66,7 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-default-from": "^7.25.9",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-transform-class-static-block": "^7.27.1",
     "@babel/plugin-transform-react-constant-elements": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",