paint-brush
Building a Wordle Game Using Test-Driven Development in 25 Minutesby@mcsee
1,366 reads
1,366 reads

Building a Wordle Game Using Test-Driven Development in 25 Minutes

by Maximiliano ContieriJanuary 16th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

With just a few steps we can build a robust Wordle game in just 25 minutes using TDD. The minimum information amount in Wordle is a word. We need to define what a word is and define it as a letter. We don't mess with word validation yet (word might be XXXXX) We need a Word with a Word constructor and the letters() function. We run all the tests (just 1) and we are OK (1 test, 1 assertion) We can start with a simpler test just validation word is created.

Company Mentioned

Mention Thumbnail
featured image - Building a Wordle Game Using Test-Driven Development in 25 Minutes
Maximiliano Contieri HackerNoon profile picture


Everybody is playing Wordle these days...

And I love TDD.


So, here I will explain how to develop a wordle game using TDD in just 25 minutes.



TL;DR: With just a few steps we can build a robust Wordle.

Defining a word

The minimum information amount in Wordle is a word.


We can argue that letter is smaller, but we think all needed letter protocol is already defined (we might be wrong).


A word is not a string. This is a common mistake and a bijection violation.

A word and a string have different responsibilities, though they might intersect.


Mixing (accidental) implementation details with (essential) behavior is a very common mistake.


So we need to define what is a word.


A word in Wordle is a valid 5 letter word.


Let's start with our happy path:

<?php

namespace Wordle;

use PHPUnit\Framework\TestCase;

final class WordTest extends TestCase {
    public function test01ValidWordLettersAreValid() {
        $wordleWord = new Word('valid');
        $this->assertEquals(['v', 'a', 'l', 'i', 'd'], $wordleWord->letters());
    }
}

We assert that prompting for letters in 'valid' returns an array with the letters.

Notice

  • Word class is not defined yet.
  • We don't care about letter sorting. That would be a premature optimization and gold plating scenario.
  • We start with a simple example. No duplicated.
  • We don't mess with word validation yet (word might be XXXXX).
  • We can start with a simpler test just validation word is created. This would violate the test structure that always requires an assertion.
  • Expected value should always be first.


We get an error:

Error : Class "Wordle\Word" not found


This is good in TDD, We are exploring our domain.


We need to create a Word with the constructor and the letters() function.

<?php

Namespace Wordle;

final class Word {

    function __construct(string $letters) {
    }

    function letters(): array {
        return ['v', 'a', 'l', 'i', 'd'];
    }
}

Notice

  • We don't need anything to do with the constructor parameter.

  • We hardcode letters function since this is the simplest possible solution up to now. -- Fake it till we make it.

  • Classes are final to avoid subclassification.


We run all the tests (just 1) and we are OK.


OK (1 test, 1 assertion)


Let's write another test:

<?php 

  public function test02FewWordLettersShouldRaiseException() {
        $this->expectException(\Exception::class);
        new Word('vali');
  }

Notice

  • PHPUnit exception raising is not very good. We just declare an exception will be raised.


Test fails...


Failed asserting that exception of type "Wordle\Exception" is thrown.


We need to change our implementation in order to make test02 pass (and also test01)

<?php 

  public function test02FewWordLettersShouldRaiseException() {
        $this->expectException(\Exception::class);
        new Word('vali');
  }

Notice

  • We just check for a few letters. not for too many since we don't have yet a covering test.
  • TDD requires full coverage. Adding another check without a test is a technique violation.
  • We just raise a generic Exception. Creating special exceptions is a code smell that pollutes namespaces. (unless we catch it, but this is not happening right now).


Let's check for too many

<?php 
  public function test03TooManyWordLettersShouldRaiseException() {
        $this->expectException(\Exception::class);
        new Word('toolong');
  }

The test fails as expected. Let's correct it.

Failed asserting that exception of type "Exception" is thrown.


<?php

function __construct(string $letters) {
        if (strlen($letters) < 5)
            throw new \Exception('Too few letters. Should be 5');
        if (strlen($letters) > 5)
            throw new \Exception('Too many letters. Should be 5');
}

And all tests passed.

OK (3 tests, 3 assertions)



We can now make an (optional) refactor and change the function to assert for a range instead of two boundaries.

We decide to leave this way since it is more declarative.

We can also add a test checking for zero words following the Zombie methodology.

Let's do it.



<?php

  public function test04EmptyLettersShouldRaiseException() {
        $this->expectException(\Exception::class);
        $wordleWord = new Word('');
  }

It is no surprise test passes since we already have a test covering this scenario. As this test adds no value we should remove it.


Let's check now what is a valid letter:

<?php

  public function test05InvalidLettersShouldRaiseException() {
        $this->expectException(\Exception::class);
        $wordleWord = new Word('vali*');
  }

... and the test is broken since no assertion is raised.


Failed asserting that exception of type "Exception" is thrown.


We need to correct the code...

<?php

  function __construct(string $letters) {
       if (str_contains($letters,'*')) {
          throw new \Exception('word contain invalid letters');
  }


And all tests pass since we are clearly hardcoding.

OK (5 tests, 5 assertions)


Let's add more invalid letters and correct the code.

<?php

  public function test06PointShouldRaiseException() {
        $this->expectException(\Exception::class);
        $wordleWord = new Word('v.lid');
  }

  //Solution

  function __construct(string $letters) {
        if (str_contains($letters, '.'))
            throw new \Exception('word contain invalid letters');
    ///....
  } 
  

Notice

  • We didn't write a more generic function (yet) since we cannot correct tests and refactor at the same time (the technique forbids us).


All tests are ok.

We can refactor.

We replace the last two sentences

<?php

  function __construct(string $letters) {
        if (!\preg_match('/^[a-z]+$/i', $letters)) {
            throw new \Exception('word contain invalid letters');
      }
    //..

Notice

  • The assertion checks only for uppercase letters. Since we are dealing with these examples up to now.
  • We defer design decisions as much as possible.
  • We defined a regular expression based on English Letters. We are pretty sure it won't accept Spanish (ñ), German(ë), etc.


As a checkpoint, we have only five letters words from now on.


Le't’s assert on letters() function. We left it hardcoded.

TDD Opens many paths.

We need to keep track of all of them until we open new ones.


We need to compare words

<?php  

  public function test07TwoWordsAreNotTheSame() {
        $firstWord = new Word('valid');
        $secondWord = new Word('happy');
        $this->assertNotEquals($firstWord, $secondWord);
  }

  public function test08TwoWordsAreTheSame() {
        $firstWord = new Word('valid');
        $secondWord = new Word('valid');
        $this->assertEquals($firstWord, $secondWord);
    }

And test fails.


Let's use the parameter we are sending to them.

<?php

final class Word {

    private $setters;
    function __construct(string $letters) {
        if (!\preg_match('/^[a-z]+$/i', $letters)) {
            throw new \Exception('word contain invalid letters');
        }
        if (strlen($letters) < 5) {
            throw new \Exception('Too few letters. Should be 5');
        }
        if (strlen($letters) > 5) {
            throw new \Exception('Too many letters. Should be 5');
        }
        $this->letters = $letters;
    }

    function letters(): array {
        return ['v', 'a', 'l', 'i', 'd'];
    }
}

Notice

  • We store the letters and this is enough for objects comparison (it might depend on the language).
  • letters() function is still hardcoded


Tests are OK


OK (8 tests, 8 assertions)


We add a different word for letters comparison

<?php

public function test09LettersForGrassWord() {
        $grassWord = new Word('grass');
        $this->assertEquals(['g', 'r', 'a', 's', 's'], $grassWord->letters());
    }


And test fails.

Failed asserting that two arrays are equal.


It is very important to check for equality/inequality instead of assertTrue() since many IDEs open a comparison tool based on the objects.

This is another reason to use IDEs and never text editors.


Let's change the letters() function

<?php 

  function letters(): array {
        return str_split($this->letters);
  }

Our words are in a bijection with English Wordle words. or not?

<?php

  public function test10XXXXIsnotAValidWord() {
        $this->expectException(\Exception::class);
        $wordleWord = new Word('xxxxx');
  }

This test fails.

We are not catching invalid English 5 letter words.


We need to make a decision. According to our bijection, there's an external dictionary asserting for valid words.


We can validate with the dictionary upon word creation. But we want the dictionary to store valid wordle words. Not strings.


It is an egg-chicken problem.


We decide to deal with invalid words in the dictionary and not the Wordle word.


We create new tests on our dictionary.

<?php

namespace Wordle;

use PHPUnit\Framework\TestCase;

final class DictionaryTest extends TestCase {
    public function test01EmptyDictionaryHasNoWords() {
        $dictionary = new Dictionary([]);
        $this->assertEquals(0, $dictionary->wordsCount());
    }
}


The test fails since we have not defined our Dictionary. We do it:

<?php

Namespace Wordle;

final class Dictionary {

    function __construct(array $words) {
        $this->words = $words;
    }

    function wordsCount(): int {
        return 0;
    }
}

Notice

  • We don't do anything with the words yet.
  • We hardcode the number of words.
  • We faked it yet again.

We add another case for count 1 if the dictionary has one word.

<?php
  public function test02SingleDictionaryReturns1AsCount() {
        $words = [new Word('happy')];
        $dictionary = new Dictionary($words);
        $this->assertEquals(1, $dictionary->wordsCount());
   }


Test fails as expected

Failed asserting that 0 matches expected 1.


We correct it.

<?php

final class Dictionary {

    private $words;
    function __construct(array $words) {
        $this->words = $words;
    }

    function wordsCount(): int {
        return count($this->words);
    }
}

Notice

  • Dictionary is immutable
  • No Setters or getters

We start with inclusion and get an error.

Error : Call to undefined method Wordle\Dictionary::includesWord()

So we fake it.

<?php
public function test03DictionaryDoesNotIncludeWord() {
        $words = [new Word('happy')];
        $dictionary = new Dictionary($words);
        $this->assertFalse($dictionary->includesWord(new Word('sadly')));
    }

 
//the solution
function includesWord(): bool {
        return false;
    }

We add a positive case. And we need to correct the function instead of hardcoding it.

<?php 

public function test04DictionaryIncludesWord() {
        $words = [new Word('happy')];
        $dictionary = new Dictionary($words);
        $this->assertTrue($dictionary->includesWord(new Word('happy')));
    }

function includesWord(Word $subjectToSearch): bool {
        return in_array($subjectToSearch, $this->words);
    }

We have the dictionary working.

Let's create the game.

<?php

final class GameTest extends TestCase {
    public function test01EmptyGameHasNoWinner() {
        $game = new Game();
        $this->assertFalse($game->hasWon());
    }
}

Test fails. We need to create the class and the function.

<?php

Namespace Wordle;

final class Game {

    function __construct() {
    }

    function hasWon(): bool{
        return false;
    }

}

We implement words tried. And the simplest solution

<?php

public function test02EmptyGameHasNoWinner() {
        $game = new Game();
        $this->assertEquals([], $game->wordsTried());
    }

//and the model

function wordsTried(): array {
        return [];
    }

Let's try some words. We get

Error : Call to undefined method Wordle\Game::addtry()

We define it.

<?php

public function test03TryOneWordAndRecordIt() {
        $game = new Game();
        $game->addtry(new Word('loser'));
        $this->assertEquals([new Word('loser')], $game->wordsTried());
    }

//The solution

final class Game {

    private $wordsTried;
    function __construct() {
        $this->wordsTried = [];
    }

    function addTry(Word $trial) {
        return $this->wordsTried[] = $trial;
    }

    function wordsTried(): array {
        return $this->wordsTried;
    }
}

Notice

  • We store the trials locally and add the trial and also change wordsTried() real implementation.

We can implement hasLost() if it misses 5 trials. With the simplest implementation as usual.

<?php

public function test04TryOneWordAndDontLooseYet() {
        $game = new Game();
        $game->addtry(new Word('loser'));
        $this->assertFalse($game->hasLost());
    }

//the solution
 function hasLost(): bool {
        return false;
    }

As always. I stop faking it and decide to make it.

Failed asserting that false is true.

So we change it as below.

<?php
  public function test05TryFiveWordsLoses() {
        $game = new Game();
        $game->addtry(new Word('loser'));
        $game->addtry(new Word('loser'));
        $game->addtry(new Word('loser'));
        $game->addtry(new Word('loser'));
        $this->assertFalse($game->hasLost());
        $game->addtry(new Word('loser'));
        $this->assertTrue($game->hasLost());
    }
'''

//The code
function hasLost(): bool {
        return count($this->wordsTried) > 4;
    }

We have most of the mechanics.

Let's add the dictionary and play invalid.

<?php

    public function test06TryToPlayInvalid() {
        $words = [new Word('happy')];
        $dictionary = new Dictionary($words);
        $game = new Game($dictionary);
        $this->expectException(\Exception::class);
        $game->addtry(new Word('xxxx'));
    }

We need to pass the dictionary to fix the tests

<?php

final class Game {

    private $wordsTried;
    private $dictionary;
    function __construct(Dictionary $validWords) {
        $this->dictionary = $validWords;
        $this->wordsTried = [];
    }

    function addTry(Word $trial) {
        if (!$this->dictionary->includesWord($trial)){
            throw new \Exception('Word is not included ' . $trial);
        }
        return $this->wordsTried[] = $trial;
    }
}

Fixed.


Now, we play to win

<?php
  public function test07GuessesWord() {
        $words = [new Word('happy')];
        $dictionary = new Dictionary($words);
        $winnerWord = new Word('happy');
        $game = new Game($dictionary, $winnerWord);
        $this->assertFalse($game->hasWon());
        $game->addtry(new Word('happy'));
        $this->assertTrue($game->hasWon());
    }

We need to correct hasWon().

<?php

  private $winnerWord;
    function __construct(Dictionary $validWords, Word $winnerWord) {
        $this->dictionary = $validWords;
        $this->wordsTried = [];
        $this->winnerWord = $winnerWord;
    }

    function hasWon(): bool {
        return in_array($this->winnerWord, $this->wordsTried);
    }

Notice

  • We use no flags to check if someone has won. We can directly check it.
  • We make an addParameter refactor with this new element to previous game definitions.

We added winnerWord. We need to assert this word is in the dictionary.

<?php 
 public function test08WinnerWordNotInDictionary() {
        $words = [new Word('happy')];
        $dictionary = new Dictionary($words);
        $winnerWord = new Word('heros');
        $this->expectException(\Exception::class);
        $game = new Game($dictionary, $winnerWord);
    }
 
//and add the check...

function __construct(Dictionary $validWords, Word $winnerWord) {
        if (!$validWords->includesWord($winnerWord)){
            throw new \Exception('Winner word must be in dictionary');
        }

OK (8 tests, 10 assertions)


We have all the mechanics.

Let's add the letter's positions. We can do it in Word class.

<?php
public function test10NoMatch() {
        $firstWord = new Word('trees');
        $secondWord = new Word('valid');
        $this->assertEquals([], $firstWord->matchesPositionWith($secondWord));
    }


//This method in Word class

 function matchesPositionWith(Word $anotherWord) : array {
        return [];
    }


Test passes


OK (10 tests, 10 assertions)


Let's match

<?php
  public function test11MatchesFirstLetter() {
        $firstWord = new Word('trees');
        $secondWord = new Word('table');
        $this->assertEquals([1], $firstWord->matchesPositionWith($secondWord));
    }

Fails.


We need to define it better

<?php
function matchesPositionWith(Word $anotherWord) : array {
        $positions = [];
        for ($currentPosition = 0; $currentPosition < count($this->letters()); $currentPosition++){
            if ($this->letters()[$currentPosition] == $anotherWord->letters()[$currentPosition]) {
                $positions[] = $currentPosition + 1; //Humans start counting on 1
                //We can implement this better in several other languages
            }
        }
        return $positions;
    }


We keep running all the tests all the time

OK (23 tests, 25 assertions)


We can add a safety test to be more declarative

<?php

public function test12MatchesAllLetters() {
        $firstWord = new Word('trees');
        $secondWord = new Word('trees');
        $this->assertEquals([1, 2, 3 , 4 ,5], $firstWord->matchesPositionWith($secondWord));
    }


Now we need the final steps. Matching in incorrect positions. and always the simplest solution...

<?php
public function test13MatchesIncorrectPositions() {
        $firstWord = new Word('trees');
        $secondWord = new Word('drama');
        $this->assertEquals([2], $firstWord->matchesPositionWith($secondWord));
        $this->assertEquals([], $firstWord->matchesIncorrectPositionWith($secondWord));
    }

//the easy solution
function matchesIncorrectPositionWith(Word $anotherWord) : array {
        return [];
    }


A more spicy test case. Let's go for the implementation

<?php
public function test14MatchesIncorrectPositionsWithMatch() {
        $firstWord = new Word('alarm');
        $secondWord = new Word('drama');
        $this->assertEquals([3], $firstWord->matchesPositionWith($secondWord));
        $this->assertEquals([1, 4, 5], $firstWord->matchesIncorrectPositionWith($secondWord));
        //A*ARM vs *RAMA
        $this->assertEquals([3], $secondWord->matchesPositionWith($firstWord));
        $this->assertEquals([2, 4, 5], $secondWord->matchesIncorrectPositionWith($firstWord));
    }

// The complicated solution

function matchesIncorrectPositionWith(Word $anotherWord) : array {
        $positions = [];
        //count($this->letters() is always 5 but we don't want to add a magic number here
        for ($currentPosition = 0; $currentPosition < count($this->letters()); $currentPosition++){
            if (in_array($this->letters()[$currentPosition], $anotherWord->letters())) {
                $positions[] = $currentPosition + 1; //Humans start counting on 1
                //We can implement this better in several other languages
            }
        }
        return array_values(array_diff($positions, $this->matchesPositionWith($anotherWord)));
    }


We remove from the occurrences the exact matches.

OK (26 tests, 32 assertions)



That's it.

We have implemented a very small model with all meaningful rules.

Future Steps

A good model should endure requirements change.


In the following articles, we will make these enhancements also using TDD:


  • Manage different languages and characters.
  • Import the words from a text file.
  • Add a Visual Engine and host it.
  • Implement an Absurdle
  • Develop a machine-learning algorithm to minimize wordle moves.

Repository

You can have all the code (and make pull requests on GitHub)


https://github.com/mcsee/TDD-Wordle

Conclusion

TDD is an iterative methodology. If you find some missing functionality you can write me on twitter and we will add it (after a failing test case, of course).

Hope you like this article and enjoy playing Wordle!