@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
122 lines (119 loc) • 4.48 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, it, expect } from 'vitest';
import { fixture, oneEvent, html } from '@open-wc/testing';
import { blockClass } from './guide-banner.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 = {
handleToggle: () => { },
handleClose: () => { },
};
const defaultProps = {
collapseText: 'Collapse',
expandText: 'Expand',
open: false,
titleText: 'Test title',
};
const defaultSlots = {
header: 'Test header content',
body: 'Test body content',
footer: 'Test footer content',
};
const templateArgs = {
events: defaultEvents,
props: defaultProps,
slots: defaultSlots,
};
const template = (args = {}) => {
const { props, slots, events } = Object.assign(Object.assign({}, templateArgs), args);
return html `
<c4p-guide-banner
@c4p-guidebanner-toggle=${events.handleToggle}
@c4p-guidebanner-close=${events.handleClose}
class=${blockClass}
collapseText=${props.collapseText}
expandText=${props.expandText}
?open=${props.open}
titleText=${props.titleText}
>
<div slot="header">
<div class="body">${slots.header}</div>
</div>
<div slot="body">
<div class="body">${slots.body}</div>
</div>
<div slot="footer">
<div class="footer">${slots.footer}</div>
</div>
</c4p-guide-banner>
`;
};
describe('c4p-options-tile', () => {
it('renders guidebanner', 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.titleText).to.equal(defaultProps.titleText);
const titleEl = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__title`);
expect(titleEl).toBeDefined();
});
it('renders a header', async () => {
var _a;
const el = await fixture(template());
const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="header"]`);
expect(slot).toBeTruthy();
const node = slot.assignedNodes()[0];
const { innerText } = node;
expect(innerText).toBe(defaultSlots.header);
});
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('renders a footer', 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="footer"]`);
expect(slot).toBeTruthy();
const node = slot.assignedNodes()[0];
const { innerText } = node;
expect(innerText).toBe(defaultSlots.footer);
});
it('fires toggle handler', async () => {
var _a;
const el = await fixture(template());
const toggleBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__toggle-button`);
const listener = oneEvent(el, 'c4p-guidebanner-toggle');
toggleBtn === null || toggleBtn === void 0 ? void 0 : toggleBtn.click();
const { detail } = await listener;
expect(detail).toBeTruthy();
});
it('fires close handler', async () => {
var _a;
const el = await fixture(template({ props: { open: true } }));
const closeBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__close-button`);
const listener = oneEvent(el, 'c4p-guidebanner-close');
closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.click();
const { detail } = await listener;
expect(detail).toBeTruthy();
});
});
//# sourceMappingURL=guide-banner.test.js.map