Сайтостроение

BackstopJS: тестирование вёрстки через скриншоты

Новости drupal.ru - Ср, 18/08/2021 - 12:41

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

    Новости drupal.ru - Втр, 20/07/2021 - 16:02

    Сегодня я расскажу как сделать анимированный гамбургер для субтемы на базе 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
    Категорий: Сайтостроение

    Установить модуль через composer на Drupal 9, если у него есть версия только для Drupal 8

    Новости drupal.ru - Чт, 08/07/2021 - 15:27

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

    Предположим, мы хотим установить модуль 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 Друпалист-любитель
    Категорий: Сайтостроение

    Чт, 01/01/1970 - 05:00
    Синдикация материалов