Another thing that the Worlde Game does for us,
is that it displays all our previous guesses.
So let's write a test for this.
And I would say that it doesn't belong to either one of these groups,
so I'm gonna put it as a new isolated test in here.
Let's say all previous guesses done by the player are visible in the page.
How do we test this?
Well, we're gonna have our player submit a series of tests
and we can check that all the past values are still visible in the screen.
So let's just say WRONG, GUESS,
HELLO, WORLD,
HAPPY, CODER.
And our player is going to be making a series of guesses.
And once the player submitted all those guesses,
we're gonna also assert
that our application
has those guesses
rendered to the screen.
If we're on our tests, we can see that this new test is failing
because we can only see the very last guess to the screen.
All right, how can we get this one to pass?
Well, we can go to the worldeBoard right now,
and render a list
of guesses.
So I'm gonna do a v-for loop over here,
where for every single guess in our guesseSubmitted,
we're gonna render the guess.
With that said, because we're doing a loop,
we should be having a key here.
And this key is going to be defined
by a concatenation of the index with the guess itself.
All right, if we run our tests, we can see that we are passing.
Okay, let's make another commit, show past guesses.
If we check out in the browser,
we can see how our app is behaving right now.
And it's a bit annoying that I have to manually delete all my guesses
as soon as I submit them.
So let's fix that as well.
Let's go back to our test switch.
And I would say that this one does belong to player input.
So this one is testing for focus, I'm gonna put right after this one.
And I want to test that the input gets cleared after each submission.
How do we test this?
Well, we can have in the act phase our playerSubmittinsGuess,
and for the assert phase, we check that the input is empty.
And I'm gonna find the input element.
And the value inside of it should be equal to an empty string.
If we run all of our tests,
we can see that this new test we created is failing,
because the guess that I previously typed is still in the input,
as we saw in the browser.
How can we get this one to pass?
That's gonna be another quick win for us.
We have to go to the guess input, and once a submission is successful,
we can clear guessInProgress back to null.
Run our test again, we can see that we're back to a green stage.
So let's make another commit,
this time clear player input after each guess submission.
I think it would be very nice, as well,
for us to be able to have a similar style that we have for our guess input
to the past guesses that we have, right?
Because it's kind of jarring the way it is right now.
So maybe we can make a reusable component for this element
that renders the guess, and I'm gonna call this a guess vue.
Let's do that.
So if we go over here, a lot of the guess vue
is gonna be based on what we already have done in guess input,
so I'm gonna use this as a starting point.
So the guess vue cares mostly about this section over here,
where we're rendering every single letter.
I don't care about the input part, which includes the CSS code in here,
the rest of the CSS is good,
and we're not gonna be submitting events or gathering data,
but we will need to have a prop.
So let's define a prop called guess.
This prop will be of type string, so,
whoever is using this component is gonna be providing a guess to it.
And that's the responsibility of this component
is to make it look nice on the screen.
All right, let's make use of this component in our guess input.
guess-view, we'll be providing the formattedGuessInProgress, correct?
Yes. So let's just provide formattedGuessInProgress.
And we can get rid of any CSS rule that was,
related just to rendering this thing nicely.
Good. All right, let's run the tests, and we can see they're all passing.
Awesome. I'm going to make another commit,
and let's call it extract GuessView component.
We can also make use of our GuessView component to show the past guesses.
This was the overall end plan, right?
So let's do this.
In here, instead of just rendering the guess as text,
we're gonna have the GuessView rendering the guess
that is meant to be rendered in this line.
Saving this, we can run our tests again and see that we're still passing.
Awesome. Let's take a look in the browser.
We can see that it's looking much better now,
but there is still some weird styling.
For example, the list styles are still applying,
and there is a different margin bottom.
We can disable the list styles
by defining a rule for our unordered list
and set it to none.
I also want to set margin and padding to zero on the unordered list,
but for the list item, I'll set a margin bottom of 0.25 rems.
I also want to set a similar thing in our guessView
just for the unordered list.
I want to remove the margin and padding from it.
Let's run all the tests, see that are passing,
and then make a commit, tweak styling.
Okay, if we take a look at our project now, this is how it looks.
Do notice that there are still a couple of issues here.
We're letting the player continue to make guesses
even when the game is over.
Another thing is that it would be nice
to show the full board from the very start,
as opposed to creating the rules as they are needed.
Do you want to try it yourself?
Give it a go, and I'll show you the solution in the next video.