@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
61 lines (60 loc) • 4.49 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import { renderFunctionalComponentToSpecPage } from "../../../utils/testing";
import KolHeadingFc from "../Heading";
describe('KolHeadingFc', () => {
it('should render with default props', async () => {
var _a, _b, _c;
const page = await renderFunctionalComponentToSpecPage(() => h(KolHeadingFc, null, "Default Heading"));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.tagName).toBe('H1');
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.textContent).toContain('Default Heading');
expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.classList.contains('kol-headline')).toBe(true);
});
it('should render with a specific level', async () => {
var _a, _b, _c;
const page = await renderFunctionalComponentToSpecPage(() => h(KolHeadingFc, { level: 3 }, "Level 3 Heading"));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.tagName).toBe('H3');
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.textContent).toContain('Level 3 Heading');
expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.classList.contains('kol-headline')).toBe(true);
});
it('should render with a secondary headline', async () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
const page = await renderFunctionalComponentToSpecPage(() => h(KolHeadingFc, { secondaryHeadline: "Secondary Headline" }, "Main Heading"));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.tagName).toBe('HGROUP');
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.querySelector('h1')).not.toBeNull();
expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.querySelector('p')).not.toBeNull();
expect((_d = page.root) === null || _d === void 0 ? void 0 : _d.textContent).toContain('Main Heading');
expect((_e = page.root) === null || _e === void 0 ? void 0 : _e.textContent).toContain('Secondary Headline');
expect((_f = page.root) === null || _f === void 0 ? void 0 : _f.classList.contains('kol-heading-group')).toBe(true);
expect((_h = (_g = page.root) === null || _g === void 0 ? void 0 : _g.querySelector('h1')) === null || _h === void 0 ? void 0 : _h.classList.contains('kol-headline--single')).toBe(false);
expect((_k = (_j = page.root) === null || _j === void 0 ? void 0 : _j.querySelector('p')) === null || _k === void 0 ? void 0 : _k.classList.contains('kol-headline--single')).toBe(false);
});
it('should apply custom class names', async () => {
var _a, _b, _c, _d;
const page = await renderFunctionalComponentToSpecPage(() => h(KolHeadingFc, { class: "custom-class" }, "Custom Class Heading"));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.tagName).toBe('H1');
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.classList.contains('custom-class')).toBe(true);
expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.classList.contains('kol-headline')).toBe(true);
expect((_d = page.root) === null || _d === void 0 ? void 0 : _d.textContent).toContain('Custom Class Heading');
});
it('should apply SecondaryHeadlineProps to the secondary headline', async () => {
var _a;
const page = await renderFunctionalComponentToSpecPage(() => (h(KolHeadingFc, { secondaryHeadline: "Secondary", SecondaryHeadlineProps: { class: 'secondary-class', 'aria-label': 'secondary-label' } }, "Primary")));
expect(page.root).toBeDefined();
expect(page.root).toMatchSnapshot();
const secondary = (_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelector('p');
expect(secondary === null || secondary === void 0 ? void 0 : secondary.classList.contains('secondary-class')).toBe(true);
expect(secondary === null || secondary === void 0 ? void 0 : secondary.getAttribute('aria-label')).toBe('secondary-label');
});
});
//# sourceMappingURL=snapshot.test.js.map