Computed стили и getComputedStyle

В контексте тестирования с использованием React Testing Library необходимо учитывать, что взаимодействие с элементами на странице часто требует работы с их стилями. Некоторые стили могут быть статичными, но множество из них вычисляются динамически через CSS и зависят от различных факторов, таких как стили родительских элементов, стили по умолчанию и даже медиа-запросы. Именно для работы с этими вычисленными стилями и предназначена функция getComputedStyle.

Что такое getComputedStyle?

Метод getComputedStyle — это стандартный способ получения вычисленных (или «компилированных») стилей элементов DOM в браузере. Это объект, содержащий все стили, которые были применены к элементу в результате CSS правил, включая стили, полученные от родительских элементов, и те, которые могут быть применены на основе условий.

Когда выполняется запрос к getComputedStyle, возвращается объект, содержащий значения стилей, которые видны в итоговом визуальном отображении элемента. Даже если стиль был задан через классы, инлайновые стили или через внешний CSS, getComputedStyle предоставляет итоговые значения, независимо от того, каким способом были они установлены.

Пример:

const element = document.querySelector('.my-element');
const styles = window.getComputedStyle(element);
console.log(styles.color);  // Например, 'rgb(0, 0, 0)', если элемент чёрного цвета

Зачем нужны вычисленные стили в тестах?

В тестах с React Testing Library иногда требуется удостовериться в том, что компоненты ведут себя так, как это ожидалось, в том числе по визуальной части. Например, важно проверить, что элемент на странице изменил свой цвет, шрифт или размер, после выполнения определённых действий (например, клика).

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

Пример использования getComputedStyle в тестах

Предположим, что в тестируемом компоненте есть кнопка, которая меняет цвет фона при клике. Мы хотим проверить, что после клика цвет фона действительно изменился.

  1. Сначала создаём компонент:
const Button = () => {
  const [clicked, setClicked] = React.useState(false);

  return (
    <button
      style={{ backgroundColor: clicked ? 'blue' : 'red' }}
      onCl ick={() => setClicked(!clicked)}
    >
      Click me
    </button>
  );
};
  1. Затем пишем тест с использованием React Testing Library:
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('button changes color when clicked', () => {
  render(<Button />);
  
  const button = screen.getByText('Click me');

  // Проверка начального цвета
  let styles = window.getComputedStyle(button);
  expect(styles.backgroundColor).toBe('red');

  // Кликаем по кнопке
  fireEvent.click(button);

  // Проверка нового цвета
  styles = window.getComputedStyle(button);
  expect(styles.backgroundColor).toBe('blue');
});

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

Особенности работы с getComputedStyle

  1. Инлайновые стили и стили, заданные через CSS Если элемент имеет стили, заданные через CSS (например, через внешний или внутренний стили), и стили, заданные инлайново через атрибут style, то getComputedStyle всегда вернёт именно вычисленные стили, а не исходные значения. Это позволяет получать корректные данные, даже если стиль был переопределён.

  2. Преобразования, применяемые к элементу getComputedStyle возвращает значения, которые были применены после всех вычислений браузером. Например, если элемент имеет CSS-свойства, зависящие от медиа-запросов, то метод вернёт стили, соответствующие текущему состоянию окна.

  3. Псевдоэлементы Для псевдоэлементов, таких как ::before или ::after, можно получить стили с помощью getComputedStyle, указав второй аргумент в виде псевдоэлемента:

    const pseudoElement = window.getComputedStyle(element, '::before');

  4. Единицы измерения Важно помнить, что getComputedStyle возвращает значения в реальных единицах измерения. Например, если высота элемента была задана в процентах или через em, то в результатах будет указано её окончательное значение в пикселях.

Взаимодействие с React Testing Library

Для эффективного тестирования в React, когда необходимо учитывать визуальные изменения, важно помнить, что React Testing Library ориентирована на тестирование поведения компонентов, а не на проверку их внутренней реализации. Однако в случае, когда требуется подтвердить, что стили компонента изменились в зависимости от действий пользователя, использование getComputedStyle становится полезным инструментом.

Если тестируемый элемент зависит от состояния или пропсов, и это влияет на его стили, например, через инлайновые стили или CSS-классы, то необходимо использовать getComputedStyle для проверки результатов:

test('div background color changes based on props', () => {
  const { rerender } = render(<div style={{ backgroundColor: 'yellow' }} />);
  const divElement = screen.getByRole('div');

  let styles = window.getComputedStyle(divElement);
  expect(styles.backgroundColor).toBe('yellow');

  rerender(<div style={{ backgroundColor: 'green' }} />);
  styles = window.getComputedStyle(divElement);
  expect(styles.backgroundColor).toBe('green');
});

Когда использовать getComputedStyle в тестах?

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

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

  3. Медиа-запросы и адаптивный дизайн При тестировании компонентов, которые адаптируются к разным размерам экрана, getComputedStyle позволяет точно проверять, что элемент изменяет свои стили в соответствии с активными медиа-запросами.

Заключение

Метод getComputedStyle является важным инструментом в тестировании интерфейсов на базе React Testing Library, когда нужно удостовериться в корректности отображаемых стилей, особенно если эти стили изменяются в зависимости от состояний компонента или взаимодействия с пользователем. Этот метод позволяет получать точные вычисленные значения, что особенно важно для комплексных UI-компонентов, зависящих от динамических стилей.

Оглавление