@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
269 lines • 13.3 kB
JavaScript
import { createInjector } from '@furystack/inject';
import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades';
import { usingAsync } from '@furystack/utils';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { ThemeProviderService } from '../../services/theme-provider-service.js';
import { Form, FormContextToken } from '../form.js';
import { Radio } from './radio.js';
describe('Radio', () => {
beforeEach(() => {
document.body.innerHTML = '<div id="root"></div>';
});
afterEach(() => {
document.body.innerHTML = '';
vi.restoreAllMocks();
});
it('should render as custom element', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1" }),
});
await flushUpdates();
const radio = document.querySelector('shade-radio');
expect(radio).not.toBeNull();
});
});
it('should render the inner radio input element', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1", name: "test-group" }),
});
await flushUpdates();
const input = document.querySelector('shade-radio input[type="radio"]');
expect(input).not.toBeNull();
expect(input.value).toBe('option1');
expect(input.name).toBe('test-group');
});
});
it('should render the label title', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1", labelTitle: "Option 1" }),
});
await flushUpdates();
const label = document.querySelector('shade-radio label');
expect(label).not.toBeNull();
expect(label.textContent).toContain('Option 1');
});
});
it('should not render label span when labelTitle is not provided', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1" }),
});
await flushUpdates();
const labelSpan = document.querySelector('shade-radio .radio-label');
expect(labelSpan).toBeNull();
});
});
describe('checked state', () => {
it('should render as checked when checked prop is true', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1", checked: true }),
});
await flushUpdates();
const input = document.querySelector('shade-radio input[type="radio"]');
expect(input.checked).toBe(true);
});
});
it('should render as unchecked when checked prop is false', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1", checked: false }),
});
await flushUpdates();
const input = document.querySelector('shade-radio input[type="radio"]');
expect(input.checked).toBe(false);
});
});
});
describe('disabled state', () => {
it('should set data-disabled attribute when disabled', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1", disabled: true }),
});
await flushUpdates();
const radio = document.querySelector('shade-radio');
expect(radio.hasAttribute('data-disabled')).toBe(true);
const input = radio.querySelector('input[type="radio"]');
expect(input.disabled).toBe(true);
});
});
it('should not have data-disabled attribute when not disabled', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1", disabled: false }),
});
await flushUpdates();
const radio = document.querySelector('shade-radio');
expect(radio.hasAttribute('data-disabled')).toBe(false);
});
});
});
describe('theme integration', () => {
it('should set CSS color variable from theme', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1" }),
});
await flushUpdates();
const radio = document.querySelector('shade-radio');
const themeService = injector.get(ThemeProviderService);
expect(radio.style.getPropertyValue('--radio-color')).toBe(themeService.theme.palette.primary.main);
});
});
it('should use custom color from color prop', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1", color: "secondary" }),
});
await flushUpdates();
const radio = document.querySelector('shade-radio');
const themeService = injector.get(ThemeProviderService);
expect(radio.style.getPropertyValue('--radio-color')).toBe(themeService.theme.palette.secondary.main);
});
});
});
describe('callbacks', () => {
it('should call onchange when radio is clicked', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
const onchange = vi.fn();
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1", name: "test", onchange: onchange }),
});
await flushUpdates();
const input = document.querySelector('shade-radio input[type="radio"]');
input.dispatchEvent(new Event('change', { bubbles: true }));
await flushUpdates();
expect(onchange).toHaveBeenCalledOnce();
});
});
});
describe('FormService integration', () => {
it('should register input with FormService when inside a Form', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
createComponent(Radio, { value: "option1", name: "choice", labelTitle: "Option 1" }))),
});
await flushUpdates();
const form = document.querySelector('form[is="shade-form"]');
const formInjector = form.injector;
const formService = formInjector.get(FormContextToken);
expect(formService.inputs.size).toBe(1);
});
});
it('should propagate change events to the parent Form so rawFormData updates', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: (createComponent(Form, { onSubmit: () => { }, validate: (_data) => true },
createComponent(Radio, { value: "option1", name: "choice", labelTitle: "Option 1" }))),
});
await flushUpdates();
const form = document.querySelector('form[is="shade-form"]');
const input = form.querySelector('input[type="radio"]');
const formInjector = form.injector;
const formService = formInjector.get(FormContextToken);
input.checked = true;
input.dispatchEvent(new Event('change', { bubbles: true }));
await flushUpdates();
expect(formService.rawFormData.getValue()).toEqual({ choice: 'option1' });
});
});
});
describe('labelProps', () => {
it('should pass labelProps to the label element', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({
injector,
rootElement,
jsxElement: createComponent(Radio, { value: "option1", labelProps: { className: 'custom-label' } }),
});
await flushUpdates();
const label = document.querySelector('shade-radio label');
expect(label.className).toContain('custom-label');
});
});
});
describe('size', () => {
it('should not set data-size when size is not specified', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({ injector, rootElement, jsxElement: createComponent(Radio, { value: "opt1" }) });
await flushUpdates();
const el = document.querySelector('shade-radio');
expect(el.getAttribute('data-size')).toBeNull();
});
});
it('should not set data-size for medium size (default)', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({ injector, rootElement, jsxElement: createComponent(Radio, { value: "opt1", size: "medium" }) });
await flushUpdates();
const el = document.querySelector('shade-radio');
expect(el.getAttribute('data-size')).toBeNull();
});
});
it('should set data-size="small" for small size', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({ injector, rootElement, jsxElement: createComponent(Radio, { value: "opt1", size: "small" }) });
await flushUpdates();
const el = document.querySelector('shade-radio');
expect(el.getAttribute('data-size')).toBe('small');
});
});
it('should set data-size="large" for large size', async () => {
await usingAsync(createInjector(), async (injector) => {
const rootElement = document.getElementById('root');
initializeShadeRoot({ injector, rootElement, jsxElement: createComponent(Radio, { value: "opt1", size: "large" }) });
await flushUpdates();
const el = document.querySelector('shade-radio');
expect(el.getAttribute('data-size')).toBe('large');
});
});
});
});
//# sourceMappingURL=radio.spec.js.map