Сколько раз вы хотели изменить код (особенно CSS) и до смерти боялись, что все сломаете.

Итак, вы попытались быть более конкретными (с точки зрения селекторов элементов), что однажды или в тот же день будет иметь неприятные последствия, поскольку вы столкнетесь с другими вариантами точек останова и различными вариантами одного и того же компонента.

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

Предположим, вы сделали это утверждение (чтобы убедиться, что все в порядке и ничего не сломалось), что бы вы сделали? Что ж, на вашем месте я бы сделал следующее:

  1. Список всех страниц / маршрутов в моем приложении.
  2. Перечислите основные точки останова / области просмотра.
  3. Перечислите различные сценарии, которые можно выполнить на каждой странице.
  4. Вручную откройте каждую страницу на каждой из перечисленных точек останова, просмотрите все доступные сценарии и убедитесь, что ничего не сломалось, что очень занимает много времени и подвержены ошибкам.

Решение:

Что, если бы я сказал вам, что вы можете автоматизировать все предыдущие шаги с помощью одной команды npm test, она сообщит вам после завершения, все ли в порядке, чтобы вы могли уверенно продолжить развертывание, или все выглядит по-другому на этих страницах и дает вам визуальная разница, поэтому вы можете исправить ее до того, как она попадет в QA или, в большинстве случаев, вживую.

Давайте посмотрим, как это работает:

Я сделал два фиктивных образца на jsbin, просто для демонстрационных целей https://jsbin.com/yutoho, https://jsbin.com/toruge, и давайте предположим, что я буду тестировать их. две точки останова 1440 пикселей и 320 пикселей.

Я создам файл «index.js» в папке «test»
mkdir test && cd test && subl index.js

Используемые инструменты:

  1. PhantomJs (безголовый браузер для захвата снимков экрана сайта в разных точках останова и оценки скриптов для моделирования различных сценариев).
  2. Image-diff (чтобы отличить ожидаемые / справочные снимки экрана от текущих)

Полный код:

Сначала вы добавляете все URL-адреса, которые хотите проверить, в массив URL-адресов.

Затем добавьте все точки останова, которые вы хотите протестировать, в массив точек останова.

Когда вы запускаете npm test в первый раз, поэтому у вас нет папки «Ожидаемая» в папке «test» с эталонные изображения, он спросит вас, хотите ли вы сначала их создать.

Затем все они будут созданы в папке «ожидается».

Предположим, вы внесли некоторые изменения и хотите протестировать, поэтому вы выполнили npm test

Он создал другую папку «новый», чтобы сравнить их с изображениями в папке «ожидается» и экспортировать разницу в папку «diff», но в этом случае все нормально, так что увидим это.

У нас есть этот код в https://jsbin.com/yutoho

Давай изменим их на это

Давайте сейчас протестируем и посмотрим, что мы получим

Он обнаружил проблемы, которые - если вы заметили - трудно заметить невооруженным глазом.

Улучшения:

Я мог бы сделать некоторые улучшения ES6, такие как использование let и const вместо var, стрелочные функции вместо традиционной функции и литерал шаблона, который более читабелен, чем добавление строк и переменных, но я хотел сделать это как можно проще, поэтому это просто доходит до сути.

Альтернативы:

  • Перси (от 149 долларов в месяц)

Последняя вещь…

Если вам понравилась эта статья, нажмите ниже, чтобы другие люди увидели ее здесь, на Medium.