@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
78 lines (75 loc) • 3.55 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, html } from '@open-wc/testing';
import { prefix, carbonPrefix } from '../../globals/settings.js';
import './truncated-text.js';
/**
* Copyright IBM Corp. 2025, 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 defaultProps = {
lines: 2,
text: 'Buttons are used to initialize an action, either in the background or foreground of an experience. There are several kinds of buttons. Primary buttons should be used for the principle call to action on the page.',
type: '',
};
const template = (props = defaultProps, templateWidth) => html `
<div style=${templateWidth ? `width: ${templateWidth}px;` : ''}>
<c4p-truncated-text
value=${props.text}
lines=${props.lines}
type=${props.type}
></c4p-truncated-text>
</div>
`;
describe('c4p-truncated-text', () => {
it('renders the component', async () => {
const wrapper = await fixture(template());
const el = wrapper.querySelector(`${prefix}-truncated-text`);
expect(el).toBeTruthy();
});
it('renders a tooltip when text is truncated with tooltip', async () => {
var _a;
const wrapper = await fixture(template(Object.assign(Object.assign({}, defaultProps), { type: 'tooltip' }), 200));
const el = wrapper.querySelector(`${prefix}-truncated-text`);
const tooltip = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${carbonPrefix}-tooltip`);
expect(tooltip).toBeTruthy();
});
it('does not render a tooltip if the text fits', async () => {
var _a;
const wrapper = await fixture(template(Object.assign(Object.assign({}, defaultProps), { type: 'tooltip' }), 9000));
const el = wrapper.querySelector(`${prefix}-truncated-text`);
const tooltip = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${carbonPrefix}-tooltip`);
expect(tooltip).not.toBeTruthy();
});
it('tests lines prop/attribute with tooltip', async () => {
var _a;
for (let lines = 1; lines <= 4; lines++) {
const wrapper = await fixture(template(Object.assign(Object.assign({}, defaultProps), { lines, type: 'tooltip' }), 600));
const el = wrapper.querySelector(`${prefix}-truncated-text`);
await el.updateComplete;
const tooltip = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${carbonPrefix}-tooltip`);
if (lines <= 2) {
expect(tooltip).toBeTruthy();
}
else {
expect(tooltip).not.toBeTruthy();
}
}
});
it('renders a expandable button when text is truncated with expand', async () => {
var _a;
const wrapper = await fixture(template(Object.assign(Object.assign({}, defaultProps), { lines: 2, type: 'expand' }), 400));
const el = wrapper.querySelector(`${prefix}-truncated-text`);
await el.updateComplete;
const expandButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${prefix}--truncated-text_button-expand`);
expect(expandButton).toBeTruthy();
});
});
//# sourceMappingURL=truncated-text.test.js.map