@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
78 lines (75 loc) • 3.15 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 './coachmark-beacon.js';
import { prefix } from '../../../globals/settings.js';
/**
* @license
*
* 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}--coachmark-beacon`;
const defaultProps = {
label: 'show information',
id: 'coachmarkBeacon',
};
const template = (props = defaultProps) => html `
<c4p-coachmark-beacon
label=${props.label}
@c4p-coachmark-beacon-clicked=${(e) => {
console.log('Beacon clicked!', e.detail.expanded);
}}
>
</c4p-coachmark-beacon>
`;
describe('c4p-coachmark-beacon', () => {
it('should render a beacon', async () => {
const beacon = await fixture(template(Object.assign({}, defaultProps)));
expect(beacon).toBeDefined();
});
it('has correct host classes', async () => {
const el = await fixture(template(Object.assign({}, defaultProps)));
expect(el.classList.contains(blockClass)).to.be.true;
expect(el.classList.contains(`${blockClass}-default`)).to.be.true;
});
it('applies className to the containing node', async () => {
const customClass = 'test';
const beacon = await fixture(template(Object.assign({}, defaultProps)));
beacon.classList.add(customClass);
expect(beacon.getAttribute('class')).to.include(customClass);
});
it('should render icon for the beacon', async () => {
var _a;
const beacon = await fixture(template(Object.assign({}, defaultProps)));
const renderedSVG = (_a = beacon === null || beacon === void 0 ? void 0 : beacon.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="icon"]');
expect(renderedSVG).to.exist;
const assignedNodes = renderedSVG.assignedNodes({ flatten: true });
const svg = assignedNodes.find((node) => node.nodeName.toLowerCase() === 'svg');
expect(svg).to.exist;
});
it('toggles expanded state and dispatches event on click', async () => {
const el = (await fixture(template(Object.assign({}, defaultProps))));
const button = el.shadowRoot.querySelector('cds-button');
const eventPromise = oneEvent(el, 'c4p-coachmark-beacon-clicked');
button.click();
const event = await eventPromise;
expect(event).to.exist;
expect(event.detail.expanded).to.be.true;
expect(el.hasAttribute('expanded')).to.be.true;
expect(button.getAttribute('aria-expanded')).to.equal('true');
// simulate an outside click
document.body.click();
await el.updateComplete;
expect(el.hasAttribute('expanded')).to.be.false;
expect(button.getAttribute('aria-expanded')).to.equal('false');
});
});
//# sourceMappingURL=coachmark-beacon.test.js.map