@carbon/ibm-products-web-components/es-custom/components/options-tile/options-tile.test.js

Carbon for IBM Products Web Components

/**
 * Copyright IBM Corp. 2024
 *
 * 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, it, expect } from 'vitest';
import { fixture, oneEvent, html } from '@open-wc/testing';
import { blockClass } from './options-tile.js';

/**
 * 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.
 */
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 } = Object.assign(Object.assign({}, 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 = await fixture(template());
        expect(el).toBeDefined();
    });
    it('renders a title', async () => {
        var _a;
        const el = await fixture(template());
        expect(el).toBeDefined();
        expect(el.title).to.equal(defaultProps.title);
        const titleEl = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__title`);
        expect(titleEl).toBeDefined();
        const id = titleEl === null || titleEl === void 0 ? void 0 : titleEl.getAttribute('id');
        expect(id).to.equal(defaultProps.titleId);
    });
    it('renders a summary', async () => {
        var _a;
        const el = await fixture(template());
        const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="summary"]`);
        expect(slot).toBeTruthy();
        const node = slot.assignedNodes()[0];
        const { innerText } = node;
        expect(innerText).toBe(defaultSlots.summary);
    });
    it('renders a toggle', async () => {
        var _a;
        const el = await fixture(template());
        const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="toggle"]`);
        expect(slot).toBeTruthy();
        const node = slot.assignedNodes()[0];
        const { innerText } = node;
        expect(innerText).toBe(defaultSlots.toggle);
    });
    it('renders a body', async () => {
        var _a;
        const el = await fixture(template({ props: { open: true } }));
        const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="body"]`);
        expect(slot).toBeTruthy();
        const node = slot.assignedNodes()[0];
        const { innerText } = node;
        expect(innerText).toBe(defaultSlots.body);
    });
    it('fires open handler', async () => {
        var _a;
        const el = await fixture(template());
        const chevron = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__chevron`);
        const listener = oneEvent(el, 'c4p-options-tile-open');
        chevron === null || chevron === void 0 ? void 0 : chevron.click();
        const { detail } = await listener;
        expect(detail).toBeTruthy();
    });
    it('fires close handler', async () => {
        var _a;
        const el = await fixture(template({ props: { open: true } }));
        const chevron = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__chevron`);
        const listener = oneEvent(el, 'c4p-options-tile-close');
        chevron === null || chevron === void 0 ? void 0 : chevron.click();
        const { detail } = await listener;
        expect(detail).toBeTruthy();
    });
    it('has xl class when size is xl', async () => {
        var _a;
        const el = await fixture(template({ props: { size: 'xl' } }));
        const node = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}--xl`);
        expect(node).toBeTruthy();
    });
});
//# sourceMappingURL=options-tile.test.js.map