Aliexpress-ui-kit NPM

Быстрый старт

Устанавливаем зависимости

npm install

Запускаем storybook

npm start

Открываем Storybook в браузере по адресу http://localhost:6006

NPM Скрипты

npm start или npm run storybook Поднимает storybook локально по адресу http://localhost:6006
npm test Запускает локальный прогон всех тестов и линтеров (используя docker, если Вы не на Linux)
npm run storybook:build Запускает сборку storybook только с документацией
npm run test:unit Прогоняет unit-тесты с покрытием
npm run test:e2e Прогоняет e2e-тесты (Скриншотит компоненты в различных состояниях в браузере)
npm run lint Запускает eslint
npm run lint:fix Запускает eslint c автоматической правкой файлов
npm run prettier Запускает prettier
npm run prettier:fix Запускает prettier c автоматической правкой файлов
npm run prepublishOnly Команда запускающаяся перед публикацией, компилирует в ts -> js и структурирует папочки

F.A.Q.

Как понять что не так со скриншотами?

Поставить docker
Запустить локальный прогон npm run test:e2e
Если команда закончился без ошибок, всё ОК. Иначе, npm run test:e2e и смотрим в папочках __diff_output__ отличие от референсов

С помощью GitLab (если есть прогон):

Скачать артефакты из stage -> tests и job -> e2e
Открыть папку
Смотрим в папочках __diff_output__ отличие от референсов

Где смотреть покрытие тестов?

Запускаем прогон юнитов npm run test:unit
После прогона появится директория .coverage в которой нужно открыть файл index.html

Как сделать новые скриншоты (или изменить существующие)?

Поставить docker
Запустить локальный прогон npm run test:e2e
В папках __diff_output__ убедиться что новые референсы правильны
Удалить все папки __image_snapshots__ в которых нужно обновить скриншоты
Запустить повторно прогон npm run test:e2e
Запушить новые файлы

Гайд по разработке компонентов

Требования к story

Story должны отображать все возможные переборы каждого из props на одной story. В последствие по storys генерируется документация

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

Главная задача тестирования скриншотами. Проверить кажду строчку css. И при изменние css быть уверенным, какие части меняются
Для проверки каждой строчки css, нам нужно миксовать все возможные props друг с другом, которые отвечают за отображение. Для микса props существует вспомогательная функция getScreenshots, описание ниже
Если API компонента не позволяет запечатлить какое-то состояние то API компонента нужно расширить специальным свойством dangerouslyApply*Style, например dangerouslyApplyHoverStyle для эффекта наведения

Функция getScreenshots из src/utils/e2e/utils/getScreenshots помогает быстро заскриншотить все состояния компонента c разными сочетаниями props:

describe('Button', () => {
  getScreenshots({
    name: 'defaut',
    // Props которые будут использоваться для микса 
    // всех св-в на одной странице (построение декартового множества).
    // Миксирует все props переданные в объект.
    // Принимает массив, чтобы не сочитать props, которые не пересекаются в css,
    // например `size` и `color`, чтобы избежать лишних скриншотов.
    // Данный параметр нужен, чтобы на одной странице 
    // отобразить всевозможные переборы компонента.
    // Дешевле скриншотить одну страницу, а не 10+
    // результат микса propsForOnePage c данными параметрами будет
    // color: primary, disbled: true
    // color: primary, disbled: false
    // color: secondary, disbled: true
    // color: secondary, disbled: false
    // color: warning, disbled: true
    // color: warning, disbled: false
    // color: default, disbled: true
    // color: default, disbled: false
    // variant: outlined color: primary, disbled: true
    // variant: outlined color: primary, disbled: false
    // variant: contained size: s
    // variant: contained size: m
    // variant: contained size: l
    // Ну и все эти состояния рендерим, а потом скриншотим
    propsForOnePage: [
      {
        color: ['primary', 'secondary', 'warning', 'default'],
        disabled: [true, false],
      },
      {
        variant: ['outlined'],
        color: ['primary'],
        disabled: [true, false],
      },
      {
        variant: ['contained'],
        size: ['s', 'm', 'l']
      }
    ],
    // Массив, с помощью которого генерируются отдельные файлы со скриншотами
    // Для каждого скриншота будут передаваться переданные props в объекте
    propsForEveryPage: [
      {},
      {
        dangerouslyApplyActiveStyle: true,
      },
      {
        dangerouslyApplyHoverStyle: true,
      },
      {
        dangerouslyApplyFocusStyle: true,
      },
    ],
    // дефолтные props для каждого скриншота компонента
    defaultProps: {children: 'Button'},
    // сам компонент, который скриншотим
    Component: Button
  });
});

Требования к unit тестам

Если какой-то функционал не получается проверить с помощью скриншота он должен быть покрыт unit тестом.
Независимо от покрытия компонента скриншотами каждый компонент должен иметь 100%-ое покрытие кода по всем istanbul показателям.