2021 02 08(月)TIL-272柏(レーシングカーゲームミッションPR)

15072 ワード

Today I Learned

cypress失敗例(*依存性関数)

昨日に続いて、機能が実現しました.機能が実現して完成したと思っていたすべてのテストが合格したのは、錯覚だった.

  it('자동차 경주를 마쳤을 때 우승자를 정상적으로 출력하는지 테스트 한다.', () => {
    let winner;
    typeCarNameAndSubmit();
    typeRacingCountAndSubmit();


    winner = getWinner();
    cy.get('#game-result-text').should(`🏆 최종 우승자: ${winner} 🏆`);
  });

上記のテストコードを作成しました.テストコードにおいても、機能を実装するためのgetWinner()関数を用いて簡単なテストが行われる.しかしながら、上記のコードを記述すると、typeCarNameAndSubmit()、typeRacingCountAndSubmit()関数を実行する前に、getWinner()を実行すると、自動車カタログやゲームの進捗をロードすることができない.

  it('랜덤 함수가 정상적으로 동작하는지 테스트 한다.', () => {
    const possibleScores = Array.from({
      length: GAME.MAX_SCORE - GAME.MIN_SCORE + 1,
    }).map((v, i) => i);

    for (let i = 0; i < 100; i++) {
      expect(possibleScores).to.include(getRandomNumber());
    }
  });

同様に、getRandomNumber()関数を呼び出してテストを行う場合、getRandomNumber()は独立して実行されるモジュールであるが、getWinner()では実行時にDOMの要素が必要であるため、このような問題が発生する.async/awaitを使用しようとしましたが、テストに失敗しました.setTimeOut()に合格し、以下のテストを修正しました.

  it('자동차 경주를 마쳤을 때 우승자를 정상적으로 출력하는지 테스트 한다.', () => {
    let winner;
    typeCarNameAndSubmit();
    typeRacingCountAndSubmit();

    setTimeout(() => {
      winner = getWinner();
      cy.get('#game-result-text').should(`🏆 최종 우승자: ${winner} 🏆`);
    }, 1000);
  });

このとき,テストのテンポだけを見て,テストコードの修正が正しいと思ってスキップし,禍根となる.

テストは正常に動作せず、setTimeOut()は動作せず、進行中です.get.clock()などを使って、getWinner()を使った様々な方法を試みましたが、いずれも失敗しました.最終的にDOMを直接分割し、以下のコードを修正しました.

  it('자동차 경주를 마쳤을 때 우승자를 정상적으로 출력하는지 테스트 한다.', () => {
    typeCarNameAndSubmit();
    typeRacingCountAndSubmit();

    cy.get('.car').then(($cars) => {
      const counts = [...$cars].map(($car) => {
        return $car.querySelectorAll('.forward-icon').length;
      });
      const maxScore = Math.max(...counts);
      const winners = [];

      counts.forEach((carCount, index) => {
        if (carCount === maxScore) {
          winners.push(carNames[index]);
        }
      });

      cy.get('#game-result-text').should(
        'have.text',
        `🏆 최종 우승자: ${winners.join(', ')} 🏆`,
      );
    });
  });

コードを変更して再テストすると、テストが予想通りに実行されることを確認できます.

テストコードのコスト

cypressにはまだ慣れていないため、このような場合もあるが、テストコード実装と機能実装から見ると、テストコードの実装にはより長い時間がかかるようだ.もちろん,あらかじめテストコードを実装することで機能を実現する際に素早く記述する部分もある.しかし,最終テストコードはすべての例外を100%上書きすることはできないので,どの程度上書きするかの悩みをテストコードで記述する必要がある.
Cypressを使い始めたばかりの頃は初めてテストコードを書くことに悩んでいました今後実施する計画ではTDDとBDDを適用し,引き続き検討する.

最初のPR

公平なプログラミングで一緒に実現した部分を完成しました.わずか1週間の間、私はフェルと一緒にプログラミングして、たくさん勉強しました.公平なプログラミングを行う過程で、特に障害に遭遇するたびに、公平は解決者の役割を果たすので、早く終わることができます.また協力したい良いパートナーに出会えて、ペアリングプログラミングが楽しくできます.
初めてPRを送り、現場で活躍する開発者たちに評価されると思うと、とてもわくわくして緊張します.評論家たちのフィードバックをよく吸収しなければならない.