Тигриными тропами Влезь в мою шкуру

При вёрстке сложных проектов часто бывают регрессии. Здесь что-то добавили или поменяли, а в другом месте что-то "поплыло". Чтобы выявить такие регрессии используется регрессионное тестирование. Один из таких инструментов - 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 то в отчете увидим, что тесты пройдены:

       
report | Test completed...
report | 2 Passed
report | 0 Failed

Если что-то сломается, то тесты не пройдут и нужно будет разбираться.

Там же, в backstop.json нужно прописать все необходимые разрешения экранов, которые надо тестировать.

Более подробную информацию об этом инструменте можно найти в официальной документации и в многочисленных блогах.

Drupal9

Drupal8

Drupal7

Разработчикам Автор ivnish Drupal FullStack Developer, модератор drupal.ru

Сегодня я расскажу как сделать анимированный гамбургер для субтемы на базе 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">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</button>

5) Компилируем SCSS

6) В js файл темы нужно добавить добавление и удаление класса is-active к гамбургеру для анимации по клику

     
$('.navbar-toggler').click(function() {
  $(this).toggleClass('is-active');
});

Drupal9

Drupal8

Веб-мастерам и владельцам сайтов Автор ivnish Drupal FullStack Developer, модератор drupal.ru

По мотивам вопроса

Предположим, мы хотим установить модуль 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/toolbar_themes"
]

чтобы получилось в итоге

{
    "type": "composer",
    "url": "https://packages.drupal.org/8",
    "exclude": [
        "drupal/toolbar_themes"
    ]
}

Возвращаемся на drupal.org в наш issue, жмем "show commands" и копируем путь к нашему репозиторию. Он должен быть в виде git@git.drupal.org:issue/toolbar_themes-3149099.git

Вставляем его в раздел репозиториев нашего compose.json

{
    "type": "git",
    "url": "git@git.drupal.org:issue/toolbar_themes-3149099.git"
}

должно получиться вот так в итоге

"repositories": [
    {
        "type": "composer",
        "url": "https://packages.drupal.org/8",
        "exclude": [
            "drupal/toolbar_themes"
        ]
    },
    {
        "type": "git",
        "url": "git@git.drupal.org:issue/toolbar_themes-3149099.git"
    }
],

выполняем установку модуля командой 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": {
        "type": "package",
        "package": {
            "name": "drupal/toolbar_themes",
            "version": "dev-custom",
            "type": "drupal-module",
            "source": {
            "type": "git",
            "url": "git@git.drupal.org:issue/toolbar_themes-3149099.git",
            "reference": "3149099"
            }
        }
        }

Где reference указан стрелкой

Нужно будет переделать секцию repositories в такой вид

    "repositories": {
        "drupal": {
            "type": "composer",
            "url": "https://packages.drupal.org/8",
            "exclude": [
                "drupal/toolbar_themes"
            ]
        },
        "drupal/toolbar_themes": {
        "type": "package",
        "package": {
            "name": "drupal/toolbar_themes",
            "version": "dev-custom",
            "type": "drupal-module",
            "source": {
            "type": "git",
            "url": "git@git.drupal.org:issue/toolbar_themes-3149099.git",
            "reference": "3149099"
            }
        }
        }
    },

наконец-то выполняем composer require 'drupal/toolbar_themes'

и видим что модуль скачался из нашего issue форка

  - Syncing drupal/toolbar_themes (dev-custom 3149099) into cache
  - Installing drupal/toolbar_themes (dev-custom 3149099): Cloning 3149099 from cache

Drupal9

Веб-мастерам и владельцам сайтов Authors ivnish Drupal FullStack Developer, модератор drupal.ru marassa Друпалист-любитель