Узнайте, как мы добавили визуальное тестирование в нашу библиотеку компонентов ( HomeDay-Blocks ) И почему я думаю, что важно иметь визуальные тестирования в вашем тестовом инструменте.
Как введение, я хочу поделиться, как я начал с визуального тестирования и почему я решил добавить его в нашу библиотеку компонентов.
В настоящее время мы работаем над новым Домовеление Проект и я решил улучшить наши модульные тесты с некоторыми интеграцией и визуальными тестами. Идея состоит в том, чтобы иметь безопасный и надежный проект, в котором мы чувствуем себя комфортно, добавляя новые функции, код рефакторинга и исправления будущих вопросов – которые, надеюсь, у нас не будет 😅
Мы используем кипарис в этом проекте, поэтому я решил интегрировать инструмент сравнения скриншота и посмотреть, как это работает вместе. К сожалению, это не сработало этого хорошо. Я пробовал два инструмента: Cypress-plugin-snapshots и Cypress-Image-Snapshot Отказ Оба великолепны, так как они свободны, однако при работе с визуальным тестированием вы должны быть готовы настроить некоторые параметры и найти магические номера, которые работают для вас. Поскольку это не мое основное внимание, чтобы действительно раскопать глубоко в том, как действительно работает визуальное тестирование (может быть, в будущем) я решил найти лучший и зрелый инструмент для этого. Я закончил использовать Перси. Так же как отказ от ответственности: я не спонсируюсь Перси.
Чтение через Percy Docs, я увидел, что у них есть Простое решение для интеграции со сборной книги . Хорошая новость заключается в том, что наша библиотека компонентов уже использует сборник. Плохой новости состоит в том, что не все компоненты имеют истории (что означает, что они не появляются в сборной книге). Так как мы ввели модульные тесты в нашей библиотеке компонентов Я думал о способах расширения его и сделать нашу библиотеку компонентов более устойчивым, тогда она в настоящее время. Вот почему я закончил пробовать визуальные тестирования.
Каждый квартал у нас есть неделя, чтобы развиваться и попробовать новые вещи в компании. Это называется PEW (инженерная неделя продукта). Работает следующим образом: Неделя, прежде чем выбрать вашу тему; Утро понедельника, вы делаете быстрый введение к вашей теме; В пятницу днем вы представляете свои результаты. В течение этой недели все наши встречи отменены, чтобы мы могли действительно сосредоточиться на наших темах. My Pew Project Этот квартал состоит в том, чтобы добавить визуальное тестирование в нашу библиотеку компонентов =]
Как я уже упоминал ранее, я собираюсь использовать Перси. Для того, чтобы сделать это, вам нужен аккаунт и добавьте свой проект там. Он просто просит вас авторизовать доступ к вашей учетной записи REPO, таким образом, вы можете увидеть статус визуального тестирования в вашем PR. Это не обязательно, но это поможет вам отслеживать ваши тесты, особенно если вы открываете PR или около того. Я также полагаюсь на StoralBook, поскольку наша компонентная библиотека уже использует ее.
Большинство из того, что я собираюсь показать здесь, можно найти в Percy Docs для Storybook, а также Отказ
Вам просто нужна одна зависимость, чтобы начать использовать Percy + Storybook: @ percy/designbook 😅.
npm i --save-dev --save-exact @percy/storybook # --save-exact is optional
После установки зависимости нам нужен Percy_token Переменная среды для обеспечения и соответствия локального проекта и проекта Перси. Я также рекомендую добавить его в свой CI, так как это, вероятно, инструмент, который будет выстрелить ваши тесты.
export PERCY_TOKEN=
Перед тем, как мы запустим Percy, нам нужно сначала построить сборник постройки, в противном случае Percy не знает, где найти истории. Теперь мы можем просто запустить NPX Percy-Storybook Команда и она собирается на скриншоту каждую единую историю из рассказа.
С этой простой настройкой мы уже можем воспользоваться полномочиями визуального тестирования. Еще лучше, если вы просто запускаете проект, чтобы вы могли тщательно охватить каждый случай, когда вы хотите с визуальным тестированием. Как у нас уже есть использование, проект, мы не можем этого сделать. Нам нужно еще несколько усыновлений, которые я опишу в следующем разделе.
Наша библиотека компонентов является открытым исходным кодом, поэтому я также открыл сборки Перси , так Каждый интересно, может следовать за ней.
Первый вопрос, который я столкнулся, был связан с нашей домашней страницей. После запуска Первый тест Я видел, что это заняло Скриншот с нее .
У нас есть приветственный компонент, который оказывает первую страницу в StoreBook, поэтому она становится нашим домом. Я не хочу визуальный тест, поэтому мне пришлось найти способ игнорировать это. Документы Перси довольно ясно, вы просто Добавить пропускать Параметр в вашу историю, и он игнорируется .
storiesOf('Welcome', module)
.addParameters({ percy: { skip: true } })
.add('Welcome', () => ({
...
Второй вопрос был похож на первый, но сценарий немного отличается. У нас есть некоторые компоненты с ручками, которые позволяют пользователям с книжными книгами играть с ними. Он в основном связывает реквизиты компонента с некоторыми входами, поэтому вы можете хорошо взаимодействовать с компонентом. Я не хочу тестировать тех. Мне нужно создать все возможные вариации историй, поэтому я могу взять скриншоты от всех них и сравнить со временем. Ручки отлично подходят для пользователей, так как они могут играть с компонентами, но не так полезны при работе с визуальным тестированием. Чтобы избежать этого, мне пришлось пропустить несколько игровых площадок (так как мы называем истории с ручками) и Refactor Некоторые истории, а также Отказ
stories
.add('Playground 🎛', () => ({
components: { HdButton },
props: {
...
},
template: `
{{ text }}
`,
}), { percy: { skip: true } });
Одним из наших историй имеет смысл только на мобильном виде, так как он адаптирует компонент на мобильном телефоне. Это наш третий выпуск, который можно решить просто путем регулировки конфигурации. Вместо того, чтобы принимать скриншоты на мобильном и рабочем столе, я добавил параметр на Укажите размер экрана Отказ Так же как напоминание: каждый дополнительный скриншот добавит к лимулю вашей учетной записи, а также займет дополнительное время для обработки, поэтому я решил действительно избежать ненужных скриншотов с самого начала.
}), { percy: { widths: [375] } });
Последний вопрос: интеграция CI. Поскольку проект является открытым исходным кодом, это означает, что люди могут вилоть его и открыть пр. Мы (разработчики от компании) следуют тому же подходу. У нас есть наши вилки и открытые PRS от них к главному репо. Мы используем TRAVIS AS CI, но это также происходит на других странах СНГ, она также не разделяет переменные среды для создания формы, посторонние проблемы безопасности. Это значит, что Percy_token не будет доступен, когда CI строит. Без Percy_token Команда Percy не удается, что также не удается построить CI. Чтобы избежать этого, я должен был Добавить проверку в команде тестов Для существования Percy_token. . Если это не существует, мы пропускаем тесты. Если вы хотите запустить Percy в этом сценарии, вам нужно оформить желаемую ветку и проходить тесты локально, с Percy_token экспортируется. В качестве альтернативы вы можете создать новую ветвь в REPO Origin, который будет вызвать сборку.
"test:percy": "if [ $PERCY_TOKEN ]; then percy-storybook; else echo 'Skipping test: PERCY_TOKEN is not defined'; fi"
Вы можете найти последний PR здесь Отказ Не стесняйтесь добавлять свои комментарии и вопросы там.
Интеграция Percy + Storybook работает гладко, и относительно просто добавить его в проект. Percy также предлагает довольно хороший свободный уровень, поэтому вам не нужно беспокоиться о инвестировании денег с самого начала.
Есть еще некоторые проблемы, которые должны быть решены, особенно компоненты, которые запрашивают некоторое взаимодействие или событие. Те, кто должен быть лучше исследован и проверен. Вероятно, это приведет к написанию новых историй.
Percy также позволяет настроить вашу интеграцию даже глубже, если вы хотите, я предлагаю вам прочитать его документация Если вам нужно сделать такую вещь.
Я бы порекомендовал вам попробовать, а также поделиться своими учениками и печали [=
Счастливое кодирование \ o/
Благодаря Ильясу Анту и Синису для рассмотрения текста.
Оригинал: “https://dev.to/viniciuskneves/securing-your-component-library-with-visual-testing-1lk”