1
00:00:04,573 --> 00:00:07,733
Another key point
behind the real wordle game

2
00:00:07,767 --> 00:00:10,867
is that after each successful submission,

3
00:00:10,867 --> 00:00:13,833
the game presents the player
with some feedback.

4
00:00:14,300 --> 00:00:17,033
It shows the correct letters in green.

5
00:00:17,433 --> 00:00:20,667
It also shows letters
that exist in the world

6
00:00:20,733 --> 00:00:23,780
but are in the wrong spot, in yellow.

7
00:00:24,000 --> 00:00:28,767
And finally, letters that don't exist
in the world at all, show up in gray.

8
00:00:29,467 --> 00:00:32,667
Let's implement that
for our game, as well.

9
00:00:32,867 --> 00:00:37,870
But before we start, there is
one small refactor I want to do.

10
00:00:38,000 --> 00:00:40,763
I want to separate the concerns between,

11
00:00:41,000 --> 00:00:44,433
typing a guess and submitting the guess

12
00:00:44,533 --> 00:00:47,133
into two different test helpers.

13
00:00:47,533 --> 00:00:51,900
Effectively, this function over here
represents the player

14
00:00:51,933 --> 00:00:53,970
typing and submitting a guess.

15
00:00:53,995 --> 00:00:55,423
So let's rename that.

16
00:00:58,357 --> 00:01:02,533
If we run our tests,
we can see that we're still passing.

17
00:01:02,700 --> 00:01:04,167
Let's make a commit.

18
00:01:05,597 --> 00:01:06,933
Rename method.

19
00:01:11,463 --> 00:01:15,933
I now want to create
the helper method just for typing.

20
00:01:16,000 --> 00:01:18,430
And it effectively represents
these lines over here.

21
00:01:18,467 --> 00:01:22,000
So let's start
by first inlining the guess-input.

22
00:01:23,263 --> 00:01:26,063
And then I can extract
this chunk over here

23
00:01:26,313 --> 00:01:33,133
into a new method
that will be playerTypesGuess.

24
00:01:34,987 --> 00:01:40,733
This one over here will represent
the player pressing enter.

25
00:01:44,077 --> 00:01:49,567
Okay. If we run the tests,
we can see that we're still passing.

26
00:01:50,000 --> 00:01:52,900
Amazing. So let's make another commit.

27
00:01:53,733 --> 00:01:57,307
Separate helper methods

28
00:01:57,433 --> 00:02:01,813
for typing and submitting guesses.

29
00:02:03,400 --> 00:02:06,800
We can even refactor a past test of ours

30
00:02:06,833 --> 00:02:11,267
to make use of the newly made
playerTypeGuess method.

31
00:02:11,367 --> 00:02:17,133
Since this test isn't truly related
to the process of submitting a test.

32
00:02:17,880 --> 00:02:20,867
Run the tests
and see that they are all passing.

33
00:02:21,140 --> 00:02:23,147
All right. Let's make another commit.

34
00:02:24,167 --> 00:02:28,967
Stop submitting guess in tests
related to guesses in progress.

35
00:02:31,607 --> 00:02:35,433
Okay. Let's write
our new feature test now.

36
00:02:35,893 --> 00:02:38,633
I'll be making a brand new describe block

37
00:02:38,658 --> 00:02:43,500
responsible for tests related
to displaying hints to the player.

38
00:02:48,930 --> 00:02:51,363
Our first test for the describe block

39
00:02:51,559 --> 00:02:58,567
could ensure that hints are not displayed
until the player submits a guess.

40
00:03:00,950 --> 00:03:04,803
And how could we write this test?

41
00:03:05,533 --> 00:03:09,600
Well, a feedback or hint

42
00:03:09,625 --> 00:03:14,675
is going to be represented
by this special HTML attribute

43
00:03:14,700 --> 00:03:17,167
called data-letter-feedback.

44
00:03:17,192 --> 00:03:19,517
So maybe we can start our test

45
00:03:19,542 --> 00:03:26,200
by checking that our component is not
providing any hints at all at the start.

46
00:03:28,290 --> 00:03:33,600
By the way, if you want to provide
a nice assertion failed message,

47
00:03:33,667 --> 00:03:38,233
you can enter a second argument
to the expect function.

48
00:03:39,603 --> 00:03:41,900
So let's say in this case,

49
00:03:41,967 --> 00:03:43,773
I want a message that says

50
00:03:44,873 --> 00:03:49,920
Feedback was being rendered before
the player started typing their guess.

51
00:03:54,083 --> 00:04:00,133
All right. Now, I want our player
to start typing their guess

52
00:04:00,393 --> 00:04:03,033
and even as they are typing it,

53
00:04:03,067 --> 00:04:07,233
they should not be seeing
hints showing up.

54
00:04:07,667 --> 00:04:09,700
So let's have our player type

55
00:04:11,667 --> 00:04:14,760
any guess, o I'm going to go
with the word of the day for now.

56
00:04:15,800 --> 00:04:21,200
And in this case, they should still
not see the data-letter-feedback.

57
00:04:21,733 --> 00:04:25,700
So what I'm going to do
is just change the dedicated error message

58
00:04:25,733 --> 00:04:32,300
to say feedback was rendered
while the player was typing their guess.

59
00:04:36,777 --> 00:04:40,050
Finally, I want my player
to submit their guess

60
00:04:40,133 --> 00:04:45,967
and only then I want to be seeing
data-letter-feedback being rendered.

61
00:04:48,003 --> 00:04:51,767
And in this case, I'm going to say
that feedback was not rendered

62
00:04:51,800 --> 00:04:54,367
after the player submitted their guess.

63
00:04:57,357 --> 00:05:01,533
Please note
that we are not testing styling.

64
00:05:01,840 --> 00:05:03,833
Our application is responsible

65
00:05:03,858 --> 00:05:10,867
for marking certain DOM elements
with this specific HTML attribute.

66
00:05:11,767 --> 00:05:18,500
But our tests do not care
about what CSS rules might be applied

67
00:05:18,533 --> 00:05:20,267
to these attributes.

68
00:05:21,132 --> 00:05:26,332
Another thing that I want to mention
is that this test over here we just wrote,

69
00:05:26,473 --> 00:05:30,243
violates that arrange, act,

70
00:05:30,268 --> 00:05:35,867
and assert structure I presented
in the first few lessons of this course.

71
00:05:36,767 --> 00:05:39,720
This could be considered a smell.

72
00:05:41,333 --> 00:05:45,167
This assertion over here
that is happening before the act phase

73
00:05:45,200 --> 00:05:47,933
is what we call a pre-assertion.

74
00:05:49,217 --> 00:05:53,333
We could have turned this pre-assertion
into a dedicated test,

75
00:05:53,367 --> 00:05:58,167
called the game starts
with no hints being displayed.

76
00:05:59,197 --> 00:06:06,200
This middle assertion over here
could also be a dedicated new test

77
00:06:06,200 --> 00:06:11,867
called no hints are displayed
while the user types a guess.

78
00:06:12,433 --> 00:06:15,033
Finally, this final assertion over here

79
00:06:15,069 --> 00:06:21,200
could be a test called hints
are displayed after a guess is submitted.

80
00:06:22,033 --> 00:06:28,733
Therefore, this test over here
represents three tests built into one.

81
00:06:29,767 --> 00:06:32,967
I did want to present it like this
in this lesson

82
00:06:33,000 --> 00:06:36,433
because I thought this would be
a good opportunity for us to cover

83
00:06:36,733 --> 00:06:38,567
custom error messages

84
00:06:38,753 --> 00:06:46,267
and also because there have been
certain cases in my career as a developer

85
00:06:46,333 --> 00:06:52,467
where I come to conclude that having
a test with multiple assertions

86
00:06:53,100 --> 00:06:57,650
was providing greater readability
to my test switch.

87
00:06:58,746 --> 00:07:02,400
With that said,
for this particular case over here,

88
00:07:02,773 --> 00:07:07,567
I would personally prefer to split
this test into three different ones,

89
00:07:07,667 --> 00:07:11,600
but I'll keep this code base
exactly like this,

90
00:07:11,633 --> 00:07:13,400
which one do you prefer?

91
00:07:13,433 --> 00:07:17,000
Would you like to split this test
over here into multiple ones?

92
00:07:17,067 --> 00:07:20,267
Try it out.
It's definitely a valid approach.

93
00:07:20,933 --> 00:07:25,733
If we run our tests,
we can see that we're failing

94
00:07:25,933 --> 00:07:31,067
because feedback was not rendered
after the player submitted their guess.

95
00:07:33,057 --> 00:07:38,133
To get it to pass, we could make use
of our shouldFlip prop

96
00:07:38,167 --> 00:07:40,467
we wrote in the last episode.

97
00:07:40,780 --> 00:07:43,833
After all, it's through flipping the cards

98
00:07:43,833 --> 00:07:47,783
that the wordle game
presents feedback to their player.

99
00:07:49,443 --> 00:07:52,333
Well, right now, our tests

100
00:07:52,367 --> 00:07:57,033
are only enforcing that we should write
any kind of feedback at all.

101
00:07:57,533 --> 00:08:03,233
So, what I'm going to do is,
if should flip is provided and truthy,

102
00:08:03,340 --> 00:08:06,467
I'll render a feedback of unknown.

103
00:08:07,700 --> 00:08:12,067
If should flip is false,
I'll not render a feedback.

104
00:08:14,417 --> 00:08:19,367
If I run the tests,
we can see that we're now passing.

105
00:08:21,110 --> 00:08:22,626
Let's make a commit.

106
00:08:25,163 --> 00:08:30,167
Display unknown feedback
upon successful guess submission.

107
00:08:34,317 --> 00:08:40,967
For refactoring, we could argue
that shouldFlip is a pretty bad name,

108
00:08:41,133 --> 00:08:48,133
since flipping is just a stylistic choice
for how we review the feedback.

109
00:08:48,613 --> 00:08:55,200
We could maybe rename this prop
to shouldShowFeedback instead.

110
00:08:55,800 --> 00:09:00,967
This would probably be a much better name
for a boolean prop with this role.

111
00:09:01,700 --> 00:09:05,700
With that said,
I won't do this renaming right now,

112
00:09:05,833 --> 00:09:13,433
because our next test will be driving us
towards providing proper feedback

113
00:09:13,433 --> 00:09:15,967
in accordance to the word of the day,

114
00:09:16,200 --> 00:09:20,233
so a boolean prop
will simply not be enough.

115
00:09:21,562 --> 00:09:25,900
Great! Not only we refactored
our codebase a little bit more,

116
00:09:26,833 --> 00:09:31,867
but we also began to enforce
that letter feedback

117
00:09:31,867 --> 00:09:36,933
should only be given
once a guess is successfully submitted.