Issue 7142 test

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,141 @@
+/**
+ * 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 { render } from 'lit';
+import './index';
+import CDSOptionsTile, { blockClass } from './options-tile';
+import { prefix } from '../../globals/settings';
+const blockClass = `${prefix}--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 = render(template(), document.body);
+    expect(el).toBeDefined();
+  });
+
+  // it('renders a title', async () => {
+  //   const el = await fixture(template());
+  //   expect(el.title).toBe(defaultProps.title);
+  //   const titleEl = el.shadowRoot?.querySelector(`.${blockClass}__title`);
+  //   const id = titleEl?.getAttribute('id');
+  //   expect(titleEl).toBeTruthy();
+  //   expect(id).toBe(defaultProps.titleId);
+  // });
+
+  it('renders a summary', async () => {
+    const el = 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 = 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 = 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 = 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 = 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 = 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(