При вёрстке сложных проектов часто бывают регрессии. Здесь что-то добавили или поменяли, а в другом месте что-то "поплыло". Чтобы выявить такие регрессии используется регрессионное тестирование. Один из таких инструментов - BackstopJS
Для запуска я использую docker. Для удобства добавляем в наш .bashrc алиас:
alias backstopjs='docker run --rm -v $(pwd):/src backstopjs/backstopjs "$@"'
Инициализируем конфигурацию по умолчанию:
backstopjs init
В файл backstop.json нужно вписать URL вашего сайта. backstop из докера не увидел мой локальный сайт, поэтому я тестировал копию сайта с dev-сервера.
Запускаем backstopjs test
В папке backstop_data/bitmaps_test/ должна будет создаться папка со скриншотами сайта.
Запускаем backstopjs approve чтобы считать эти скриншоты эталонными.
Если ничего не менять и снова запустить backstopjs test то в отчете увидим, что тесты пройдены:
Если что-то сломается, то тесты не пройдут и нужно будет разбираться.
Там же, в backstop.json нужно прописать все необходимые разрешения экранов, которые надо тестировать.
Более подробную информацию об этом инструменте можно найти в официальной документации и в многочисленных блогах.
Сегодня я расскажу как сделать анимированный гамбургер для субтемы на базе Radix (bootstrap 4). Эту же инструкцию можно будет использовать для любой темы на bootstrap 4
Будем использовать библиотеку hamburgers
1) Устанавливаем hamburgers. Прописываем "hamburgers": "^1.1.3" в package.json и запускаем npm install
2) Добавляем в style.scss импорт библиотеки
@import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers";
3) В шаблоне страницы page.html.twig у вас должна быть такая запись {% embed '@radix/navbar/navbar.twig' with {
Я копирую шаблон navbar.twig из радикса в свою тему в каталог /templates/navigation
и меняю embed на {% embed '@YOUTHEME/navigation/navbar.twig' with {
4) В шаблоне navbar.twig меняю стиль кнопки гамбургера на
<button class="navbar-toggler hamburger hamburger--slider" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">5) Компилируем SCSS
6) В js файл темы нужно добавить добавление и удаление класса is-active к гамбургеру для анимации по клику
По мотивам вопроса
Предположим, мы хотим установить модуль Toolbar Themes на D9, но он давно не обновлялся и не имеет директивы совместимости с D9
Вариант 1 - простейшийСкачать модуль вручную, положить в папку modules/custom и внести нужные изменения. После этого нужно капать на мозги мейнтейнерам модуля, чтобы они поскорее приняли патчи и желательно выпустили новый релиз. После этого модуль нужно удалить из custom и установить с помощью composer
Вариант 2 - новая функциональность на drupal.orgНе так давно на drupal.org появилась функциональность issue forks. Мы можем делать форк issue, а затем через интерфейс гитлаба вносить изменения (это удобно, когда нужно изменить всего 1 строчку, как в нашем случае).
Нужно создать новый issue (в нашем случае он уже создан) https://www.drupal.org/project/toolbar_themes/issues/3149099
Нажать "Create issue fork"
Кликаем по ссылке, переходим на гитлаб.
Открываем файл toolbar_themes.info.yml и добавляем в него строчку core_version_requirement: ^8 || ^9, жмем "commit changes"
Добавляем в ваш composer.json в раздел основного репозитория
"exclude": [чтобы получилось в итоге
{Возвращаемся на drupal.org в наш issue, жмем "show commands" и копируем путь к нашему репозиторию. Он должен быть в виде git@git.drupal.org:issue/toolbar_themes-3149099.git
Вставляем его в раздел репозиториев нашего compose.json
{должно получиться вот так в итоге
"repositories": [выполняем установку модуля командой composer require 'drupal/toolbar_themes:dev-3149099'
Если мы получили ошибку No valid composer.json was found in any branch or tag of git@git.drupal.org:issue/toolbar_themes-3149099.git, could not load a package from it. значит у модуля нет своего composer.json файла и нужно еще добавить в наш composer.json
"drupal/toolbar_themes": {Где reference указан стрелкой
Нужно будет переделать секцию repositories в такой вид
"repositories": {наконец-то выполняем composer require 'drupal/toolbar_themes'
и видим что модуль скачался из нашего issue форка
- Syncing drupal/toolbar_themes (dev-custom 3149099) into cache