@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
51 lines (50 loc) • 2.97 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import { renderFunctionalComponentToSpecPage } from "../../../utils/testing";
import KolButtonFc from "../Button";
describe('KolButtonFc', () => {
it('should render correctly', async () => {
var _a, _b;
const page = await renderFunctionalComponentToSpecPage(() => h(KolButtonFc, { label: "Test Button" }));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.tagName).toBe('KOL-BUTTON-WC');
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.getAttribute('_label')).toContain('Test Button');
});
it('should render with custom class', async () => {
var _a;
const page = await renderFunctionalComponentToSpecPage(() => h(KolButtonFc, { label: "Test Button", class: "custom-class" }));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.className).toContain('custom-class');
});
it('should handle click event', async () => {
var _a;
const onClick = jest.fn();
const page = await renderFunctionalComponentToSpecPage(() => h(KolButtonFc, { label: "Test Button", onClick: onClick }));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.getAttribute('_on')).toBeDefined();
});
it('should render with icons', async () => {
var _a;
const icons = { left: 'icon-left', right: 'icon-right' };
const page = await renderFunctionalComponentToSpecPage(() => h(KolButtonFc, { label: "Test Button", icons: icons }));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a._icons).toEqual(icons);
});
it('should hide label when hideLabel is true', async () => {
var _a;
const page = await renderFunctionalComponentToSpecPage(() => h(KolButtonFc, { label: "Test Button", hideLabel: true }));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.getAttribute('_hideLabel')).toBeDefined();
});
it('should render with a long tooltip inside a row-reverse flex container', async () => {
var _a;
const page = await renderFunctionalComponentToSpecPage(() => (h("div", { style: { display: 'flex', flexDirection: 'row-reverse', width: '200px' } }, h(KolButtonFc, { label: "This is a very long tooltip text that demonstrates the behavior in a row-reverse layout", hideLabel: true, icons: "codicon codicon-home", variant: "primary" }))));
const button = (_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelector('kol-button-wc');
await button.focus();
await page.waitForChanges();
expect(page.root).toMatchSnapshot();
});
});
//# sourceMappingURL=snapshot.test.js.map