Работа с Ant Design компонентами

Ant Design — один из самых популярных UI-фреймворков для React, предоставляющий множество готовых компонентов для создания интерфейсов. Однако, как и любые другие компоненты, они требуют тщательного тестирования, чтобы обеспечить их правильную работу. Enzyme, инструмент для тестирования компонентов React, идеально подходит для этих целей. В этой статье будет рассмотрено, как работать с компонентами Ant Design в Enzyme и какие особенности при этом следует учитывать.

Подготовка окружения

Для тестирования компонентов Ant Design с помощью Enzyme необходимо установить несколько пакетов:

  1. Enzyme — библиотека для тестирования компонентов React.
  2. Adapter для React — необходим для настройки Enzyme в нужном контексте React.
  3. Ant Design — сам UI-фреймворк, компоненты которого предстоит тестировать.

Установка всех зависимостей:

npm install --save enzyme enzyme-adapter-react-16 ant-design

После установки зависимостей необходимо настроить Enzyme, указав подходящий адаптер. Например, для React 16 это будет выглядеть так:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Тестирование Ant Design компонентов

Ant Design предоставляет множество компонентов, таких как кнопки, формы, таблицы, модальные окна и т.д. Каждый из этих компонентов имеет свои особенности, и тестирование их может отличаться от стандартных React-компонентов. Рассмотрим на примере тестирование компонента Button.

Тестирование простого компонента Button

Для начала рассмотрим компонент Button, который мы будем тестировать:

import React from 'react';
import { Button } from 'antd';

const MyButton = () => {
  return <Button type="primary">Click me</Button>;
};

export default MyButton;

Тестирование компонента Button можно начать с проверки его рендеринга и наличия нужных пропсов.

import React from 'react';
import { shallow } from 'enzyme';
import MyButton from './MyButton';
import { Button } from 'antd';

describe('MyButton', () => {
  it('должен рендерить кнопку', () => {
    const wrapper = shallow(<MyButton />);
    expect(wrapper.find(Button).length).toBe(1);
  });

  it('должен иметь правильный текст', () => {
    const wrapper = shallow(<MyButton />);
    expect(wrapper.find(Button).text()).toBe('Click me');
  });

  it('должен иметь тип primary', () => {
    const wrapper = shallow(<MyButton />);
    expect(wrapper.find(Button).prop('type')).toBe('primary');
  });
});

Тестирование взаимодействий с компонентами Ant Design

Ант-дизайн компоненты часто содержат сложную логику взаимодействия, такую как обработка кликов, изменения состояний и т.д. Поэтому важно не только проверить рендеринг, но и протестировать поведение компонента при различных действиях.

Пример тестирования компонента Modal

Модальные окна (Modal) — один из ключевых компонентов Ant Design, часто используемых в приложениях. Рассмотрим пример, где модальное окно появляется при нажатии на кнопку.

import React, { useState } from 'react';
import { Button, Modal } from 'antd';

const MyModal = () => {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <Button type="primary" onCl ick={showModal}>
        Open Modal
      </Button>
      <Modal title="Test Modal" visible={visible} onOk={handleOk} onCan cel={handleCancel}>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

export default MyModal;

Теперь, чтобы протестировать это поведение, необходимо проверить, что модальное окно открывается при нажатии на кнопку и закрывается после нажатия кнопки “Ok” или “Cancel”.

import React from 'react';
import { shallow } from 'enzyme';
import MyModal from './MyModal';
import { Button, Modal } from 'antd';

describe('MyModal', () => {
  it('должен открыть модальное окно при нажатии на кнопку', () => {
    const wrapper = shallow(<MyModal />);
    expect(wrapper.find(Modal).prop('visible')).toBe(false);

    // Нажатие на кнопку
    wrapper.find(Button).simulate('click');
    expect(wrapper.find(Modal).prop('visible')).toBe(true);
  });

  it('должен закрыть модальное окно при нажатии на кнопку Ok', () => {
    const wrapper = shallow(<MyModal />);
    wrapper.find(Button).simulate('click');
    expect(wrapper.find(Modal).prop('visible')).toBe(true);

    // Нажатие на кнопку Ok
    wrapper.find(Modal).props().onOk();
    expect(wrapper.find(Modal).prop('visible')).toBe(false);
  });

  it('должен закрыть модальное окно при нажатии на кнопку Cancel', () => {
    const wrapper = shallow(<MyModal />);
    wrapper.find(Button).simulate('click');
    expect(wrapper.find(Modal).prop('visible')).toBe(true);

    // Нажатие на кнопку Cancel
    wrapper.find(Modal).props().onCancel();
    expect(wrapper.find(Modal).prop('visible')).toBe(false);
  });
});

Проверка кастомных событий и callback-функций

Ant Design компоненты часто принимают различные callback-функции в качестве пропсов, которые могут быть использованы для обработки событий, таких как изменение значений, клики по кнопкам и другие взаимодействия. При тестировании таких компонентов важно убедиться, что эти функции вызываются корректно.

Рассмотрим пример с компонентом Select, который позволяет выбрать элемент из списка:

import React, { useState } from 'react';
import { SELECT } from 'antd';

const { Option } = Select;

const MySelect = () => {
  const [value, setValue] = useState(null);

  const handleChange = (newValue) => {
    setValue(newValue);
  };

  return (
    <SELECT defaultValue="option1" onCha nge={handleChange}>
      <Option value="option1">Option 1</Option>
      <Option value="option2">Option 2</Option>
    </Select>
  );
};

export default MySelect;

Тестирование такого компонента требует проверки, что функция handleChange вызывается при изменении значения в Select.

import React FROM 'react';
import { shallow } FROM 'enzyme';
import MySelect from './MySelect';
import { SELECT } FROM 'antd';

describe('MySelect', () => {
  it('должен вызывать handleChange при изменении значения', () => {
    const wrapper = shallow(<MySelect />);
    const instance = wrapper.instance();
    const spy = jest.spyOn(instance, 'handleChange');

    // Эмуляция изменения значения
    wrapper.find(Select).simulate('change', 'option2');
    expect(spy).toHaveBeenCalledWith('option2');
  });
});

Особенности работы с Ant Design компонентами

При работе с компонентами Ant Design важно учитывать некоторые особенности:

  1. Вложенные компоненты: Многие компоненты Ant Design, такие как Form, Table, Modal и другие, содержат в себе вложенные элементы, что может требовать более сложных тестов с несколькими уровнями вложенности.
  2. Стиль и анимации: Ant Design активно использует CSS и анимации для компонентов. При тестировании стоит учитывать, что изменения состояния могут вызывать анимации или изменение стилей, что может требовать использования Enzyme в сочетании с другими инструментами, такими как jest или react-testing-library.
  3. Проверка accessibility: Для некоторых компонентов важна проверка на доступность (например, модальные окна должны быть доступными для экранных читалок), что также можно протестировать с помощью Enzyme.

Заключение

Тестирование компонентов Ant Design с использованием Enzyme позволяет убедиться в корректной работе интерфейса, особенно при взаимодействиях, изменении состояния и проверке событий. Знание особенностей компонентов и правильная настройка тестов помогут создать стабильные и надежные тесты для сложных интерфейсов, построенных с использованием Ant Design.

Оглавление