1
00:00:00,090 --> 00:00:06,250
In this lecture, we are going to explore Angola's utility class for helping us perform tests.

2
00:00:06,270 --> 00:00:10,320
So far, we've gotten a taste of karma and jasmine.

3
00:00:10,320 --> 00:00:16,830
Karma will launch a server for hosting our application and tests, whereas Jasmine will define a set

4
00:00:16,830 --> 00:00:19,120
of functions for comparing values.

5
00:00:19,140 --> 00:00:24,300
However, neither package will allow us to interact with an angular application.

6
00:00:24,360 --> 00:00:25,620
This is a problem.

7
00:00:25,620 --> 00:00:30,690
We need to be able to create instances of components and modules on the spot.

8
00:00:30,720 --> 00:00:34,410
This is where the TestBed class comes into play.

9
00:00:34,440 --> 00:00:40,560
This object contains various methods and properties for interacting with an angular application.

10
00:00:40,740 --> 00:00:45,390
In the resource section of this lecture, I provide a link to this class.

11
00:00:45,390 --> 00:00:50,130
Feel free to explore this class methods after finishing this lecture.

12
00:00:50,400 --> 00:00:54,480
Let's use this class for creating a component instance.

13
00:00:54,480 --> 00:01:00,660
After an instance has been created, we'll verify its existence in the browser as a test.

14
00:01:00,660 --> 00:01:02,580
Switch over to your editor.

15
00:01:02,580 --> 00:01:06,060
Search for the about component test file.

16
00:01:06,090 --> 00:01:14,040
Let's rename this file by changing the extension from the spec broken ts to Spectre's.

17
00:01:16,100 --> 00:01:18,520
We're switching to a different component.

18
00:01:18,530 --> 00:01:22,160
This component is the simplest component in our application.

19
00:01:22,160 --> 00:01:28,640
It'll be easier to test this component without having to introduce other topics inside this file.

20
00:01:28,640 --> 00:01:30,230
Let's clear the files.

21
00:01:30,230 --> 00:01:31,130
Contents.

22
00:01:31,130 --> 00:01:34,040
We are going to start fresh mixed.

23
00:01:34,040 --> 00:01:36,500
Let's add the described function.

24
00:01:36,500 --> 00:01:40,850
The first argument will be set to the following about components.

25
00:01:43,030 --> 00:01:47,440
Afterward pass in an arrow function as the second argument.

26
00:01:49,490 --> 00:01:57,680
Lastly, at the top of the file, import the test bed object from the angular slash core slash testing

27
00:01:57,680 --> 00:01:58,490
package.

28
00:02:04,350 --> 00:02:07,100
During the creation of a project the SEAL.

29
00:02:07,100 --> 00:02:09,949
I will install this package for testing an app.

30
00:02:09,960 --> 00:02:14,910
We can immediately start importing the TestBed class from this package.

31
00:02:14,940 --> 00:02:20,690
As I mentioned before, the current goal is to test the creation of the about components.

32
00:02:20,700 --> 00:02:23,430
Components must be declared with a module.

33
00:02:23,460 --> 00:02:28,230
Therefore, before creating a component, a module must be created.

34
00:02:28,260 --> 00:02:31,810
Alternatively, we can re-use the app module.

35
00:02:31,830 --> 00:02:33,360
Let's open this file.

36
00:02:35,550 --> 00:02:41,320
In this module, we're importing the about component to register it with the app module.

37
00:02:41,340 --> 00:02:44,600
However, it's not the only component being imported.

38
00:02:44,610 --> 00:02:47,340
There are other components and modules.

39
00:02:47,370 --> 00:02:51,860
Ideally, our tests should test a component in isolation.

40
00:02:51,870 --> 00:02:56,640
These other components aren't necessary for testing be about components.

41
00:02:56,670 --> 00:03:02,280
It's a waste of resources to import this entire module for testing a single component.

42
00:03:02,310 --> 00:03:07,410
A better approach would be to create a new module with the about components.

43
00:03:07,440 --> 00:03:11,280
This way we can avoid importing unnecessary code.

44
00:03:11,280 --> 00:03:15,690
Switch back to the test file inside the described function.

45
00:03:15,690 --> 00:03:18,480
Run a function called before each.

46
00:03:20,660 --> 00:03:24,370
We're going to initialize our module before running a test.

47
00:03:24,380 --> 00:03:28,970
Jasmine allows us to run code before a test is executed.

48
00:03:29,000 --> 00:03:34,250
This function gives us the opportunity to execute logic before every test.

49
00:03:34,280 --> 00:03:36,590
Let's pass in an arrow function.

50
00:03:38,820 --> 00:03:40,230
Inside this function.

51
00:03:40,230 --> 00:03:45,240
Run the test bed dot configure testing module function.

52
00:03:47,460 --> 00:03:50,450
This function will create a temporary module.

53
00:03:50,460 --> 00:03:54,570
We do not need to create a separate module file for running tests.

54
00:03:54,570 --> 00:03:58,350
The TestBed class can create a module on the fly.

55
00:03:58,380 --> 00:04:02,220
This function accepts an object of configuration settings.

56
00:04:02,250 --> 00:04:08,490
These settings are the same settings that can be passed into the energy module decorator.

57
00:04:08,700 --> 00:04:10,950
Let's add our component first.

58
00:04:10,950 --> 00:04:14,540
We must import the component at the top of the file.

59
00:04:14,550 --> 00:04:16,800
Import the about component.

60
00:04:18,890 --> 00:04:22,760
Next, add the declarations array to the module.

61
00:04:24,780 --> 00:04:27,810
Lastly, add the about component.

62
00:04:30,020 --> 00:04:31,040
We're almost done.

63
00:04:31,070 --> 00:04:36,170
There's one problem with our components openly about components class.

64
00:04:38,240 --> 00:04:40,610
We're not limited to testing a class.

65
00:04:40,610 --> 00:04:42,970
We can test a components templates.

66
00:04:42,980 --> 00:04:47,200
However, our components templates are stored in a separate file.

67
00:04:47,210 --> 00:04:54,290
If we're using the template URLs property in the components decorator, we should compile our components

68
00:04:54,290 --> 00:04:55,400
by doing so.

69
00:04:55,400 --> 00:05:01,910
The components template will get loaded during the test, thus giving us access to the templates back

70
00:05:01,910 --> 00:05:03,080
in the test file.

71
00:05:03,080 --> 00:05:06,500
Add the async keyword to the arrow function.

72
00:05:08,710 --> 00:05:12,490
Loading a components template is an asynchronous action.

73
00:05:12,520 --> 00:05:18,190
Next, add the weight keyword to the configure testing module function.

74
00:05:20,370 --> 00:05:24,510
Lastly, chain of function called compile components.

75
00:05:26,670 --> 00:05:31,380
The compile components function will begin loading a components templates.

76
00:05:31,380 --> 00:05:35,400
In some cases, it may not be necessary to run this function.

77
00:05:35,400 --> 00:05:40,560
If you're using Webpack, the components template may have already been compiled.

78
00:05:40,560 --> 00:05:43,920
However, I like to add it in as an extra precaution.

79
00:05:43,920 --> 00:05:46,200
It never hurts to call this function.

80
00:05:46,470 --> 00:05:48,750
Our component is ready for testing.

81
00:05:48,750 --> 00:05:54,750
In the next lecture, let's begin writing a test for verifying the creation of the component.