1
00:00:04,646 --> 00:00:08,167
To ensure that controls
would be removed from the player

2
00:00:08,192 --> 00:00:12,743
as soon as the game is over,
I opted to create two new tests,

3
00:00:12,926 --> 00:00:16,033
one that would ensure the player
would lose control

4
00:00:16,058 --> 00:00:19,550
after they've made a series
of wrong guesses,

5
00:00:19,666 --> 00:00:21,733
that is, they failed to win the game,

6
00:00:21,767 --> 00:00:25,233
and another one that would ensure
that the player loses control

7
00:00:25,400 --> 00:00:27,167
once they win the game.

8
00:00:27,326 --> 00:00:33,300
Both tests were written
inside of the player input describe block.

9
00:00:35,269 --> 00:00:37,067
For the case of losing the game,

10
00:00:37,067 --> 00:00:40,533
I just had the player make
six incorrect guesses in a row

11
00:00:40,700 --> 00:00:48,167
and then I assert that the player input
has the disabled attribute in it.

12
00:00:49,233 --> 00:00:52,625
Likewise, for the case
of the player winning the game,

13
00:00:52,650 --> 00:00:54,877
the player will make a successful guess,

14
00:00:54,902 --> 00:00:57,648
that is, their guess is going
to contain the word of the day,

15
00:00:57,800 --> 00:01:00,367
and just like in the previous test,

16
00:01:00,400 --> 00:01:04,433
the input should also have
the disabled attribute.

17
00:01:05,033 --> 00:01:06,633
To get this test to pass,

18
00:01:06,700 --> 00:01:10,500
I've defined an optional prop
in the player input.

19
00:01:10,593 --> 00:01:13,167
So you can see over here
that I'm defining disabled

20
00:01:13,192 --> 00:01:15,800
as an optional prop of Boolean type,

21
00:01:16,033 --> 00:01:19,767
and if the user
doesn't provide me with this prop,

22
00:01:19,812 --> 00:01:22,772
it will default into the false value.

23
00:01:23,500 --> 00:01:28,633
This prop is used directly
in the native input.

24
00:01:29,067 --> 00:01:33,333
So it's just immediately bound
to the disabled HTML attribute.

25
00:01:34,583 --> 00:01:37,723
This prop is being used
by the wordleboard.

26
00:01:37,979 --> 00:01:40,633
You can see over here
that the disabled prop

27
00:01:40,846 --> 00:01:43,700
just uses whatever value is contained

28
00:01:43,733 --> 00:01:46,500
inside of our computed
property isGameOver.

29
00:01:46,933 --> 00:01:50,517
So as soon as the game over,
the disabled prop becomes true.

30
00:01:50,542 --> 00:01:53,433
Otherwise, the disabled prop is false.

31
00:01:54,963 --> 00:01:58,900
For this work, I've made a commit
called disableControls

32
00:01:58,925 --> 00:02:00,300
if the game is over.

33
00:02:00,887 --> 00:02:06,946
And as you can see,
all the tests are still passing.

34
00:02:08,733 --> 00:02:12,323
In regards to rendering
the entire board with empty guesses

35
00:02:12,348 --> 00:02:13,700
at the start of the game,

36
00:02:13,867 --> 00:02:18,333
I strongly considered not writing
any additional tests for this,

37
00:02:18,567 --> 00:02:23,867
since I first thought that this
would just be a stylistic preference

38
00:02:23,900 --> 00:02:28,333
instead of a true operational
requirement of the application.

39
00:02:29,043 --> 00:02:34,382
But upon thinking a bit more over this,
I changed my mind and I came to conclude

40
00:02:34,407 --> 00:02:39,300
that the board should always show
exactly how many guesses the user can make

41
00:02:39,767 --> 00:02:42,233
is a requirement of the game.

42
00:02:42,840 --> 00:02:45,367
But honestly,
feel free to disagree with me.

43
00:02:45,400 --> 00:02:47,733
Just keep in mind that the idea

44
00:02:47,758 --> 00:02:51,333
is that we should be testing
behavior and goals,

45
00:02:51,533 --> 00:02:54,733
and this line can get
a little bit blurry at times.

46
00:02:56,923 --> 00:02:58,610
So here are the tests that I wrote

47
00:02:58,635 --> 00:03:01,767
to enforce that there will always
be six guesses view

48
00:03:01,926 --> 00:03:03,733
present throughout the game.

49
00:03:03,946 --> 00:03:06,633
So I made a dedicated
describe block for this,

50
00:03:06,959 --> 00:03:11,308
and I ensure that there will be
exactly six guesses views

51
00:03:11,333 --> 00:03:13,427
being rendered at the start of the game.

52
00:03:13,500 --> 00:03:17,333
And this also continues to be true
if the player wins the game,

53
00:03:17,400 --> 00:03:20,876
and it continues to be true
if the player loses the game.

54
00:03:20,901 --> 00:03:22,557
So it's three different tests,

55
00:03:22,567 --> 00:03:23,943
all responsible to ensuring

56
00:03:23,968 --> 00:03:28,467
that the number of guess-views
in the page does not change.

57
00:03:29,400 --> 00:03:31,033
To get them to pass,

58
00:03:31,058 --> 00:03:36,867
I've opted to create
an additional group of list items.

59
00:03:37,066 --> 00:03:38,363
And you can see over here

60
00:03:38,400 --> 00:03:41,567
that I'm just rendering
a series of empty guesses

61
00:03:41,600 --> 00:03:44,827
under the view for the guess-input.

62
00:03:45,186 --> 00:03:48,086
And to calculate the number
of empty guesses,

63
00:03:48,111 --> 00:03:50,400
I use this computed property over here

64
00:03:50,433 --> 00:03:53,700
that is based
on what is the MAX_GUESSES_COUNT

65
00:03:53,725 --> 00:03:55,330
that the player has the right to,

66
00:03:55,333 --> 00:03:58,367
and how many guesses
have they submitted so far.

67
00:03:58,767 --> 00:04:00,900
Of course that once the game is over,

68
00:04:00,925 --> 00:04:03,567
the guess-input
will not be accessible anymore,

69
00:04:03,600 --> 00:04:06,433
so I also need
to account for that over here.

70
00:04:08,810 --> 00:04:13,000
A downside of the way
I wrote these tests over here

71
00:04:13,267 --> 00:04:19,933
is that I'm enforcing a given amount
of guess-view components in specific.

72
00:04:20,595 --> 00:04:22,242
Therefore, in a way,

73
00:04:22,267 --> 00:04:27,700
the tests that I wrote over here
are testing part of the implementation.

74
00:04:28,393 --> 00:04:31,466
Writing tests is not an exact science,

75
00:04:31,587 --> 00:04:36,800
and it's still a thing that you and I
should strive to improve each day.

76
00:04:37,272 --> 00:04:38,667
If you have a better suggestion

77
00:04:38,667 --> 00:04:41,117
on how we should have written
this test over here,

78
00:04:41,142 --> 00:04:42,943
please don't hesitate to reach out.

79
00:04:42,968 --> 00:04:45,067
I would love to hear your ideas.

80
00:04:46,033 --> 00:04:49,400
Awesome! With this, we've made sure

81
00:04:49,433 --> 00:04:53,000
our players will be able to see
all the guesses that they have done,

82
00:04:53,180 --> 00:04:56,233
and how many guesses
they can perform in the future.

83
00:04:56,534 --> 00:04:57,742
Not only that,

84
00:04:57,767 --> 00:05:02,100
but we've also successfully prevented
our players from submitting guesses

85
00:05:02,125 --> 00:05:03,700
once the game is over,

86
00:05:03,833 --> 00:05:08,900
which was a great way to explore
how to disable inputs with vue

87
00:05:08,925 --> 00:05:14,600
and how to test that behavior
through vitest with vue test utils.