1
00:00:00,120 --> 00:00:04,370
In this lecture, we are going to move on to end to end testing.

2
00:00:04,380 --> 00:00:07,710
It's one of the most challenging types of tests to write.

3
00:00:07,740 --> 00:00:10,380
A lot can go wrong with end to end testing.

4
00:00:10,380 --> 00:00:13,800
Let's get into why E to E testing is important.

5
00:00:13,800 --> 00:00:19,440
The problems that come with it and the tool will be using for handling end to end testing.

6
00:00:19,470 --> 00:00:20,640
First things first.

7
00:00:20,640 --> 00:00:22,440
What is end to end testing?

8
00:00:22,440 --> 00:00:28,500
End to end testing as a way to check if an application is behaving correctly by automating a browser

9
00:00:28,500 --> 00:00:35,310
to mimic user behavior during the development lifecycle of our application, we could write code, switch

10
00:00:35,310 --> 00:00:37,890
to the browser and test our code.

11
00:00:37,890 --> 00:00:40,860
This process is known as manual testing.

12
00:00:41,220 --> 00:00:47,310
Rather than performing these tasks manually, we can write a program to perform the same actions.

13
00:00:47,310 --> 00:00:54,540
For example, we can click links, submit forms, scroll around, etc. Everything we can do in the browser,

14
00:00:54,540 --> 00:00:55,710
it can be automated.

15
00:00:55,710 --> 00:01:01,050
In theory, it seems like end to end tests can be the best approach to testing.

16
00:01:01,140 --> 00:01:06,810
Unfortunately, end to end testing may not be the best way to test an application.

17
00:01:06,810 --> 00:01:09,480
There are downsides to this type of testing.

18
00:01:09,480 --> 00:01:12,060
Firstly, they can be slow to run.

19
00:01:12,090 --> 00:01:15,720
A couple of things need to happen before the test is complete.

20
00:01:15,750 --> 00:01:22,050
The program needs to turn on a server, compile your project, open the browser, navigate to the app,

21
00:01:22,050 --> 00:01:26,880
perform your tests, capture actions and generate a report.

22
00:01:26,910 --> 00:01:31,080
It's a series of steps that need to be taken for verifying tests.

23
00:01:31,080 --> 00:01:36,450
You'll see how slow a test can run when we run our first test.

24
00:01:36,660 --> 00:01:44,640
Secondly, E to E testing can be unreliable and end to end test runs the application as if it were fully

25
00:01:44,640 --> 00:01:45,420
functional.

26
00:01:45,420 --> 00:01:49,200
This means that any APIs we're using will need to work.

27
00:01:49,200 --> 00:01:53,640
If a request takes too long, this can cause the test to fail.

28
00:01:53,880 --> 00:01:56,940
Lastly, debugging a test can be difficult.

29
00:01:56,940 --> 00:02:02,730
If an error occurs, you'll need to take the time to figure out why this process can be challenging

30
00:02:02,730 --> 00:02:07,530
because unlike unit tests, we're loading the entire application.

31
00:02:07,530 --> 00:02:13,380
The problem can be with any components, it can be with any third party module we installed.

32
00:02:13,380 --> 00:02:16,920
It's challenging to track the root cause of an error.

33
00:02:17,130 --> 00:02:21,030
This doesn't mean that you should never write end to end tests.

34
00:02:21,030 --> 00:02:27,180
In fact, they're the most useful kind of tests you can write, mainly because they allow you to observe

35
00:02:27,180 --> 00:02:29,220
the behavior of your application.

36
00:02:29,220 --> 00:02:34,380
This perspective is something that unit or snapshot testing can't provide you.

37
00:02:34,590 --> 00:02:40,770
Both types of tests are great for testing individual parts and pieces, but at the end of the day,

38
00:02:40,770 --> 00:02:44,070
you will need to see if everything works together in unison.

39
00:02:44,190 --> 00:02:47,880
Two components may work separately, but do they work together?

40
00:02:47,880 --> 00:02:50,400
End to end testing can help answer.

41
00:02:50,400 --> 00:02:57,540
That's another disadvantage of unit testing and snapshot testing is that they can't help you test navigating

42
00:02:57,540 --> 00:02:58,740
between pages.

43
00:02:58,740 --> 00:03:03,510
You can't test how layouts will react whenever the state or route changes.

44
00:03:03,510 --> 00:03:06,930
And to end testing doesn't have these limitations.

45
00:03:07,080 --> 00:03:10,950
There's one last question to answer before looking at some code.

46
00:03:10,950 --> 00:03:12,750
What should we be testing?

47
00:03:12,750 --> 00:03:16,650
You should have as few ends to end tests as possible.

48
00:03:16,680 --> 00:03:20,850
You will want to test the main actions that will be performed on your app.

49
00:03:20,850 --> 00:03:25,860
For example, authentication is a typical action that users may perform.

50
00:03:25,860 --> 00:03:31,350
If you're building an E commerce shop, you may want to write a test for purchasing a product.

51
00:03:31,350 --> 00:03:36,510
You shouldn't test small actions, like navigating from one page to the next.

52
00:03:37,820 --> 00:03:44,390
Now that we have a basic understanding of end to end testing, let's talk about tools and the angular

53
00:03:44,390 --> 00:03:45,120
community.

54
00:03:45,140 --> 00:03:51,560
Without a doubt, Cypress is considered the most popular tool for performing E to E testing.

55
00:03:51,560 --> 00:03:55,430
More than half of developers use this tool by default.

56
00:03:55,430 --> 00:03:58,250
This tool is not integrated into Angular.

57
00:03:58,250 --> 00:04:01,880
Luckily, installing Cypress with a project is easy.

58
00:04:01,880 --> 00:04:08,450
In the resource section of this lecture, I provide a link to Cypress for this course we'll be using

59
00:04:08,450 --> 00:04:09,320
Cypress.

60
00:04:09,320 --> 00:04:11,540
It's fast and well documented.

61
00:04:11,570 --> 00:04:14,480
Another choice for testing is Protractor.

62
00:04:14,510 --> 00:04:18,320
Protractor was considered the official solution for testing.

63
00:04:18,320 --> 00:04:20,779
However, it's no longer recommended.

64
00:04:20,779 --> 00:04:24,050
From time to time you may hear about this tool.

65
00:04:24,050 --> 00:04:27,680
Just know that the Angular team is moving away from this tool.

66
00:04:27,680 --> 00:04:31,490
The team recommends Cypress for all your testing needs.

67
00:04:31,490 --> 00:04:33,970
Let's head back to the Cypress site.

68
00:04:33,980 --> 00:04:34,940
On the menu.

69
00:04:34,940 --> 00:04:36,770
There's a page called pricing.

70
00:04:36,770 --> 00:04:37,840
Click on it.

71
00:04:37,850 --> 00:04:42,350
First and foremost, Cypress is entirely free and open source.

72
00:04:42,350 --> 00:04:45,500
There aren't any limitations to using Cypress.

73
00:04:45,500 --> 00:04:51,470
The development team behind Cypress has developed an additional service called Cypress Dashboard.

74
00:04:51,500 --> 00:04:56,660
Their service allows you to run tests on their servers instead of on your own machine.

75
00:04:56,660 --> 00:05:02,450
It can even run tests in parallel ization, which is running multiple tests at the same time.

76
00:05:02,450 --> 00:05:05,540
This feature will produce faster results.

77
00:05:05,570 --> 00:05:07,040
It does cost money.

78
00:05:07,040 --> 00:05:09,020
Still, it is an excellent service.

79
00:05:09,020 --> 00:05:12,590
If you're working on a team, you don't have to use this service.

80
00:05:12,590 --> 00:05:15,830
Cypress can run on your machine with minimal setup.

81
00:05:15,830 --> 00:05:19,580
We'll be running Cypress on our machines in your editor.

82
00:05:19,610 --> 00:05:20,960
Open the command line.

83
00:05:23,280 --> 00:05:31,410
Cypress can be installed by running the following command n g ad at Cyprus slash schematic.

84
00:05:33,560 --> 00:05:37,620
We're using the angular cli to help us install this package.

85
00:05:37,640 --> 00:05:43,460
The Cypress team maintains a package for integrating Cypress with an angular project.

86
00:05:43,490 --> 00:05:50,330
This package will install Cypress, create the necessary files and update the package file with new

87
00:05:50,330 --> 00:05:52,250
commands for running Cypress.

88
00:05:52,250 --> 00:05:56,390
During this process, you may be asked to add a new command.

89
00:05:56,390 --> 00:05:56,990
Select.

90
00:05:56,990 --> 00:05:57,710
Yes.

91
00:05:59,840 --> 00:06:05,220
Once the package has been installed, we can start using Cyprus in the next lecture.

92
00:06:05,240 --> 00:06:08,900
Let's take time to explore this tool's features.