@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
72 lines (71 loc) • 4.14 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import { renderFunctionalComponentToSpecPage } from "../../../utils/testing";
import { SpanFC } from "./component";
describe('SpanFC', () => {
it('should render with default props', async () => {
var _a, _b, _c;
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "Default Label" }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()).toBe('span');
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.classList.contains('kol-span')).toBe(true);
expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.textContent).toContain('Default Label');
});
it('should render with icons', async () => {
var _a;
const icons = { top: { icon: 'top-icon' }, left: { icon: 'left-icon' }, right: { icon: 'right-icon' }, bottom: { icon: 'bottom-icon' } };
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "Label with Icons", icons: icons }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('i')).toHaveLength(4);
});
it('should hide label when hideLabel is true', async () => {
var _a, _b;
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "Hidden Label", hideLabel: true }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.classList.contains('kol-span--hide-label')).toBe(true);
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.textContent).not.toContain('Hidden Label');
});
it('should render with badge text', async () => {
var _a;
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "Label with Badge", badgeText: "Badge" }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.textContent).toContain('Badge');
});
it('should allow markdown in label', async () => {
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "**Bold Label**", allowMarkdown: true }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
});
it('should underline exact badge text match in label', async () => {
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "Test Label", badgeText: "T" }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
});
it('should underline multi-char badge text in label', async () => {
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "Test Label", badgeText: "st" }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
});
it('should try uppercase badge text variant when no exact match', async () => {
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "Test Label", badgeText: "test" }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
});
it('should try lowercase badge text variant when no uppercase match', async () => {
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "Test Label", badgeText: "TEST" }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
});
it('should handle badge text with no match in label', async () => {
const page = await renderFunctionalComponentToSpecPage(() => h(SpanFC, { label: "Test Label", badgeText: "X" }));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
});
});
//# sourceMappingURL=snapshot.test.js.map