Shower Presentation Engine

Gemini

Обо мне

Фронтендер в Контур.Гособлако
Не люблю рутину
Пишу тесты

SPA приложение
Много редакторов форм
Кастомизация под заказчика
Хостится у заказчика
Заказчик — Государство

Сегодня у нас

50+ реквизитов
5 типов редакторов реквизитов
10 типов редакторов полей
10 параметров отображения поля

Проблемы

Бэкенд генерирует формы
Изменяя один редактор можно поломать остальные
Соответствие прототипам после рефакторинга
Много рутины
После обновления retail-ui быть спокойнее

Стильно.
Модно.
Молодежно.

Используем песочницу Storybook

Позволяет разрабатывать компоненты в «вакууме»
Упрощает тестирование
Отладка компонентов становится проще
Storybook ❤ Gemini

Тестируем верстку скриншотами

Делаем скриншоты компонентов в разных состояниях
Сравниваем между собой автоматически
Храним эталоны в репозитории

Gemini

Плюсы

Умеет делать скриншоты любой части страницы
Есть API для взаимодействовия с UI
Запуск тестов в разных браузерах
Эталоны в репозитории

Минусы

Поддержка инфраструктуры (selenium)
Нужно писать тесты

Бонусы

Возможность игнорировать лишнее
Подробный HTML отчёт
Есть GUI
Полезные плагины (teamcity, react, webpack)

Пример теста

        gemini.suite('RequisiteHistoryEditor', suite => {
          suite.setUrl(url)
            .setCaptureElements(selectors)
            .capture('clicked', function (actions, find) {
              actions.click(find(rowSelector));
            });
        });

Пример теста

        gemini.suite('RequisiteHistoryEditor', suite => {
          suite.setUrl(url)
            .setCaptureElements(selectors)
            .capture('clicked', function (actions, find) {
              actions.click(find(rowSelector))
            });
        });

Пример теста

        gemini.suite('RequisiteHistoryEditor', suite => {
          suite.setUrl(url)
            .setCaptureElements(selectors)
            .capture('clicked', function (actions, find) {
              actions.click(find(rowSelector);
            });
        });

Пример теста

        gemini.suite('RequisiteHistoryEditor', suite => {
          suite.setUrl(url)
            .setCaptureElements(selectors)
            .capture('clicked', function (actions, find) {
              actions.click(find(rowSelector));
            });
        });

Пример теста

        gemini.suite('RequisiteHistoryEditor', suite => {
          suite.setUrl(url)
            .setCaptureElements(selectors)
            .capture('clicked', function (actions, find) {
              actions.click(find(rowSelector));
            });
        });

Пример теста множеста страниц

        const urls = [ "/", "/products", "/support" ];
        urls.forEach((url, i) =>
          gemini.suite(`suite-${i}`, suite =>
            suite.setUrl(url)
              .setCaptureElements("#root")
              .capture('plain')
            )
        )

Пример теста множеста страниц

        const urls = [ "/", "/products", "/support" ];
        urls.forEach((url, i) =>
          gemini.suite(`suite-${i}`, suite =>
            suite.setUrl(url)
              .setCaptureElements("#root")
              .capture('plain')
            )
        )

Пример теста множеста страниц

        const urls = [ "/", "/products", "/support" ];
        urls.forEach((url, i) =>
          gemini.suite(`suite-${i}`, suite =>
            suite.setUrl(url)
              .setCaptureElements("#root")
              .capture('plain')
            )
        )