Как изменить размер текстовой области путем перетаскивания в библиотеку тестирования React?

Мне нужно проверить, остается ли TextareaAutosize материального пользовательского интерфейса плавным при изменении размера. Поскольку здесь используется текстовая область HTML, я хочу имитировать ее изменение размера с помощью мыши, используя захват в правом нижнем углу.

Я пытаюсь проверить поведение компонента TextareaAutosize при изменении размера следующим образом:

it('should not glitch when resizing textarea', function test() {
  if (/jsdom/.test(window.navigator.userAgent)) {
    this.skip();
  }

  const { container } = render(<TextareaAutosize />);
  const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!;

  console.info('before textarea.style.height: ', textarea.style.height);

  // Get the element's dimensions
  const { top, left, width, height } = textarea.getBoundingClientRect();

  // Calculate coordinates of bottom-right corner
  const bottomRightX = left + width;
  const bottomRightY = top + height;

  fireEvent.mouseDown(textarea, { clientX: bottomRightX, clientY: bottomRightY });
  fireEvent.mouseMove(textarea, { clientX: bottomRightX + 50, clientY: bottomRightY + 50 });
  fireEvent.mouseUp(textarea);

  console.info('after textarea.style.height: ', textarea.style.height);
});

Я настроил его для запуска теста в браузере, а не в JSDOM, с помощью этой проверки:

  if (/jsdom/.test(window.navigator.userAgent)) {
    this.skip();
  }

Однако я столкнулся с проблемой, когда значение textarea.style.height остается одинаковым до и после события мыши, хотя я ожидаю, что оно изменится.

Chrome Headless 123.0.6312.4 (Windows 10) LOG: 'before textarea.style.height: ', '15px'
Chrome Headless 123.0.6312.4 (Windows 10) LOG: 'after textarea.style.height: ', '15px'

Высота текстовой области должна увеличиться после взаимодействия с мышью, но кажется, что на самом деле ее размер не изменяется. Я не уверен, правильно ли моделируется действие перетаскивания.

Похоже, что действие перетаскивания для имитации изменения размера текстовой области может быть смоделировано неправильно. Проверьте, точно ли событие fireEvent.mouseMove обновляет высоту текстовой области. Возможно, вам придется настроить координаты или попробовать другой подход для имитации изменения размера.

Dj aman motihari 13.04.2024 08:32

@Djamanmotihari Как я могу проверить, что событие fireEvent.mouseMove правильно обновляет высоту текстовой области? Высота остается неизменной в журнале after. Есть ли у вас какие-либо предложения по альтернативным подходам, которые я мог бы попробовать?

Zeeshan Tamboli 13.04.2024 08:41

@jsejcksn Спасибо за ответ. Мы используем Playwright для тестирования e2e, и мне удалось добавить тест с помощью Playwright.

Zeeshan Tamboli 21.04.2024 09:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
133
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я решил эту проблему с помощью E2E-тестирования с Playwright вместо использования библиотек тестирования React. Ниже приведена тестовая реализация:

Сначала компонент отображается для тестирования:

import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';

function BasicTextareaAutosize() {
  return <TextareaAutosize data-testid = "textarea" />;
}

export default BasicTextareaAutosize;

Вот тест e2e:

it('should not glitch when resizing', async () => {
  await renderFixture('TextareaAutosize/BasicTextareaAutosize');

  const textarea = await screen.getByTestId('textarea')!;

  // Get the element's dimensions
  const { x, y, width, height } = (await textarea.boundingBox())!;

  // Calculate coordinates of bottom-right corner
  const bottomRightX = x + width;
  const bottomRightY = y + height;

  // Get the initial height of textarea as a number
  const initialHeight = await textarea.evaluate((event) => parseFloat(event.style.height));

  // Move the mouse to the bottom-right corner, adjusting slightly to grab the resize handle
  await page.mouse.move(bottomRightX - 5, bottomRightY - 5);

  // Simulate a double click without releasing the mouse button (mouseup) to grab the resize handle
  await page.mouse.down();
  await page.mouse.up();
  await page.mouse.down();

  // Move the mouse to resize the textarea
  await page.mouse.move(bottomRightX + 50, bottomRightY + 50);

  // Assert that the textarea height has increased after resizing
  expect(await textarea.evaluate((event) => parseFloat(event.style.height))).to.be.greaterThan(
    initialHeight,
  );
});

Другие вопросы по теме