1
00:00:00,960 --> 00:00:01,793
-: In the last section

2
00:00:01,793 --> 00:00:04,590
we put together our first test right here. In this section,

3
00:00:04,590 --> 00:00:06,240
we're gonna talk a little bit about that line

4
00:00:06,240 --> 00:00:08,880
of code and we're gonna pull it apart piece by piece.

5
00:00:08,880 --> 00:00:11,580
We'll then continue by talking about why this line of code

6
00:00:11,580 --> 00:00:14,910
that we wrote in particular is maybe not the best approach

7
00:00:14,910 --> 00:00:17,040
to testing inside React app.

8
00:00:17,040 --> 00:00:19,650
But we'll get to that in just a moment.

9
00:00:19,650 --> 00:00:22,440
First, we're gonna pull that line of code apart.

10
00:00:22,440 --> 00:00:23,790
Okay, So this is a diagram

11
00:00:23,790 --> 00:00:25,920
of that line of code, and like I said

12
00:00:25,920 --> 00:00:29,074
we're gonna understand every piece of syntax along the way.

13
00:00:29,074 --> 00:00:32,580
The entire line of code by itself.

14
00:00:32,580 --> 00:00:34,770
So like this entire line right here

15
00:00:34,770 --> 00:00:38,430
forms what we refer to as an expectation.

16
00:00:38,430 --> 00:00:40,500
Expectations are the absolute core

17
00:00:40,500 --> 00:00:42,720
of the tests that you and I are going to write.

18
00:00:42,720 --> 00:00:44,280
They form the lines of code

19
00:00:44,280 --> 00:00:46,350
or kind of the proof that our code

20
00:00:46,350 --> 00:00:48,933
or our application is working the way we expect.

21
00:00:49,860 --> 00:00:51,180
Every it statement that you

22
00:00:51,180 --> 00:00:55,170
and I put together can contain zero to a ton

23
00:00:55,170 --> 00:00:57,510
like you know, functionally, dozens if we want to,

24
00:00:57,510 --> 00:01:01,230
expectations. In general, you'll most frequently see one

25
00:01:01,230 --> 00:01:04,893
or two expectations inside of a single IT statement.

26
00:01:07,530 --> 00:01:10,680
Every expectation leads off with the expect function

27
00:01:10,680 --> 00:01:12,510
and you can think of that expect function right there

28
00:01:12,510 --> 00:01:14,550
as being somewhat similar in nature

29
00:01:14,550 --> 00:01:17,910
to the IT statement that we spoke about a little bit ago

30
00:01:17,910 --> 00:01:20,970
only in the sense that it is a globally available function

31
00:01:20,970 --> 00:01:24,720
that we do not have to import or require into our test file.

32
00:01:24,720 --> 00:01:27,300
So we can just write out, expect, and we're good to go.

33
00:01:27,300 --> 00:01:28,623
No imports required.

34
00:01:29,610 --> 00:01:30,720
The first argument

35
00:01:30,720 --> 00:01:33,690
to the expect function is going to be the object

36
00:01:33,690 --> 00:01:37,800
or the property or the array or whatever it is inside

37
00:01:37,800 --> 00:01:40,950
of our application that we're trying to inspect.

38
00:01:40,950 --> 00:01:42,600
So it's the thing that we're trying to look at

39
00:01:42,600 --> 00:01:45,150
improve some fact about.

40
00:01:45,150 --> 00:01:49,680
In this case, we wanted to inspect the HTML contained

41
00:01:49,680 --> 00:01:51,570
by that div element.

42
00:01:51,570 --> 00:01:54,450
So that is the subject of this expectation.

43
00:01:54,450 --> 00:01:55,950
It's a thing that we're trying to look

44
00:01:55,950 --> 00:01:57,903
at and prove some fact about.

45
00:01:59,714 --> 00:02:03,870
After we list that out, we then write a matcher statement.

46
00:02:03,870 --> 00:02:05,730
The matcher statement's purpose is to kind of

47
00:02:05,730 --> 00:02:08,759
clarify what property or how we are trying to

48
00:02:08,759 --> 00:02:11,874
inspect that thing that we passed in over here.

49
00:02:11,874 --> 00:02:14,970
So in this case, you can kind of read this matcher.

50
00:02:14,970 --> 00:02:17,370
So this is the matcher as simple English.

51
00:02:17,370 --> 00:02:20,820
We are saying that we expect this HTML block right

52
00:02:20,820 --> 00:02:24,570
here to contain the string, comment box.

53
00:02:24,570 --> 00:02:27,000
So the matcher is going to modify exactly how

54
00:02:27,000 --> 00:02:28,623
our expectation behaves.

55
00:02:29,640 --> 00:02:32,130
Then the last piece of every expectation is going to

56
00:02:32,130 --> 00:02:34,064
be the value that we expect to see.

57
00:02:34,064 --> 00:02:37,140
We don't always have an argument over here

58
00:02:37,140 --> 00:02:38,220
after the matcher.

59
00:02:38,220 --> 00:02:40,140
There are some matchers that do not expect to

60
00:02:40,140 --> 00:02:42,330
receive an argument at all.

61
00:02:42,330 --> 00:02:45,570
For example, we could have replaced to contain right here

62
00:02:45,570 --> 00:02:48,780
with a matcher of to equal, or excuse me, not too equal

63
00:02:48,780 --> 00:02:50,850
but to be truthy.

64
00:02:50,850 --> 00:02:53,850
So the to be truthy matcher does not expect to

65
00:02:53,850 --> 00:02:55,650
receive an argument

66
00:02:55,650 --> 00:02:58,530
and instead it's just gonna check to see if

67
00:02:58,530 --> 00:03:02,580
div.innerHTML right here is true or false.

68
00:03:02,580 --> 00:03:03,960
So this would be an example

69
00:03:03,960 --> 00:03:07,200
of a matcher that does not require an argument

70
00:03:07,200 --> 00:03:09,360
but in our case, we're using to contain.

71
00:03:09,360 --> 00:03:11,810
And that one definitely does require an argument.

72
00:03:12,690 --> 00:03:14,070
And the last piece right here

73
00:03:14,070 --> 00:03:16,380
the comment box just spoke about it.

74
00:03:16,380 --> 00:03:18,960
It's essentially what we want our value to be.

75
00:03:18,960 --> 00:03:23,960
So we want our innerHTML right here to contain this value.

76
00:03:24,600 --> 00:03:27,390
So we are always gonna put our ideal case over

77
00:03:27,390 --> 00:03:30,798
here on the left hand side is gonna be the thing

78
00:03:30,798 --> 00:03:33,030
we're inspecting. Over here is our ideal case

79
00:03:33,030 --> 00:03:34,863
or the thing that we want it to be.

80
00:03:36,060 --> 00:03:38,940
Okay. So that is expectations in a nutshell.

81
00:03:38,940 --> 00:03:40,571
We're gonna end up writing

82
00:03:40,571 --> 00:03:42,660
out a ton of expectations throughout this first application.

83
00:03:42,660 --> 00:03:44,400
So we'll talk about expectations

84
00:03:44,400 --> 00:03:46,770
as we go along a little bit more.

85
00:03:46,770 --> 00:03:48,150
But before we take care of that

86
00:03:48,150 --> 00:03:51,090
I want to talk a little bit about why this expectation

87
00:03:51,090 --> 00:03:54,180
that we just wrote is maybe not the best approach

88
00:03:54,180 --> 00:03:55,770
for what we're trying to prove here

89
00:03:55,770 --> 00:04:00,510
for trying to prove that our div contains the comment box.

90
00:04:00,510 --> 00:04:01,920
So let's take a quick pause, we'll come back

91
00:04:01,920 --> 00:04:03,060
to the next section and we'll talk

92
00:04:03,060 --> 00:04:05,057
about how we could improve this line of code

93
00:04:05,057 --> 00:04:08,580
and more importantly, what's wrong with it right now.

94
00:04:08,580 --> 00:04:11,030
So quick break and I'll see you in just a minute.