packages/plasma-ui/src/components/TextField/TextFieldBase.component-test.tsx - dev - sdds/plasma

packages/plasma-ui/src/components/TextField/TextFieldBase.component-test.tsx
90 строк3 KB
Alexander Lobyntsev
chore(plasma-ui): use wait 250ms for correct snapshot [Textfield]
16 апр 2025, 07:24
16 апр 2025, 07:247456c7d
import React from 'react';
import { mount, CypressTestDecorator, getComponent, SpaceMe } from '@salutejs/plasma-cy-utils';
import { IconSleep, IconEye } from '@salutejs/plasma-icons';

describe('plasma-ui: TextField', () => {
    const TextField = getComponent('TextField');

    it('trailing symbols', () => {
        const props = {
            value: '1 500',
            contentLeft: <IconSleep color="inherit" size="s" />,
            contentRight: <IconEye color="inherit" size="s" />,
            rightTrailingSymbols: '₽',
            label: 'Label',
        };

        mount(
            <CypressTestDecorator>
                <TextField size="l" {...props} />
                <SpaceMe />
                <TextField size="m" {...props} />
            </CypressTestDecorator>,
        );

        // TODO: Найти способ обойти использование wait
        // eslint-disable-next-line cypress/no-unnecessary-waiting
        cy.wait(250).matchImageSnapshot();
    });

    it('trailing symbols: long input text', () => {
        const props = {
            value: '1 500 000 000 000 000 000 000 000 000 000 000 000',
            contentLeft: <IconSleep color="inherit" size="s" />,
            contentRight: <IconEye color="inherit" size="s" />,
            rightTrailingSymbols: '₽',
            label: 'Label',
        };

        mount(
            <CypressTestDecorator>
                <TextField size="l" {...props} />
                <SpaceMe />
                <TextField size="m" {...props} />
            </CypressTestDecorator>,
        );

        // eslint-disable-next-line cypress/no-unnecessary-waiting
        cy.wait(250).matchImageSnapshot();
    });

    it('trailing symbols: long text', () => {
        const props = {
            value: '1 500 000 000 000 000 000 000 000 000 000',
            contentLeft: <IconSleep color="inherit" size="s" />,
            contentRight: <IconEye color="inherit" size="s" />,
            rightTrailingSymbols: 'million',
            label: 'Label',
        };

        mount(
            <CypressTestDecorator>
                <TextField size="l" {...props} />
                <SpaceMe />
                <TextField size="m" {...props} />
            </CypressTestDecorator>,
        );

        // eslint-disable-next-line cypress/no-unnecessary-waiting
        cy.wait(250).matchImageSnapshot();
    });

    it('trailing symbols: placeholder', () => {
        const props = {
            value: '',
            contentLeft: <IconSleep color="inherit" size="s" />,
            contentRight: <IconEye color="inherit" size="s" />,
            rightTrailingSymbols: 'million',
            placeholder: 'Ваша цена в',
        };

        mount(
            <CypressTestDecorator>
                <TextField size="l" {...props} />
            </CypressTestDecorator>,
        );

        // eslint-disable-next-line cypress/no-unnecessary-waiting
        cy.wait(250).matchImageSnapshot();
    });
});