Мне нужно проверить, остается ли 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'
Высота текстовой области должна увеличиться после взаимодействия с мышью, но кажется, что на самом деле ее размер не изменяется. Я не уверен, правильно ли моделируется действие перетаскивания.
@Djamanmotihari Как я могу проверить, что событие fireEvent.mouseMove
правильно обновляет высоту текстовой области? Высота остается неизменной в журнале after. Есть ли у вас какие-либо предложения по альтернативным подходам, которые я мог бы попробовать?
AFAIK возможность взаимодействовать с ручкой изменения размера в углу текстовой области — это встроенная возможность пользовательского интерфейса браузера (аналогично взаимодействию с изменением размера, предлагаемому на краю окна). Хотя эти дескрипторы можно отключить с помощью CSS , я не думаю, что они доступны для каких-либо API-интерфейсов JavaScipt браузера, поэтому RTL может быть неподходящим инструментом для такого теста. API мыши Puppeteer может имитировать поведение, которое вы задумали.
@jsejcksn Спасибо за ответ. Мы используем Playwright для тестирования e2e, и мне удалось добавить тест с помощью Playwright.
Я решил эту проблему с помощью 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,
);
});
Похоже, что действие перетаскивания для имитации изменения размера текстовой области может быть смоделировано неправильно. Проверьте, точно ли событие fireEvent.mouseMove обновляет высоту текстовой области. Возможно, вам придется настроить координаты или попробовать другой подход для имитации изменения размера.