Сколько раз вы хотели изменить код (особенно CSS) и до смерти боялись, что все сломаете.
Итак, вы попытались быть более конкретными (с точки зрения селекторов элементов), что однажды или в тот же день будет иметь неприятные последствия, поскольку вы столкнетесь с другими вариантами точек останова и различными вариантами одного и того же компонента.
Существует множество подходов к достижению плоской специфичности в вашем коде, следующих за подходами БЭМ или Поддерживаемый CSS, которые делают ваш код более организованным, читаемым, поддерживаемым, и вы избавитесь от ада специфичности. , но это не гарантирует, что после этих изменений вы сделали все в порядке и ничего не сломалось.
Предположим, вы сделали это утверждение (чтобы убедиться, что все в порядке и ничего не сломалось), что бы вы сделали? Что ж, на вашем месте я бы сделал следующее:
- Список всех страниц / маршрутов в моем приложении.
- Перечислите основные точки останова / области просмотра.
- Перечислите различные сценарии, которые можно выполнить на каждой странице.
- Вручную откройте каждую страницу на каждой из перечисленных точек останова, просмотрите все доступные сценарии и убедитесь, что ничего не сломалось, что очень занимает много времени и подвержены ошибкам.
Решение:
Что, если бы я сказал вам, что вы можете автоматизировать все предыдущие шаги с помощью одной команды npm test
, она сообщит вам после завершения, все ли в порядке, чтобы вы могли уверенно продолжить развертывание, или все выглядит по-другому на этих страницах и дает вам визуальная разница, поэтому вы можете исправить ее до того, как она попадет в QA или, в большинстве случаев, вживую.
Давайте посмотрим, как это работает:
Я сделал два фиктивных образца на jsbin, просто для демонстрационных целей https://jsbin.com/yutoho, https://jsbin.com/toruge, и давайте предположим, что я буду тестировать их. две точки останова 1440 пикселей и 320 пикселей.
Я создам файл «index.js» в папке «test» mkdir test && cd test && subl index.js
Используемые инструменты:
- PhantomJs (безголовый браузер для захвата снимков экрана сайта в разных точках останова и оценки скриптов для моделирования различных сценариев).
- Image-diff (чтобы отличить ожидаемые / справочные снимки экрана от текущих)
Полный код:
Сначала вы добавляете все URL-адреса, которые хотите проверить, в массив URL-адресов.
Затем добавьте все точки останова, которые вы хотите протестировать, в массив точек останова.
Когда вы запускаете npm test
в первый раз, поэтому у вас нет папки «Ожидаемая» в папке «test» с эталонные изображения, он спросит вас, хотите ли вы сначала их создать.
Затем все они будут созданы в папке «ожидается».
Предположим, вы внесли некоторые изменения и хотите протестировать, поэтому вы выполнили npm test
Он создал другую папку «новый», чтобы сравнить их с изображениями в папке «ожидается» и экспортировать разницу в папку «diff», но в этом случае все нормально, так что увидим это.
У нас есть этот код в https://jsbin.com/yutoho
Давай изменим их на это
Давайте сейчас протестируем и посмотрим, что мы получим
Он обнаружил проблемы, которые - если вы заметили - трудно заметить невооруженным глазом.
Улучшения:
Я мог бы сделать некоторые улучшения ES6, такие как использование let и const вместо var, стрелочные функции вместо традиционной функции и литерал шаблона, который более читабелен, чем добавление строк и переменных, но я хотел сделать это как можно проще, поэтому это просто доходит до сути.
Альтернативы:
- Перси (от 149 долларов в месяц)
Последняя вещь…
Если вам понравилась эта статья, нажмите ниже, чтобы другие люди увидели ее здесь, на Medium.