静的解析やテストを実行する

data-viz-create-visual-parts-react で作成したワークスペースでは、 npm run コマンドにより、静的解析やテストを実行することができます。

ESLintを使って静的解析を行う

ワークスペースでは ESLint による静的解析を行うことができます。

以下のコマンドを実行すると、静的解析を実行します。

$ npm run lint:eslint

また、VS Codeなどご使用のエディターからESLintを使用することも可能です。

ESLintの設定ファイルは、 ./configs/eslint にあります。適宜、静的解析のルールを変更して使用してください。

Storybookを使ってビューをテストする

ワークスペースでは Storybook を使ってビューをテストすることができます。

以下のコマンドを実行すると、ビューの単体テストのためのStorybookを http://localhost:6006 で表示することができます。

ビューの単体テストの対象は、 test.stories.tsx です。

$ npm run storybook

注釈

Data Visualizerが使用するメインのフォント（ axisProNRegular ）は、Data Visualizerと共にホストされているため、Storybookを使ったローカル環境でのテストでは使用することができません。 そのため、ストーリーファイルでは、フォントを useFontFamily('axisProNRegular') のように設定してください。これにより、OS標準のサンセリフフォントに置き換えてテストを実行することができます。

import { useFontFamily } from 'storybook/src/components/font-provider'

story(dirname, module)
  .add('test', () => {
    return (
      <Component
        titleFontFamiliy={useFontFamily('axisProNRegular')}
        text="Title"
      />
    )
  })

ユニットテストを行う

ワークスペースでは Jest によるユニットテストを行うことができます。

以下のコマンドを実行すると、 *.test.ts ファイルを対象にして、Jestによるユニットテストが行われます。

$ npm run test:once

ライセンスをチェックする

ワークスペースでは、ライセンスチェッカー js-green-lienses を使用することができます。

以下のコマンドを実行すると、 package.json の dependencies に指定された依存パッケージのライセンス情報をチェックします。

$ npm run license-check

すべての依存パッケージのライセンスが、「green」として設定されているライセンスである場合は、 All green! が表示されます。

...

npx: 121個のパッケージを5.191秒でインストールしました。
Checking package.json...

visual-parts-react is allowlisted.
@aptpod/data-viz-visual-parts-sdk is allowlisted.

All green!

設定ファイル js-green-licenses.json では、「green」として扱うパッケージを設定することができます。

詳細については js-green-lienses の Configurations を参照してください。