Githubの行動と操り人形による連続的統合

最近、私は終末テストのためにPitpeteerを使っている私のブログに連続的な統合を加えました.私の主な目標はDependabot .
私のCIプラットフォームとしてGithub Actions , それは非常に簡単に動作するように、それはあなたが既に持っているすべてのGiTubリポジトリと美しく統合されます.全体はわずか2日の断続的な仕事を取っただけで、結果は全く素晴らしいと思います.
私は、ニックテイラーに叫びを与えたいですhis article on the subject , そして、ここで私の努力のためのグラウンドワークを敷設したので、私はあなたにも彼の記事を読むことをお勧めします.
しかし、私の技術スタックは全く異なります.選んだpuppeteer いくつかの理由で私のエンドツーエンドのフレームワークとして.一つ目は、Chromeの開発ツールの背後に書かれ、維持されていることです.したがって、私は生涯のサポートを保証しています(クロームがなくなるまで、近い将来にはない)、それは本当に簡単です.
もう一つの理由は、自宅でWSL(私はオハイオ州ZSHでZShellを実行しています)でWindowsラップトップで働いていて、サイプレスをセットアップすることはかなり難しいです.両方の理由で私は人形師を選ぶようになりました.

エンドツーエンドテスト

エンドツーエンド(またはE 2 E)テストは、他のタイプの自動テストとは異なります.E 2 Eテストは、実際のユーザーをシミュレートし、画面上のアクションを実行します.この種のテストは単体テストのような「静的」テストの間の空白を埋めるのに役立つでしょう.通常、単一のコンポーネント(または、マイクロサービスアーキテクチャのサービス)に対して通常実行されないコンポーネントテストとコンポーネントテスト.
ユーザーの相互作用をシミュレートすることによって、あなたは定期的なユーザーがそれを経験するのと同じ方法であなたのアプリケーションまたはサービスを使用する経験をテストするようになります.
我々がたどり着こうとするマントラは、あなたのコードが完全に実行するならば、それが重要でないということです.最終的な結果は、ユーザーがコードの偉大さを感じることはありません.

人造人間から始める

Patropeerは、それが本当に素晴らしい書き込みとテストを有効にするいくつかの設定オプションがあります.
Puppeteerテストは、“ヘッドフル”の状態で実行することができます、すなわち、実際のブラウザのウィンドウを開き、テストされているサイトに移動し、与えられたページ上のアクションを実行します.この方法は、-開発者は、テストを書く-正確に何がどのようなボタンが押されていると何が結果のUIのように見えるテストで発生することがわかります.“ヘッドフル”の反対はヘッドレスではなく、ここでは、Plpeteteerは、ブラウザのウィンドウを開くことは、CIパイプラインのための理想的なことはありません.
操り人形は非常に動作するように簡単ですが、あなたは自動化ツールを使用して実行できるアクションの量に驚くことでしょう.
我々は、我々が行くとき、ページタイトルを印刷する基本的なスクレーパーから始めますhttps://dorshinar.me . テストテストを実行するには、依存関係としてインストールする必要があります.

npm i puppeteer

さて、基本的なスクレーパーは次のようになります.

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://dorshinar.me");
  console.log(await page.title());

  await browser.close();
})();

我々がここですることは非常に単純ですpuppeteer.launch() , 新しいページを作成するbrowser.newPage() このブログに移動page.goto() , それから、我々はタイトルを印刷します.以下のようなPuppeteer APIでできることがたくさんあります.
ページのコンテキストでコードを実行する

(async () => {
  await page.evaluate(() => document.querySelector(".awesome-button").click());
})();

CSSセレクタを使用して画面の要素をクリックします.

(async () => {
  await page.click(".awesome-button");
})();

を利用する$ セレクター( jQueryのスタイル)

(async () => {
  await page.$(".awesome-button");
})();

スクリーンショット

(async () => {
  await page.screenshot({ path: "screenshot.png" });
})();

あなたがPuppeteer APIで行うことができますより多くの束があり、私はあなたがテストを書くことに飛び込む前にそれを見てみることをお勧めしますが、私が示した例はあなたに構築するためのしっかりした地面を与える必要があります.

操り人形を冗談で統合する

jest 素晴らしいテストランナーとアサーションライブラリです.docsから:

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

ジェストでは、テストを実行するには、模擬インポート、および複雑なアサーションを本当に簡単にできます.ジェストはまた、作成反応アプリにバンドルされているので、私はよく仕事でそれを使用します.

最初の冗談のテストを書く

Jestテストは書くのが非常に簡単です、そして、利用することによって、他のテスト枠組みを知っている人々によく知られているかもしれませんit , test , describe と他の身近な慣習.
基本的なテストは次のようになります.

function subtract(a, b) {
  return a - b;
}

it("subtracts 4 from 6 and returns 2", () => {
  expect(subtract(6, 4)).toBe(2);
});

また、1の下で複数のテストをグループ化することができますdescribe , それで、あなたは異なる記述を走らせることができるか、便利な報告のためにそれを使うことができます:

function divide(a, b) {
  if (b === 0) {
    throw new Error("Can't divide by zero!");
  }
  return a / b;
}

describe("divide", () => {
  it("throws when dividing by zero", () => {
    expect(() => divide(6, 0)).toThrow();
  });
  it("returns 3 when dividing 6 by 3", () => {
    expect(divide(6, 3)).toBe(2);
  });
});

もちろん、MOCKや他のタイプのアサーションを使用して、より複雑なテストを作成することができます.
テストの実行も簡単です.

jest

Jestは以下の人気の命名規則のいずれかでテストファイルを探します.

ファイル.js サフィックス__tests__ フォルダ.

ファイル.test.js サフィックス.

ファイル.spec.js サフィックス.

ジェスト操り人形

今、我々は冗談を言ってうまくいけば遊びをする必要があります.これは特に難しい仕事ではありませんjest-puppeteer それは我々の援助になる.
まず、依存関係としてインストールする必要があります.

npm i jest-puppeteer

そして今、我々は冗談の設定を拡張する必要があります.あなたがまだ持っていないならば、それをする多くの方法があります、私はConfigファイルで行きます.ファイル名jest.config.js プロジェクトのルートで

touch jest.config.js

ファイルでは冗談を言わなければならないjest-puppeteer ’次のコードをファイルに追加します.

module.exports = {
  preset: "jest-puppeteer" 
  // The rest of your file...
};

特別な起動設定を指定することができますjest-puppeteer.config.js ファイルとJest Puppeteerは、この設定をpuppeteer.launch() . 例えば、

module.exports = {
  launch: {
    headless: process.env.CI === "true",
    ignoreDefaultArgs: ["--disable-extensions"],
    args: ["--no-sandbox"],
    executablePath: "chrome.exe"
  }
};

jest-puppeteer は、新しいブラウザと新しいページを開くの世話をし、グローバルスコープに保存するので、あなたのテストでは、単に世界的に利用できる使用することができますbrowser and page オブジェクト.
私たちが使用できるもう一つの大きな特徴は、Jest Puppeteerがあなたのテスト中にサーバーを走らせる能力であり、それをserver キー

module.exports = {
  launch: {},
  server: {
    command: "npm run serve",
    port: 9000,
    launchTimeout: 180000
  }
};

今Jest Puppeteerが実行されますnpm run serve , 180秒(3分)のタイムアウトを使用して、ポート9000を聞くときにそれがされます.サーバーが起動するとテストが実行されます.
これで、JestとPuppeteerを使用して完全なテストスイートを書くことができます.残っているのは、CIパイプラインを作成することです.
あなたのスクリプトを追加することができますpackage.json テストを実行するファイル

{
  "scripts": {
    "test:e2e": "jest" 
  }
}

GITUBのアクション

最近Githubはアクションと呼ばれる大きな新機能をリリースしました.基本的に、アクションはプレーンなYAML構文を使用してワークフローを作成し、専用の仮想マシンで実行できます.ワークフローでは、基本からnpm ci && npm build && npm run test もっと複雑なものに.
Pitpeteerテストスイートを実行している基本的なワークフローを設定し、テストが通過しない場合はマージを防ぐ方法を示します.
開始する最も簡単な方法はActions あなたのgithubレポのタブ.前に任意のアクションを構成していない場合は、以前に設定されたワークフローの一覧が表示されます.

この場合、定義済みのノードを選択します.JSアクションは十分良い.生成されたYAMLは次のようになります.

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 ci
          npm run build --if-present
          npm test
        env:
          CI: true

ファイル内でワークフロー名、実行するジョブ、およびワークフローを実行するときに設定できます.あなたは、新しいプル要求や定期的なイベントとして、すべてのプッシュでワークフローを実行することができます.ワークフローのジョブは、デフォルトで並列に実行されますが、シーケンスで実行するように構成することができます.上記のワークフローではbuild .
また、ワークフローが実行されるOSを選択することができます(デフォルトでは、Windows Serverruns-on キー.
The strategy キーは、ノードバージョンの行列でテストを実行するのに役立ちます.この場合、最新のLTSメジャーの最新バージョンがあります.8.x , 10.x and 12.x . あなたが興味を持っている場合は、それをそのまま残すことができるか、単にそれを削除し、必要な特定のバージョンを使用します.
最も興味深い設定オプションはsteps . それで、我々は我々のパイプラインで実際に何が続くかについて定めます.各ステップは、RePoからコードをチェックアウト、ノードのバージョンを設定、依存関係のインストール、実行テスト、アップロードアーティファクト(後で使用されるか、ダウンロードされる)と、より多くのように実行できるアクションを表します.あなたはすぐに利用可能なアクションの非常に広範なリストを見つけることができますActions Marketplace .
基本的な設定は依存関係をインストールし、プロジェクトを構築し、テストを実行します.あなたがより多くの必要があるならば(例えば、あなたがE 2 Eテストのためにあなたのアプリケーションを提供したいならば)あなたはそれをあなたの好みに変えるかもしれません.一度完了したら、あなたの変更をコミットし、あなたは良いです.

強制チェックをマージ前に渡す

我々のために残された唯一のことは、我々のワークフローがうまく通る前にコードが合併されることができないことを確認することです.そのためには、repoの設定に進み、分岐をクリックします.

悪意のあるコード(または、我々のテストに合格しない少なくとも1つ)が合併されないように、我々は分岐保護規則をセットする必要があります.「追加」規則をクリックし、ブランチ名パターンの下に、保護されたブランチ(マスター、dev、または選択したもの)を配置します.マージをチェックする前にステータスチェックを渡す必要があります.

下記の変更を保存するをクリックしてください、そして、あなたは行ってよいです!