Tennis score system using TDD in JS Part 2

In the previous article we have created a basic tennis scoring system using test driven development. We’ve implemented player scoring and end of the game. Now are going to add to it the deuce and advantage. Again if you are not sure how the scoring system works with the deuce and advantage, then you can read about it here.

Setup tests

Firstly when doing TDD, we have to define our tests. Below we’ve implemented a bunch of tests for testing the deuce and advantage results:

test("Server scores 3 times and Opponent scores 3 times.", () => {
    startTennisMatch();
    serverScores();
    serverScores();
    serverScores();
    opponentScores();
    opponentScores();
    opponentScores();
    expect(getScore()).toBe("Deuce");
  });

  test("Server scores 3 times and Opponent scores 4 times.", () => {
    startTennisMatch();
    serverScores();
    serverScores();
    serverScores();
    opponentScores();
    opponentScores();
    opponentScores();
    opponentScores();
    expect(getScore()).toBe("Advantage - Opponent");
  });

  test("Server scores 3 times and Opponent scores 5 times.", () => {
    startTennisMatch();
    serverScores();
    serverScores();
    serverScores();
    opponentScores();
    opponentScores();
    opponentScores();
    opponentScores();
    opponentScores();
    expect(getScore()).toBe("Game - Opponent");
  });

  test("Server scores 3 times and Opponent scores 6 times.", () => {
    startTennisMatch();
    serverScores();
    serverScores();
    serverScores();
    opponentScores();
    opponentScores();
    opponentScores();
    opponentScores();
    opponentScores();
    opponentScores();
    expect(getScore()).toBe("Game is already over. You can't score anymore.");
  });

All but one fail. The one that doesn’t fail is the last one which checks for errors, but we have implemented that well, so it still works.

Deuce and advantage

For this implementation we have to refactor the getScore function a little bit.

export function getScore() {
  if (error) return error;
  
  let scoreText;
  const serverScore = score[0];
  const opponentScore = score[1];
  const diff = Math.abs(serverScore - opponentScore);

  if (serverScore > 3 || opponentScore > 3) {
    const isServerUp = serverScore > opponentScore;
    scoreText = getGameOver(diff, isServerUp);
    scoreText = !gameOver ? getAdvantage(diff, isServerUp) : scoreText;
  }
  if (serverScore >= 3 && opponentScore >= 3 && diff === 0) {
    scoreText = "Deuce";
  }

  return scoreText
    ? scoreText
    : `${getScoreInText(serverScore)} - ${getScoreInText(opponentScore)}`;
}

1. We firstly save the difference between the server and opponent score to variable called diff.
2. Then we check if the server or opponent score is above 3 if yes then:
   1. we call getGameOver
   2. if game is not over yet then we call getAdvantage
3. When the server score and opponent scores are greater or equal to 3 and when the difference between their scores is equal to 0, then the score is a “Deuce”.
4. If we have found a game, advantage or a deuce then we return it in scoreText, otherwise we return a getScoreInText for both server and opponent.

Function getGameOver

function getGameOver(diff, isServerUp) {
  if (diff > 1) {
    gameOver = true;
    if (isServerUp) {
      return "Game - Server";
    } else {
      return "Game - Opponent";
    }
  }
}

Here when the difference between the players score is more than 1, then the game is over and we set the flag of gameOver variable. We also look who’s game is it. When the server has more points then it’s his game otherwise it’s opponents game.

Function getAdvantage

function getAdvantage(diff, isServerUp) {
  if (diff === 1) {
    if (isServerUp) {
      return "Advantage - Server";
    } else {
      return "Advantage - Opponent";
    }
  }
}

In getAdvantage when the difference between the two players is equal to 1, then we know some of them has an advantage. If the server has more points than he is the one with the advantage otherwise it’s the opponents advantage.

Running tests

Now when we run our tests, they are all green and our code successfully passes all of them.

Conclusion

We have implemented a fully functional tennis scoring system, with deuces, advantage and even end of the game scenario. All this was done using TDD approach and was a bunch of fun. Hope you also found it useful and educational.

Here’s the code on github.

Have a great day Guildsmen! Till next time, rock on! 🤘😉