@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
157 lines • 7.46 kB
JavaScript
import { createComponent } from '@furystack/shades';
import { flushUpdates } from '@furystack/shades';
import { describe, expect, it } from 'vitest';
import { Badge } from './badge.js';
describe('Badge', () => {
it('should be defined', () => {
expect(Badge).toBeDefined();
expect(typeof Badge).toBe('function');
});
it('should create a badge element with default props', () => {
const el = (createComponent(Badge, null));
expect(el).toBeDefined();
expect(el.tagName?.toLowerCase()).toBe('shade-badge');
});
it('should pass children as badge content', () => {
const el = (createComponent(Badge, null, "Child"));
expect(el).toBeDefined();
});
it('should set props correctly', () => {
const el = (createComponent(Badge, { count: 5, color: "primary", dot: true, max: 10, showZero: true }));
expect(el.props.count).toBe(5);
expect(el.props.color).toBe('primary');
expect(el.props.dot).toBe(true);
expect(el.props.max).toBe(10);
expect(el.props.showZero).toBe(true);
});
it('should render with a badge indicator', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 5 },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
expect(badge.querySelector('.badge-indicator')).not.toBeNull();
});
it('should display the count value', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 42 },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.textContent).toBe('42');
});
it('should cap count at max and show overflow indicator', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 150, max: 99 },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.textContent).toBe('99+');
});
it('should use custom max value', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 15, max: 10 },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.textContent).toBe('10+');
});
it('should not show overflow when count is within max', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 5, max: 10 },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.textContent).toBe('5');
});
it('should hide when count is 0 and showZero is not set', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 0 },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.hasAttribute('data-hidden')).toBe(true);
});
it('should show when count is 0 and showZero is true', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 0, showZero: true },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.hasAttribute('data-hidden')).toBe(false);
});
it('should hide when count is undefined and showZero is not set', async () => {
const el = (createComponent("div", null,
createComponent(Badge, null,
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.hasAttribute('data-hidden')).toBe(true);
});
it('should render a dot badge when dot prop is set', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { dot: true },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.hasAttribute('data-dot')).toBe(true);
expect(indicator.textContent).toBe('');
});
it('should not hide dot badge even without count', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { dot: true },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.hasAttribute('data-hidden')).toBe(false);
});
it('should hide badge when visible is false', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 5, visible: false },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
const indicator = badge.querySelector('.badge-indicator');
expect(indicator.hasAttribute('data-hidden')).toBe(true);
});
it('should set CSS custom properties for palette color', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 5, color: "primary" },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
expect(badge.style.getPropertyValue('--badge-color-main')).toBe('var(--shades-theme-palette-primary-main)');
expect(badge.style.getPropertyValue('--badge-color-contrast')).toBe('var(--shades-theme-palette-primary-main-contrast)');
});
it('should set CSS custom properties for default (error) color when no color prop', async () => {
const el = (createComponent("div", null,
createComponent(Badge, { count: 5 },
createComponent("span", null, "Content"))));
const badge = el.firstElementChild;
badge.updateComponent();
await flushUpdates();
expect(badge.style.getPropertyValue('--badge-color-main')).toBe('var(--shades-theme-palette-error-main)');
});
});
//# sourceMappingURL=badge.spec.js.map