角度指令V 2の話

物語と角度

今、私は角度の物語を作ることについてもう少し経験があります.私はあなたとどのように角度指令のための物語を書くかを共有したいと思います.私が記事を書いたとき、私は絵本で始めました.ここで調整をします.
コンテキスト:角13、ストーリーブック6.5.0 -アルファ.36

ファーストドラフト
あなたがちょうど行かないならば、あなたはすでにインストールされた物語を持っていると思いますhere .
このボタンディレクティブを使いましょう.

// 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.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({});

この記事を使用すると、ボタンディレクティブのすべてのケースをテストできます.
私はあなたがテンプレートの“小道具”プロパティを見てお勧めします.個人的にはaddon-docs これはcompodoc . 「ドキュメント」タブでドキュメントを抽出できます.あなたがそれを使うとき、このように「小道具」特性をセットするならば:

props: {
  ...args
}

いくつかのトラブルを得る.実際には、@ inputプロパティだけでなく、あなたのディレクティブ/コンポーネントのすべてのプロパティがオーバーライドされます.これは予期しない振る舞いにつながる.したがって、設定したいプロパティを指定することを好みます.
それはあなたがこの物語で得るものです:


最後の物語
さて、ストーリーブックによって提供される特別なアドオンでこの物語を改善しましょう.

addonコントロール
このアドオンのおかげで、私たちはグラフィカルUIからのコンポーネント/ディレクティブで遊ぶことができます.

// .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>;

おかげで、それは我々が我々の絵本で得たものです:

ストーリーブックのすべての最近のバージョンでは、このアドオンはessentials デフォルトでインストールされます.
あなたはそれについての詳細情報を取得する場合here .

アドオンジェスト
私の使用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;
  },
};

インパッケージ.JSONファイルを追加します.

// don't forget to add .jest-test-results.json to .gitignore
"scripts": {
  "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
}

あなたの絵本のグローバルレベルでテストを追加します

// .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>;

これは次のようになります.

それは私があなたを提案できる最小限の設定です.あなたがチェックできる他のアドオンがたくさんありますhere . すべての角のために使用することはできませんが、常に注目される.

結論
今、あなたは素敵な絵本を持つことができ、より多くの他のアドオンの多くでそれを改善することができます.次の章では、あなたのストーリーブックをテストする方法を示します.なぜ?StoryBookは本当に強力ですが、コードをアプリケーション/ライブラリに追加すると、何かを壊したかどうかはわかりませんでした.
…する
読書ありがとう.

もっと学ぶ

Angular for everyone: All about it