История для директивы Angular V2

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,
  }),
];
Enter fullscreen mode Выйти из полноэкранного режима

В вашей истории:

_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 для всех: Все об этом

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *