@furystack/shades-common-components/esm/components/inputs/text-area.spec.js

Common UI components for FuryStack Shades

import { createInjector } from '@furystack/inject';
import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades';
import { usingAsync } from '@furystack/utils';
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
import { TextArea } from './text-area.js';
describe('TextArea', () => {
    beforeEach(() => {
        document.body.innerHTML = '<div id="root"></div>';
    });
    afterEach(() => {
        document.body.innerHTML = '';
    });
    it('should render as custom element', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, null),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            expect(textArea).not.toBeNull();
        });
    });
    it('should render label with labelTitle', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { labelTitle: "Test Label" }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            expect(textArea).not.toBeNull();
            const label = textArea?.querySelector('label');
            expect(label).not.toBeNull();
            const span = textArea?.querySelector('span');
            expect(span?.textContent).toBe('Test Label');
        });
    });
    it('should apply labelProps to label element', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { labelTitle: "Test", labelProps: { className: 'custom-label-class' } }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            const label = textArea?.querySelector('label');
            expect(label?.className).toBe('custom-label-class');
        });
    });
    it('should set data-variant attribute for outlined variant', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { variant: "outlined" }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            expect(textArea).not.toBeNull();
            expect(textArea.getAttribute('data-variant')).toBe('outlined');
        });
    });
    it('should set data-variant attribute for contained variant', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { variant: "contained" }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            expect(textArea).not.toBeNull();
            expect(textArea.getAttribute('data-variant')).toBe('contained');
        });
    });
    it('should not set data-variant attribute when no variant is provided', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, null),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            expect(textArea).not.toBeNull();
            expect(textArea.hasAttribute('data-variant')).toBe(false);
        });
    });
    it('should set data-disabled attribute when disabled', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { disabled: true }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            expect(textArea).not.toBeNull();
            expect(textArea.hasAttribute('data-disabled')).toBe(true);
        });
    });
    it('should not set data-disabled attribute when not disabled', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { disabled: false }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            expect(textArea).not.toBeNull();
            expect(textArea.hasAttribute('data-disabled')).toBe(false);
        });
    });
    it('should render value in contentEditable div', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { value: "Test content" }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            const contentDiv = textArea?.querySelector('.textarea-content');
            expect(contentDiv).not.toBeNull();
            expect(contentDiv?.textContent).toBe('Test content');
        });
    });
    it('should have contentEditable true when not readOnly or disabled', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, null),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            const contentDiv = textArea?.querySelector('.textarea-content');
            expect(contentDiv?.contentEditable).toBe('true');
        });
    });
    it('should have contentEditable inherit when readOnly is true', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { readOnly: true }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            const contentDiv = textArea?.querySelector('.textarea-content');
            expect(contentDiv?.contentEditable).toBe('inherit');
        });
    });
    it('should have contentEditable inherit when disabled is true', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { disabled: true }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            const contentDiv = textArea?.querySelector('.textarea-content');
            expect(contentDiv?.contentEditable).toBe('inherit');
        });
    });
    it('should apply custom style to content div', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { style: { color: 'red' } }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            const contentDiv = textArea?.querySelector('.textarea-content');
            expect(contentDiv?.style.color).toBe('red');
        });
    });
    it('should apply custom style to label element', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, { labelProps: { style: { backgroundColor: 'blue' } } }),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            const label = textArea?.querySelector('label');
            expect(label?.style.backgroundColor).toBe('blue');
        });
    });
    it('should have correct CSS styles applied', async () => {
        await usingAsync(createInjector(), async (injector) => {
            const rootElement = document.getElementById('root');
            initializeShadeRoot({
                injector,
                rootElement,
                jsxElement: createComponent(TextArea, null),
            });
            await flushUpdates();
            const textArea = document.querySelector('shade-text-area');
            expect(textArea).not.toBeNull();
            const computedStyle = window.getComputedStyle(textArea);
            expect(computedStyle.display).toBe('block');
            expect(computedStyle.marginBottom).toBe('1em');
        });
    });
    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(TextArea, null) });
                await flushUpdates();
                const el = document.querySelector('shade-text-area');
                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(TextArea, { size: "medium" }) });
                await flushUpdates();
                const el = document.querySelector('shade-text-area');
                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(TextArea, { size: "small" }) });
                await flushUpdates();
                const el = document.querySelector('shade-text-area');
                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(TextArea, { size: "large" }) });
                await flushUpdates();
                const el = document.querySelector('shade-text-area');
                expect(el.getAttribute('data-size')).toBe('large');
            });
        });
    });
});
//# sourceMappingURL=text-area.spec.js.map