1
00:00:04,858 --> 00:00:09,967
Hương thơm của hoa nhài từ tất cả những vòng hoa

2
00:00:09,967 --> 00:00:14,218
trên đường phố đền thờ đang trôi qua không khí.

3
00:00:14,218 --> 00:00:17,684
Thật là một cảm giác ổn định.

4
00:00:17,684 --> 00:00:20,510
Chắc là nghiệp tốt từ cuộc sống quá khứ của tôi.

5
00:00:23,749 --> 00:00:25,857
Xin lỗi, tôi đã ở đâu?

6
00:00:25,857 --> 00:00:29,703
Tôi đang nói với anh về thử nghiệm góc cạnh, phải không?

7
00:00:29,703 --> 00:00:34,743
Và chúng ta sẽ sử dụng điều chỉnh nghiệp chướng để kiểm tra góc cạnh của chúng ta.

8
00:00:34,743 --> 00:00:37,769
Vì vậy, chúng ta hãy tiếp tục với nó.

9
00:00:37,769 --> 00:00:45,571
Một điều tốt về việc sử dụng Angular CLI là nó thiết lập tất cả các giàn giáo cho

10
00:00:45,571 --> 00:00:49,869
bạn để tự động bao gồm sự hỗ trợ cho việc

11
00:00:49,869 --> 00:00:53,393
kiểm tra ứng dụng Angular của bạn.

12
00:00:53,393 --> 00:00:59,108
Vì vậy, bạn sẽ nhận thấy rằng bất cứ khi nào bạn tạo ra một thành phần hoặc

13
00:00:59,108 --> 00:01:03,454
một dịch vụ cùng với các thành phần của các tập tin s,

14
00:01:03,454 --> 00:01:08,942
bạn cũng sẽ nhận thấy một tập tin được gọi là component.spect.t

15
00:01:08,942 --> 00:01:13,422
đã được đưa vào các thư mục dự án của bạn.

16
00:01:13,422 --> 00:01:17,423
Và cũng có thể, nếu bạn đi đến tập tin package.json,

17
00:01:17,423 --> 00:01:24,434
bạn sẽ thấy rằng đã có hỗ trợ cho các thử nghiệm Angular bao gồm ở đó.

18
00:01:24,434 --> 00:01:30,640
Vì vậy, nếu bạn đi vào các phụ thuộc dev, bạn sẽ thấy rằng lõi hoa

19
00:01:30,640 --> 00:01:34,201
nhài, phóng viên spec hoa nhài, các

20
00:01:34,201 --> 00:01:39,394
mô-đun npm nghiệp và nghiệp liên quan đã được cài đặt trong

21
00:01:39,394 --> 00:01:44,414
ứng dụng góc cạnh của bạn được giàn giáo ra bởi Angular CLI.

22
00:01:44,414 --> 00:01:47,716
Vì vậy, chúng tôi có tất cả mọi thứ và nơi

23
00:01:47,716 --> 00:01:53,538
để chúng tôi chỉ cần tiếp tục làm thử nghiệm của chúng tôi cho ứng dụng góc cạnh của chúng tôi.

24
00:01:53,538 --> 00:01:58,617
Vì vậy, nếu bạn nhìn xung quanh bạn sẽ thấy rằng có

25
00:01:58,617 --> 00:02:03,572
một tập tin được gọi là test.t trong thư mục nguồn của bạn,

26
00:02:03,572 --> 00:02:07,269
vì vậy hãy mở tập tin test.t.

27
00:02:07,269 --> 00:02:11,518
Bạn cũng sẽ thấy rằng có một thư mục khác ở đây gọi là e2e.

28
00:02:11,518 --> 00:02:16,409
Chúng ta sẽ trở lại với điều đó trong bài tập tiếp theo.

29
00:02:16,409 --> 00:02:21,232
Nhưng trong thư mục test.t, bạn sẽ thấy rằng đây là nơi

30
00:02:21,232 --> 00:02:25,084
hỗ trợ nghiệp chướng của bạn đang được cấu hình ở đây.

31
00:02:25,084 --> 00:02:29,551
Vì vậy, đi vào tập tin thử nghiệm này, theo mặc định,

32
00:02:29,551 --> 00:02:33,907
khi bạn sử dụng hỗ trợ CLS góc để kiểm tra,

33
00:02:33,907 --> 00:02:38,261
nó sẽ chạy các bài kiểm tra cho tất cả các thành phần và

34
00:02:38,261 --> 00:02:43,750
dịch vụ được bao gồm trong ứng dụng góc cạnh của bạn.

35
00:02:43,750 --> 00:02:49,017
Bây giờ, tôi sẽ minh họa cho bạn làm thế nào để làm thử nghiệm cho

36
00:02:49,017 --> 00:02:53,516
một thành phần cụ thể, MenuComponent.

37
00:02:53,516 --> 00:03:00,469
Vì vậy, tôi muốn hạn chế bản thân mình để chỉ sử dụng tập tin .spec thành phần menu và

38
00:03:00,469 --> 00:03:04,696
làm thử nghiệm cho chỉ là thành phần menu.

39
00:03:04,696 --> 00:03:07,823
Vì vậy, đi vào tập tin test.s.

40
00:03:07,823 --> 00:03:16,388
Một cách chúng ta có thể cấu hình các thử nghiệm CLI góc để chạy thử nghiệm chỉ cho

41
00:03:16,388 --> 00:03:22,397
một thành phần cụ thể là để đi đến dòng này ở đây,

42
00:03:22,397 --> 00:03:29,308
mà nói const bối cảnh và sau đó thay đổi này để menu,

43
00:03:29,308 --> 00:03:36,088
bạn có thể thấy /menu\ .component và spec.tsfile.

44
00:03:36,088 --> 00:03:41,615
Trước đó nó chỉ là tập tin/\ .spec.t, có nghĩa là bạn

45
00:03:41,615 --> 00:03:47,992
sẽ chạy tất cả các tập tin spec có trong thư mục nguồn dự án của bạn.

46
00:03:47,992 --> 00:03:51,379
Vì vậy, ngay bây giờ, bằng cách xác định điều này ở đây,

47
00:03:51,379 --> 00:03:57,225
tôi quan tâm để chạy thử nghiệm chỉ cho các thành phần trình đơn tập tin spec ở đây.

48
00:03:57,225 --> 00:04:02,285
Bây giờ điều này tôi tìm ra bằng cách tìm kiếm xung quanh trên

49
00:04:02,285 --> 00:04:08,268
tràn ngăn xếp nơi tôi tìm thấy ai đó cho tôi câu trả lời cho điều này,

50
00:04:08,268 --> 00:04:12,985
chỉ đến một số tài nguyên trên Angular CLI, và vì vậy

51
00:04:12,985 --> 00:04:18,393
đó là cách tôi tìm ra rằng đây là cách để hạn chế

52
00:04:18,393 --> 00:04:23,019
các thử nghiệm tập tin thử nghiệm của một thành phần cụ thể.

53
00:04:23,019 --> 00:04:28,465
Vì vậy, sau khi thực hiện một thay đổi để các tập tin test.s, chúng ta hãy lưu các thay đổi.

54
00:04:28,465 --> 00:04:32,622
Bây giờ, chúng tôi sẽ cố gắng chạy thử nghiệm của chúng tôi trên thành phần menu.

55
00:04:32,622 --> 00:04:37,198
Vì vậy, như bạn thấy, trong thành phần menu, chúng tôi đã có các

56
00:04:37,198 --> 00:04:42,051
thành phần menu .spec.t tập tin, trong đó có một số mã đã có.

57
00:04:42,051 --> 00:04:45,631
Hãy thử chạy thử nghiệm này và xem điều gì sẽ xảy ra.

58
00:04:45,631 --> 00:04:50,650
Đi đến thiết bị đầu cuối, thêm dấu nhắc, gõ thử nghiệm ng, và điều này

59
00:04:50,650 --> 00:04:56,644
sẽ dẫn đến một CLI góc bắt đầu thử nghiệm cho thành phần menu.

60
00:04:56,644 --> 00:04:59,875
Vì vậy, khi bạn gõ này và nhấn Return,

61
00:04:59,875 --> 00:05:05,216
sau đó Angular CLI sẽ bắt đầu biên dịch ứng dụng góc cạnh của bạn.

62
00:05:05,216 --> 00:05:10,129
Nó cũng sẽ mở một cửa sổ trình duyệt, trong trường hợp của tôi nó sẽ mở một

63
00:05:10,129 --> 00:05:13,874
cửa sổ trình duyệt Chrome và sau đó sử dụng cửa sổ trình duyệt đó để chạy thử nghiệm.

64
00:05:13,874 --> 00:05:20,992
Và bạn thấy rằng ở phía sau, bạn có cửa sổ trình duyệt Chrome chạy và

65
00:05:20,992 --> 00:05:25,980
tất cả đều đầy màu đỏ và một loạt các từ ở đó.

66
00:05:25,980 --> 00:05:30,937
Các thông tin tương tự cũng sẽ được in ra trong cửa sổ giao diện điều khiển của bạn,

67
00:05:30,937 --> 00:05:34,980
và từ đó tôi có thể thấy rằng thử nghiệm của tôi đã không chạy chính xác.

68
00:05:34,980 --> 00:05:41,070
Có một cái gì đó không được cấu hình đúng trong tập tin test của tôi, vì vậy tôi sẽ cần phải đi và

69
00:05:41,070 --> 00:05:47,272
chỉnh sửa tập tin test của tôi để bao gồm hỗ trợ thích hợp để chạy thử nghiệm này một cách chính xác.

70
00:05:47,272 --> 00:05:51,425
Vì vậy, chúng ta hãy đi đến các tập tin spec.t thành phần trình đơn và

71
00:05:51,425 --> 00:05:54,430
sau đó chuẩn bị thử nghiệm của chúng tôi cho phù hợp.

72
00:05:54,430 --> 00:06:00,134
Bây giờ chúng ta có thể để thử nghiệm ng chạy ngay tại đây.

73
00:06:00,134 --> 00:06:04,337
Bất cứ khi nào bạn thực hiện thay đổi tập tin thành

74
00:06:04,337 --> 00:06:07,169
phần nhỏ hoặc tập tin thành phần nhỏ và

75
00:06:07,169 --> 00:06:12,078
lưu các thay đổi, kiểm tra này sẽ tự động chạy tại thời điểm đó.

76
00:06:12,078 --> 00:06:17,011
Vì vậy, chúng ta hãy đi đến các tập tin MenuComponent.spect.Ts.

77
00:06:17,011 --> 00:06:21,882
Đi đến tệp MenuComponent.spect.Ts,

78
00:06:21,882 --> 00:06:30,417
chúng tôi hiểu rằng tệp spect sử dụng cú pháp Jasmine để mô tả bài kiểm tra.

79
00:06:30,417 --> 00:06:33,478
Vì vậy, bạn đã nhận thấy rằng có một cái gì

80
00:06:33,478 --> 00:06:38,118
đó ở đây mà bắt đầu với mô tả và sau đó có một chức năng được xác định trong đó.

81
00:06:38,118 --> 00:06:43,174
Vì vậy, đây là những gì tôi đã đề cập đến khi tôi nói về cú pháp Jasmine trước đó.

82
00:06:43,174 --> 00:06:47,961
Và cũng có thể nếu bạn cuộn xuống, bạn sẽ thấy nó hoặc như vậy trong đó.

83
00:06:47,961 --> 00:06:53,922
Và ngoài ra, bạn sẽ thấy một cái gì đó gọi là trướcMỗi, ở đây.

84
00:06:53,922 --> 00:06:59,594
Hãy kiểm tra tập tin này một chút chi tiết hơn để hiểu làm thế nào

85
00:06:59,594 --> 00:07:05,794
tập tin này được cấu hình, và làm thế nào kiểm tra này được thiết lập trong tập tin cụ thể này.

86
00:07:05,794 --> 00:07:10,843
Vì vậy, trong tập tin kiểm tra này, bạn sẽ nhận thấy rằng

87
00:07:10,843 --> 00:07:17,979
chúng tôi đang nhập khẩu ở đây một tập hợp các lớp học từ thử nghiệm lõi góc.

88
00:07:17,979 --> 00:07:22,874
Vì vậy, mô-đun này cho phép bạn cung cấp hỗ trợ thử nghiệm cho

89
00:07:22,874 --> 00:07:29,603
ứng dụng góc cạnh của bạn, và cho phép bạn thiết kế thử nghiệm cho thành phần của bạn.

90
00:07:29,603 --> 00:07:33,304
Vì vậy, bạn thấy rằng tôi đang nhập khẩu async và

91
00:07:33,304 --> 00:07:39,105
ComponentFixture và TestBed từ thư viện thử nghiệm này.

92
00:07:39,105 --> 00:07:40,955
Tôi sẽ gọi nó là thư viện thử nghiệm.

93
00:07:40,955 --> 00:07:44,783
Ngoài ra bạn thấy rằng MenuComponent cũng được nhập khẩu ở đây.

94
00:07:44,783 --> 00:07:47,220
Bây giờ, một khi chúng ta hiểu hai, chúng ta

95
00:07:47,220 --> 00:07:51,788
hãy đi xuống mã để hiểu những gì chúng ta đang cố gắng để làm ở đây.

96
00:07:51,788 --> 00:07:56,358
Vì vậy, ở đây, như bạn mong đợi, này mô tả ở đây là

97
00:07:56,358 --> 00:08:02,330
xác định rằng chức năng đặc biệt này được mô tả,

98
00:08:02,330 --> 00:08:08,129
Một bài kiểm tra dựa trên Jasmine mà chúng tôi đang chỉ định cho ứng dụng Angular của chúng tôi.

99
00:08:08,129 --> 00:08:11,056
Vì vậy, khi bạn nhìn vào mô tả ở đây,

100
00:08:11,056 --> 00:08:15,181
bạn sẽ thấy rằng điều này bao gồm tất cả các mã này trong đây.

101
00:08:15,181 --> 00:08:19,950
Vì vậy, đây là một phần của một tập hợp các bài kiểm tra mà chúng tôi đang chạy là

102
00:08:19,950 --> 00:08:21,670
thành phần menu của chúng tôi.

103
00:08:21,670 --> 00:08:26,670
Vì vậy, bên trong mô tả, bạn sẽ thấy rằng có một chuỗi ở đây.

104
00:08:26,670 --> 00:08:32,120
Điều này xác định tập hợp các thử nghiệm cụ thể mà bạn đang chạy ở đây.

105
00:08:32,120 --> 00:08:34,130
Vì vậy, nó nói trên thành phần menu.

106
00:08:34,130 --> 00:08:36,770
Vì vậy, ở đây bạn có thể chỉ định bất cứ chuỗi nào bạn muốn.

107
00:08:36,770 --> 00:08:39,930
Bạn có thể sử dụng điều này như là một mô tả để

108
00:08:39,930 --> 00:08:43,610
xác định những gì tập hợp các bài kiểm tra cụ thể này đang làm.

109
00:08:43,610 --> 00:08:46,930
Vì vậy, ở đây, tôi sẽ ở lại với một điều trước đây.

110
00:08:46,930 --> 00:08:49,380
Chúng tôi đang cố gắng kiểm tra thành phần menu.

111
00:08:49,380 --> 00:08:53,320
Và sau đó, bạn thấy rằng chúng tôi đang chỉ định một chức năng addo ở đây.

112
00:08:53,320 --> 00:08:57,036
Trong chức năng addo này, chúng ta sẽ xây dựng các bài kiểm tra.

113
00:08:57,036 --> 00:09:00,700
Đối với MenuComponent của chúng tôi ở đây.

114
00:09:00,700 --> 00:09:05,670
Vì vậy, sau này, bạn sẽ thấy rằng chúng ta đang khai báo một biến được gọi là thành phần,

115
00:09:05,670 --> 00:09:08,080
đó là của các loại MenuComponent.

116
00:09:08,080 --> 00:09:11,950
Bây giờ và sau đó, chúng tôi cũng tuyên bố một biến fixture,

117
00:09:11,950 --> 00:09:14,140
đó là của các loại ComponentFixture.

118
00:09:15,390 --> 00:09:19,060
Đó là loại MenuComponent.

119
00:09:19,060 --> 00:09:21,180
Bây giờ, tại sao điều này lại thú vị?

120
00:09:21,180 --> 00:09:24,450
Bây giờ, trong ứng dụng Angular của

121
00:09:24,450 --> 00:09:27,130
chúng tôi, chúng tôi có MenuComponent mà chúng tôi đã thiết kế.

122
00:09:27,130 --> 00:09:29,990
Vì vậy, trong tập tin kiểm tra này,

123
00:09:29,990 --> 00:09:35,310
chúng tôi sẽ tạo ra rằng MenuComponent bằng cách sử dụng TestBed góc,

124
00:09:35,310 --> 00:09:38,110
và sau đó chúng tôi sẽ thực hiện các bài kiểm tra trên MenuComponent.

125
00:09:38,110 --> 00:09:40,580
Vì vậy, chúng tôi sẽ cô lập các MenuComponent, và

126
00:09:40,580 --> 00:09:45,760
sau đó thực hiện các bài kiểm tra đơn vị trên đó thành phần cụ thể.

127
00:09:45,760 --> 00:09:50,470
Bây giờ, đây là nơi mà các tiện ích thử nghiệm góc

128
00:09:50,470 --> 00:09:54,900
mà đi kèm với hỗ trợ sử dụng TestBed.

129
00:09:54,900 --> 00:09:58,890
TestBed cho phép tôi thiết lập môi trường mà trong đó

130
00:09:58,890 --> 00:10:01,280
tôi có thể kiểm tra thành phần góc cạnh của tôi.

131
00:10:01,280 --> 00:10:04,935
Vì vậy, ở đây, bạn thấy rằng chúng ta đang nói TestBed và

132
00:10:04,935 --> 00:10:11,049
sau đó gọi các cấu hình phương pháp mô-đun thử nghiệm của lớp TestBed ở đây.

133
00:10:11,049 --> 00:10:14,233
Và bên trong mô-đun thử nghiệm cấu hình này,

134
00:10:14,233 --> 00:10:19,406
bạn có thể khai báo một loạt các điều, và bạn sẽ thấy tôi thêm nhiều hơn ở đây.

135
00:10:19,406 --> 00:10:24,296
Điều này hoạt động chính xác giống như cấu hình mô-đun NG

136
00:10:24,296 --> 00:10:27,714
mà bạn làm cho mô-đun tại của chúng tôi ở đó.

137
00:10:27,714 --> 00:10:30,950
Vì vậy, tất cả các thông tin mà bạn cần để

138
00:10:30,950 --> 00:10:35,375
thiết lập MenuComponent sẽ được khai báo ở đây.

139
00:10:35,375 --> 00:10:40,022
Vì vậy, phần mô hình NG mà bạn thấy trong mô-đun ứng dụng,

140
00:10:40,022 --> 00:10:45,999
loại cú pháp tương tự có thể được sử dụng ở đây để khai báo sự hỗ trợ cho

141
00:10:45,999 --> 00:10:49,690
thử nghiệm MenuComponent ở đây.

142
00:10:49,690 --> 00:10:55,849
Và cũng sau này, bạn sẽ thấy chức năng này được gọi là CompileComponents.

143
00:10:55,849 --> 00:11:00,205
Vì vậy, phương pháp này sẽ biên dịch MenuComponent và

144
00:11:00,205 --> 00:11:03,427
làm cho nó sẵn sàng để làm thử nghiệm.

145
00:11:03,427 --> 00:11:08,852
Cũng lưu ý, rằng toàn bộ điều này, chức năng này ở đây,

146
00:11:08,852 --> 00:11:14,250
được bao bọc bên trong một cái gì đó gọi là một async ở đây.

147
00:11:14,250 --> 00:11:16,548
Bây giờ, tại sao chúng ta cần không đồng bộ này?

148
00:11:16,548 --> 00:11:21,315
Bây giờ, bởi vì việc chuẩn bị các thành phần bằng cách sử dụng

149
00:11:21,315 --> 00:11:25,711
phương pháp CompileComponents này mất một số lượng thời gian.

150
00:11:25,711 --> 00:11:30,643
Và cho đến khi hoàn thành, chúng ta không thể tiến hành các bài kiểm tra.

151
00:11:30,643 --> 00:11:34,583
Vì vậy, bằng cách sử dụng mô-đun async, chúng tôi về cơ bản xác định rằng

152
00:11:34,583 --> 00:11:39,432
tôi sẽ chờ đợi cho toàn bộ điều này để hoàn thành trước khi tiếp tục.

153
00:11:39,432 --> 00:11:42,107
Vì vậy, mô-đun không đồng bộ như bạn thấy,

154
00:11:42,107 --> 00:11:47,690
kết thúc một chức năng kiểm tra bên trong một vùng thử nghiệm không đồng bộ.

155
00:11:47,690 --> 00:11:52,510
Vì vậy, điều này có nghĩa là kiểm tra này sẽ tự động hoàn thành

156
00:11:52,510 --> 00:11:56,830
khi tất cả các cuộc gọi không đồng bộ bên trong khu vực này được thực hiện.

157
00:11:56,830 --> 00:12:03,755
Vì vậy, đây là những gì việc sử dụng các async mà chúng ta có ở đây, làm.

158
00:12:03,755 --> 00:12:08,206
Vì vậy, những gì điều này có nghĩa là bạn có thể sử dụng chức năng đồng bộ này,

159
00:12:08,206 --> 00:12:14,442
hoặc trong trước mỗi hoặc trong nó cũng, vì vậy trong nó, tuyên bố của chúng tôi.

160
00:12:14,442 --> 00:12:20,032
Vì vậy, khi bạn nhìn thấy bên trong nó cũng, bạn sẽ thấy rằng bạn có thể sử dụng các async.

161
00:12:20,032 --> 00:12:24,160
Vì vậy, trong trường hợp bạn có bất kỳ hoạt động ở đây mà thực hiện không đồng bộ.

162
00:12:24,160 --> 00:12:29,500
Sau đó, bạn cần phải đợi cho các thao tác đó hoàn tất để kiểm tra đó hoàn tất.

163
00:12:29,500 --> 00:12:33,996
Vì vậy, ví dụ, nếu bạn đang gọi một dịch vụ và chờ cho

164
00:12:33,996 --> 00:12:37,070
dịch vụ để trả về giá trị sau đó.

165
00:12:37,070 --> 00:12:41,997
Tất cả những gì cần phải hoàn thành trước khi bạn có thể tiếp tục.

166
00:12:41,997 --> 00:12:48,603
Vì vậy, những người được kích hoạt bằng cách sử dụng không đồng bộ này, để bao quanh chức năng này ở đây.

167
00:12:48,603 --> 00:12:53,726
Bây giờ, ngoài ra, thứ hai trướcMỗi, bây giờ chúng ta đã tách nó ra

168
00:12:53,726 --> 00:12:59,592
thành hai trướcMỗi ở đây, bởi vì chúng ta muốn điều này để hoàn thành.

169
00:12:59,592 --> 00:13:04,592
Và CompileComponents này sẽ mất một khoảng thời gian nhất định,

170
00:13:04,592 --> 00:13:09,000
đặc biệt là nếu thành phần của bạn đang sử dụng một mẫu bên ngoài,

171
00:13:09,000 --> 00:13:11,570
như chúng ta làm trong MenuComponent của chúng tôi.

172
00:13:11,570 --> 00:13:16,850
Vì vậy, nó đòi hỏi một thời gian cho các mẫu bên ngoài để sẵn sàng cho

173
00:13:16,850 --> 00:13:19,430
thử nghiệm của tôi để tiến hành về phía trước.

174
00:13:19,430 --> 00:13:22,210
Vì vậy, chúng ta cần phải chờ cho toàn bộ chuyện này hoàn thành.

175
00:13:22,210 --> 00:13:25,634
Vì vậy, đó là lý do tại sao sau khi điều này được hoàn thành,

176
00:13:25,634 --> 00:13:30,449
sau đó chúng ta sẽ nhận được phần thứ hai, nơi chúng ta sẽ

177
00:13:30,449 --> 00:13:35,710
nhận được một số tài liệu tham khảo đến một số giá trị từ giường thử nghiệm.

178
00:13:35,710 --> 00:13:40,752
Bây giờ, điều này là gì trướcMỗi chức năng mà bạn đang làm ở đây?

179
00:13:40,752 --> 00:13:45,718
Những gì trướcEach có nghĩa là bất cứ điều gì bạn khai báo bên trong đây,

180
00:13:45,718 --> 00:13:49,313
chức năng đó sẽ được thực hiện trướcMỗi kiểm tra,

181
00:13:49,313 --> 00:13:53,012
mà bạn sẽ chỉ định sau khi sử dụng nó.

182
00:13:53,012 --> 00:13:57,734
Vì vậy, sử dụng điều này trướcMỗi, bạn có thể thiết lập

183
00:13:57,734 --> 00:14:02,253
cấu hình ban đầu cho bài kiểm tra của bạn để tiếp tục.

184
00:14:02,253 --> 00:14:05,923
Vì vậy, có nghĩa là ở đây, chúng tôi đang thiết lập TestBed của

185
00:14:05,923 --> 00:14:10,330
chúng tôi, chuẩn bị thành phần menu của chúng tôi và sau đó thiết lập một vài điều cho

186
00:14:10,330 --> 00:14:14,752
thành phần menu của chúng tôi, trước khi chúng tôi tiến hành để thực hiện các thử nghiệm.

187
00:14:14,752 --> 00:14:19,292
Vì vậy, đối với mỗi bài kiểm tra mà bạn sẽ xác định bằng cách sử dụng một nó ở đây,

188
00:14:19,292 --> 00:14:23,428
những trước mỗi bất cứ điều gì bạn chỉ định trong này trước mỗi bài kiểm tra,

189
00:14:23,428 --> 00:14:26,692
sẽ được thực hiện trước khi bài kiểm tra được tiến hành.

190
00:14:26,692 --> 00:14:30,008
Vì vậy, ở đây như bạn có thể thấy tôi đang chuẩn bị TestBed.

191
00:14:30,008 --> 00:14:34,980
Sau đó, tôi được truy cập vào vật cố định.

192
00:14:34,980 --> 00:14:39,143
Vì vậy, tôi đang sử dụng TestBed, tôi đang nói CreateComponent và MenuComponent.

193
00:14:39,143 --> 00:14:43,782
Vì vậy, điều này sẽ trả lại cho tôi một tham chiếu đến MenuComponent mà

194
00:14:43,782 --> 00:14:47,215
tôi đang tạo ra trong kịch bản thử nghiệm của tôi ở đây và

195
00:14:47,215 --> 00:14:52,130
sau đó nhận được một tham chiếu đến điều đó, bởi vì tôi sẽ cần một tham chiếu đến

196
00:14:52,130 --> 00:14:57,178
điều đó để thực hiện một số thao tác trên thành phần đó có.

197
00:14:57,178 --> 00:15:02,608
Ngoài ra, từ các fixture, tôi nhận được một quyền truy cập vào các

198
00:15:02,608 --> 00:15:07,324
trường hợp thành phần đang được tạo ra bởi cố định thành phần của tôi ở đây.

199
00:15:07,324 --> 00:15:12,828
Vì vậy, như bạn có thể thấy, các thành phần cố định của các loại MenuComponent và

200
00:15:12,828 --> 00:15:18,799
sau đó gọi các Component, cung cấp cho tôi quyền truy cập vào đó

201
00:15:18,799 --> 00:15:25,259
thành phần menu cụ thể mà tôi đã tạo ra bên trong TestBed để thực hiện các bài kiểm tra đơn vị.

202
00:15:25,259 --> 00:15:30,004
Bây giờ, sau này chúng tôi gọi đây là DetectChanges.

203
00:15:30,004 --> 00:15:35,482
Bây giờ, điều này có nghĩa là điều này sẽ tiến hành chỉ sau khi tất cả các thay đổi

204
00:15:35,482 --> 00:15:40,254
được hoàn thành, và sau đó nhận ra rằng các thay đổi đã hoàn thành.

205
00:15:40,254 --> 00:15:45,686
Vì vậy, điều này sẽ kích hoạt một chu kỳ phát hiện thay đổi cho thành phần này.

206
00:15:45,686 --> 00:15:50,323
Vì vậy, điều này có nghĩa là điều này sẽ đảm bảo rằng bạn đã thực hiện bất kỳ

207
00:15:50,323 --> 00:15:54,086
thay đổi nào trước đó, tất cả các thay đổi được phát hiện và

208
00:15:54,086 --> 00:16:00,170
tất cả mọi thứ được ổn định trước khi bạn có thể tiến hành kiểm tra của bạn.

209
00:16:00,170 --> 00:16:07,500
Bây giờ, sau này, chúng tôi sẽ sử dụng nó để cấu hình thử nghiệm đầu tiên của chúng tôi ở đây.

210
00:16:07,500 --> 00:16:10,500
Bài kiểm tra đầu tiên mà chúng ta đang làm ở đây là gì?

211
00:16:10,500 --> 00:16:11,520
Thử nghiệm đầu tiên,

212
00:16:11,520 --> 00:16:15,670
những gì chúng ta sẽ thử nghiệm là để đảm bảo rằng các thành phần đã được tạo ra.

213
00:16:15,670 --> 00:16:21,848
Vì vậy, trong điều này ở đây, tôi đang sử dụng cú pháp Jasmin và tôi đang nói nó.

214
00:16:21,848 --> 00:16:27,035
Và sau đó ở đây bạn có thể đưa ra một mô tả dưới dạng một chuỗi

215
00:16:27,035 --> 00:16:31,760
để xác định những gì thử nghiệm này thực sự thử nghiệm về.

216
00:16:31,760 --> 00:16:33,640
Vì vậy, những gì chúng tôi đang nói là,

217
00:16:33,640 --> 00:16:37,540
chúng tôi đang thử nghiệm để xem liệu các thành phần đã được tạo ra hay không.

218
00:16:37,540 --> 00:16:40,810
Vì vậy, để làm điều đó, tôi nói rằng nó nên tạo ra ý nghĩa rằng,

219
00:16:40,810 --> 00:16:44,610
thiết lập này ở đây nên đã tạo ra các thành phần một cách chính xác.

220
00:16:44,610 --> 00:16:49,350
Vì vậy, đó là lý do tại sao bên trong đây, tôi đang sử dụng phương pháp này gọi là mong đợi.

221
00:16:49,350 --> 00:16:53,760
Vì vậy, phương pháp mong đợi bên trong đây có một giá trị ở đây, và

222
00:16:53,760 --> 00:16:57,840
sau đó bạn có thể kiểm tra để xem nếu giá trị này thỏa mãn một cái gì đó.

223
00:16:57,840 --> 00:17:04,640
Vì vậy, ở đây chúng tôi đang nói ToBetruthy, có nghĩa là giá trị đặc biệt này nên đúng.

224
00:17:04,640 --> 00:17:09,950
Đó là những gì được quy định bởi phương pháp này được gọi là TobeTruthy.

225
00:17:09,950 --> 00:17:15,010
Bạn cũng có thể nói TobeFalsy, có nghĩa là nên đánh giá sai.

226
00:17:15,010 --> 00:17:15,873
Nhưng trong trường hợp này,

227
00:17:15,873 --> 00:17:19,510
chúng tôi đang thử nghiệm để đảm bảo rằng các thành phần đã được tạo ra một cách chính xác.

228
00:17:19,510 --> 00:17:24,000
Vì vậy, đó là lý do tại sao chúng tôi đang nói mong đợi TobeTruthy ở đây.

229
00:17:24,000 --> 00:17:28,877
Vì vậy, đây là một thử nghiệm đơn giản mà chúng tôi đang làm để đảm bảo rằng

230
00:17:28,877 --> 00:17:32,404
thành phần của chúng tôi được tạo ra một cách chính xác.

231
00:17:32,404 --> 00:17:37,713
Nhưng như chúng ta nhận ra khi tôi chạy thử nghiệm này, nó không chạy đúng cách.

232
00:17:37,713 --> 00:17:42,638
Hãy nhanh chóng lướt qua và xem vấn đề là gì trong

233
00:17:42,638 --> 00:17:47,770
việc tạo thành phần của chúng tôi trong cửa sổ giao diện điều khiển ở đó.

234
00:17:47,770 --> 00:17:51,390
Quay trở lại cửa sổ giao diện điều khiển, hãy để tôi duyệt lại và

235
00:17:51,390 --> 00:17:54,840
xem vấn đề ở đâu.

236
00:17:54,840 --> 00:17:59,820
Và tôi bắt đầu nhận thấy rằng điều này là xác định rằng nó

237
00:17:59,820 --> 00:18:04,480
dường như không nhận ra một số điều mà thành phần của tôi đang sử dụng.

238
00:18:04,480 --> 00:18:09,065
Đặc biệt, người ta nói rằng MDRau bina

239
00:18:09,065 --> 00:18:13,191
là một cái gì đó mà nó không nhận ra,

240
00:18:13,191 --> 00:18:17,330
MDGetGridList và một vài thứ khác. Điều

241
00:18:17,330 --> 00:18:21,289
đó ngay lập tức gợi ý với tôi rằng tôi cần phải làm thêm một vài

242
00:18:21,289 --> 00:18:26,170
cấu hình trong tập tin thử nghiệm của tôi trước khi thử nghiệm của tôi có thể chạy chính xác.

243
00:18:26,170 --> 00:18:30,994
Vì vậy, chúng ta hãy quay trở lại tập tin spec của chúng tôi và thực hiện một số thay đổi cho nó.

244
00:18:30,994 --> 00:18:34,142
Quay trở lại tập tin spec của chúng tôi,

245
00:18:34,142 --> 00:18:40,182
từ hồi tưởng của chúng tôi về cách chúng tôi tạo ra mẫu.

246
00:18:40,182 --> 00:18:44,865
Chúng tôi biết rằng trong mẫu chúng tôi đã có một liên kết bộ định tuyến trong

247
00:18:44,865 --> 00:18:45,605
mẫu của MenuComponent.

248
00:18:45,605 --> 00:18:50,325
Vì vậy, tôi cần hỗ trợ cho định tuyến để nhận ra rằng

249
00:18:50,325 --> 00:18:54,698
liên kết router mà chúng tôi sử dụng trong tập tin MenuComponent.html.

250
00:18:54,698 --> 00:18:59,640
Vì vậy, đây là nơi tôi sẽ nhập khẩu

251
00:18:59,640 --> 00:19:03,926
một hỗ trợ kiểm tra

252
00:19:03,926 --> 00:19:09,199
được cung cấp gọi là RouterTestingModule,

253
00:19:09,199 --> 00:19:18,615
trong đó có sẵn từ Angular/Router/Testing thư viện ở đây.

254
00:19:18,615 --> 00:19:21,625
Vì vậy, mô-đun thử nghiệm bộ định tuyến này sẽ cho phép tôi

255
00:19:21,625 --> 00:19:24,135
cấu hình một số khía cạnh về bộ định tuyến của tôi.

256
00:19:24,135 --> 00:19:28,235
Chúng ta sẽ thấy rằng cách chúng tôi sử dụng này là một chút khác biệt so với mô-đun router

257
00:19:28,235 --> 00:19:30,195
mà chúng tôi đã sử dụng trong ứng dụng của chúng tôi.

258
00:19:30,195 --> 00:19:34,835
Vì vậy, chúng tôi sẽ nhập các mô-đun thử nghiệm định tuyến, bạn cũng lưu ý

259
00:19:34,835 --> 00:19:39,640
rằng chúng tôi đang sử dụng một số hình ảnh động, và

260
00:19:39,640 --> 00:19:45,660
cũng sử dụng các thành phần vật liệu góc trong mẫu của chúng tôi.

261
00:19:45,660 --> 00:19:49,410
Vì vậy, tôi cần phải nhập khẩu

262
00:19:49,410 --> 00:19:57,079
BrowserAnimationsModule vào tập tin thử nghiệm của tôi.

263
00:19:58,490 --> 00:20:05,070
Vì vậy, điều này đến từ góc góc/nền bảng/trình duyệt.

264
00:20:05,070 --> 00:20:09,619
Bây giờ bạn sẽ nhận thấy rằng chúng ta cần phải làm điều này một cách rõ ràng ở đây chỉ đơn giản bởi vì,

265
00:20:10,700 --> 00:20:16,960
trong ứng dụng Angular thực tế tất cả điều này là trong các mô-đun ứng dụng,

266
00:20:16,960 --> 00:20:20,310
và vì vậy mà đã có sẵn cho các thành phần.

267
00:20:20,310 --> 00:20:24,340
Ngay bây giờ chúng tôi đang thử nghiệm thành phần này, MenuComponent trong sự cô lập, vì vậy

268
00:20:24,340 --> 00:20:27,500
đó là lý do tại sao nó không biết về tất cả những điều này vì vậy

269
00:20:27,500 --> 00:20:31,190
chúng tôi cần phải xác định rõ ràng tất cả những điều này ở đây.

270
00:20:31,190 --> 00:20:38,569
Vì vậy, tôi sẽ nhập khẩu đó từ nền tảng IM hoạt hình trình duyệt ở đây.

271
00:20:38,569 --> 00:20:43,358
Vì vậy, angular.platform.browser hình ảnh động nhập

272
00:20:43,358 --> 00:20:44,220
mô-đun hình ảnh động trình duyệt ở đây.

273
00:20:44,220 --> 00:20:47,300
Hãy để tôi bao gồm mô-đun lớp flex, vì vậy

274
00:20:47,300 --> 00:20:53,060
tôi sẽ bao gồm Angular FlexLayout.

275
00:20:53,060 --> 00:20:58,525
Vì vậy, đây là cần thiết bởi vì tôi cần chúng trong mẫu,

276
00:20:58,525 --> 00:21:02,605
Tôi sẽ cũng nhập khẩu món ăn đó từ,

277
00:21:06,495 --> 00:21:09,348
chia sẻ/món ăn bởi vì như bạn sẽ thấy sau,

278
00:21:09,348 --> 00:21:14,125
Tôi cần phải cấu hình, Một, D

279
00:21:20,002 --> 00:21:26,070
ishService vì MenuComponent của tôi

280
00:21:26,070 --> 00:21:31,033
phụ thuộc vào DishService vì vậy

281
00:21:31,033 --> 00:21:35,170
tôi cần điều đó cũng tại chỗ.

282
00:21:35,170 --> 00:21:39,170
Mặc dù các bạn sẽ thấy rằng tôi sẽ ngăn chặn điều đó.

283
00:21:39,170 --> 00:21:44,860
Tôi sẽ giải thích rằng trong một thời gian ngắn, và tôi cũng cần phải nhập thêm một vài điều nữa.

284
00:21:44,860 --> 00:21:47,410
Tôi sẽ nhập khẩu DESS từ,

285
00:21:48,530 --> 00:21:53,260
bạn nhớ lại rằng chúng tôi sử dụng hằng số này được gọi là DESS

286
00:21:56,870 --> 00:22:01,640
mà chúng tôi xuất khẩu từ tập tin chia sẻ/dishes.s.

287
00:22:01,640 --> 00:22:05,650
Tôi sẽ cần điều đó để cấu hình một vài thứ nữa.

288
00:22:05,650 --> 00:22:09,702
Tôi cũng sẽ nhập BaseURL.

289
00:22:11,343 --> 00:22:19,105
Mà tôi tuyên bố trong, Shared/

290
00:22:21,057 --> 00:22:23,368
file url cơ sở.

291
00:22:23,368 --> 00:22:28,692
Và cũng có thể, tôi cần phải nhập khẩu

292
00:22:28,692 --> 00:22:33,294
Observable từ,

293
00:22:35,992 --> 00:22:41,319
rxjs, dấu gạch chéo, Bởi vì tôi

294
00:22:41,319 --> 00:22:47,220
cũng sẽ sử dụng Observable một chút sau đó, khi tôi cấu hình một vài điều.

295
00:22:47,220 --> 00:22:50,806
Vì vậy, bây giờ, tôi đã nhập tất cả những thứ này.

296
00:22:50,806 --> 00:22:56,157
Bắt xuống cấu hình TestBed, bạn thấy rằng

297
00:22:56,157 --> 00:23:02,813
phần này là chính xác giống như trình trang trí mô-đun động cơ mà chúng tôi có trong mô-đun ứng dụng.

298
00:23:02,813 --> 00:23:07,450
Vì vậy, đây là nơi tôi cũng có thể sử dụng nhập khẩu

299
00:23:07,450 --> 00:23:11,000
giống như tôi đã làm với các mô-đun động cơ.

300
00:23:11,000 --> 00:23:16,900
Và trong nhập khẩu, tôi sẽ nhập khẩu

301
00:23:16,900 --> 00:23:21,765
mô-đun BrowserAnimation vì đó là cái gì đó là l yêu cầu, và

302
00:23:21,765 --> 00:23:25,090
sau đó cũng nhập khẩu mô-đun FlexLayout.

303
00:23:26,660 --> 00:23:32,690
Và cũng là RouterTestingModule bởi vì

304
00:23:32,690 --> 00:23:36,540
tôi sẽ cần RouterTestingModule để cấu hình một vài điều.

305
00:23:36,540 --> 00:23:40,705
Bây giờ, khi bạn sử dụng RouterTestingModule, bạn cần phải sử dụng phương pháp này được

306
00:23:40,705 --> 00:23:46,950
gọi là WithRoutes thay vì sử dụng ForRoot như chúng tôi đã sử dụng với mô-đun router ở đây.

307
00:23:46,950 --> 00:23:52,400
Vì vậy, trong này vớiRoutes bạn có thể chỉ định một số

308
00:23:52,400 --> 00:23:58,460
tuyến đường mặc định mà bạn cần cho ứng dụng cụ thể của bạn ở đây.

309
00:23:58,460 --> 00:24:03,737
Tôi chỉ sẽ cấu hình chỉ có một đường dẫn duy nhất ở đây,

310
00:24:03,737 --> 00:24:09,359
và đó là đủ tốt cho tôi để thử nghiệm mô-đun này ở đây.

311
00:24:09,359 --> 00:24:14,497
Vì vậy, tôi chỉ đi để nói đường dẫn: 'menu ',

312
00:24:14,497 --> 00:24:19,021
và thành phần: MenuComponent.

313
00:24:19,021 --> 00:24:24,235
Kể từ khi các mẫu MenuComponent đang sử dụng các thành phần vật liệu nhất định, chúng

314
00:24:24,235 --> 00:24:26,523
ta hãy tiếp tục và nhập chúng.

315
00:24:26,523 --> 00:24:35,263
Vì vậy, chúng tôi sẽ nhập khẩu MatgridListModule

316
00:24:35,263 --> 00:24:45,034
từ @angular /vật lương/danh sách và

317
00:24:45,034 --> 00:24:54,033
cũng là MatProgressSpinnerModule từ

318
00:24:54,033 --> 00:25:03,747
@angular /vật liệu/tiến độ-spinner.

319
00:25:04,327 --> 00:25:09,123
Và một khi chúng tôi đã nhập khẩu chúng, sau đó chúng ta hãy tiếp tục và

320
00:25:09,123 --> 00:25:13,322
đưa chúng vào nhập khẩu dưới đây.

321
00:25:13,322 --> 00:25:19,568
Vì vậy, chúng ta hãy thêm vào MatGridListModule và MatProgressSpinnerModule.

322
00:25:19,568 --> 00:25:23,047
Và đó là tất cả những gì tôi cần cho

323
00:25:23,047 --> 00:25:28,997
nhập khẩu đặc biệt này được cấu hình ở đây.

324
00:25:28,997 --> 00:25:34,422
Vì vậy, cùng với nhập khẩu, chúng tôi có các tờ khai nơi tôi có

325
00:25:34,422 --> 00:25:41,067
MenuComponent được sử dụng ở đây, tôi cũng có thể cấu hình các nhà cung cấp ở đây.

326
00:25:41,067 --> 00:25:43,295
Vì vậy, tôi cần phải cấu hình các nhà cung cấp ở đây.

327
00:25:43,295 --> 00:25:47,998
Bây giờ đây là nơi chúng ta sẽ

328
00:25:47,998 --> 00:25:52,898
tạo ra một vài cuống ở đây, vì vậy

329
00:25:52,898 --> 00:25:58,779
tôi sẽ nói cung cấp: DishService.

330
00:25:58,779 --> 00:26:02,825
Bây giờ, DishService mà chúng tôi sẽ sử dụng ở đây sẽ không phải là D

331
00:26:02,825 --> 00:26:03,713
ishService thực sự.

332
00:26:03,713 --> 00:26:08,422
Khi bạn đang thử nghiệm một thành phần, bạn không muốn sử dụng một dịch vụ thực sự.

333
00:26:08,422 --> 00:26:12,750
Thay vào đó, bạn có nguy cơ stubbing ra các dịch vụ, và

334
00:26:12,750 --> 00:26:19,262
sau đó sử dụng một stub DishService, mà tôi sẽ gọi là DishServicesTub.

335
00:26:19,262 --> 00:26:27,040
Vì vậy, tôi sẽ nói, UseValue: DishServicesTub.

336
00:26:27,040 --> 00:26:32,018
Vì vậy, đây sẽ là một chức năng còn lại mà tôi sẽ sử dụng

337
00:26:32,018 --> 00:26:34,904
để đánh dấu DishService ở đây.

338
00:26:34,904 --> 00:26:38,272
Vì vậy, đó là một trong những điều mà tôi sẽ sử dụng.

339
00:26:38,272 --> 00:26:42,776
Và cũng là thứ hai mà tôi

340
00:26:42,776 --> 00:26:47,455
sẽ sử dụng là BaseURL,

341
00:26:47,455 --> 00:26:54,040
mà tôi sẽ sử dụng giá trị như BaseURL

342
00:26:54,040 --> 00:26:59,951
mà chúng tôi đã nhập khẩu trước đó.

343
00:26:59,951 --> 00:27:06,280
Vì vậy, bây giờ, với điều này, tôi đã thực sự cấu hình mô-đun thử nghiệm của tôi,

344
00:27:06,280 --> 00:27:11,644
vì vậy lưu ý rằng cách chúng tôi chỉ định này là chính xác như cách

345
00:27:11,644 --> 00:27:17,160
chúng tôi chỉ định trang trí mô-đun NG cho mô-đun ứng dụng của chúng tôi.

346
00:27:17,160 --> 00:27:22,250
Và ở đây, chúng tôi chỉ cấu hình những người được yêu cầu bởi MenuComponent, vì vậy

347
00:27:22,250 --> 00:27:27,890
tôi không có những người khác mà chúng tôi sử dụng trong các mô-đun ứng dụng chính nó.

348
00:27:27,890 --> 00:27:32,220
Vì vậy, đây là cách chúng tôi sẽ cấu hình mô-đun thử nghiệm.

349
00:27:32,220 --> 00:27:36,600
Bây giờ một điều thiếu là DishServicesTub này.

350
00:27:36,600 --> 00:27:41,718
Vì vậy, những gì tôi sẽ làm là để

351
00:27:41,718 --> 00:27:47,283
thực hiện một chức năng ở đây và

352
00:27:47,283 --> 00:27:53,072
gọi cho phép DishServicesTub là

353
00:27:53,072 --> 00:27:59,973
một đối tượng JavaScript đơn giản ở đây,

354
00:27:59,973 --> 00:28:05,537
mà tôi sẽ để cho nó hành động

355
00:28:05,537 --> 00:28:10,679
thay cho các dịch vụ thực sự.

356
00:28:10,679 --> 00:28:13,067
Chúng ta có thể rút ra các dịch vụ như thế này như đã thấy ở đây.

357
00:28:13,067 --> 00:28:17,807
Vì vậy, bên trong đây, tôi chỉ sẽ

358
00:28:17,807 --> 00:28:21,846
cung cấp một chức năng đơn giản, chức năng

359
00:28:21,846 --> 00:28:26,412
getDishes ở đây,

360
00:28:26,412 --> 00:28:33,803
mà sẽ trả về Observable của Dish mảng loại.

361
00:28:33,803 --> 00:28:38,133
Vì vậy, đó là chính xác cách giá trị trả lại được cấu hình ở đó.

362
00:28:38,133 --> 00:28:42,776
Và tôi sẽ trả lại

363
00:28:42,776 --> 00:28:48,819
một quan sát của DESS ở đây.

364
00:28:48,819 --> 00:28:51,692
Vì vậy, bằng cách sử dụng chức năng stub này ở đây,

365
00:28:51,692 --> 00:28:56,349
những gì tôi đang làm là tôi đang stubbing ra DishService, và

366
00:28:56,349 --> 00:29:00,906
sau đó cấu hình nó với một phương pháp mà

367
00:29:00,906 --> 00:29:06,158
tôi cần cho bộ nhớ cache của tôi, nói getDishes, và khi phương pháp này được gọi,

368
00:29:06,158 --> 00:29:09,355
tôi chỉ sẽ trả lại giá trị này.

369
00:29:09,355 --> 00:29:11,334
Các DESS hằng số, đây.

370
00:29:11,334 --> 00:29:16,740
Vì vậy, theo cách này, bây giờ bạn có thể thấy rằng làm thế nào tôi đang kiểm soát những gì đang được

371
00:29:16,740 --> 00:29:23,449
cung cấp cho các thành phần từ một stub DishService mà tôi vừa tạo ra ở đây.

372
00:29:23,449 --> 00:29:27,333
Vì vậy, đây là cách bạn sẽ tạo ra cuống cho DishService của bạn.

373
00:29:27,333 --> 00:29:30,570
Cách tiếp cận khác mà chúng tôi có thể sử dụng cho

374
00:29:30,570 --> 00:29:35,910
trường hợp chúng tôi đang sử dụng dịch vụ được gọi là sử dụng gián điệp.

375
00:29:37,300 --> 00:29:42,840
Jasmine hỗ trợ một cái gì đó gọi là Spy, cho phép chúng ta theo dõi các cuộc gọi hàm,

376
00:29:42,840 --> 00:29:47,040
và sau đó nắm bắt các cuộc gọi hàm, và sau đó đáp ứng các cuộc gọi hàm đó.

377
00:29:47,040 --> 00:29:52,981
Vì vậy, đó là một cách khác để sử dụng một dịch vụ giả mạo thay cho các dịch vụ thực sự.

378
00:29:52,981 --> 00:29:59,778
Vì vậy, bây giờ chúng tôi có thể kiểm soát những gì đang được cung cấp cho thành phần menu của chúng tôi.

379
00:29:59,778 --> 00:30:04,410
Vì vậy, sau những sửa đổi này, sau đó chúng tôi

380
00:30:04,410 --> 00:30:09,424
sẽ đi xuống của chúng tôi trước mỗi phương pháp ở đây.

381
00:30:09,424 --> 00:30:14,172
Sau khi không đồng bộ, những gì tôi sẽ làm

382
00:30:14,172 --> 00:30:19,085
là tôi sẽ nhận được giữ của DishService.

383
00:30:19,085 --> 00:30:24,187
Vì vậy, bạn thấy rằng tôi đang sử dụng giường thử nghiệm và sau đó sử dụng

384
00:30:24,187 --> 00:30:31,415
phương pháp get của giường thử nghiệm để có được ahold của DishService đã được tạo ra ở đây,

385
00:30:31,415 --> 00:30:37,819
từ cuống đặc biệt này mà chúng tôi đã tuyên bố ở đây trong các nhà cung cấp.

386
00:30:39,520 --> 00:30:43,140
Vì vậy, điều này cho tôi một tham chiếu đến DishService để

387
00:30:43,140 --> 00:30:47,870
tôi có thể gọi các phương pháp của DishService bất cứ nơi nào tôi cần ở đây.

388
00:30:47,870 --> 00:30:52,453
Vì vậy, sau khi thực hiện những thay đổi này, chúng ta hãy lưu các thay đổi và

389
00:30:52,453 --> 00:30:57,679
sau đó xem cách chúng tôi Angular CLI sẽ chạy thử nghiệm này sau khi những thay đổi này,

390
00:30:57,679 --> 00:31:02,369
và liệu thử nghiệm của chúng tôi sẽ thành công tại thời điểm này hay không.

391
00:31:02,369 --> 00:31:04,462
Vì vậy, hãy lưu các thay đổi.

392
00:31:04,462 --> 00:31:09,412
Thời điểm bạn lưu các thay đổi, bạn sẽ nhận thấy rằng

393
00:31:09,412 --> 00:31:13,060
bài kiểm tra NG của bạn sẽ bắt đầu chạy lại bài kiểm tra của chúng tôi một lần nữa.

394
00:31:13,060 --> 00:31:16,310
Vì vậy, nó sẽ biên dịch các ứng dụng và sau đó chạy lại các thử nghiệm.

395
00:31:16,310 --> 00:31:21,450
Và thì đấy, bài kiểm tra của chúng tôi đã vượt qua thành công sau khi

396
00:31:22,540 --> 00:31:27,574
thực hiện các thay đổi đối với tập tin thành phần của chúng tôi.

397
00:31:27,574 --> 00:31:33,270
Vì vậy, thử nghiệm đầu tiên của chúng tôi, có nghĩa là chúng tôi bây giờ có thể tạo ra một thành phần menu

398
00:31:33,270 --> 00:31:37,950
từ menu của chúng tôi, tập tin component.spec.t ở đó.

399
00:31:37,950 --> 00:31:40,990
Vì vậy, thiết lập thử nghiệm của chúng tôi đang hoạt động đúng.

400
00:31:40,990 --> 00:31:48,460
Bây giờ tôi có thể đi vào và làm các bài kiểm tra dữ dội hơn trong thành phần thử nghiệm của tôi.

401
00:31:48,460 --> 00:31:53,790
Quay trở lại tập tin thành phần trình đơn đó, hãy để tôi thêm vào một bài kiểm tra khác.

402
00:31:53,790 --> 00:32:00,420
Bây giờ bạn thấy rằng bởi vì tôi bây giờ có một dịch vụ được thiết lập ở đây

403
00:32:00,420 --> 00:32:07,292
mà là trả lại giá trị DESS này tôi có thể sau đó bây giờ sử dụng DishService của tôi,

404
00:32:07,292 --> 00:32:11,290
mà tôi đã có tài liệu tham khảo ở đây.

405
00:32:11,290 --> 00:32:15,934
Bên trong là trước mỗi, và sau đó gọi phương pháp getDishes và

406
00:32:15,934 --> 00:32:18,830
sau đó tôi sẽ có thể để có được giá trị.

407
00:32:18,830 --> 00:32:23,800
Và đó sẽ có sẵn trong thành phần menu của tôi mà l vừa tạo ra.

408
00:32:23,800 --> 00:32:28,615
Vì vậy, menuComponent của tôi bây giờ sẽ có được quyền truy cập vào các món ăn liên tục

409
00:32:28,615 --> 00:32:32,856
đã được cung cấp trở lại cho nó thông qua món ăn này dừng lại.

410
00:32:32,856 --> 00:32:37,608
Vì vậy, bây giờ tôi có thể kiểm tra để xem nếu các biến món ăn bên trong

411
00:32:37,608 --> 00:32:43,642
MenuComponent của tôi thực sự nhận được các giá trị một cách chính xác hay không.

412
00:32:43,642 --> 00:32:46,982
Vì vậy, đi vào, để tôi tạo ra một bài kiểm tra khác ở đây.

413
00:32:46,982 --> 00:32:52,413
Vì vậy, tôi sẽ tạo ra một bài kiểm tra ở đây, Với nó,

414
00:32:52,413 --> 00:32:57,228
như bạn đã thấy trước đó, vì vậy giống như trước đó.

415
00:32:57,228 --> 00:33:03,447
Điều này thử nghiệm thứ hai tôi sẽ gọi là như nó và

416
00:33:03,447 --> 00:33:09,460
các món ăn, Items nên được 4,

417
00:33:09,460 --> 00:33:14,605
bởi vì các món ăn hằng số mà chúng tôi tuyên bố

418
00:33:14,605 --> 00:33:21,562
trong tập tin shared.dishes có bốn món ăn trong hằng số đó.

419
00:33:21,562 --> 00:33:26,232
Vì vậy, khi biến món ăn của tôi bên trong MenuComponent hoặc

420
00:33:26,232 --> 00:33:31,018
các tập tin của tôi được khởi tạo bằng cách gọi dishservice.

421
00:33:31,018 --> 00:33:34,632
Đáng lẽ nó phải nhận được bốn món

422
00:33:34,632 --> 00:33:37,970
đó và được khởi tạo với bốn món đó.

423
00:33:37,970 --> 00:33:43,182
Vì vậy, tôi sẽ thực hiện một vài bài kiểm tra về các món ăn biến thể ở đó.

424
00:33:43,182 --> 00:33:46,492
Vậy làm thế nào để tôi có thể truy cập vào các món ăn biến ở đây?

425
00:33:46,492 --> 00:33:50,431
Vì vậy, tôi sẽ nói nó món ăn mục nên được 4, và

426
00:33:50,431 --> 00:33:54,171
sau đó tôi sẽ khai báo một chức năng mũi tên ở đây.

427
00:33:54,171 --> 00:33:59,453
Và bên trong chức năng mũi tên này tôi sẽ chỉ định

428
00:33:59,453 --> 00:34:04,024
các bài kiểm tra khác nhau mà tôi sẽ thực hiện.

429
00:34:04,024 --> 00:34:10,348
Vì vậy, ở đây tôi sẽ bây giờ nói mong đợi (thành phần. ,

430
00:34:10,348 --> 00:34:15,378
và nhận thấy rằng nó tự động cung cấp cho tôi

431
00:34:15,378 --> 00:34:22,290
quyền truy cập vào tài sản món ăn này từ MenuComponent.

432
00:34:22,290 --> 00:34:27,400
Vì vậy, tôi có thể nói rằng component.dishes, và sau đó tôi có thể kiểm tra

433
00:34:27,400 --> 00:34:34,053
để thấy rằng chiều dài của các món ăn mà mảng đối tượng JavaScript nên được.

434
00:34:34,053 --> 00:34:38,367
Vì vậy, đây là nơi tôi sử dụng phương pháp ToBe của Jasmine ở đây.

435
00:34:38,367 --> 00:34:41,517
Và sau đó tôi có thể chỉ định giá trị 4,

436
00:34:41,517 --> 00:34:46,347
bởi vì tôi đã cung cấp 4 món ăn trong các món ăn của tôi hằng số

437
00:34:46,347 --> 00:34:51,284
mà tôi đã tuyên bố trong tập tin shared.dishes ở đó.

438
00:34:51,284 --> 00:34:54,709
Vì vậy, đó là bài kiểm tra đầu tiên mà tôi sẽ thực hiện,

439
00:34:54,709 --> 00:34:56,867
điều này sẽ trở thành sự thật.

440
00:34:56,867 --> 00:35:01,096
Nếu không, thiết lập đã không hoạt động chính xác, vì vậy

441
00:35:01,096 --> 00:35:05,120
tôi biết rằng mã của tôi không hoạt động chính xác.

442
00:35:05,120 --> 00:35:09,891
Nhưng tôi biết chắc chắn rằng bài kiểm tra này sẽ làm việc ra một cách chính xác.

443
00:35:09,891 --> 00:35:11,547
Nếu bạn muốn chắc chắn,

444
00:35:11,547 --> 00:35:16,011
hãy lưu các thay đổi và sau đó đi xem thử của chúng tôi đang chạy.

445
00:35:16,011 --> 00:35:18,084
Đi đến thiết bị đầu cuối đó,

446
00:35:18,084 --> 00:35:23,323
bạn thấy rằng bây giờ ứng dụng của tôi đang được biên dịch lại, và thử nghiệm chạy.

447
00:35:23,323 --> 00:35:27,941
Và chú ý tất cả các màu xanh lá cây trong cửa sổ thiết bị đầu cuối.

448
00:35:27,941 --> 00:35:32,355
Nó nói thực hiện 1 của 2 thành công, thực hiện 2 của 2 thành công.

449
00:35:32,355 --> 00:35:36,021
Điều đó có nghĩa là cả hai bài kiểm tra của tôi đã chạy thành công.

450
00:35:36,021 --> 00:35:41,221
Nếu tôi nhìn vào trình duyệt của tôi, vì vậy bạn thấy rằng MenuComponent,

451
00:35:41,221 --> 00:35:44,031
cả hai bài kiểm tra đều thành công.

452
00:35:44,031 --> 00:35:46,189
Hãy để tôi tạo ra một vài thứ nữa và

453
00:35:46,189 --> 00:35:51,994
thêm chúng vào tập hợp các bài kiểm tra thứ hai mà tôi đang tạo ra ở đó.

454
00:35:51,994 --> 00:35:58,106
Đi đến tập tin menu_component_spec.t, tôi sẽ thêm vào một tập tin nữa.

455
00:35:58,106 --> 00:36:05,535
Tôi sẽ nói thành phần mong đợi. ,

456
00:36:05,535 --> 00:36:12,420
và tôi sẽ nói các món ăn [1].

457
00:36:12,420 --> 00:36:16,105
Nhớ lại rằng tên của món ăn đầu tiên là,

458
00:36:18,858 --> 00:36:22,552
Vì vậy, đó là những gì tôi sẽ kiểm tra, các món ăn [1] .name.

459
00:36:22,552 --> 00:36:26,774
Vì vậy, đây là cách tôi có thể kiểm tra để xem nếu nó nhận được các giá trị một cách chính xác.

460
00:36:26,774 --> 00:36:28,431
Tất cả những cách mà tôi có thể kiểm tra là gì?

461
00:36:28,431 --> 00:36:34,594
Nếu tôi đặt một dấu chấm ở đó, nó sẽ cho tôi một gợi ý về tất cả các khả năng ở đây.

462
00:36:34,594 --> 00:36:42,862
Vì vậy, tôi sẽ nói, tôi cũng sẽ sử dụng phương pháp ToBe ở đây.

463
00:36:42,862 --> 00:36:45,623
Và sau đó tên món ăn thứ hai là,

464
00:36:51,916 --> 00:36:55,779
Chỉ có ở đó, đó là cái bánh thứ hai tôi sẽ thực hiện.

465
00:36:55,779 --> 00:36:59,819
Vì vậy, nếu mã của tôi chạy một cách chính xác, sau đó điều này cũng sẽ vượt qua.

466
00:36:59,819 --> 00:37:03,389
Tương tự, hãy để tôi đặt thêm một cái nữa ở đây.

467
00:37:03,389 --> 00:37:06,072
Vì vậy, tôi sẽ nói mong đợi,

468
00:37:09,579 --> 00:37:16,457
thành phần.Món ăn và tôi sẽ nói 3.

469
00:37:16,457 --> 00:37:21,520
Và ở đây, tài

470
00:37:21,520 --> 00:37:26,819
sản nổi bật nên là Falsy.

471
00:37:26,819 --> 00:37:33,572
Rằng bạn nên sai, nó không đúng trong trường hợp này, vì vậy hãy để tôi thêm vào một cái nữa.

472
00:37:33,572 --> 00:37:35,748
Bạn có thể bắt đầu thêm nhiều hơn nếu bạn muốn,

473
00:37:35,748 --> 00:37:38,405
chơi xung quanh với nó cho đến khi bạn hài lòng.

474
00:37:38,405 --> 00:37:40,936
Vì vậy, làm những bổ sung đó. Hãy để tôi lưu những thay đổi mà tôi đã thực hiện

475
00:37:40,936 --> 00:37:44,292
ở đây, chúng ta hãy đi và xem thử thử nghiệm này có chạy đúng không.

476
00:37:44,292 --> 00:37:50,041
Và quay trở lại thiết bị đầu cuối của tôi, bạn thấy rằng thử nghiệm của tôi đang chạy lại.

477
00:37:50,041 --> 00:37:52,720
Bạn thấy rằng cả hai bài kiểm tra đều thành công,

478
00:37:52,720 --> 00:37:55,551
bây giờ tôi sẽ làm cho một trong những điều đó thất bại.

479
00:37:55,551 --> 00:37:59,754
Vì vậy, tôi sẽ đi vào và thay đổi điều này thành sự thật.

480
00:37:59,754 --> 00:38:03,950
Thấy chưa, đó là niềm vui khi chơi đùa với mã.

481
00:38:03,950 --> 00:38:08,111
Tôi sẽ thay đổi điều này thành sự thật và tôi biết rằng bài kiểm tra này sẽ thất bại.

482
00:38:08,111 --> 00:38:10,186
Vì vậy, hãy lưu các thay đổi.

483
00:38:10,186 --> 00:38:15,977
Nhìn vào thiết bị đầu cuối, ở đó bạn thấy bài kiểm tra đã thất bại.

484
00:38:15,977 --> 00:38:23,603
Bạn thấy tất cả điều này màu đỏ ở đây, có nghĩa là bài kiểm tra thứ hai đã không vượt qua một cách chính xác.

485
00:38:23,603 --> 00:38:30,750
Và nếu bạn di chuyển ngược lại, bạn sẽ thấy bài kiểm tra đặc biệt này thất bại,

486
00:38:30,750 --> 00:38:36,295
bởi vì ở đâu đó dưới đó nó sẽ nói rằng nó đã không.

487
00:38:36,295 --> 00:38:42,119
Được rồi, xem tuyên bố này ở đây nó nói là giả tưởng sẽ là trung thực, vì

488
00:38:42,119 --> 00:38:44,378
vậy đó là lý do tại sao nó thất bại.

489
00:38:44,378 --> 00:38:47,978
Vì vậy, nó không phải là sự thật, nhưng tôi nói nó phải là sự thật, và

490
00:38:47,978 --> 00:38:51,393
rõ ràng là bài kiểm tra là sai, vì vậy đó là lý do tại sao bài kiểm tra thất bại.

491
00:38:51,393 --> 00:38:55,865
Vì vậy, đây là cách bạn thậm chí có thể kiểm tra để xem xét nếu bài kiểm tra thất bại,

492
00:38:55,865 --> 00:38:59,086
nếu bạn yêu cầu những điều sai lầm cũng.

493
00:38:59,086 --> 00:39:04,107
Nhưng một lần nữa, hãy để tôi quay lại và sửa lại điều đó một lần nữa.

494
00:39:04,107 --> 00:39:09,068
Vì vậy, đi trở lại của tôi, File Tôi sẽ thay đổi chúng

495
00:39:09,068 --> 00:39:13,529
trở lại sai lầm, bởi vì tôi muốn kiểm tra này để chạy một cách chính xác.

496
00:39:13,529 --> 00:39:15,517
Bây giờ chúng ta chưa hài lòng.

497
00:39:15,517 --> 00:39:20,117
Bây giờ trong bài kiểm tra đặc biệt này tôi chỉ kiểm tra các

498
00:39:20,117 --> 00:39:23,825
biến món ăn đó là bên trong MenuComponent của tôi.

499
00:39:23,825 --> 00:39:29,777
Làm thế nào để tôi đi về chơi xung quanh với bản thân mẫu?

500
00:39:29,777 --> 00:39:35,454
Vì vậy, đây là nơi chúng tôi cần thêm sự giúp đỡ từ Angular.

501
00:39:35,454 --> 00:39:40,216
Để thực hiện một số bài kiểm tra trên mẫu, tôi sẽ đi vào và

502
00:39:40,216 --> 00:39:42,972
kéo thêm một vài nhập khẩu ở đây.

503
00:39:42,972 --> 00:39:49,896
Vì vậy, đi đến đầu trang của tôi của tập tin này, menu_component_spec.tsfile.

504
00:39:49,896 --> 00:39:55,105
Tôi sẽ nhập khẩu, Một cái

505
00:39:55,105 --> 00:40:00,594
nữa được gọi là By, đó là một phương pháp.

506
00:40:00,594 --> 00:40:03,044
Bạn sẽ thấy tôi sử dụng nó trong một thời gian ngắn.

507
00:40:03,044 --> 00:40:10,855
Điều này nên được nhập khẩu từ, Angular,

508
00:40:15,209 --> 00:40:18,863
/platform-browser.

509
00:40:18,863 --> 00:40:27,301
Và cũng có thể, tôi sẽ nhập một trong đó là một yếu tố gỡ lỗi.

510
00:40:27,301 --> 00:40:32,009
Phần tử gỡ lỗi cho phép tôi truy cập vào DOM để

511
00:40:32,009 --> 00:40:37,040
tôi có thể thực hiện các thử nghiệm trên các phần tử DOM trực tiếp.

512
00:40:37,040 --> 00:40:44,548
Vì vậy, đó là nơi tôi sẽ nhập khẩu này từ, mã góc ở đây, vì vậy hai.

513
00:40:44,548 --> 00:40:49,580
Vì vậy, thêm vào bởi và DebugElement để nhập khẩu, và

514
00:40:49,580 --> 00:40:54,947
sau đó một khi bạn làm điều đó, chúng tôi sẽ đi xuống vào mã ở đây.

515
00:40:54,947 --> 00:40:59,338
Và sau đó chúng ta sẽ thêm vào một bài kiểm tra nữa, nơi chúng ta sẽ đi vào DOM và

516
00:40:59,338 --> 00:41:01,690
lấy một trong các mục từ doc.

517
00:41:01,690 --> 00:41:06,404
Vì vậy, tôi sẽ nói điều đó, vậy một bài kiểm tra nữa ở đây,

518
00:41:06,404 --> 00:41:09,889
bài kiểm tra này sẽ làm gì?

519
00:41:09,889 --> 00:41:14,970
Đối với bài kiểm tra này, tôi sẽ chỉ

520
00:41:14,970 --> 00:41:22,903
định bài kiểm tra như nên sử dụng các món ăn trong mẫu.

521
00:41:22,903 --> 00:41:25,838
Tôi chỉ ngẫu nhiên nói một cái gì đó ở đây,

522
00:41:25,838 --> 00:41:29,804
bởi vì tôi chỉ muốn kiểm tra để thấy rằng các món ăn biến,

523
00:41:29,804 --> 00:41:34,905
bất cứ điều gì nó đang làm sẵn, đang được sử dụng trong các mẫu một cách chính xác.

524
00:41:34,905 --> 00:41:38,412
Vì vậy, đó là phần mà tôi đang thiết lập, và

525
00:41:38,412 --> 00:41:42,104
sau đó phần thứ hai là chức năng mũi tên, và

526
00:41:42,104 --> 00:41:47,760
trong chức năng mũi tên này tôi sẽ cung cấp mã cho các thử nghiệm tiếp theo.

527
00:41:47,760 --> 00:41:52,734
Vì vậy, bên trong chức năng mũi tên này những gì tôi

528
00:41:52,734 --> 00:41:58,008
sẽ làm là đầu tiên tôi sẽ gọi fixture và

529
00:41:58,008 --> 00:42:00,880
sau đó phát hiện những thay đổi.

530
00:42:00,880 --> 00:42:05,990
Và sau đó tôi sẽ nói cho de:,

531
00:42:12,226 --> 00:42:13,908
Là một DebugElement.

532
00:42:13,908 --> 00:42:20,748
Thông qua điều này tôi sẽ nhận được quyền truy cập vào DOM và

533
00:42:20,748 --> 00:42:26,566
sau đó các yếu tố sẽ là HTMLElement.

534
00:42:26,566 --> 00:42:33,243
Vì vậy, tôi muốn truy cập vào một trong những HTMLElements từ DOM của tôi.

535
00:42:33,243 --> 00:42:35,369
Vậy tôi muốn yếu tố nào?

536
00:42:35,369 --> 00:42:38,846
Vì vậy, để làm điều đó, tôi sẽ nhận được quyền truy cập vào,

537
00:42:41,533 --> 00:42:48,138
DebugElement bằng cách nói fixture và DebugElement.

538
00:42:48,138 --> 00:42:54,933
Vì vậy, điều này cho phép tôi để có được quyền truy cập vào các mục từ DOM của tôi ở đây để DebugElement.

539
00:42:54,933 --> 00:43:02,220
Và sau đó tôi có thể truy vấn và sau đó chỉ chọn những người sẽ được quan tâm đến tôi.

540
00:43:02,220 --> 00:43:08,690
Vì vậy, tôi sẽ truy vấn và sau đó tôi sẽ yêu cầu bằng cách sử dụng By.

541
00:43:08,690 --> 00:43:15,908
Vì vậy, thông báo nơi tôi đang sử dụng By that tôi đã bao gồm bằng cách nhập khẩu nó.

542
00:43:15,908 --> 00:43:20,780
Vì vậy, By hỗ trợ một loạt các số liệu mà tôi có thể

543
00:43:20,780 --> 00:43:25,020
yêu cầu truy cập vào các yếu tố cụ thể trong DOM.

544
00:43:25,020 --> 00:43:31,824
Vì vậy, như bạn có thể thấy nó sẽ cho tôi biết những gì tôi có thể nhập khẩu và

545
00:43:31,824 --> 00:43:36,846
sau đó .css cho phép tôi có được quyền truy cập

546
00:43:36,846 --> 00:43:43,018
để phù hợp với các yếu tố của bộ chọn css cho.

547
00:43:43,018 --> 00:43:45,789
Vì vậy, chọn css là gì mà tôi sẽ sử dụng?

548
00:43:45,789 --> 00:43:50,503
Tôi biết rằng có một phần tử h1, phần tử html trong DOM và

549
00:43:50,503 --> 00:43:55,750
rằng tôi sẽ có được quyền truy cập vào phần tử h1 đầu tiên từ DOM.

550
00:43:55,750 --> 00:44:00,764
Và một trong những yếu tố h1 trong đó là một trong đó

551
00:44:00,764 --> 00:44:05,670
sẽ hiển thị tên của mỗi món ăn ở đó.

552
00:44:05,670 --> 00:44:10,459
Nhìn lại và bạn thấy rằng bên trong dòng thời gian lưới bằng cách sử dụng một h1 và

553
00:44:10,459 --> 00:44:13,839
h1 đó chứa tên của món ăn ở đó.

554
00:44:13,839 --> 00:44:16,723
Vì vậy, tôi sẽ có được giữ của điều đó và

555
00:44:16,723 --> 00:44:21,198
sau đó tôi sẽ nhận được một phần tử và sau đó tôi sẽ nói de,

556
00:44:21,198 --> 00:44:26,385
từ các yếu tố gỡ lỗi, và sau đó tôi sẽ nói NativeElement.

557
00:44:26,385 --> 00:44:31,572
Và điều đó cho phép tôi truy cập vào các yếu tố cụ thể trong DOM

558
00:44:31,572 --> 00:44:37,873
mà tôi đang đề cập đến và tôi đã chọn bằng cách sử dụng tuyên bố này trước đó.

559
00:44:37,873 --> 00:44:43,091
Vì vậy, khi tôi truy vấn DOM và sau đó nói, trả lại cho tôi tất cả

560
00:44:43,091 --> 00:44:48,964
những người đang sử dụng thẻ h1 cho các yếu tố HTML.

561
00:44:48,964 --> 00:44:54,077
Và tôi nhận được quyền truy cập vào điều đó, và tôi có thể truy vấn và

562
00:44:54,077 --> 00:44:58,349
nói mong đợi (el.textContent).

563
00:44:58,349 --> 00:45:02,869
Vì vậy, tôi đang tìm kiếm nội dung bên trong h1 này trong

564
00:45:02,869 --> 00:45:07,718
mẫu của tôi nội dung cố định và sau đó tôi sẽ nói đểContent.

565
00:45:07,718 --> 00:45:12,596
Vì vậy, đây là một phương pháp khác, toContain, đây là một phương pháp Jasmine được gọi là toContain.

566
00:45:12,596 --> 00:45:18,352
Điều này kiểm tra để xem nếu đó có chứa một giá trị cụ thể,

567
00:45:18,352 --> 00:45:23,262
và sau đó tôi sẽ kiểm tra cho DÂY DỰNG (0) .name.

568
00:45:23,262 --> 00:45:29,360
Vậy là món ăn đầu tiên được tạo ra trong DOM và thêm vào DOM?

569
00:45:29,360 --> 00:45:33,981
Nếu mẫu của tôi hoạt động chính xác, thì đó phải có mặt trong DOM.

570
00:45:33,981 --> 00:45:38,626
Vì vậy, đó là những gì tôi sẽ kiểm tra để xem nếu ngói lưới tương ứng với D

571
00:45:38,626 --> 00:45:42,658
ISH đầu tiên đã được tạo ra và thêm vào DOM hay không.

572
00:45:42,658 --> 00:45:47,521
Vì vậy, tôi nói DÂY DỰNG (0) .name, và nói với chữ hoa.

573
00:45:47,521 --> 00:45:52,395
Nhớ lại rằng tôi đã sử dụng ống chữ hoa để hiển thị tên

574
00:45:52,395 --> 00:45:56,647
của DISH bằng cách chuyển đổi tên của món ăn thành

575
00:45:56,647 --> 00:46:01,450
tất cả các chữ hoa trong ngói lưới trong thành phần menu.

576
00:46:01,450 --> 00:46:05,830
Vì vậy, đó là những gì tôi sẽ kiểm tra, okay, vì vậy tôi

577
00:46:05,830 --> 00:46:07,200
chỉ kiểm tra một trong số họ.

578
00:46:07,200 --> 00:46:10,983
Bạn có thể thực hiện nhiều bài kiểm tra, bạn có thể kiểm tra DÂY DỰNG

579
00:46:10,983 --> 00:46:16,016
(1) .name và sau đó DÂY DỰNG (2) .name và nhiều hơn nữa nếu bạn muốn.

580
00:46:16,016 --> 00:46:21,683
Tôi chỉ minh họa một ví dụ về cách bạn sẽ truy cập các yếu tố của DOM và

581
00:46:21,683 --> 00:46:24,783
sau đó kiểm tra những gì chúng chứa bên trong đó.

582
00:46:24,783 --> 00:46:29,585
Vì vậy, đây là một bài kiểm tra mà tôi sẽ tiến hành ở đây, vì vậy hãy để tôi lưu các thay đổi,

583
00:46:29,585 --> 00:46:32,930
và sau đó xem thử nghiệm có chạy đúng không.

584
00:46:32,930 --> 00:46:35,951
Đi vào thiết bị đầu cuối đó và khi bài kiểm tra chạy,

585
00:46:35,951 --> 00:46:41,039
bạn thấy rằng bài kiểm tra đầu tiên của tôi đã thành công, bài kiểm tra thứ hai đã thành công,

586
00:46:41,039 --> 00:46:44,635
và bài kiểm tra thứ ba cũng thành công, tuyệt vời.

587
00:46:44,635 --> 00:46:48,374
Bây giờ, để tôi làm cho bài kiểm tra thứ ba thất bại.

588
00:46:48,374 --> 00:46:52,273
Đi đến tập tin menucomponentspec.t,

589
00:46:52,273 --> 00:46:58,818
tôi sẽ loại bỏ điều này để chữ hoa, và sau đó thực hiện các thử nghiệm tương tự.

590
00:46:58,818 --> 00:47:02,269
Bạn sẽ thấy rằng bài kiểm tra này sẽ thất bại, lưu các thay đổi.

591
00:47:02,269 --> 00:47:06,941
Và khi bài kiểm tra chạy, bạn sẽ thấy rằng bài kiểm tra thứ ba sẽ thất bại.

592
00:47:06,941 --> 00:47:11,251
Bởi vì tôi đang làm cho nó thất bại bằng cách kiểm tra những điều sai trái ở đó và

593
00:47:11,251 --> 00:47:13,894
bạn đi đó, bài kiểm tra thứ ba thất bại ở đây.

594
00:47:13,894 --> 00:47:18,490
Vì vậy, đây là cách bạn có thể kiểm tra xem liệu

595
00:47:18,490 --> 00:47:22,471
những thứ nhất định được cho là có đúng hay không.

596
00:47:22,471 --> 00:47:28,360
Tại sao trường hợp này, vì vậy bạn có thể thấy ở đây, lý do tại sao bài kiểm tra này thất bại.

597
00:47:28,360 --> 00:47:34,750
Nó đang mong đợi điều này là trong DOM,

598
00:47:34,750 --> 00:47:40,670
nhưng thay vào đó đây là những gì trong DOM trong phần tử h1 trong DOM.

599
00:47:40,670 --> 00:47:43,929
Đó là lý do tại sao bài kiểm tra thất bại ở đây.

600
00:47:43,929 --> 00:47:47,718
Vì vậy, một lần nữa đi trở lại cho tôi sửa lỗi và

601
00:47:47,718 --> 00:47:53,922
sau đó khi tôi chạy lại các bài kiểm tra bây giờ bạn sẽ thấy rằng các bài kiểm tra vượt qua thành công.

602
00:47:53,922 --> 00:47:58,757
Quay trở lại thiết bị đầu cuối, bạn sẽ thấy rằng khi thử nghiệm này chạy bây giờ nó sẽ

603
00:47:58,757 --> 00:47:59,875
chạy chính xác.

604
00:48:03,610 --> 00:48:08,670
Và bạn đi, cả ba bài kiểm tra đều được thông qua bởi ứng dụng của tôi.

605
00:48:08,670 --> 00:48:13,970
Ngoài ra, nhìn vào trình duyệt, bạn có thể thấy rằng ba bài kiểm tra

606
00:48:13,970 --> 00:48:19,770
thành công đã được thực hiện trên tệp mẫu thành phần menu và

607
00:48:19,770 --> 00:48:22,571
cũng là thành phần menu chính nó.

608
00:48:22,571 --> 00:48:28,398
Bây giờ rõ ràng, đây không nhất thiết phải là bài kiểm tra toàn diện nhất nhưng

609
00:48:28,398 --> 00:48:32,407
tôi chỉ muốn cung cấp cho bạn một hương vị của cách bạn sẽ đi

610
00:48:32,407 --> 00:48:37,398
về xây dựng các bài kiểm tra trong ứng dụng Angular của bạn.

611
00:48:37,398 --> 00:48:42,025
Nếu bạn bị mang đi, bạn có thể đi vào tất cả các tập tin spec.t mà bạn có và

612
00:48:42,025 --> 00:48:44,194
sau đó viết bài kiểm tra

613
00:48:44,194 --> 00:48:49,580
của riêng bạn cho mỗi và mỗi một trong những thành phần sử dụng kiến thức mà bạn đã đạt được ở đây.

614
00:48:49,580 --> 00:48:55,150
Ngoài ra, bạn có thể đọc thêm về thử nghiệm trong tài liệu Angular và

615
00:48:55,150 --> 00:49:00,590
sau đó tìm hiểu thêm các cách thực hiện các thử nghiệm trên ứng dụng Angular của bạn.

616
00:49:00,590 --> 00:49:05,190
Thử nghiệm là một lĩnh vực của chính nó vì vậy nếu tôi cần phải dạy cho bạn tất cả mọi thứ về

617
00:49:05,190 --> 00:49:10,410
thử nghiệm đó sẽ được đến một khóa học trong chính nó cho Angular.

618
00:49:10,410 --> 00:49:14,500
Và trong khóa học này, tôi chỉ muốn cung cấp cho bạn một hương vị về cách

619
00:49:14,500 --> 00:49:17,820
bạn sẽ thực hiện kiểm tra trong ứng dụng Angular của bạn.

620
00:49:17,820 --> 00:49:21,585
Và đây là một ví dụ về cách chúng ta có thể cấu hình và

621
00:49:21,585 --> 00:49:27,441
thực hiện một bài kiểm tra đơn vị trên một trong các thành phần trong ứng dụng Angular của chúng tôi.

622
00:49:27,441 --> 00:49:33,901
Đây là thời điểm tốt cho bạn để làm một bình luận tốt với các thành phần tin nhắn kiểm tra.

623
00:49:33,901 --> 00:49:37,750
[ NHẠC]