アサーション

一般的に、ほとんどのテストでは、アプリのUIに対してアサーションを行うことになるでしょう。ルートにアクセスしてアプリとやり取りし、Mirageがリクエストを処理した後、UIが期待どおりの状態になっていることをアサートします。

しかし、UIが正常に見えても、アプリにバグのあるネットワークリクエストが発生することがあります。

この種の問題に対処するために、UIアサーションと並行して、テスト内でMirageサーバーの状態に対してアサーションを行うことができます。これにより、JavaScriptアプリがバックエンドに正しいデータを送信しているという確信を深めることができます。

Mirageのデータベースに対するアサーション

アプリがバックエンドに正しいデータを送信していることをアサートする最も簡単な方法は、Mirageのデータベースに対してアサートすることです。正しいデータがそこにあれば、JavaScriptアプリからのJSONペイロードが正しいだけでなく、Mirageのルートハンドラーが期待どおりに動作しているという確信が得られます。

Cypressを使用した例を以下に示します。

it("can change the movie title", function () {
  let movie = server.create("movie", { title: "Some movie" })

  cy.visit(`/movies/${movie.id}`)
    .contains("Edit")
    .click()
    .get("input.title")
    .type("Updated movie")
    .contains("Save")
    .click()

  // Assert against our app's UI
  cy.get("h1").should("contain", "Updated movie")

  // Also check that the data was "persisted" to our backend
  assert.equal(server.db.movies[0].title, "Updated movie")
})

これは、アプリが期待どおりのデータを送信しているという確信を深めるための優れた方法です。

Mirageモデルに対するアサーション

また、MirageのORMモデルに対してアサーションを行い、モデルのリレーションシップの更新などを検証することも役立ちます。

it("can add a tag to a post", function () {
  let programming = server.create("tag", { name: "Programming" })
  let post = server.create("post")

  cy.visit(`/posts/${post.id}/edit`)
    .get(".tags")
    .select("Programming")
    .contains("Save")
    .click()

  cy.get(".toast").should("contain", "Saved!")
  expect(post.reload().tagIds).to.include(programming.id)
})

Mirageモデルのreloadメソッドは、インスタンス化されてからの新しいデータベースデータでそれらを再ハイドレートし、ルートハンドラーのロジックが期待どおりに機能したことを検証できるようにします。

モデルに対するアサーションは、基本的にMirageのデータベースデータが正しいことを検証するもう1つの方法です。

処理されたリクエストとレスポンスに対するアサーション

テスト中に作成された実際のHTTPリクエストとレスポンスに対してアサーションを行うこともできます。

これを行うには、trackRequests設定オプションを使用して、Mirageのリクエスト追跡機能を有効にします。

createServer({
  trackRequests: true,
})

リクエスト追跡は、長時間の開発セッション中のメモリ問題を回避するために、デフォルトで無効になっています。

Mirageは、すべてのリクエスト（および関連するレスポンス）を追跡し、server.pretender.handledRequestsを介して利用できるようにします。そうすれば、テストの最後に、その配列内のリクエストに対してアサーションを行うことができます。

it("can filter the table", function () {
  server.createList("movie", 5, { genre: "Sci-Fi" })
  server.createList("movie", 3, { genre: "Drama" })

  cy.visit("/").get(".tags").select("Sci-Fi")

  // Assert against our app's UI
  cy.get("tr.movie").should("have.length", 5)

  // Also assert against the HTTP request count & query
  let requests = server.pretender.handledRequests
  expect(requests).to.have.lengthOf(1)
  expect(requests[0].queryParams).to.deep.equal({ "filter[genre]": "Sci-Fi" })
})

一般的に、アプリのHTTPリクエストの詳細は、実際に検証したい動作の実装の詳細と見なされるべきであるため、MirageのデータベースとUIに対してアサーションを行うことをお勧めします。ただし、HTTPデータに対してアサーションを行う正当な理由も確かにあります。

これで、ガイドの主要部分を完了しました。高度なユースケースと構成オプションを確認するか、APIドキュメントに進んで、Mirageのさまざまなクラスについて詳しく学んでください。

統合テストとユニットテスト

GraphQL