@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
103 lines (100 loc) • 5.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 { html, fixture, expect as expect$1 } from '@open-wc/testing';
import { render } from 'lit';
import { Kind } from './types.js';
import { blockClass } from './full-page-error.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 = {
class: 'custom-class',
label: 'Error ###',
title: '[Error title]',
description: 'This is a description',
kind: Kind.Custom,
children: html `
<a class="cds-custom--link" href="#">– Forwarding link 1</a>
<br />
<a class="cds-custom--link" href="#">– Forwarding link 2</a>
`,
};
const template = (props = defaultProps) => html `
<c4p-full-page-error
label=${props.label}
class=${props.class}
title=${props.title}
description=${props.description}
kind=${props.kind}
>
${props.children}
</c4p-full-page-error>
`;
const elementName = 'c4p-full-page-error';
describe(elementName, () => {
it('should render full page error', async () => {
const element = render(template(), document.body);
expect(element).toBeDefined();
});
// Can't figure out how to check a11y with vitest, using open-wc chai dom functions for now
it.skip('has no accessibility violations', async () => {
const element = await fixture(template());
expect$1(element).to.be.accessible();
});
it('should render children content', async () => {
var _a;
const childNode = `<p>hello</p>`;
const element = await fixture(template(Object.assign(Object.assign({}, defaultProps), { children: childNode })));
expect((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.includes(childNode)).toBe(true);
});
it('applies a class to the containing node', async () => {
const className = 'a-test-class';
const element = await fixture(template(Object.assign(Object.assign({}, defaultProps), { class: className })));
expect(element.hasAttribute('class')).toBe(true);
});
it('renders an error label', async () => {
var _a, _b, _c;
const element = await fixture(template());
expect(element.label).toBe(defaultProps.label);
expect((_c = (_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__label`)) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.includes(defaultProps.label)).toBeTruthy();
});
it('renders a description', async () => {
var _a, _b;
const element = await fixture(template());
expect(element.description).toBe(defaultProps.description);
expect((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__description`)) === null || _b === void 0 ? void 0 : _b.textContent).toBe(defaultProps.description);
});
it('renders a title', async () => {
var _a, _b, _c;
const element = await fixture(template());
expect(element.title).toBe(defaultProps.title);
expect((_c = (_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__title`)) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.includes(defaultProps.title)).toBeTruthy();
});
it('renders custom svg illustration if kind is custom', async () => {
var _a, _b;
const element = await fixture(template());
expect(element.kind).toBe(defaultProps.kind);
expect((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__svg-container svg`)) === null || _b === void 0 ? void 0 : _b.classList.contains(`${blockClass}__custom`)).toBeTruthy();
});
it('renders 404 svg illustration if kind is 404', async () => {
var _a, _b;
const element = await fixture(template(Object.assign(Object.assign({}, defaultProps), { kind: Kind.Error404 })));
expect(element.kind).toBe(Kind.Error404);
expect((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__svg-container svg`)) === null || _b === void 0 ? void 0 : _b.classList.contains(`${blockClass}__404`)).toBeTruthy();
});
it('renders 403 svg illustration if kind is 403', async () => {
var _a, _b;
const element = await fixture(template(Object.assign(Object.assign({}, defaultProps), { kind: Kind.Error403 })));
expect(element.kind).toBe(Kind.Error403);
expect((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${blockClass}__svg-container svg`)) === null || _b === void 0 ? void 0 : _b.classList.contains(`${blockClass}__403`)).toBeTruthy();
});
});
//# sourceMappingURL=full-page-error.test.js.map