Storybook и Angular
Теперь у меня есть немного больше опыта в создании историй для Angular. Я хотел бы поделиться с вами тем, как я пишу историю для директивы Angular. Я уже писал статью, когда начинал работать с storybook. Здесь я внесу некоторые коррективы.
Контекст: Angular 13, StoryBook 6.5.0-alpha.36
Первый набросок
Я предполагаю, что вы уже установили storybook, если нет, просто перейдите сюда.
Давайте воспользуемся директивой button:
// button.directive.ts
@Directive({
selector: 'button[groButton]',
host: {
_class_: 'gro-button',
'[class.gro-small]': 'size === "small"',
'[class.gro-medium]': 'size === "medium"',
'[class.gro-large]': 'size === "large"',
'[class.gro-outlined]': 'outlined',
'[class.gro-primary]': 'color === "primary"',
'[class.gro-accent]': 'color === "accent"',
'[class.gro-warn]': 'color === "warn"',
},
})
_export class_ ButtonDirective {
@Input()
_public_ size: 'small' | 'medium' | 'large' = 'medium';
@Input()
@CoerceBoolean()
_public_ outlined?: _boolean_;
@Input()
_public_ color: 'primary' | 'accent' | 'warn' = 'primary';
}
Я знаю, что ведутся споры о том, использовать ли директиву или компонент для элемента button. Но сейчас речь не об этом 🙂
Вот пример минимальной истории для этого:
// button.stories.ts
_import_ { _Meta_, _Story_ } _from_ '@storybook/angular';
_import_ { ButtonDirective } _from_ './button.directive';
_export default_ {
title: 'atoms/button',
component: ButtonDirective,
} _as Meta_<ButtonDirective>;
_const_ template: _Story_<ButtonDirective> = (args: ButtonDirective) => ({
props: {
size: args.size,
outlined: args.outlined,
color: args.color,
},
template: `<button groButton [size]="size" [outlined]="outlined" [color]="color">Click</button>`,
});
_export const_ Default = template.bind({});
С помощью этой истории вы можете протестировать все случаи для директивы button.
Я предлагаю вам взглянуть на свойства «props» для шаблона. Лично я использую addon-docs, который работает с compodoc. Он позволяет извлекать документацию на вкладке «Docs». При его использовании, если вы установите свойства «props» следующим образом:
props: {
...args
}
Вы получите некоторые проблемы. Фактически, все свойства вашей директивы/компонента будут переопределены, а не только свойства @Input. Это может привести к неожиданному поведению. Поэтому лучше указывать только те свойства, которые вы хотите установить.
Именно это вы и получите в этой истории:
Финальная история
Теперь давайте улучшим эту историю с помощью некоторых специальных аддонов, предлагаемых storybook.
addon-controls
Благодаря этому аддону мы можем работать с нашими компонентами/директивами из графического пользовательского интерфейса.
// .storybook/main.js
module.exports = {
stories: [],
addons: [
'@storybook/addon-docs',
'@storybook/addon-essentials', // check this line
],
core: {
builder: 'webpack5',
},
webpackFinal: (config) => {
_return_ config;
},
};
Посмотрите на свойство argTypes:
// button.stories.ts
_export default_ {
title: 'atoms/button',
component: ButtonDirective,
argTypes: {
color: { // directive input name
control: { type: 'inline-radio' },
},
size: { // directive input name
control: { type: 'inline-radio' },
},
},
} _as Meta_<ButtonDirective>;
Благодаря этому мы получаем вот что в нашем Storybook:
Во всех последних версиях Storybook этот аддон входит в состав essentials и устанавливается по умолчанию.
Если вы хотите получить больше информации о нем, перейдите сюда.
addon-jest
Я использую Jest для тестирования своего кода. Иногда полезно знать, что тестируется, не заглядывая в код. Для этого необходимо установить addon-jest.
Чтобы установить его:
(yarn|npm) (add|install) -D @storybook/addon-jest
Добавьте аддон:
// .storybook/main.js
module.exports = {
stories: [],
addons: [
'@storybook/addon-docs',
'@storybook/addon-essentials',
'@storybook/addon-jest', // check here
],
core: {
builder: 'webpack5',
},
webpackFinal: (config) => {
_return_ config;
},
};
В файл package.json добавьте следующее:
// don't forget to add .jest-test-results.json to .gitignore
"scripts": {
"test:generate-output": "jest --json --outputFile=.jest-test-results.json"
}
Добавьте тест на глобальном уровне вашего Storybook:
// .storybook/preview.js
import { withTests } from '@storybook/addon-jest';
import results from '../.jest-test-results.json';
export const decorators = [
withTests({
results,
}),
];
В вашей истории:
_export default_ {
title: 'atoms/button',
component: ButtonDirective,
parameters: {
jest: ['button.directive.spec'], // check here
},
argTypes: {
color: {
control: { type: 'inline-radio' },
},
size: {
control: { type: 'inline-radio' },
},
},
} _as Meta_<ButtonDirective>;
Теперь вы сможете увидеть вот это:
Это минимальная настройка, которую я могу вам предложить. Есть много других аддонов, которые вы можете проверить здесь. Все они не могут быть использованы для Angular, но это всегда можно заметить.
Заключение
Теперь у вас есть красивый Storybook, и вы можете улучшить его с помощью множества других аддонов. В следующей главе я покажу вам, как протестировать ваш Storybook. Почему? Потому что Storybook действительно мощный, но когда вы добавляете код в свои приложения/библиотеки, вы не можете знать, не сломали ли вы что-нибудь…
Далее…
Спасибо за чтение.
Подробнее
- Установка Jest для Angular
- Как отменить коммит GIT
- Перегрузка функций TypeScript
- Angular для всех: Все об этом