1
00:00:00,000 --> 00:00:04,307
[MUSIC]

2
00:00:04,307 --> 00:00:09,895
In the previous lecture and
exercise that followed the lecture,

3
00:00:09,895 --> 00:00:14,330
we have examined the use
of unit tests in Angular.

4
00:00:14,330 --> 00:00:18,920
We have seen how the different parts of
our Angular application, the components,

5
00:00:18,920 --> 00:00:26,420
the services, the directives, the pipes
can all be tested using unit tests.

6
00:00:26,420 --> 00:00:27,000
But of course,

7
00:00:27,000 --> 00:00:32,550
unit tests do not reveal everything about
the interaction among the components.

8
00:00:32,550 --> 00:00:37,090
That is where the end-to-end
testing strategies enable us to

9
00:00:37,090 --> 00:00:42,480
see the entire application
working as a single unit.

10
00:00:42,480 --> 00:00:49,200
So in this lecture, we will examine
the use of End-to-End tests and

11
00:00:49,200 --> 00:00:54,950
what role they play in the overall testing
strategy for our Angular applications.

12
00:00:54,950 --> 00:01:01,592
In the exercise that follows, we'll look
briefly at how we can conduct end-to-end

13
00:01:01,592 --> 00:01:06,160
testing for our Angular application,
using a tool called Protractor.

14
00:01:08,110 --> 00:01:13,710
As we have already learned in
the previous lecture, unit tests

15
00:01:13,710 --> 00:01:19,650
provide us with a wonderful opportunity
for testing our units in isolation.

16
00:01:19,650 --> 00:01:25,105
Making sure that our units perform
what they're expected to perform,

17
00:01:25,105 --> 00:01:29,446
their logic is correct, and
interaction between the component and

18
00:01:29,446 --> 00:01:33,720
its template are well-established.

19
00:01:33,720 --> 00:01:38,230
But of course, unit tests do not

20
00:01:38,230 --> 00:01:43,720
complete the entire picture of how
a typical Angular application works.

21
00:01:43,720 --> 00:01:47,807
You do not have individual
units working in isolation.

22
00:01:47,807 --> 00:01:51,293
Instead, your components
interact with services.

23
00:01:51,293 --> 00:01:53,573
The components may make use of types.

24
00:01:53,573 --> 00:01:58,503
The services, in turn, will interact
with the backend to fetch the data.

25
00:01:58,503 --> 00:02:02,300
And then the component themselves
will be responsible for

26
00:02:02,300 --> 00:02:06,670
rendering the views using
the templates for the component.

27
00:02:06,670 --> 00:02:13,686
So how does this whole set
of units work together?

28
00:02:13,686 --> 00:02:18,485
And how do we ensure that
the working together of this

29
00:02:18,485 --> 00:02:22,202
units are completely free of problems?

30
00:02:22,202 --> 00:02:26,931
So that is where end-to-end testing and
along the way,

31
00:02:26,931 --> 00:02:32,780
integration testing helps us to
cover these kind of scenarios.

32
00:02:32,780 --> 00:02:39,190
Of course, unit tests play an important
role in the overall testing strategy.

33
00:02:39,190 --> 00:02:42,133
But without doing end-to-end tests,

34
00:02:42,133 --> 00:02:47,852
we can't be completely sure that our
application is performing as expected.

35
00:02:47,852 --> 00:02:52,697
One thing that I must emphasize
is that unit tests are fast and

36
00:02:52,697 --> 00:02:56,790
very easy to repeat and
can be done multiple times.

37
00:02:56,790 --> 00:03:01,861
Integration tests and end-to-end
test are slow, and so they are used

38
00:03:01,861 --> 00:03:08,390
only sparingly for confirming that your
application is performing as expected.

39
00:03:08,390 --> 00:03:11,830
So when we look at our
overall testing strategy,

40
00:03:11,830 --> 00:03:16,070
we can look at it as being
organized in the form of a pyramid.

41
00:03:16,070 --> 00:03:19,940
At the bottom of the pyramid,
occupying the entire base and

42
00:03:19,940 --> 00:03:25,251
forming the foundation of our overall
testing strategy, are unit tests.

43
00:03:26,710 --> 00:03:31,790
As we have learned, unit tests allow us to
test the individual units in isolation,

44
00:03:31,790 --> 00:03:35,460
making sure that their logic and

45
00:03:35,460 --> 00:03:39,970
the way these units work is correct.

46
00:03:39,970 --> 00:03:42,890
And these tests can be
repeated very frequently.

47
00:03:42,890 --> 00:03:48,040
And indeed, should be repeated frequently
to ensure that the individual units

48
00:03:48,040 --> 00:03:49,610
are performing as expected.

49
00:03:50,630 --> 00:03:57,850
Of course, at a second level of this
strategy would be integration tests.

50
00:03:57,850 --> 00:04:02,600
How a small group of
units work together in

51
00:04:02,600 --> 00:04:07,680
implementing whatever is necessary
to be done by those group of units?

52
00:04:07,680 --> 00:04:12,460
So perhaps we might test
a component together with

53
00:04:12,460 --> 00:04:17,730
its services to see how the flow of
information between them happens.

54
00:04:17,730 --> 00:04:22,880
But at the top of this pyramid
is end to end tests where

55
00:04:22,880 --> 00:04:25,320
we look at the overall application.

56
00:04:25,320 --> 00:04:29,880
And how well the overall
application is performing and

57
00:04:29,880 --> 00:04:32,890
meeting its expected requirements.

58
00:04:32,890 --> 00:04:36,990
So that is where we see
the use of end-to-end tests.

59
00:04:36,990 --> 00:04:42,680
As you might already expect by this
diagram, end-to-end tests are slow.

60
00:04:42,680 --> 00:04:48,584
And so we don't carry out end-to-end
tests very frequently, instead,

61
00:04:48,584 --> 00:04:55,412
unit test form the core strategy for
our testing of our Angular application.

62
00:04:55,412 --> 00:05:02,149
End-to-end tests do contribute in the
overall picture, but they are done not so

63
00:05:02,149 --> 00:05:08,021
frequently, but still are an essential
part of our testing strategy.

64
00:05:08,021 --> 00:05:10,852
So how do we carry out end to end tests?

65
00:05:10,852 --> 00:05:15,210
Let's briefly talk about the tools
that are available for us.

66
00:05:15,210 --> 00:05:18,199
The Angular testing environment for

67
00:05:18,199 --> 00:05:23,740
end-to-end tests is supported
by a tool named Protractor.

68
00:05:23,740 --> 00:05:27,930
Who says that geeks don't
have a sense of humor?

69
00:05:27,930 --> 00:05:30,950
Protractor, Angular, there you go.

70
00:05:30,950 --> 00:05:33,450
So what is exactly is Protractor?

71
00:05:33,450 --> 00:05:37,500
Protractor is, as you might expect,
a node program.

72
00:05:37,500 --> 00:05:40,940
So this enables us to carry
out end-to-end tests.

73
00:05:40,940 --> 00:05:45,510
So Protractor runs the tests
against your application.

74
00:05:45,510 --> 00:05:49,800
So Protractor loads your application
into a browser and interacts with

75
00:05:49,800 --> 00:05:54,570
the application just like a real user
will interact with your application.

76
00:05:54,570 --> 00:05:59,160
So we are looking at interacting
with your application,

77
00:05:59,160 --> 00:06:03,410
although programmatically, but
performing the kind of operations that

78
00:06:03,410 --> 00:06:07,500
a typical user will perform like
clicking on links, filling out forms.

79
00:06:07,500 --> 00:06:13,110
Submitting forms, navigating to different
parts of your application and so on.

80
00:06:13,110 --> 00:06:18,310
So this is where Protractor leverages
the use of a WebDriver to control

81
00:06:18,310 --> 00:06:23,980
browsers on which the testing
can be carried out.

82
00:06:23,980 --> 00:06:27,570
One such app framework is called
as the Selenium Framework,

83
00:06:27,570 --> 00:06:31,720
which is used for
doing automated testing within browsers.

84
00:06:31,720 --> 00:06:36,021
If you are using Chrome as part of
your testing strategy or Firefox,

85
00:06:36,021 --> 00:06:39,119
then you can use what is
called a direct connect.

86
00:06:39,119 --> 00:06:43,502
That is available through a Protractor to
directly connect to these browsers and

87
00:06:43,502 --> 00:06:45,828
carry out testing within those browsers.

88
00:06:45,828 --> 00:06:50,273
Now, the tests themselves leverage
the adjustment framework for

89
00:06:50,273 --> 00:06:51,790
expressing the test.

90
00:06:51,790 --> 00:06:55,450
So you would still see
the user describe an int and

91
00:06:55,450 --> 00:06:58,810
before each that you have
seen with unit tests.

92
00:06:58,810 --> 00:07:04,332
Except that now, we are going to be
leveraging the protractor support for

93
00:07:04,332 --> 00:07:09,119
being able to generate real
user-like interactions with our

94
00:07:09,119 --> 00:07:11,157
application using code.

95
00:07:11,157 --> 00:07:15,363
So that is what is we will learn in
the exercise that follows this particular

96
00:07:15,363 --> 00:07:15,979
lecture.

97
00:07:15,979 --> 00:07:21,324
We will make use of Protractor and
write our end-to-end testing strategies.

98
00:07:21,324 --> 00:07:24,815
And of course,
leverage the Angular CLI support for

99
00:07:24,815 --> 00:07:29,983
carrying out end-to-end tests in
the exercise that follows this lecture.

100
00:07:29,983 --> 00:07:32,969
[MUSIC]