Как протестировать функциональный компонент с сеткой реагирующих данных - PullRequest
2 голосов
/ 25 марта 2019

Я создал сетку данных с реакцией, используя React-data-grid ( ссылка )

Мой код выглядит следующим образом:

import React, { useState } from "react";
import ReactDataGrid from 'react-data-grid';

const ROW_COUNT = 20;
const MIN_WIDTH = 100;

const defaultColumnProperties = {
    resizable: true,
    sortable: true
};

const columns = [
    {
        key: "eventTypeNameI18n",
        name: "Type",
    },
    {
        key: "nameI18n",
        name: "Name",
        width: 160
    },
    {
        key: "dateCreated",
        name: "Time",
        width: 220
    },
    {
        key: "locationNameI18n",
        name: "Location",
        width: 200
    }
].map(col => ({...col, ...defaultColumnProperties}));

const sortRows = (initialRows, sortColumn, sortDirection) => rows => {
    const comparer = (a, b) => {
        if (sortDirection === "ASC") {
            return a[sortColumn] > b[sortColumn] ? 1 : -1;
        } 
        else if (sortDirection === "DESC") {
            return a[sortColumn] < b[sortColumn] ? 1 : -1;
        }
    };
    return sortDirection === "NONE" ? initialRows : [...rows].sort(comparer);
};

function DataGrid({initialRows}) {

    const [rows, setRows] = useState(initialRows);

    return (

        <ReactDataGrid
            id="EventDataGrid"
            columns={columns}
            rowGetter={i => rows[i]}
            rowsCount={ROW_COUNT}
            minColumnWidth={MIN_WIDTH}
            onGridSort={(sortColumn, sortDirection) =>
                setRows(sortRows(initialRows, sortColumn, sortDirection))
            }
        />

    );
}

export default DataGrid;

Я новичок в написании юнит-тестов и недавно писал очень простые юнит-тесты. Мне интересно, как лучше всего протестировать метод onGridSort с помощью Jest / Enzyme

В моих тестах в настоящее время у меня есть следующее:

import React from 'react';
import ReactDOM from 'react-dom';
import Enzyme, {mount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import EventsGrid from '../EventsGrid';
import sampleData from './sampleData/transformedEventSample';

Enzyme.configure({adapter: new Adapter()});


describe('Tests for <EventDataGrid/>', () => {

    it('sort data grid by ascending ', () => {

        const wrapper = mount(<EventsGrid initialRows={sampleData}/>);
        const instance = wrapper.instance();
        jest.spyOn(instance, 'sortRows');

        const column = 'eventTypeNameI18n';
        const sortDirection = 'ASC';

        wrapper.find('#EventDataGrid').at(1).prop('onGridSort')(column, sortDirection);

        expect(instance.sortRows).toHaveBeenCalled();

    });

    it('sort data grid by descending', () => {

        const wrapper = mount(<EventsGrid initialRows={sampleData}/>);
        const instance = wrapper.instance();
        jest.spyOn(instance, 'sortRows');

        const column = 'eventTypeNameI18n';
        const sortDirection = 'DESC';

        wrapper.find('#EventDataGrid').at(1).prop('onGridSort')(column, sortDirection);

        expect(instance.sortRows).toHaveBeenCalled();
    });

});


Я хочу проверить, чтобы убедиться, что сетка упорядочена правильно (упорядочена по возрастанию / убыванию)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...