В этой статье продолжим тему ускорения работы тестов 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-тестов. Однако, чтобы протестировать побольше сценариев работы приложения удобно использовать тесты отдельных компонентов. С этим типом проверок, не придется загружать полную страницу ненужных в тесте компонентов. Это будет работать быстрее и более прицельно. В этой статье рассмотрим настройку компонентных тестов.
Читать далееCypress. Добавляем тесты в Gitlab CI-CD
В предыдущей статье описывалось как начать создавать тесты для frontend на Cypress. Если вы работаете над проектом не один, то есть шанс, что при каких-либо изменениях их будут забывать выполнять. Для уверенности в том, что тесты будут запускаться, нужно добавить соответствующую задачу в систему CI-CD. В этой статье добавим такую задачу в Gitlab.
Читать далееCypress. Тестируем JavaScript-приложение легко
В данный момент уже трудно представить себе веб-приложение без автоматических тестов. Они позволяют нам сохранять уверенность в том, что приложение работает после изменений. Делегирование процесса тестирования машине позволяет сэкономить время не уменьшив при этом объем проводимых проверок.
Существуют разные виды автоматических тестов. Это отдельная большая тема. Данная статья будет сфокусирована на сквозных (end-to-end или e2e) тестах при помощи Cypress.
Читать далееGitlab CI-CD для запуска тестов в Laravel
В этой статье будет рассмотрена настройка Gitlab CI-CD для автоматического запуска ваших тестов в Laravel-приложении. Кроме тестов также запустим проверку оформления php-кода и статический анализ через phpstan. Перед запуском проверок будет создаваться Docker-образ с php нужной версии и необходимыми расширениями. Наши тесты будут работать с базой Mysql.
Читать далееКнига Lachlan Miller “Design Patterns for Vue.js”
В этой статье содержится небольшой обзор книги “Design Patterns for Vue.js: A Test Driven Approach to Maintainable Applications”, которую написал автор Lachlan Miller. Найти ее можно, например, на gumroad.com. Полный код примеров книги – в github репозитории автора книги.
Эта книга о шаблонах проектирования (паттернах) и тестировании Vue-приложения. Автор призывает первым делом задумываться о том какие шаблоны проектирования сделают будущее приложение максимально гибким, как сделать код максимально тестируемым. Паттерны сами по себе являются независящими от фреймворка. Это фундаментальные концепции. Но автор демонстрирует типичные ситуации для Vue-приложения, в которых тот или иной шаблон работает. Он показывает как может выглядеть их применение.
Читать далееVue. Динамическое переключение компонентов
Чтобы не повторять себя (принцип DRY) при разработке Vue-приложения приходится прибегать к различным приемам. Одним из таких приемов (не так сильно известным, кстати) является применение атрибута is для динамического переключения между компонентами. В этой статье будет показано и рассказано как можно использовать такой подход.
Передача данных на много уровней Vue компонентов
Чтобы в коде проще было ориентироваться и поддерживать его мы разделяем его на небольшие части, которые легко укладываются в голове и на экране. Во Vue, в основном, такие части будут представлены компонентами. Мы дробим интерфейс пользователя на ряд компонентов, которые используют друг-друга образуя дерево (иерархию).
Читать далееЕсть ли наследование во Vue.js
В данной статье мы подведем некоторые итоги по вопросу повторного использования кода, который освещался с разных сторон на протяжении нескольких статей. Вспомним более давние статьи на эту тему. Также на основе этой информации определим есть ли во Vue.js наследование.
Читать далееVue. Продвинутая работа со слотами
В этой статье мы продолжим обсуждение темы повторного использования кода во Vue.js. Тема была начата несколькими статьями ранее. Здесь, как и было обещано ранее, будет обсуждение расширенной работы со слотами и описание вариантов того, как это можно применить в реальных проектах.
Читать далее