Розробка інтерфейсу англійською: Storybook 8 and Component Testing

Introduction

** Storybook ** — це інструмент, який є стандартом у галузі розробки, документування і тестування компонентів інтерфейсу користувача у окремому вигляді. Версія 8 принесла значні поліпшення в тестуванні взаємодії і продуктивності. Для людей, для яких англійська мова не є рідною, але які працюють у командах розробників інтерфейсу, Storybook має власний словник — історії, декоратори, аргументи, autodocs, CSF — з якими ви можете зіткнутися у коментарях запитів на звантаження, документах з’ єднання і обговореннях команди. Ця стаття пояснює ці терміни чітко і показує, як використовувати їх природно англійською мовою.

Історія і окремі історії

** Ізоляція компонентів ** — це розробка і тестування компонента інтерфейсу користувача повністю незалежно від решти компонентів програми. Жодного маршрутизації, глобального стану, викликів API — тільки компонент і його властивості. “Роботу в ізоляції компонента означає, що ми можемо розробляти компонент Button до того, як сторінка, яка його використовує, навіть існує.”

** історія ** у Storybook представляє один певний стан або варіант компонента. Компонент кнопки може мати історії для типового стану, вимкненого стану, стану завантаження і кожного з варіантів кольору. * “Напишіть окрему історію для кожного значущого стану компонента — таким чином QA зможе перевірити кожен з них без навігації по всій програмі.” *

** Варіант історії ** є одним конкретним прикладом у збірці історій для компонента. * « У нас є дванадцять варіантів історії для компонента Вхід: порожній, заповнений, помилка, вимкнено, з піктограмою префіксу, і так далі. » * Англійське слово « variant » означає варіант на основі — це схоже на « version », але конкретно означає форму, яка відрізняється від інших у тій же родині.

** CSF ** означає ** Component Story Format **, стандартний спосіб написання історій Storybook у вигляді звичайних експортів JavaScript або TypeScript. * « Ми перенесли всі історії до CSF 3, оскільки новий формат є більш коротким і краще працює з autodocs. » *

Арг, керування і декоратори

** Аргументи ** — це вхідні значення, подібні до props, які повідомлення передасть компоненту. Вони з’ являться на панелі ** Керування ** Storybook, за допомогою якої ви зможете змінювати їх інтерактивно у переглядачі. * “Встановити аргументи для історії картки, щоб дизайнери могли змінювати заголовок і адресу URL зображення без дотику до коду.” *

decorator — це функція обгортки, яка додає контекст до статті — наприклад, забезпечує тему, контекст маршрутизатора або імітаційні дані. “Обгортає всі статті, які використовують систему дизайну у ThemeDecorator, щоб вони відображалися з правильними кольорами без повторення коду налаштування в кожному файлі.”

** Додаток ** — це додаток, який розширює функціональність Storybook. Поширені додатки включають Controls (для редагування аргументів), Actions (для запису подій) і Accessibility (для перевірки відповідності ARIA). “Install the Accessibility addon so that every component story automatically runs a color-contrast and landmark check.”

** Autodocs ** — це функція Storybook 7+, яка автоматично створює сторінку документації для кожного компонента на основі ваших історій і типів TypeScript. * “Autodocs знижує час написання документації вручну — таблицю API компонента створюється безпосередньо з типів prop.” *

Тестування в Storybook

** Тестування взаємодії ** означає написання автоматичних тестів, які імітують дії користувача — клацання, введення тексту, натиснення клавіші табуляції — безпосередньо всередині статті і стверджують очікуваний результат. * « Ми додали тести взаємодії до статті LoginForm, щоб перевірити, чи надсилання з порожнім полем електронної пошти показує правильну помилку. » *

** Візуальне тестування регресії ** (або ** візуальна різниця **) — це спосіб створення знімка вікна компонента і порівняння його зі збереженим базовим зображенням. Якщо пікселі відрізняються, тест зазнає невдачі. “Візуальна регресія виявила незначну зміну ваги шрифту, яку не помітив би жодний тест-універсал — одну властивість CSS було перезаписано через конфлікт специфічності.”

** візуальна різниця ** — це зображення порівняння, яке підсвічує пікселі, які змінилися між базовим і поточним знімком вікна. * “Подивіться на візуальну різницю — ліве поле заголовка було зрушено на чотири пікселі. Нам потрібно знайти commit, який його спричинив.»*

** Сайт документації ** — це розгорнута версія вашої Storybook, яку дизайнери, менеджери продуктів та інші зацікавлені сторони можуть переглядати без запуску локального середовища розробки. * « Ми публікуємо наш сайт документації за статичним адресою URL після кожного об’ єднання з головним, щоб команда розробників завжди мала доступ до останніх станів компонентів. » *

Ключовий словник

Term	Definition
component isolation	Developing a UI component independently from the rest of the application
story	A single state or use case of a component, defined as a Storybook export
story variant	One specific example within a collection of stories for a component
args	The input values passed to a component story, editable via the Controls panel
decorator	A wrapper that adds shared context (theme, routing) to one or more stories
interaction test	An automated test that simulates user actions inside a story
visual regression	Detecting unintended visual changes by comparing screenshots to a baseline
autodocs	Automatically generated documentation pages based on stories and TypeScript types

Практичні поради

1. Використовуйте “історія” як зліченний іменник. Ми говоримо “історія”, “три історії”, “кожна історія”. Не плутати з одниною « Storybook » (сам інструмент). * « Відкрити історії Button і перевірити вимкнений варіант. » *

2. ** Вивчіть різницю між « тест » як іменником і дієсловом. ** * « Написати тест взаємодії » * (іменник). * « Використовувати Storybook для тестування компонентів у окремості » * (дієслово). Обидва природні. Ви також можете сказати * « запустити тести » * або * « тести пройшли » *.

3. ** Вправлятися з описом візуальних регресій. ** Під час перегляду візуального порівняння використовуйте напрямну мову: * « Значок було зсунуто на два пікселі праворуч » *, * « колір рамки світліший за базову лінію » *, * « текст було обрізано на новому знімку вікна ». * Точність у цих описах робить звіти про вади більш дійсними.

4. ** Використовуйте « опублікувати » для розгортання документації. ** Ми * опублікуємо * сайт документації, а не * розгортаємо * (хоча обидва є технічно правильними). * « Конвейєр CI опублікує Storybook на GitHub Pages після кожного успішного збирання. » * « Опублікувати » означає зробити щось доступним для аудиторії.

Conclusion

Storybook 8 став стандартом для розробки компонентного інтерфейсу, а його словник — історії, аргументи, декоратори, тести взаємодії, візуальна регресія — відображає зрілу інженерну практику. Якщо ви зможете говорити про ізоляцію компонентів, описати варіант сюжету або пояснити, що показує візуальний порівняльний аналіз, ви станете ефективнішим співробітником будь- якої команди розробників інтерфейсу. Мова Storybook є мовою сучасної інженерії інтерфейсу користувача, і вільне володіння нею буде вам на користь протягом всієї вашої кар’ єри.

Навигація незгодні з Grace — використовуючи технічну мову в розв’язанні конфліктів

Будьмо відвертими: розбіжності трапляються під час розробки інтерфейсу користувача, особливо при обговоренні складних функцій або складних взаємодій. Знання * правильного * словника, щоб виразити себе чітко, з повагою і переконливо, є ключовим для ефективного керування цими ситуаціями. Це не про перемогу в суперечці; це про те, щоб переконатися, що ваші ідеї зрозумілі і конструктивно сприяють вирішенню. Часто, нерозуміння виникають тому, що люди не використовують послідовну термінологію - або вони інтерпретують терміни по-різному. Сфокусування на точній мові, пов’язаній з концепціями Storybook - як “стан компонентів”, “рецепти взаємодії” або “вигляд регресії” - може значно поліпшити комунікацію.

Поширеною пасткою є емоційна мова («Це неправильно!»). Замість цього, об’єктивно сформулюйте свої зауваження, використовуючи описові фрази. Наприклад, замість того, щоб сказати «Цей компонент не працює», спробуйте «Я спостерігав несподівану поведінку під час тесту взаємодії з focus() prop. Чи можемо ми перевірити, чи стан компонента було оновлено правильно за цих обставин?» Аналогічно, коли ви отримуєте зворотній зв’ язок — навіть критичний зворотній зв’ язок — активно слухайте і шукайте пояснення перед тим, як відповідати. Фраза на кшталт: «Чи можете ви розібратися, що ви маєте на увазі під «візуально непослідовним?» Я хочу повністю зрозуміти вашу точку зору», демонструє готовність до продуктивного діалогу. Пам’ятайте, конструктивна критика є цінною; відкидаючі відповіді тільки погіршують ситуацію. Крім того, коли пропонуєте зміни, чітко сформулюйте * чому * ви їх робите - пов’язуючи їх з принципами дизайну, вимогами доступності або цілями користувацького досвіду, посилює ваш аргумент.

Іншим ключовим елементом є визнання спільної відповідальності. Фрази на кшталт «Дослідимо, як ми можемо вирішити це разом» або «Можливо, ми могли б дослідити [спеціальний аспект] як наступний крок» сприяють співпраці і демонструють, що ви вкладаєте в пошук позитивного рішення. Нарешті, не соромтеся просити про пояснення - набагато краще визнати плутанину, ніж продовжувати на основі припущень. Ясне спілкування будує довіру і зменшує ймовірність помилок, що виникають через неправильне тлумачення.

Ось приклад того, як storybook-addon-visual-regression Storybook може бути описано під час перегляду коду: «Візуальний тест регресії зазнав невдачі для стану цього компонента при використанні input prop з довгим рядком. Це вказує на потенційну проблему в тому, як компонент обробляє великі вхідні значення, що може вплинути на продуктивність і досвід користувача. ”

storybook add visual-regression --save
storybook run --config .storybook/visual-regression.js