@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
173 lines (170 loc) • 6.88 kB
JavaScript
/**
* 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, beforeEach, it, expect } from 'vitest';
import { fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
import { prefix, carbonPrefix } from '../../globals/settings.js';
import CDSChecklist from './checklist.js';
import CDSChecklistItem from './checklist-item.js';
import { Kinds } from './checklist.types.js';
import './checklist-group.js';
import './checklist-chart.js';
import './checklist-icon.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 blockClass = `${prefix}--checklist`;
describe('c4p-checklist', () => {
let el;
beforeEach(async () => {
el = await fixture(html `
<c4p-checklist
title="Test Title"
chart-label="5 out of 10 tasks completed"
chart-value="0.5"
toggle-label="Toggle"
toggle-label-align="top"
toggle-aria-label="Toggle"
view-all-label="View All"
></c4p-checklist>
`);
});
it('renders with default properties', () => {
const shadow = el.shadowRoot;
// Render title
expect(shadow.textContent).to.include('Test Title');
// Render chartLabel
expect(shadow.textContent).to.include('5 out of 10 tasks completed');
// Render chart
const chart = shadow.querySelector(`.${blockClass}__chart`);
expect(chart).to.exist;
// Render toggle button
const toggleButton = shadow.querySelector(`.${blockClass}__toggle`);
expect(toggleButton).to.exist;
// Checklist should be in collapsed state
expect(el.open).to.be.false;
});
it('toggles open state and fires checklistToggle event', async () => {
const shadow = el.shadowRoot;
const toggleButton = shadow.querySelector(`.${blockClass}__toggle`);
// Listen for event before clicking
setTimeout(() => toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.click());
const ev = await oneEvent(el, CDSChecklist.checklistToggle);
// Verify open property updated
expect(el.open).to.be.true;
expect(ev).to.exist;
});
it('fires checklistViewAll event on viewAll button click', async () => {
const shadow = el.shadowRoot;
const link = Array.from(shadow.querySelectorAll(`${carbonPrefix}-link`)).find((a) => { var _a; return ((_a = a.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === 'View All'; });
expect(link).toBeTruthy();
setTimeout(() => link === null || link === void 0 ? void 0 : link.click());
const ev = await oneEvent(el, CDSChecklist.checklistViewAll);
expect(ev).to.exist;
});
it('does not render toggle button if disableToggle is true', async () => {
el = await fixture(html `
<c4p-checklist
title="Test Title"
chart-label="5 out of 10 tasks completed"
chart-value="0.5"
disable-toggle
toggle-label="Toggle"
toggle-label-align="top"
toggle-aria-label="Toggle"
view-all-label="View All"
></c4p-checklist>
`);
await elementUpdated(el);
const shadow = el.shadowRoot;
const toggleBtn = shadow.querySelector(`.${blockClass}__toggle`);
expect(toggleBtn).to.be.null;
});
});
describe('c4p-checklist-group', () => {
let el;
beforeEach(async () => {
el = await fixture(html `
<c4p-checklist-group title="Test Title"></c4p-checklist-group>
`);
});
it('renders group title', () => {
var _a, _b;
expect((_b = (_a = el
.shadowRoot.querySelector(`.${blockClass}__list-title`)) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()).toBe('Test Title');
});
it('renders an empty list when no content is provided', () => {
const ol = el.shadowRoot.querySelector('ol');
expect(ol).to.exist;
expect(ol.querySelector('li')).to.be.null;
});
it('renders checklist items provided via slot', async () => {
var _a;
el = await fixture(html `
<c4p-checklist-group title="Test Title">
<c4p-checklist-item
label="task 1"
status="completed"
></c4p-checklist-item>
<c4p-checklist-item
label="task 2"
status="in progress"
></c4p-checklist-item>
<c4p-checklist-item
label="task 3"
status="not started"
></c4p-checklist-item>
</c4p-checklist-group>
`);
await elementUpdated(el);
const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
expect(slot).toBeDefined();
// Retrieve the assigned custom elements
const checklistItems = slot
.assignedElements()
.filter((el) => el.tagName.toLowerCase() === 'c4p-checklist-item');
expect(checklistItems).toHaveLength(3);
});
});
describe('c4p-checklist-item', () => {
const label = 'Test Label';
const status = 'in progress';
const clickable = true;
let el;
beforeEach(async () => {
el = await fixture(html `
<c4p-checklist-item
.label=${label}
.status=${status}
.clickable=${clickable}
></c4p-checklist-item>
`);
});
it('renders item with correct classes', async () => {
var _a, _b;
const itemEl = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__label`);
expect(itemEl).to.exist;
expect(itemEl === null || itemEl === void 0 ? void 0 : itemEl.classList.contains(`${blockClass}__label--clickable`)).to.be
.true;
expect((_b = itemEl === null || itemEl === void 0 ? void 0 : itemEl.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal(label);
});
it('dispatches "checklistItemClicked" event on click', async () => {
var _a;
const itemEl = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__label--clickable`);
// Use oneEvent to await the custom event
setTimeout(() => itemEl === null || itemEl === void 0 ? void 0 : itemEl.click());
const event = await oneEvent(el, CDSChecklistItem.checklistItemClicked);
expect(event).to.exist;
});
it('maps status to correct kind', () => {
expect(el['_mapStatusToKind'](status)).to.equal(Kinds.indeterminate);
expect(el['_mapStatusToKind']('unknown')).to.equal(Kinds.error);
});
});
//# sourceMappingURL=checklist.test.js.map