@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
159 lines • 7.89 kB
JavaScript
import { createComponent, flushUpdates } from '@furystack/shades';
import { describe, expect, it } from 'vitest';
import { Result } from './result.js';
describe('Result', () => {
it('should be defined', () => {
expect(Result).toBeDefined();
expect(typeof Result).toBe('function');
});
it('should create a result element', () => {
const el = (createComponent(Result, { status: "success", title: "Done" }));
expect(el).toBeDefined();
expect(el.tagName?.toLowerCase()).toBe('shade-result');
});
it('should set data-status attribute for each status', async () => {
const statuses = ['success', 'error', 'warning', 'info', '403', '404', '500'];
expect(statuses.length).toBe(7);
for (const status of statuses) {
const el = (createComponent("div", null,
createComponent(Result, { status: status, title: "Test" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
expect(result.getAttribute('data-status')).toBe(status);
}
});
it('should render the title as Typography', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "success", title: "Operation Successful" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
const titleEl = result.querySelector('.result-title');
expect(titleEl).not.toBeNull();
expect(titleEl?.getAttribute('is')).toMatch(/^shade-typography-/);
});
it('should render the subtitle when provided', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "info", title: "Info", subtitle: "Some details here" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
const subtitleEl = result.querySelector('.result-subtitle');
expect(subtitleEl).not.toBeNull();
expect(subtitleEl?.getAttribute('is')).toMatch(/^shade-typography-/);
});
it('should not render the subtitle when not provided', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "success", title: "Done" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
const subtitleEl = result.querySelector('.result-subtitle');
expect(subtitleEl).toBeNull();
});
it('should render the default icon for each status', async () => {
const statuses = ['success', 'error', 'warning', 'info', '403', '404', '500'];
expect(statuses.length).toBe(7);
for (const status of statuses) {
const el = (createComponent("div", null,
createComponent(Result, { status: status, title: "Test" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
const iconEl = result.querySelector('.result-icon');
expect(iconEl).not.toBeNull();
expect(iconEl?.querySelector('shade-icon')).not.toBeNull();
}
});
it('should render a custom icon when icon prop is provided', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "success", title: "Done", icon: "\uD83C\uDF89" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
const iconEl = result.querySelector('.result-icon');
expect(iconEl).not.toBeNull();
expect(iconEl?.textContent).toBe('🎉');
});
it('should set CSS custom property for status color', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "success", title: "Done" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-success-main)');
});
it('should set CSS custom property for error status color', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "error", title: "Failed" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-error-main)');
});
it('should set CSS custom property for 403 status (warning color)', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "403", title: "Forbidden" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-warning-main)');
});
it('should set CSS custom property for 404 status (info color)', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "404", title: "Not Found" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-info-main)');
});
it('should set CSS custom property for 500 status (error color)', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "500", title: "Server Error" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
expect(result.style.getPropertyValue('--result-status-color')).toBe('var(--shades-theme-palette-error-main)');
});
it('should render children in the extra area', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "success", title: "Done" },
createComponent("button", null, "Go Home"))));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
const extraEl = result.querySelector('.result-extra');
expect(extraEl).not.toBeNull();
const button = extraEl?.querySelector('button');
expect(button).not.toBeNull();
expect(button?.textContent).toBe('Go Home');
});
it('should not render the extra area when no children are provided', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "success", title: "Done" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
const extraEl = result.querySelector('.result-extra');
expect(extraEl).toBeNull();
});
it('should set the icon role to img', async () => {
const el = (createComponent("div", null,
createComponent(Result, { status: "success", title: "Done" })));
const result = el.firstElementChild;
result.updateComponent();
await flushUpdates();
const iconEl = result.querySelector('.result-icon');
expect(iconEl?.getAttribute('role')).toBe('img');
});
it('should set props correctly', () => {
const el = (createComponent(Result, { status: "warning", title: "Careful", subtitle: "Watch out", icon: "\u26A1" }));
const props = el.props;
expect(props.status).toBe('warning');
expect(props.title).toBe('Careful');
expect(props.subtitle).toBe('Watch out');
expect(props.icon).toBe('⚡');
});
});
//# sourceMappingURL=result.spec.js.map