После выхода Composition API разработчики приложений на Vue получили в свое распоряжение композиционные функции — еще один способ разбить код на небольшие модули для лучшей читаемости и повторного использования. Так были решены проблемы, которые мы имели применяя иные подходы: Mixins (Миксины) и Renderless Components (Компоненты без представления). Но спустя время многие из нас не достаточно хорошо владеют тонкостями написания Composables. В этой статье вы найдете описание важных моментов, благодаря которым ваш код будет становится более поддерживаемым.
Читать далееКомпонентные тесты Vue с Vitest
Создавая компонентные тесты с Cypress, я столкнулся с некоторыми неприятными их особенностями.
Во-первых такие тесты оставались очень медленными. Они не были на столько быстрее E2E как этого бы хотелось. Для каждого компонента необходимо делать много тестов. Но из-за их низкой скорости выполнения приходилось ограничивать себя лишь небольшим числом самых необходимых.
Во-вторых эпизодически появлялась ошибка failed to fetch dynamically imported module в CI-CD. И эта проблема на момент написания статьи все еще не была решена.
Поэтому я решил попробовать что-то более легковесное. Vitest был на слуху, как инструмент для тестирования, который уже себя хорошо зарекомендовал.
Читать далееРазработка ПО с использованием ИИ-ассистента
В этой заметке будут собраны принципы, которыми я, в итоге, стал руководствоваться при разработке программного обеспечения с ИИ-ассистентом. Какие-то правила были получены на собственном опыте, какие-то были позаимствованы у коллег или в интернете.
Если вы не согласны с какими-то утверждениями из статьи, то буду рад вашим возражениям в комментариях. Вероятно они помогут скорректировать организацию работы с ассистентом. Если же вы, напротив, со всем согласны, то мне приятно будет прочитать и об этом.
Читать далееТестирование с playwright. Компонентный тест с Vuetify
Продолжаем тему предыдущей статьи и пробуем приблизиться к проблемам реальных проектов. В них ведь часто используются готовые наборы UI-элементов. Посмотрим как запустить компонентный тест, но с поддержкой Vuetify. Ранее мы пробовали подобное с Cypress. Сделаем похожим способом пример и создадим тесты на Playwright.
Читать далееТестирование с playwright. Компонентный тест
В этой статье будем пробовать запустить компонентные тесты Playwright. Мотив простой — e2e тесты с загрузкой всей страницы достаточно медленные. Всевозможные сценарии быстрее бы было протестировать на отдельных компонентах. А основной сценарий взаимодействия с пользователем уже — в e2e. Итак попробуем настроить запуск этих самых компонентных тестов в Playwright.
Читать далееТестирование с playwright. Gitlab CI-CD
Продолжим освоение Playwright. В данной статье настроим автоматический запуск e2e тестов в Gitlab. Сначала в 1 поток, а затем попробуем «на зуб» встроенную многопоточность.
Читать далееТестирование с playwright. Начало
На страницах этого блога есть уже некоторое количество статей о тестировании frontend-приложений с использованием Cypress. Однако ряд проблем, с которыми пришлось столкнуться в процессе работы с этим инструментом, побудили рассмотреть также и Playwright.
Читать далееSentry. Особенности подключения к Vue SPA
При подключении Sentry к backend, например, PHP Laravel, обычно не требуется внесения замысловатых настроек. Нужно установить пакет и прописать DSN. В случае же использования Sentry для отслеживания ошибок во frontend появляется ряд специфичных моментов. В этой статье будут собраны описания таких ситуаций и решения для них.
Читать далееПараллельный запуск тестов Cypress. Часть 2
В этой статье продолжим тему ускорения работы тестов Cypress за счет выполнения тестов в несколько потоков. В прошлый раз мы уже рассмотрели ряд инструментов. Тесты уже запускались параллельно, но делалось это вручную. Для Cypress Cloud и Sorry Cypress мы использовали для этого несколько экземпляров терминала, а cypress-parallel сам создавал процессы. Но лучше, когда наши тесты выполняются в рамках CI-CD. Будем двигаться от простого к сложному и начнем с инструмента, с которым проще всего сделать настройку для Gitlab.
Читать далееПараллельный запуск тестов Cypress. Часть 1
Тесты — полезная вещь. Но в Cypress они выполняются довольно долго, даже компонентные. Чтобы их ускорить можно использовать многопоточность. В этой статье будем знакомиться с инструментами для параллельного запуска тестов с целью сокращения времени их выполнения.
Читать далееПеревод строк с html-разметкой в Vue I18n
Если в вашем Vue-приложении переводы работают через Vue-i18n, то вы наверняка сталкивались с ситуациями, в которых приходилось добавлять перевод для фразы, которая содержит html-разметку. Чаще всего это ссылки (тег a) или строковые контейнеры (тег span), позволяющие сделать акцент на определенных частях фразы. В таких ситуациях самым легким решением кажется добавить фразу вместе с разметкой в JSON с переводами, а вывод сделать через v-html. Давайте посмотрим какие с этим есть проблемы и как можно сделать лучше.
Cypress. Тестируем отдельные компоненты
В одной из предыдущих статей было описано как использовать Cypress для e2e-тестов. Однако, чтобы протестировать побольше сценариев работы приложения удобно использовать тесты отдельных компонентов. С этим типом проверок, не придется загружать полную страницу ненужных в тесте компонентов. Это будет работать быстрее и более прицельно. В этой статье рассмотрим настройку компонентных тестов.
Читать далее