@wonderflow/react-components/dist/components/text/text.test.js

UI components from Wonderflow's Wanda design system

import { jsx as _jsx } from "react/jsx-runtime";
import { render } from '@testing-library/react';
import { Chip, Symbol, } from '../..';
import { Text } from './text';
describe('<Text>', () => {
    test(' it should render properly', () => {
        const { container } = render(_jsx(Text, { children: "Some text" }));
        expect(container).not.toBeNull();
    });
    test(' it should render properly as <span>', () => {
        const { container } = render(_jsx(Text, { as: "span", children: "Some text" }));
        expect(container).not.toBeNull();
    });
    test(' it should render properly with all variants', () => {
        const v = [
            'display-1',
            'display-2',
            'display-3',
            'display-4',
            'heading-1',
            'heading-2',
            'heading-3',
            'heading-4',
            'heading-5',
            'heading-6',
            'subtitle-1',
            'subtitle-2',
            'tagline-1',
            'tagline-2',
            'tagline-3',
            'body-1',
            'body-2',
            'body-3'
        ];
        v.map((el) => {
            const { container } = render(_jsx(Text, { variant: el, children: "Some text" }));
            return expect(container).not.toBeNull();
        });
    });
    test(' it should render properly with colors', () => {
        const c = ['positive', 'informative', 'danger', 'warning'];
        c.map((col) => {
            const { container } = render(_jsx(Text, { color: col, children: "Some text" }));
            return expect(container).not.toBeNull();
        });
    });
    test(' it should render properly with different alignment', () => {
        const a = ['start', 'center', 'end', 'justify'];
        a.map((t) => {
            const { container } = render(_jsx(Text, { textAlign: t, children: "Some text" }));
            return expect(container).not.toBeNull();
        });
    });
    test(' it should render properly with props', () => {
        const { container } = render(_jsx(Text, { preventBreakWord: true, preventResponsive: true, truncate: true, children: "Some text" }));
        return expect(container).not.toBeNull();
    });
    test(' it should render properly with anchor', () => {
        const { container } = render(_jsx(Text, { variant: "heading-1", anchor: true, id: "heading-1", children: "Some text" }));
        return expect(container).not.toBeNull();
    });
    test(' it should render properly with anchor w/o id', () => {
        const { container } = render(_jsx(Text, { variant: "display-1", anchor: true, children: "Some text" }));
        return expect(container).not.toBeNull();
    });
    test(' it should render properly with decorator start icon', () => {
        const s = ['small', 'medium', 'big'];
        s.map(((t) => {
            const { container } = render(_jsx(Text, { decoratorStart: (_jsx(Symbol, { source: "circle-check", weight: "solid" })), decoratorSize: t, children: "Some text" }));
            return expect(container).not.toBeNull();
        }));
    });
    test(' it should render properly with decorator start chip', () => {
        const s = ['small', 'medium', 'big'];
        s.map(((t) => {
            const { container } = render(_jsx(Text, { decoratorStart: (_jsx(Chip, { color: "red", children: "Chip" })), decoratorSize: t, children: "Some text" }));
            return expect(container).not.toBeNull();
        }));
    });
    test(' it should render properly with decorator end icon', () => {
        const s = ['small', 'medium', 'big'];
        s.map(((t) => {
            const { container } = render(_jsx(Text, { decoratorEnd: (_jsx(Symbol, { source: "circle-check", weight: "solid" })), decoratorSize: t, children: "Some text" }));
            return expect(container).not.toBeNull();
        }));
    });
    test(' it should render properly with decorator end chip', () => {
        const s = ['small', 'medium', 'big'];
        s.map(((t) => {
            const { container } = render(_jsx(Text, { decoratorEnd: (_jsx(Chip, { color: "red", children: "Chip" })), decoratorSize: t, children: "Some text" }));
            return expect(container).not.toBeNull();
        }));
    });
});