Skip to content

chore: add options tile wc tests #7475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions config/babel-preset-ibm-cloud-cognitive/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
};
};
1 change: 1 addition & 0 deletions config/babel-preset-ibm-cloud-cognitive/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions config/jest-config-ibm-cloud-cognitive/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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`;

/**
Expand All @@ -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
*/
Expand Down Expand Up @@ -82,6 +70,9 @@ class CDSOptionsTile extends HostListenerMixin(LitElement) {
const init = {
bubbles: true,
composed: true,
detail: {
open: this.open,
},
};
this.dispatchEvent(
new CustomEvent(
Expand All @@ -95,6 +86,9 @@ class CDSOptionsTile extends HostListenerMixin(LitElement) {
const init = {
bubbles: true,
composed: true,
detail: {
open: this.open,
},
};
this.dispatchEvent(
new CustomEvent(
Expand Down
1 change: 1 addition & 0 deletions packages/ibm-products/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading
Loading