Our worldle clone is getting better and better,
but there is still an elephant in the room
that we have been ignoring up to this point.
A player is meant to be able to try guessing the word multiple times.
More precisely, a player is allowed six tries.
Today we'll modify our app to allow just that.
This test here will have to be changed
to now require the user to make six guesses
before the defeat message is rendered.
Maybe we could make use of another .each function for this.
Let's turn this test into a series of mini tests
where we go from making zero wrong guesses
all the way up to making six wrong guesses.
We should only see the defeat message when we make six wrong guesses.
So as you can see over here,
I'm providing a series of data
that goes from zero guesses to six guesses,
and only in the last case we should be seeing a defeat message.
A good name for this describe block could be a defeat message
should appear if the player makes incorrect guesses six times in a row.
Now the body of this describe block
is going to contain a series of automated tests for each scenario.
I think a good name for each one of these individual tests
could be therefore for x guesses
a defeat message should or should not appear.
Now what are we going to be populating in this dynamic title here?
Well it's going to be something
that is going to be calculated based on the number of guesses
and whether or not the defeat message should be visible.
Here we can just add the number of guesses directly to the test name,
but in here I want to render
the word not
only if the defeat message is false.
Great and what would be the arrange, act, and assert of this test?
Well the arrange is already done for us because of our beforeEach,
which is mount the component with a word of the day.
For the act we're going to be typing a wrong guess
a number of guesses amount of time.
And for the assert phase
we're going to search that the defeat message is on the screen
or is not on the screen.
Now if we run our tests,
we can see that we're passing on the case of not showing a victory message
if no wrong guess was done,
but we are failing on all the different retries
that the player should have the right to do.
You can see that when we make one wrong guess
we are already displaying the defeat message to the player.
Okay let's get this test to pass
and of course we should remove this previous test over here
because it's no longer relevant to the project.
It has been replaced by our new test.
To get the test to pass,
we're going to have to be keeping track
of all the previous guesses the player has submitted.
Well guess submitted right now is just a single string.
Let's turn this into guesses submitted that is now an array of strings.
If the player is submitting a guess
then instead of simply assigning the guess to guesseSubmitted
we're going to be pushing this guess into it.
Another change that we have to do is what counts as the game ending.
Before we had that it just had to be
guessSubmitted having a length greater than zero,
but now guess submitted has to have a length of six or guesses submitted
includes the word of the day.
And we're going to render the victory message
when guesses submitted includes the word of the day.
Well notice that TypeScript is complaining over here
because word of the day can be either a string or undefined.
The reason behind this is that our word of the day prop is not required.
We can make it required by providing an extra key here,
called required, and set it to true.
And there you go. You can see that TypeScript has stopped complaining
because now the word of the day is considered a string.
Great! I think this should be enough to get this test to pass.
Let's try to run all the tests
and we can see that we have green across the board.
Awesome! Let's make a commit.
Allow player to make 6 guesses.
To refactor, I think a nice quick win for us over here
would be to extract this number 6.
It's a magic number. And what does it represent?
Well, it represents the,
MAX_GUESSES_COUNT, right?
Let's use this in our test.
And in our worldeBoard.
Awesome! If we run our tests, we can see that we're still passing.
So let's make another commit.
Extract constant.
Another thing that I believe would increase the readability of this component
is to extract this conditional over here into a computed property.
Again, what does this represent?
It's effectively checking to see if the game has ended.
So let's make a computed property that represents it.
I like to have my boolean variables, start their names with either is or has.
In this case, I want to call it isGameOver.
And we're going to know whether or not the game is over
when the player has exhausted their guess count
or if they made a successful guess.
For me to access the word of the day as a prop,
I need to capture the return value of defineProps
and use it in here.
Great! Let's try running our tests again.
And we can see that we're still passing.
I want to make a commit and call it extractConditional.
Awesome!
If we want, we can also make our test generator not have as much repetition.
A way for us to do this is,
by creating this array of entries over here, dynamically,
via Array.from, like this.
Array.from receives, as the first argument,
anything that looks like an array.
So an object with a property of length
is going to be something that Array.from can work with.
And the second argument is a map callback
where you can define what are going to be the final values of that array.
The first argument is the current value.
The second argument is the index.
With that said though, honestly,
I would prefer the previous version on how we had the test.
I think tests were reading better with that repetition that we had before.
So if you also think the same way as I do, keep it with the repetition.
Not all repetition is bad, especially when we're talking about tests.
Our focus here is increasing the readability of the code base.
I just wanted to show you
that it is possible for you to create dynamic data sets for the describe each.
If I run all my tests, I can see that they are still passing.
Therefore, I can make another commit,
and I'm going to call it reduceRepetitionsInTests.
Great, together we have expanded the rules of the game
to allow our players to have up to six guesses.