testComponent.js

/* eslint-disable id-length*/
import Test from 'ava';
import React from 'react';
import Render from 'react-test-renderer';
import kpgz from '../kpgz.jsx';
import styles from '../style.js';

const Kpgz = kpgz({
    Checkbox: ({children, ...rest}) => <checkbox {...rest}>{children}</checkbox>,
    TextInput: ({children, ...rest}) => <textInput {...rest}>{children}</textInput>,
    Pagination: ({children, ...rest}) => <pagination {...rest}>{children}</pagination>,
    Sorter: ({children, ...rest}) => <sorter {...rest}>{children}</sorter>,
    DateInput: ({children, ...rest}) => <dateInput {...rest}>{children}</dateInput>,
    Select: ({children, ...rest}) => <select {...rest}>{children}</select>,
    Option: ({children, ...rest}) => <option {...rest}>{children}</option>,
    actualOptions: [
        {
            id: 1,
            name: 'Утвержден',
            value: false
        },
        {
            id: 2,
            name: 'Проект',
            value: true
        }
    ]
});

Test.beforeEach(t => {
    t.context.props = {
        classes: Object.assign(...Object.keys(styles).map(className => ({[className]: `${className}`}))),
        kpgz: [
            {
                id: 1,
                code: 'string',
                name: 'string',
                okpd2: {
                    code: 1,
                    name: 'string'
                },
                projectCheck: true,
                createdDate: 1
            },
        ],
        total: 1,
        page: 1,
        pageSize: 10,
        orderBy: 'code',
        orderDirection: 'ask',
        filters: {},
        displayFilters: true,
        selectedKpgz: [1, 2, 3],

        updateSort: () => {},
        updatePage: () => {},
        updateFilter: () => {},
        selectKpgz: () => {},

        open: () => {}
    };
});

Test(`
    Отображение таблицы не изменилось
`, t => {

    t.snapshot(Render.create(<Kpgz {...t.context.props} />).toJSON());
});

Test(`
    Тернарные выражения
`, t => {  

    t.snapshot(Render.create(<Kpgz {...t.context.props} kpgz={[]} displayFilters={false}/>).toJSON());
    t.snapshot(Render.create(<Kpgz {...t.context.props} orderBy='name'/>).toJSON());
    t.snapshot(Render.create(<Kpgz {...t.context.props} orderBy='okpd2.code'/>).toJSON());
    t.snapshot(Render.create(<Kpgz {...t.context.props} orderBy='projectCheck'/>).toJSON());
    t.snapshot(Render.create(<Kpgz {...t.context.props} orderBy='createdDate'/>).toJSON());
    t.snapshot(Render.create(<Kpgz {...t.context.props} kpgz={[
        {
            id: 1,
            code: 'string',
            name: 'string',
            okpd2: {
                code: 1,
                name: 'string'
            },
            projectCheck: false,
            createdDate: 1
        },
    ]} />).toJSON());
    t.snapshot(Render.create(<Kpgz {...t.context.props} filters={{projectCheck: {
        name: 'string',
        value: true
    }}}/>).toJSON());
});

Test(`
    Чек бокс и открытие сущности работают
`, t => {
    t.plan(0);    

    const component = Render.create(<Kpgz {...t.context.props} />);
    const main = component.root.find(el => el.props['data-test-id'] === 'Таблица КПГЗ');

    const checkbox = main
        .find(el => el.props['data-test-id'] === 'Строка номер 1')
        .find(el => el.props['data-test-id'] === 'Выделить строку');

    const openBtn = main
        .find(el => el.props['data-test-id'] === 'Строка номер 1')
        .find(el => el.props['data-test-id'] === 'Открыть КПГЗ');

    checkbox.props.onClick();
    openBtn.props.onClick();
});

Test(`
    Фильтры работают
`, t => {
    t.plan(0);

    const component = Render.create(<Kpgz {...t.context.props} />);
    const main = component.root.find(el => el.props['data-test-id'] === 'Таблица КПГЗ');

    const textInputCode = main.find(el => el.props['data-test-id'] === 'Фильтровать по коду КПГЗ');
    const textInputName = main.find(el => el.props['data-test-id'] === 'Фильтровать по наименованию КПГЗ');
    const textInputOkpd2 = main.find(el => el.props['data-test-id'] === 'Фильтровать по коду ОКПД-2');
    const selectProjectCheck = main.find(el => el.props['data-test-id'] === 'Фильтровать по актуальности записи');
    const optionProjectCheck = selectProjectCheck.find(el => el.props['data-test-id'] === 'Строка номер 1');
    const textInputCreatedDate = main.find(el => el.props['data-test-id'] === 'Фильтровать по дате последнего изменения');

    textInputCode.props.onChange('string');
    textInputName.props.onChange('string');
    textInputOkpd2.props.onChange('string');
    optionProjectCheck.props.onClick();
    textInputCreatedDate.props.onChange('string');
});

Test(`
    Сортировка работает
`, t => {
    t.plan(0);

    const component = Render.create(<Kpgz {...t.context.props} />);
    const main = component.root.find(el => el.props['data-test-id'] === 'Таблица КПГЗ');

    const sorterCode = main.find(el => el.props['data-test-id'] === 'Сортировать по коду КПГЗ');
    const sorterName = main.find(el => el.props['data-test-id'] === 'Сортировать по наименованию КПГЗ');
    const sorterOkpd2 = main.find(el => el.props['data-test-id'] === 'Сортировать по коду ОКПД-2');
    const sorterProjectCheck = main.find(el => el.props['data-test-id'] === 'Сортировать по актуальности записи');
    const sorterCreatedDate = main.find(el => el.props['data-test-id'] === 'Сортировать по дате последнего изменения');

    sorterCode.props.onChange('string');
    sorterName.props.onChange('string');
    sorterOkpd2.props.onChange('string');
    sorterProjectCheck.props.onChange('string');
    sorterCreatedDate.props.onChange('string');
});