あなたの反応ネイティブライブラリのPRSのレビュープロセスを自動化

最後に私たちはあなたの反応ネイティブライブラリのビルドプロセスを自動化する方法を見ました.
PRSの見直しはオープンソースライブラリの管理の重要な部分です.しかし、彼らはあなたの忙しい生活からかなりの時間と努力を必要とするかもしれません.
私の全体のtoolchainは、できるだけ簡単にレビュープロセスを作るの周りに設定されました.今回は、レビュープロセス全体をより簡単にするためにGithubアクションワークフローを作成します.
ライブラリに上げられるすべてのPRは、自動的に実行される以下のチェックを持ちます

リンギングとテスト

コードカバレッジレポート

更新ストーリーブックドキュメントのプレビューを展開する

ビルドの例のモバイルアプリケーションのレビューのバージョンをすばやくリンクをテストする

ビジュアルレビューを行うには、色とりどりのすべての記事を送る

PRが送られるとすぐに、あなたはレビューワークフローの進行状況を見ることができるはずです﹣

上記のイメージは私のPRからですrex-state 図書館.どうやってこれを効果的に実装できるか調べましょう.
私のワークレビューワークフローを見つけることができます.github/workflows/review.yml ファイルオブマイrex-state 図書館.

ワークフローのトリガー

このワークフローはすべてのプルリクエストで実行されます

name: review
on: pull_request

リンギングとテスト

この手順は、ビルドワークフローの場合と同じです.他のすべてのジョブは、リンギング＆テスト完了後にのみ実行されます.

  lint:
    name: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn typescript
      - run: npx yarn lint

  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macOS-latest]
        node: ['12.x']
    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}
      - run: npx yarn bootstrap
      - run: npx yarn test

カバレッジレポート

以前のビルドステップでは、我々のテストカバレッジレポートを格納するコード気候を使用しました.しかし、PRSでは、着信コードのテストカバレッジをすばやくチェックする方法が必要です.
このためには、romeovs/lcov-reporter-action これは、テストのカバレッジの詳細をPRに良いコメントを投稿します.次のようなコメントを得るでしょう﹣

コメントとして報道を受けるために、以下の構成を加えてください﹣

  coverage:
    needs: [test, lint]
    name: coverage
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn test --coverage
      - uses: romeovs/[email protected]
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}

更新ストーリーブックドキュメントのプレビューを展開する

私はNetlify Githubアプリを使用していたので、私は追加のセットアップの任意の種類なしでボックスの展開プレビューを取得しています.あなたは試してみることができますNetlify CLI 手動でgithubアクションでプレビューを展開できるようにしたい場合.

サンプルアプリケーションのレビューバージョン

これは万博のツールチェーンの力が輝くところです.あなたはあなたのレビューの目的のために使用することができます別のチャネルでアプリケーションを公開するEXPOのCLIを使用することができます.
エキスポチームも詳細を提供しているdocumentation 彼らのexpo-github-action . 次の設定をワークフローに追加しますmsg アプリケーションのURLを指定します)﹣

  expo-publish:
    needs: [test, lint]
    name: Publish to Expo 🚀
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
      - run: npx yarn bootstrap
      - run: expo publish --release-channel=pr-${{ github.event.number }}
        working-directory: example
      - uses: unsplash/comment-on-pr@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          msg: App is ready for review, you can [see it here](https://expo.io/@daniakash/rex-state-example?release-channel=pr-${{ github.event.number }}).

今から、すべてのPRSの場合は、このようなコメントを得るでしょう﹣

彩色物語

最後に、PRは、あなたがあなたの物語に影響を与えている場合、視覚的なレビューを行うには、色にストーリーを送信することができます.構成は我々の最後のものと同じです、クロマチックは十分にデータがPRからあることを理解するためにスマートです!

  chromatic:
    needs: [test, lint]
    name: Publish storybook to chromatic 🧪
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn chromatic
        working-directory: example
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

完了したら、すべての準備ができて、あなたのprsは、あなたがそうする必要があります別の時間ごとに手動でチェックしなければならないことに関する詳細な情報を持って﹣

我々は今、強力なレビューのワークフローを得た.で、NPMにライブラリを公開しましょう.