Тестирование media queries через стили

При тестировании интерфейсов веб-приложений важно учитывать, как они будут выглядеть и вести себя при различных разрешениях экранов, а также при изменении размеров окна. Для этого в CSS используются media queries, которые позволяют применять стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация устройства, плотность пикселей и другие. В этой главе рассматриваются способы тестирования media queries с использованием Enzyme и различных подходов к проверке адаптивности интерфейсов.

Основы работы с media queries

Media queries — это условные операторы в CSS, которые применяются к стилям в зависимости от характеристик устройства. Они позволяют адаптировать внешний вид веб-страниц под различные размеры экранов и разрешения. Например:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Этот запрос применяет определённые стили (в данном случае — изменение цвета фона) только если ширина экрана устройства не превышает 600 пикселей. Важной особенностью media queries является их динамическое поведение — стили могут изменяться в реальном времени при изменении размера окна браузера.

Тестирование адаптивности с Enzyme

Для тестирования компонентов с использованием media queries в JavaScript часто применяется библиотека Enzyme, которая предоставляет удобные методы для манипуляций с DOM, тестирования рендеринга и взаимодействия с компонентами. При этом проверка поведения компонентов, зависящих от media queries, может потребовать дополнительных настроек.

Изменение размера окна

Для проверки компонентов с media queries важно эмулировать изменение размера окна браузера. В Enzyme это можно сделать с помощью библиотеки, которая позволяет манипулировать объектом window. В тестах можно использовать метод resizeTo, чтобы задать нужные размеры окна и проверить, как компонент реагирует на изменение размеров.

Пример использования:

import { mount } from 'enzyme';
import React from 'react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен изменить стили при изменении размера окна', () => {
    const wrapper = mount(<MyComponent />);

    // Устанавливаем размер окна
    global.innerWidth = 500;
    global.dispatchEvent(new Event('resize'));

    // Проверяем, что стили изменились в соответствии с media query
    expect(wrapper.find('div').prop('style').backgroundColor).toEqual('lightblue');
  });
});

В данном примере с помощью глобального объекта global.innerWidth устанавливается ширина окна, а затем генерируется событие resize. После этого проверяется, что компонент изменил свои стили в соответствии с заданной шириной окна.

Использование библиотеки jsdom

При тестировании с Enzyme часто используется jsdom, что позволяет эмулировать браузерное окружение. Однако jsdom не поддерживает media queries «из коробки», поскольку это не является частью спецификации DOM. Чтобы обойти это ограничение, можно использовать библиотеку matchMedia, которая позволяет эмулировать поведение media queries в тестах.

Пример использования:

import { mount } from 'enzyme';
import React from 'react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен правильно применять стили для media queries', () => {
    // Эмулируем поддержку media queries в jsdom
    global.matchMedia = jest.fn().mockImplementation(query => ({
      matches: query === '(max-width: 600px)',
      addListener: jest.fn(),
      removeListener: jest.fn(),
    }));

    const wrapper = mount(<MyComponent />);

    // Проверяем, что компонент применяет стили для media query
    expect(wrapper.find('div').prop('style').backgroundColor).toEqual('lightblue');
  });
});

В этом примере создаётся мок для функции matchMedia, который позволяет имитировать условие (max-width: 600px) и проверять, как компонент применяет стили для этого условия.

Проверка классов в зависимости от media queries

Ещё одним распространённым подходом является использование классов CSS для управления стилями, зависящими от media queries. В этом случае важно убедиться, что нужные классы применяются при различных размерах экрана.

Пример теста:

import { mount } from 'enzyme';
import React from 'react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен менять классы в зависимости от размера экрана', () => {
    const wrapper = mount(<MyComponent />);

    // Устанавливаем ширину экрана для media query
    global.innerWidth = 500;
    global.dispatchEvent(new Event('resize'));

    // Проверяем, что компонент применяет правильный класс
    expect(wrapper.find('div').hasClass('small-screen')).toBe(true);
  });
});

В этом примере проверяется, что компонент применяет класс small-screen при ширине экрана, соответствующей media query. Такой подход позволяет убедиться, что компонент правильно адаптируется к различным размерам экрана.

Эмуляция динамического изменения размеров окна

В реальных условиях размеры экрана могут изменяться не только при загрузке страницы, но и в процессе работы приложения, например, при изменении размеров окна. Для того чтобы протестировать это поведение, можно использовать методы window.resizeTo и события resize.

Пример теста:

import { mount } from 'enzyme';
import React from 'react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен адаптироваться к изменению размеров окна', () => {
    const wrapper = mount(<MyComponent />);

    // Инициализируем размер окна
    global.innerWidth = 1000;
    global.dispatchEvent(new Event('resize'));

    // Проверяем начальный стиль
    expect(wrapper.find('div').prop('style').backgroundColor).toEqual('white');

    // Изменяем размер окна
    global.innerWidth = 500;
    global.dispatchEvent(new Event('resize'));

    // Проверяем, что стиль изменился
    expect(wrapper.find('div').prop('style').backgroundColor).toEqual('lightblue');
  });
});

Этот пример позволяет протестировать, как компонент адаптируется при изменении размера окна браузера. При изменении значения innerWidth и отправке события resize компонент должен корректно обновить свои стили.

Использование snapshot тестов для media queries

Snapshot тесты в Enzyme можно использовать для проверки визуальных изменений, вызванных изменением размеров экрана. Это помогает быстро обнаружить, что компонент изменяет своё поведение в зависимости от условий media queries.

Пример:

import { mount } from 'enzyme';
import React from 'react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен соответствовать снимку при изменении размера экрана', () => {
    const wrapper = mount(<MyComponent />);

    // Инициализируем размер экрана
    global.innerWidth = 800;
    global.dispatchEvent(new Event('resize'));

    // Проверка снимка
    expect(wrapper).toMatchSnapshot();
  });
});

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

Заключение

Тестирование media queries с использованием Enzyme требует некоторых усилий для эмуляции поведения устройства и изменения размеров экрана. Использование методов для изменения размеров окна, мокирования функции matchMedia, а также проверка применения классов и стилей позволяет эффективно тестировать адаптивность компонентов. Тесты с изменением размеров экрана и проверкой соответствующих классов и стилей помогают убедиться, что приложение будет корректно отображаться на различных устройствах и экранах.