Генератор видео от Alibaba
Приложение для простакринации
AR в медицине
Электро самолёт
iPhone 16e
Nothing Phone 3a
Оживление фото LumaAI
Велосипед Mercedes
Робота научили делать сальто

Тестирование React. Часть 3: Storybook

Всем привет. Я - Петр Цой. Ищу первую работу на React. В качестве моего резюме выступает сайт petrtcoi.com. Ссылка на GitHub.

Это заключительная статья, посвященная тестированию моего демонстрационного сайта. На этот раз настроим тестирование с помощью Storybook.

Настройка Storybook

Настройка темы

Для установки Storybook можно следовать официальной инструкции.

Так как у нас используется смена темы через CSS-пременные, то нам нужно дополнительно настроить wrapper, который будет менять значение атрибута data-theme в корневом теге html. Для этого создадим специальный декоратор:

// .storybook/decorators/uiThemeDecorator.tsx import { DecoratorFn } from "@storybook/react" import React from "react" import { setUiTheme } from '../../src/assets/utils/setUiTheme' import { ThemeColorSchema } from '../../src/assets/types/ui.type' export const uiThemeDecorator: DecoratorFn = (Story, options) => { const { UiTheme } = options.args if (UiTheme !== undefined && UiTheme in ThemeColorSchema) { setUiTheme(UiTheme) } else { setUiTheme(ThemeColorSchema.dark) } return ( <Story { ...options } /> ) }

Он принимает значение темы, которую нужно установить и вызывает метод setUiTheme, который в нашем приложении отвечает за смену темы.

Добавляем это декоратор в файл preview.js

// .storybook/preview.js import { uiThemeDecorator } from './decorators/uiThemeDecorator' import '../src/assets/styles/_styles.css' ... export const decorators = [uiThemeDecorator]

Стили импортируем для того, чтобы смена темы работала корректно.

Также создадим утилиту, чтобы было позже удобнее добавлять выбор темы в атрибуты компонентов:

// src/utils/storybookUiThemeControl.ts import { ThemeColorSchema } from "../types/ui.type" export const UiThemeControl = { UiTheme: { options: ThemeColorSchema, control: { type: 'radio' }, } } export type UiThemeType = { UiTheme: ThemeColorSchema }

Настройка Viewports

В тот же файл добавим разрешения экранов, которые нас интересует. Так как у нас только один breakpoint: 800px, то мы добавляем только 2 разрешения. Прописываем их в переменной customViewports и добавляем в parameters.viewport. Окончательно файл выглядит так:

// .storybook/preview.js import { uiThemeDecorator } from './decorators/uiThemeDecorator' import '../src/assets/styles/_styles.css' const customViewports = { desktop: { name: 'Desktop', styles: { width: '801px', height: '963px', }, }, mobile: { name: 'Mobile', styles: { width: '800px', height: '801px', }, }, } export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, viewport: { viewports: customViewports, }, } export const decorators = [uiThemeDecorator]

Создание Story

Теперь все готово, чтобы создать первую историю. Для примера возьмем компонент WorkSingle, отвечающий за отображение WorkSingle.stories.tsx

// src/components/PageMain/WorkList/WorkSingle/WorkSingle.stories.tsx import React from 'react' import { Meta, Story } from '@storybook/react' import WorkSingle from './WorkSingle' import { WorkSingleProps } from './WorkSingle' import { Work } from '../../../../assets/types/work.type' import { UiThemeControl, UiThemeType } from '../../../../assets/utils/storybookUiThemeControl' import { ThemeColorSchema } from '../../../../assets/types/ui.type' export default { component: WorkSingle, title: 'MainPage/WorkSingle', argTypes: { ...UiThemeControl, work: { name: 'Single works props', } }, } as Meta<WorkSingleProps> ...

Здесь проходит основная настройка:

  • прописываем title истории. В названии нужно использовать / для группировки историй.Здесь история будет относится к группе MainPage.
  • В argTypes указываются доступные для пользователя настройки компонентов. Сюда включили переключатель темы и добавили свойство work (я не нашел, как в Storybook можно работать с вложенными свойствами компонентов, поэтому здесь будет использоваться просто JSON представление свойства).

Далее создаестя шаблон Template для отображения компонента, значения его аргументов по-умолчанию и базовый компонент Default, принимающий все эти значения.

const Template: Story<WorkSingleProps & UiThemeType> = (args) => { return ( <WorkSingle { ...args } /> ) } const defaultWork: Work = { title: 'Первая работа', publishDate: '22.11.2022', description: 'Описание работы с выделением ключевых слов. Должно работать для всех слов, входящих в текст. Не важно, одно это слово или их несколько.', keywords: ['слов'], links: { devto: 'https://dev.to', vcru: 'https://vs.ru', local: 'https://petrtcoi.com' } } export const Default = Template.bind({}) Default.args = { work: defaultWork, UiTheme: ThemeColorSchema.dark, }

Default - это наша первая история, на базе которой мы можем создавать другие. Для этого достаточно поменять интересующие нас параметры.

export const Without_DevTo_Link = Template.bind({}) Without_DevTo_Link.args = { ...Default.args, work: { ...defaultWork, links: { vcru: 'https://vs.ru', local: 'https://petrtcoi.com' } } } export const With_Two_Keywords = Template.bind({}) With_Two_Keywords.args = { ...Default.args, work: { ...defaultWork, keywords: ['слов', 'работы'] } }

Запуск Storybook

Выполняем команду npm run storybook и по адресу http://localhost:6006/ открывается панель Storybook.

Тестирование React. Часть 3: Storybook

Здесь в левой части отображаются истории, сгруппированные согласно их обозначению в title: 'MainPage/WorkSingle', а также их вариации: Default, Without Dev To Link, With Two Keywords.

В центральной части отображается собственно сам компонент и ниже есть определенные нам ранее для него настройки. Есть возможность поменять их и посмотреть, как компонент будет выглядеть.

Тестирование с помощью Storybook

Возможность просмотреть отдельно работу каждого компонента, проверить его поведение при разных параметрах может оказаться очень полезной при работе со сложными интерфейсами, содержащими сотни компонентов. Теперь они могут быть все доступны в удобном виде для их изучения.

Но Storybook может использоваться и при автоматическом тестировании. Для этого созданные нами в **.stories.tsxкомпоненты можно использовать в обычных юнит-тестах, отдавая на render сразу сконфигурированные компоненты. Но я не нашел большой пользы в таком подходе: добавляется работы и логика тестов распыляется по разным файлам, что, на мой взгляд, плохо сочетается с идеей небольших и легких тестов.

Второй вариант использования Storybook, наоборот, мне показался очень привлекательным. Речь идет о визуальном тестировании. Это тот же screenshot тест, как в playwright, но на уровне отдельных компонентов.

На сайте Storybook в качестве такого инструмента рекомендуется использовать Chromatic. Это платный инструмент, но есть бесплатный лимит, которого вполне достаточно для небольшого хобби-проекта. Есть также бесплатные библиотеки, выполняющие ту же роль.

Настройка Chromatiс максимально проста, а его бесплатного уровня для меня достаточно, поэтому использовал его. После регистрации на сервисе и установки, как написано в инструкции, достаточно просто выполнить команду npm run chromatic.

В результате будут отрисованы и сгенерированы изображения всех историй и их вариаций. Полученные изображения сравнятся с предыдущими. И если, например, мы каким-то образом нарушили внешний вид компонента, то Chromatic нам обязательно на это укажет, подсветив отличия зеленым цветом. Мы должны или принять изменения, если они соответствуют тому, что мы задумывали, либо внести в код правки.

Тестирование React. Часть 3: Storybook

Такая проверка позволяет выявлять ошибки "не видимые" для базовых юнит-тестов на основе @testing-library.

Заключение

Storybook - мощный инструмент для тестирования компонентов приложения. Он отлично подойдет для команд, работающих над крупными проектами, имеющими десятки и сотни компонентов. Возможность отдельно просмотреть каждый из них в разных режимах, а также провести быстрое визуальное тестирование, значительно упростят работу.

В то же время, Storybook является скорее дополнением к уже существующим тестам и не признан самостоятельно закрывать основные задачи тестирования.

22
реклама
разместить
Начать дискуссию
«Яндекс Драйв» снизил требования для водителей — каршеринг доступен пользователям от 18 лет и без стажа

За исключением некоторых автомобилей.

44
22
22
11
реклама
разместить
Xiaomi открыла продажи спортивного электромобиля SU7 Ultra

Пока в Китае, по цене от 529,9 тысячи юаней (около 6,2 млн рублей).

Источник здесь и далее: Xiaomi, Carnewschina
99
33
11
Разработка AML сервиса: основа, подходы и код
Разработка AML сервиса: основа, подходы и код

Anti-Money Laundering (AML) – это комплекс мероприятий, направленных на предотвращение отмывания денег, финансирования терроризма и других незаконных финансовых операций. Разработка AML сервиса включает в себя создание системы, которая будет отслеживать подозрительные транзакции и предоставлять механизмы для выявления и расследования таких операций…

11
В VK никто не покупает? Клиент Vitamin.tools объясняет, что вы делаете не так

«VK пользуются все: и подростки, и пенсионеры. И среди них много платёжеспособных людей. Им можно продать почти любой продукт, если работать вдолгую: заинтересовывать, прогревать, отвечать на вопросы, напоминать о себе». — Рассказывает клиент рекламной экосистемы Vitamin.tools, возвращающей до 18% от пополнения рекламы, маркетолог Кирилл Чарушин.

В VK никто не покупает? Клиент Vitamin.tools объясняет, что вы делаете не так
3737
99
55
22
ВК дно, это такой же хладеющий труп как и однокласники.
«Абсолютно неинтересно, какие там придумывают санкции»: Герман Греф — о дивидендах «Сбера», санкциях и благодарности Apple за уход из России

Выжимка заявлений главы банка со звонка с аналитиками и инвесторами.

Источник: ТАСС
3333
1717
55
11
Отсутствие на рынке РФ качественных банковских сервисов - конечно же благо для Грефа, кто бы спорил
Главу криптокомпании Gotbit Алексея Андрюнина экстрадировали в США

26-летнего россиянина задержали осенью 2024 года в Португалии в ходе масштабной операции американских спецслужб против мошенничества на крипторынке.

Алексей Андрюнин, скриншот из видео на YouTube-канале Coindesk
1212
55
22
11
11
Нагиев, Безруков (но не Борисов): товарные знаки российских актеров
Нагиев, Безруков (но не Борисов): товарные знаки российских актеров

Пока вся страна болеет за Юрия Борисова, который вошел в число номинантов на премию «Оскар», мы решили вспомнить, какие товарные знаки принадлежат российским актерам. Коммерциализировать свою известность через зарегистрированные бренды захотели Нагиев, Депардье, Галустян и многие другие знаменитости. Рассказываем в нашей статье о том, что именно он…

44
Стартап Mark Engineering представил книжную ИИ-закладку за $129 — но пользователи не поняли, как она работает и какую проблему решает

Заодно пошутили, что устройству уготовано место рядом с «умной» брошью от Humane.

44
44
11
11
[]