尝试使用GitHub Actions对Angular项目进行自动化测试

2 年 ago
清, 宇
1 minute

GitHub宣布了对CI/CD的标准支持，是吧。
由于Beta版已经发布，我也考虑试试看。

请在GitHub Actions上进行注册。

由于这仍是测试版，似乎需要单独注册。

    TOPページにGitHub Actionsのアナウンスが出ているため、クリックします。
image.png
    「Sign up for the beta」を押下して、ベータ版にサインアップします
image.png
    • 「Register for GitHub Actions Beta」を押下して登録を完了させます

 

    ※メールでの通知が欲しい場合は「Please～」にチェックを入れておきます
image.png
    これで登録が完了しました
image.png

只是，这并不意味着你立即可以使用它，需要花费几天的时间才能使用。
实际上，我在注册后的一到两周内收到了关于GitHub Actions可用的邮件通知！

在GitHub上创建一个项目。

    Publicリポジトリであれば完全無料みたいなので、今回はPublicリポジトリで作成します
image.png
    以下のコマンドでAngularプロジェクトのテンプレートを生成し、上記プロジェクトにプッシュしておきます
ng new actions-test --routing --style=scss

GitHub Actions的配置

当使用GitHub Actions时，将出现以下的Actions选项卡。

image.png

工作流程的设置

Actionsタブを選択すると、セットアップ項目が色々出てきます。
一からセットする場合はSet up a workflow yourselfを押せば良さそうです。

image.png
    今回はAngularプロジェクトなので、Node.jsのテンプレートを使ってみようと思います。
image.png

setup this workflowを選択すると、.github/workflow/nodejs.ymlの作成画面になります。

image.png
    内容は以下のようになってます
name: Node CI

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm test
      env:
        CI: true
    いったんこのままプッシュします（右上のStart commitから直接できます）。

工作流程确认

    nodejs.ymlをプッシュした後、再度Actionsタブを確認します
image.png
    • 先ほどプッシュしたnodejs.ymlの内容でワークフローが動作しています。

masterの部分を押下するとジョブの実行状況が確認できます。

image.png

我失败了…
⇒点击项目，可以查看详细内容。

image.png

由于目标项目是Angular8，所以Node.js的版本必须是10以上才行。因此，我将从之前创建的nodejs.yml中删除8系列的版本。

    strategy:
      matrix:
        node-version: [10.x, 12.x]

这样构建就可以通过了，但在GitHub Actions上无法打开Chrome，所以测试会失败。

使用ChromeHeadless

这次为了不打开浏览器就能执行，我们会使用ChromeHeadless。
（还有其他的方法，比如使用PhantomJS）

    ワークフローのnpm run testに引数を追加します
npm run test -- --watch=false --browsers=ChromeHeadless

关于选项（在运行npm run test之后的–是用来传递选项给npm run的）：
–watch=false 关闭观察模式
–browsers=ChromeHeadless 以ChromeHeadless模式运行

    karmaの設定で、browsersにChromeHeadlessを追加しておきます
browsers: ['Chrome', 'ChromeHeadless'],
image.png

我会查看详细内容。

image.png

测试已经成功执行，并且全部通过了！！！

最后

成功地完成了Angular项目的自动化测试！未来可以考虑添加自动部署到Github Pages，并尝试构建一个完全基于Github的DevOps环境。

填補
完善
補充
填寫
補齊

这里有关于工作流限制的说明。

超过使用限制可能导致作业排队、无法运行或无法完成。限制可能会发生变化。

每个存储库可以同时执行最多20个工作流程。
在一个存储库内的所有操作中，每小时最多可以发出1000个API请求。
工作流程中的每个作业的执行时间最长可达6小时。
在一个存储库中，可以同时执行最多20个作业，跨所有工作流程。

    • リポジトリごとに20フローまで同時実行可能

 

    • リポジトリ内の全アクションで1時間あたり1000APIリクエストが可能

 

    • ワークフローの各ジョブは6時間まで実行可能

 

    リポジトリ内の全ワークフローで20ジョブまで同時実行可能

请查阅

GitHub Actions
使用GitHub Actions自动化您的工作流程
karma – 配置文件

bannerAds