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

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

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.

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

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

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

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

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

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

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

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

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

Требования к 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 показателям.

Сообщить о проблеме

Пишите issue