Cypressを使ったフロントエンドのテスト駆動開発：LINEドクターの事例

npm install cypress --save-dev
npx cypress open

// cypress/e2e/todo.cy.js

describe('タスク管理', () => {
  it('タスクリストが表示される', () => {
    // ページにアクセスする
    cy.visit('http://localhost:3000/');

    // ページの中で、data-testidのattributeに"todo-list"が指定されているelementが存在するか確認
    cy.get('[data-testid="todo-list"]').should('exist'); // まだ実装前なので、このテストは失敗します。
  });
});

<!-- index.html -->

<div data-testid="todo-list">
  <!-- タスクリストが表示される場所 -->
</div>

// cypress/integration/todo_spec.js

describe('タスク管理', () => {

  // ... 以前のテストコード

  it('タスクを追加する', () => {
    // ページにアクセス
    cy.visit('http://localhost:3000/');

    //　タスクを入力した後、エンターキーを押す
    cy.get('[data-testid="new-todo"]').type('新しいタスク{enter}'); 

    // タスクリストに新しいタスクが追加されたことを確認
    cy.get('[data-testid="todo-list"]').should('contain', '新しいタスク'); 
  });
});

// このAPIは実際に使われているAPIではなく、加工したAPIです。

// request
GET /v1/is-pharmacy-nearby
{
  "userAddress": "ユーザーの住所"
  "pharmacyId": "薬を受け取る薬局のID"
}

// response
true || false

describe.only('選択した薬局とユーザーの住所の距離確認', () => {
  // 基本になるテストケース
  it('薬局がユーザーの住所から15km以上の場合、ポップアップを表示する', () => {
    // バックエンドエンジニアと議論したAPI Interfaceをモックする
    // 薬局がユーザーの住所から15km以上の場合なので、APIはfalseを返す
    cy.intercept('GET', `/v1/is-pharmacy-nearby**`, 'false').as(
      'fetchIsPharmacyNearby'
    );

    // ポップアップを表示するページにアクセスする
    cy.visit(`/treatment/review`);

    // 予約を完了させる
    cy.get('[data-testid=confirm_reservation]').click();

    // ポップアップが表示されることを確認する
    cy.get('[data-testid="common_modal"]').should('exist');
    cy.get('[data-testid="common_modal_description"]').should(
      'contain',
      'お薬を受け取る薬局の住所がご自宅住所から離れています。このまま予約を完了しますか？'
    );

    // APIを呼ぶときに正しいパラメータをわたしたか確認する
    cy.wait('@fetchIsPharmacyNearby').then(({ request }) => {
      const searchParams = new URL(request.url).searchParams;
      expect(searchParams.get('userAddress')).to.equal('xxx');
      expect(searchParams.get('pharmacyId')).to.equal(`999`);
    });
  });

  // 派生したケース
  it('薬局がユーザーの住所から15km未満の場合、ポップアップを表示しない', () => {
    /// 薬局がユーザーの住所から15km未満の場合なので、APIはtrueを返す
    cy.intercept('GET', `/v1/is-pharmacy-nearby**`, 'true');

    // ...省略

    // ポップアップが表示されないことを確認する
    cy.get('[data-testid="common_modal"]').should('not.exist');
  });
});

// LINEドクターのフロントエンドはVueを利用しているので、サンプルコードはVueのコードになります。


<template>
  <main>
    <!-- ... -->

    <button data-testid="confirm_reservation" @click="handleClickConfirm">
      予約する
    </button>

    <!-- ... -->
  </main>
</template>

<script>
export default {
  // ...
  methods: {
    async handleClickConfirm() {
      // ...

      const response = await this.$axios.get(
        '/v1/is-pharmacy-nearby',
        {
          params: {
            userAddress: this.userAddress,
            pharmacyId: this.pharmacyId,
          },
        }
      );
      if (!response.data) {
        await this.$modal.open({
          text: 'お薬を受け取る薬局の住所がご自宅住所から離れています。このまま予約を完了しますか？',
        });
      }

      // ...
    },
  },
};
</script>

<template>
  <main>
    <!-- ... -->

    <button data-testid="confirm_reservation" @click="handleClickConfirm">
      予約する
    </button>

    <!-- ... -->
  </main>
</template>

<script>
export default {
  // ...
  methods: {
    async handleClickConfirm() {
      // ...

      if (!await this.isPharmacyNearby()) {
        await this.$modal.open({
          text: 'お薬を受け取る薬局の住所がご自宅住所から離れています。このまま予約を完了しますか？',
        });
      }

      // ...
    },
    async isPharmacyNearby() {
      const response = await this.$axios.get(
        '/v1/is-pharmacy-nearby',
        {
          params: {
            userId: this.userId,
            pharmacyId: this.pharmacyId,
          },
        }
      );

      return response.data;
    }
  },
};
</script>