1
00:00:04,640 --> 00:00:08,633
We will be very soon working
with our TDD implementation

2
00:00:08,667 --> 00:00:10,600
of the rules of the word of the day.

3
00:00:10,786 --> 00:00:13,533
But before we do that,
for the sake of time,

4
00:00:13,533 --> 00:00:15,767
I want you make a file available for us.

5
00:00:16,053 --> 00:00:20,577
This json file
contains a list of 2,500 words

6
00:00:20,600 --> 00:00:23,633
that are five letters long
in the English language,

7
00:00:24,339 --> 00:00:26,019
will be considering this,

8
00:00:26,100 --> 00:00:29,037
as the least of the possible words
to use in the game,

9
00:00:29,646 --> 00:00:33,800
I have included a link in the description
for you, to download this file yourself.

10
00:00:34,467 --> 00:00:39,833
I have saved the file in source
englishWordsWith5Letters.json.

11
00:00:40,733 --> 00:00:42,600
Alternatively, if you watch,

12
00:00:42,625 --> 00:00:46,800
you can clone the repository
at a start position for this episode,

13
00:00:47,180 --> 00:00:49,667
which should already include this file.

14
00:00:50,333 --> 00:00:53,633
The link to the repository
is also in the description.

15
00:00:56,330 --> 00:01:00,633
Alright? I think we are at a good point
to start writing more tests.

16
00:01:00,780 --> 00:01:04,230
This time, let's define the rules
for the word of the day.

17
00:01:05,317 --> 00:01:09,357
Let's start with the cases
in which we are providing the application

18
00:01:09,367 --> 00:01:12,633
with an invalid word of the day,
and because of that,

19
00:01:12,633 --> 00:01:15,033
the application
should be displaying a warning.

20
00:01:15,860 --> 00:01:17,742
So let's write a test for

21
00:01:17,767 --> 00:01:22,133
if a word of the day provided
does not have exactly five letters,

22
00:01:22,179 --> 00:01:24,087
a warning should be immediate.

23
00:01:25,287 --> 00:01:27,333
For this, we can start our test

24
00:01:27,358 --> 00:01:30,857
by mounting the wordleBoard component
with a word of the day

25
00:01:30,867 --> 00:01:32,800
that has less than five characters.

26
00:01:33,052 --> 00:01:35,000
I'll be using FLY.

27
00:01:38,770 --> 00:01:43,233
Now, we want this action to return
in a console warning being called,

28
00:01:43,367 --> 00:01:46,700
one way for us to know
what's going on with the console warn

29
00:01:46,725 --> 00:01:48,047
while the tests are running,

30
00:01:48,067 --> 00:01:50,133
is by making use of a spy.

31
00:01:50,700 --> 00:01:52,000
As the name implies,

32
00:01:52,000 --> 00:01:55,433
the spy will not be interfering
with the execution of the function.

33
00:01:55,467 --> 00:01:59,267
It's a spy on.
It will simply be keeping an eye on it.

34
00:01:59,467 --> 00:02:01,567
Will then be able to ask questions

35
00:02:01,600 --> 00:02:04,933
and build assertions
by interaction with the spy.

36
00:02:05,949 --> 00:02:08,533
To deploy a spy towards the worn function,

37
00:02:08,567 --> 00:02:16,160
from the console object,
we can write vi.spyOn(console, "warn").

38
00:02:18,346 --> 00:02:23,300
It's important that we deploy a spy
before we take the action

39
00:02:23,333 --> 00:02:26,467
that is supposed to cause
console warn to be involved.

40
00:02:26,600 --> 00:02:32,433
So to do this, I'm gonna move the spy on
to before we mount the components.

41
00:02:33,580 --> 00:02:36,567
Finally, we can make
assertions on this function.

42
00:02:36,633 --> 00:02:38,000
Thanks to our spy.

43
00:02:44,070 --> 00:02:45,717
If we run the test,

44
00:02:50,450 --> 00:02:55,967
as we can see over here, the console warn
has not been called at all.

45
00:02:57,770 --> 00:03:02,333
To get these tests to pass,
we can make use of vue prop validators.

46
00:03:02,700 --> 00:03:05,933
To use this, we need to provide
a function callback

47
00:03:05,960 --> 00:03:09,267
to the validator key
in our proper definition.

48
00:03:09,700 --> 00:03:14,667
If this function returns true,
the prop given will be considered valid.

49
00:03:14,733 --> 00:03:18,100
If it returns false,
it will be considered invalid.

50
00:03:19,000 --> 00:03:22,000
In our case,
let's write a validation function,

51
00:03:22,033 --> 00:03:27,633
forces the length of the words
given to be exactly five characters.

52
00:03:42,457 --> 00:03:44,867
And great, our tests are passing.

53
00:03:44,892 --> 00:03:46,263
Let's make a commit.

54
00:03:46,367 --> 00:03:49,033
I think a good commit message,
in this case, could be,

55
00:03:49,067 --> 00:03:52,967
enforce that the word of the day
must have 5 characters.

56
00:03:59,027 --> 00:04:01,067
However, please notice

57
00:04:01,092 --> 00:04:07,067
that a console warn is showing up for real
when we run our tests.

58
00:04:07,246 --> 00:04:11,300
This adds some clutter to the task output.

59
00:04:12,223 --> 00:04:16,533
I don't want to have this console
warning showing up in our tests output.

60
00:04:16,786 --> 00:04:19,630
Let's reflect our test, to instead,

61
00:04:19,746 --> 00:04:25,033
replace the console warn with a test
double that does absolutely nothing.

62
00:04:26,997 --> 00:04:30,645
I do wanna mention that the lines
are a little bit blurred

63
00:04:30,667 --> 00:04:33,000
when they were working with vitest.

64
00:04:33,246 --> 00:04:39,267
And Jest and then the spy on vitest,

65
00:04:39,400 --> 00:04:43,943
can indeed mock implementation.
if you wanted to do so.

66
00:04:44,232 --> 00:04:49,200
Like this,
we can capture this spy, over here.

67
00:04:49,467 --> 00:04:53,667
And then through the spy,
we can mock the implementation

68
00:04:57,263 --> 00:05:00,200
to just be a function
that doesn't do anything.

69
00:05:03,183 --> 00:05:04,567
If I run the task now,

70
00:05:04,600 --> 00:05:08,973
you can see that we no longer have
that console warning showing up

71
00:05:08,998 --> 00:05:10,467
for real in our tests.

72
00:05:10,492 --> 00:05:12,933
And we can still
do the assertions on edge.

73
00:05:14,380 --> 00:05:17,836
Another way we could do this
without relying on the spy

74
00:05:17,933 --> 00:05:20,500
would be by mocking the console warn,

75
00:05:20,800 --> 00:05:26,400
function directly by using vi.fn
which is my personal preference,

76
00:05:26,425 --> 00:05:29,800
since it distinguishes
they spy from the mock.

77
00:05:30,200 --> 00:05:32,667
To do so, as part of our setup,

78
00:05:32,700 --> 00:05:36,733
we can do console.warn=vi.fn.

79
00:05:40,460 --> 00:05:45,167
If we run our tests,
we can see that they are still passing

80
00:05:45,192 --> 00:05:48,267
without the clutter in our console output.

81
00:05:48,400 --> 00:05:53,500
So let's make a commit replaces by
for mock could be a good commit message.

82
00:05:56,629 --> 00:05:59,367
Now, how about the next test?

83
00:05:59,686 --> 00:06:01,783
I think a good thing that we can check for

84
00:06:01,800 --> 00:06:06,167
is that the word of the day
must be all in uppercase.

85
00:06:06,845 --> 00:06:10,463
So test, if the word of the day
is not all in uppercase,

86
00:06:10,467 --> 00:06:12,133
a warning is immediate.

87
00:06:18,090 --> 00:06:20,233
Do you wanna try running
this test yourself?

88
00:06:20,258 --> 00:06:21,370
If you're interested,

89
00:06:21,400 --> 00:06:25,432
try pausing the video now
and write a test solution on your own.

90
00:06:28,597 --> 00:06:31,633
Okay, so here is how I would do it.

91
00:06:31,926 --> 00:06:36,400
I would pretty much just copy exactly
what I wrote on the previous task.

92
00:06:36,933 --> 00:06:41,833
But instead of mounting it with a word
that has less than five characters,

93
00:06:41,972 --> 00:06:45,500
I'm gonna write a word
that has five characters,

94
00:06:45,700 --> 00:06:49,000
but it's using lowercase characters.

95
00:06:50,867 --> 00:06:53,167
Right? If I run this test over here,

96
00:06:54,507 --> 00:06:57,700
and you can see that now we're failing,

97
00:06:57,867 --> 00:07:03,233
because our console warn
has not been called.

98
00:07:05,143 --> 00:07:11,067
Right? to get it to pass,
we just need to improve our validator

99
00:07:11,207 --> 00:07:15,233
to now enforce that all the characters
should be in uppercase.

100
00:07:15,400 --> 00:07:19,433
Now let's go to the wordle board
and add that to our validator

101
00:07:25,290 --> 00:07:26,933
for run out the tasks again.

102
00:07:27,923 --> 00:07:31,343
And we're passing great.
So, let's make another commit.

103
00:07:31,368 --> 00:07:36,167
And this would be enforced that the word
of the day must be all in uppercase.

104
00:07:38,970 --> 00:07:41,900
Another test
that I would like us to have

105
00:07:42,033 --> 00:07:45,833
is that if you provide a word of the day
that is just gibberish,

106
00:07:45,833 --> 00:07:50,830
so it's not a real world in English,
we should also get a warning.

107
00:07:51,570 --> 00:07:55,357
To do this,
let's just copy the previous test.

108
00:07:58,590 --> 00:08:04,333
And let's just say that
if the word of the day is not a real word,

109
00:08:08,783 --> 00:08:10,233
a warning is immediate.

110
00:08:10,300 --> 00:08:14,200
Perfect, and then in here, let's just type
a word that is only an uppercase

111
00:08:14,225 --> 00:08:16,723
that has five characters,
but doesn't exist.

112
00:08:19,267 --> 00:08:22,753
Run all the tests again,
and remember always run all the tests.

113
00:08:23,933 --> 00:08:26,167
Perfect. We don't see a warning here.

114
00:08:26,833 --> 00:08:28,967
Now, to get this test to pass,

115
00:08:28,992 --> 00:08:32,533
we need to import the data
from that json file,

116
00:08:32,600 --> 00:08:34,867
I was showing at the start of the episode.

117
00:08:35,333 --> 00:08:37,700
And to facilitate working with json,

118
00:08:37,725 --> 00:08:40,833
we can update our ts config file.

119
00:08:41,613 --> 00:08:44,667
So, if you go to your ts,
configure the root of the project,

120
00:08:45,600 --> 00:08:46,967
on the app,

121
00:08:48,806 --> 00:08:55,367
we can add to the compiler options,
resolve json modules.

122
00:08:55,433 --> 00:08:58,767
So let's enable that,
it's usually disabled by default.

123
00:08:59,269 --> 00:09:03,500
And we also want to include json files

124
00:09:05,356 --> 00:09:06,400
in here.

125
00:09:07,573 --> 00:09:10,887
Great. Now we should be able
to import json files

126
00:09:10,912 --> 00:09:13,667
As a regular default import.

127
00:09:14,738 --> 00:09:17,867
Let's go back to our component

128
00:09:18,273 --> 00:09:25,537
and check if the word given
exists within the list of words

129
00:09:25,562 --> 00:09:27,267
that we have in that json file.

130
00:09:27,800 --> 00:09:29,250
How would we do this?

131
00:09:29,686 --> 00:09:33,750
We can start by importing our
Json file in here.

132
00:09:39,220 --> 00:09:42,533
And we can add to our validation

133
00:09:42,812 --> 00:09:47,400
to just say English words
includes the words given.

134
00:09:49,918 --> 00:09:56,133
The line break over here,
I've run our test, we're passing.

135
00:09:56,659 --> 00:09:58,813
Now we are emitting a warning

136
00:09:58,933 --> 00:10:02,526
If you happen to provide a word of the day

137
00:10:02,667 --> 00:10:05,977
that doesn't exist
in the list of English words

138
00:10:06,002 --> 00:10:07,643
that we have in that json file.

139
00:10:08,097 --> 00:10:09,933
Perfect. So we ran our tests.

140
00:10:09,958 --> 00:10:11,867
We saw that everything was passing.

141
00:10:11,906 --> 00:10:13,367
Let's make a commit.

142
00:10:14,357 --> 00:10:18,167
Enforce that the word of the day
is a real English word.

143
00:10:21,803 --> 00:10:25,200
Well, now we're back
to our refactor phase,

144
00:10:25,225 --> 00:10:29,933
because our json file is composed
of five letter english words,

145
00:10:29,933 --> 00:10:31,567
that are in uppercase.

146
00:10:31,833 --> 00:10:36,600
Our first two validation rules
are already built into it.

147
00:10:36,800 --> 00:10:38,800
Therefore, they are redundant.

148
00:10:39,163 --> 00:10:41,767
I should be able to simplify our validator

149
00:10:41,767 --> 00:10:47,326
to just check to see if the word given
exists within the English word

150
00:10:47,351 --> 00:10:48,667
from that json file.

151
00:10:48,912 --> 00:10:50,592
And if we run our tests,

152
00:10:50,617 --> 00:10:53,467
you can see that we didn't add
any regressions

153
00:10:53,500 --> 00:10:55,233
by simplifying our validator.

154
00:10:57,853 --> 00:11:03,500
So let's make a commit.
This could just be simplify validation.

155
00:11:06,053 --> 00:11:08,267
Okay, we are almost done.

156
00:11:08,292 --> 00:11:10,800
There is one more task
that I want us to write.

157
00:11:12,019 --> 00:11:16,967
And it's effectively
that if you provide a word of the day

158
00:11:17,033 --> 00:11:22,900
that respects all the previous rules,
you should not see anyone is showing up.

159
00:11:23,379 --> 00:11:25,803
So let's just write it in here.

160
00:11:26,106 --> 00:11:31,633
test, no warning is immediate
if the word of the day provided

161
00:11:31,759 --> 00:11:36,233
is a real uppercase English word
with five characters.

162
00:11:37,870 --> 00:11:41,833
All right. So I'm going to copy
everything that we have in here,

163
00:11:42,300 --> 00:11:43,300
Paste it in.

164
00:11:43,367 --> 00:11:45,700
And let's just provide tasks.

165
00:11:45,800 --> 00:11:50,133
And now we want to search
that it was not called.

166
00:11:51,006 --> 00:11:55,267
And you can see that we are already
passing because of our validator.

167
00:11:55,600 --> 00:11:58,736
With that said,
this test is still pretty valuable

168
00:11:58,761 --> 00:12:02,800
because it enforces
one very important guideline for our app.

169
00:12:03,100 --> 00:12:05,890
The application
will not be rendering warnings.

170
00:12:05,933 --> 00:12:09,533
If the game is instantiated
with a valid word of the day.

171
00:12:09,558 --> 00:12:11,900
So I want to keep this test around.

172
00:12:12,267 --> 00:12:13,767
Let's commit this.

173
00:12:14,400 --> 00:12:17,000
And a good commit message
in this case, could be,

174
00:12:17,033 --> 00:12:22,367
ensure no warnings are rendered
when a proper word of the day is provided.

175
00:12:24,336 --> 00:12:25,536
That was great.

176
00:12:25,567 --> 00:12:29,597
In this lesson, we covered the usage
of spies and mocks

177
00:12:29,600 --> 00:12:33,167
to investigate
if specific functions are being executed.

178
00:12:33,200 --> 00:12:35,930
And we also covered
how we can enforce

179
00:12:35,967 --> 00:12:40,230
rules for our vue component props
through validators.