1
00:00:04,633 --> 00:00:07,087
Another thing
that the Worlde Game does for us,

2
00:00:07,100 --> 00:00:11,467
is that it displays
all our previous guesses.

3
00:00:12,803 --> 00:00:14,700
So let's write a test for this.

4
00:00:15,467 --> 00:00:20,363
And I would say that it doesn't belong
to either one of these groups,

5
00:00:20,388 --> 00:00:24,467
so I'm gonna put it
as a new isolated test in here.

6
00:00:24,706 --> 00:00:29,233
Let's say all previous guesses done
by the player are visible in the page.

7
00:00:30,820 --> 00:00:32,266
How do we test this?

8
00:00:32,500 --> 00:00:35,967
Well, we're gonna have our player
submit a series of tests

9
00:00:35,992 --> 00:00:40,333
and we can check that all the past values
are still visible in the screen.

10
00:00:42,723 --> 00:00:46,627
So let's just say WRONG, GUESS,

11
00:00:47,422 --> 00:00:51,033
HELLO, WORLD,

12
00:00:51,983 --> 00:00:54,967
HAPPY, CODER.

13
00:00:56,050 --> 00:01:00,367
And our player is going to be making
a series of guesses.

14
00:01:03,010 --> 00:01:05,400
And once the player submitted
all those guesses,

15
00:01:05,433 --> 00:01:07,400
we're gonna also assert

16
00:01:08,900 --> 00:01:11,233
that our application

17
00:01:13,060 --> 00:01:14,987
has those guesses

18
00:01:17,287 --> 00:01:18,640
rendered to the screen.

19
00:01:19,800 --> 00:01:23,667
If we're on our tests,
we can see that this new test is failing

20
00:01:23,733 --> 00:01:28,367
because we can only see
the very last guess to the screen.

21
00:01:29,637 --> 00:01:32,967
All right,
how can we get this one to pass?

22
00:01:34,006 --> 00:01:36,667
Well, we can go
to the worldeBoard right now,

23
00:01:37,233 --> 00:01:40,467
and render a list

24
00:01:41,943 --> 00:01:44,770
of guesses.

25
00:01:44,800 --> 00:01:47,600
So I'm gonna do a v-for loop over here,

26
00:01:47,786 --> 00:01:51,533
where for every single guess
in our guesseSubmitted,

27
00:01:52,417 --> 00:01:54,667
we're gonna render the guess.

28
00:01:56,170 --> 00:01:58,157
With that said,
because we're doing a loop,

29
00:01:58,167 --> 00:02:00,200
we should be having a key here.

30
00:02:00,279 --> 00:02:02,967
And this key is going to be defined

31
00:02:03,166 --> 00:02:07,733
by a concatenation
of the index with the guess itself.

32
00:02:10,683 --> 00:02:15,450
All right, if we run our tests,
we can see that we are passing.

33
00:02:17,863 --> 00:02:21,867
Okay, let's make another commit,
show past guesses.

34
00:02:25,209 --> 00:02:27,100
If we check out in the browser,

35
00:02:27,133 --> 00:02:29,437
we can see how our app
is behaving right now.

36
00:02:32,717 --> 00:02:37,500
And it's a bit annoying that I have
to manually delete all my guesses

37
00:02:37,533 --> 00:02:39,033
as soon as I submit them.

38
00:02:39,058 --> 00:02:40,733
So let's fix that as well.

39
00:02:41,323 --> 00:02:43,500
Let's go back to our test switch.

40
00:02:44,937 --> 00:02:48,367
And I would say that this one
does belong to player input.

41
00:02:48,633 --> 00:02:52,133
So this one is testing for focus,
I'm gonna put right after this one.

42
00:02:52,433 --> 00:02:56,800
And I want to test that the input
gets cleared after each submission.

43
00:03:01,390 --> 00:03:02,597
How do we test this?

44
00:03:02,600 --> 00:03:06,767
Well, we can have in the act phase
our playerSubmittinsGuess,

45
00:03:06,800 --> 00:03:11,597
and for the assert phase,
we check that the input is empty.

46
00:03:13,923 --> 00:03:17,933
And I'm gonna find the input element.

47
00:03:21,993 --> 00:03:26,583
And the value inside of it
should be equal to an empty string.

48
00:03:26,608 --> 00:03:28,467
If we run all of our tests,

49
00:03:28,492 --> 00:03:32,333
we can see that this new test
we created is failing,

50
00:03:32,358 --> 00:03:37,267
because the guess that I previously
typed is still in the input,

51
00:03:37,292 --> 00:03:38,972
as we saw in the browser.

52
00:03:39,187 --> 00:03:41,300
How can we get this one to pass?

53
00:03:41,800 --> 00:03:43,875
That's gonna be another quick win for us.

54
00:03:43,900 --> 00:03:49,567
We have to go to the guess input,
and once a submission is successful,

55
00:03:50,367 --> 00:03:56,033
we can clear guessInProgress back to null.

56
00:03:57,543 --> 00:04:02,667
Run our test again, we can see
that we're back to a green stage.

57
00:04:03,113 --> 00:04:04,967
So let's make another commit,

58
00:04:05,000 --> 00:04:11,400
this time clear player input
after each guess submission.

59
00:04:13,910 --> 00:04:16,233
I think it would be very nice, as well,

60
00:04:16,258 --> 00:04:23,233
for us to be able to have a similar style
that we have for our guess input

61
00:04:24,599 --> 00:04:26,433
to the past guesses that we have, right?

62
00:04:26,967 --> 00:04:29,833
Because it's kind of jarring
the way it is right now.

63
00:04:29,993 --> 00:04:35,967
So maybe we can make
a reusable component for this element

64
00:04:35,967 --> 00:04:40,330
that renders the guess,
and I'm gonna call this a guess vue.

65
00:04:40,355 --> 00:04:41,463
Let's do that.

66
00:04:44,523 --> 00:04:48,083
So if we go over here,
a lot of the guess vue

67
00:04:48,108 --> 00:04:51,867
is gonna be based on what we already
have done in guess input,

68
00:04:51,900 --> 00:04:54,167
so I'm gonna use this as a starting point.

69
00:04:58,230 --> 00:05:01,330
So the guess vue cares
mostly about this section over here,

70
00:05:01,373 --> 00:05:03,490
where we're rendering every single letter.

71
00:05:03,916 --> 00:05:09,700
I don't care about the input part,
which includes the CSS code in here,

72
00:05:10,153 --> 00:05:11,967
the rest of the CSS is good,

73
00:05:12,760 --> 00:05:19,767
and we're not gonna be submitting events
or gathering data,

74
00:05:20,757 --> 00:05:23,633
but we will need to have a prop.

75
00:05:23,900 --> 00:05:28,867
So let's define a prop called guess.

76
00:05:30,166 --> 00:05:32,777
This prop will be of type string, so,

77
00:05:33,470 --> 00:05:36,933
whoever is using this component
is gonna be providing a guess to it.

78
00:05:39,623 --> 00:05:42,767
And that's the responsibility
of this component

79
00:05:42,800 --> 00:05:44,967
is to make it look nice on the screen.

80
00:05:45,833 --> 00:05:49,633
All right, let's make use
of this component in our guess input.

81
00:05:51,743 --> 00:05:58,367
guess-view, we'll be providing
the formattedGuessInProgress, correct?

82
00:05:58,400 --> 00:06:01,133
Yes. So let's just provide
formattedGuessInProgress.

83
00:06:05,183 --> 00:06:09,067
And we can get rid
of any CSS rule that was,

84
00:06:09,367 --> 00:06:13,177
related just to rendering
this thing nicely.

85
00:06:14,273 --> 00:06:18,800
Good. All right, let's run the tests,
and we can see they're all passing.

86
00:06:18,900 --> 00:06:23,667
Awesome. I'm going to make another commit,

87
00:06:25,957 --> 00:06:31,300
and let's call it
extract GuessView component.

88
00:06:34,963 --> 00:06:40,143
We can also make use of our GuessView
component to show the past guesses.

89
00:06:40,168 --> 00:06:42,670
This was the overall end plan, right?

90
00:06:42,695 --> 00:06:43,970
So let's do this.

91
00:06:44,490 --> 00:06:48,823
In here, instead of just rendering
the guess as text,

92
00:06:48,933 --> 00:06:53,043
we're gonna have the GuessView
rendering the guess

93
00:06:54,623 --> 00:06:57,783
that is meant to be rendered in this line.

94
00:06:58,517 --> 00:07:05,267
Saving this, we can run our tests again
and see that we're still passing.

95
00:07:06,116 --> 00:07:09,567
Awesome. Let's take a look in the browser.

96
00:07:12,530 --> 00:07:15,967
We can see
that it's looking much better now,

97
00:07:16,033 --> 00:07:18,377
but there is still some weird styling.

98
00:07:18,402 --> 00:07:21,333
For example,
the list styles are still applying,

99
00:07:21,358 --> 00:07:23,967
and there is a different margin bottom.

100
00:07:24,733 --> 00:07:26,733
We can disable the list styles

101
00:07:26,760 --> 00:07:30,440
by defining a rule for our unordered list

102
00:07:31,732 --> 00:07:33,133
and set it to none.

103
00:07:33,167 --> 00:07:39,533
I also want to set margin and padding
to zero on the unordered list,

104
00:07:39,833 --> 00:07:44,533
but for the list item,
I'll set a margin bottom of 0.25 rems.

105
00:07:45,957 --> 00:07:50,303
I also want to set a similar thing
in our guessView

106
00:07:50,817 --> 00:07:52,933
just for the unordered list.

107
00:07:53,937 --> 00:07:56,800
I want to remove the margin
and padding from it.

108
00:07:57,590 --> 00:08:00,663
Let's run all the tests,
see that are passing,

109
00:08:00,688 --> 00:08:03,237
and then make a commit, tweak styling.

110
00:08:03,817 --> 00:08:07,933
Okay, if we take a look
at our project now, this is how it looks.

111
00:08:17,870 --> 00:08:20,490
Do notice that there are still
a couple of issues here.

112
00:08:20,533 --> 00:08:22,997
We're letting the player continue
to make guesses

113
00:08:23,000 --> 00:08:24,767
even when the game is over.

114
00:08:24,933 --> 00:08:27,900
Another thing is that it would be nice

115
00:08:27,933 --> 00:08:31,267
to show the full board
from the very start,

116
00:08:31,533 --> 00:08:34,600
as opposed to creating
the rules as they are needed.

117
00:08:35,133 --> 00:08:36,757
Do you want to try it yourself?

118
00:08:36,767 --> 00:08:40,533
Give it a go, and I'll show you
the solution in the next video.