1
00:00:00,000 --> 00:00:04,858
[МУЗЫКА]

2
00:00:04,858 --> 00:00:09,967
Аромат жасмина из всех тех цветочных гирлянд

3
00:00:09,967 --> 00:00:14,218
на храмовой улице, пролетающий по воздуху.

4
00:00:14,218 --> 00:00:17,684
Какое оседающее чувство.

5
00:00:17,684 --> 00:00:20,510
Должно быть хорошая карма из моей прошлой жизни.

6
00:00:23,749 --> 00:00:25,857
Извините, где я был?

7
00:00:25,857 --> 00:00:29,703
Я говорил с тобой об угловом тестировании, верно?

8
00:00:29,703 --> 00:00:34,743
И мы будем использовать адаптацию кармы для нашего углового тестирования.

9
00:00:34,743 --> 00:00:37,769
Так что давай займемся этим.

10
00:00:37,769 --> 00:00:45,571
Одна хорошая вещь об использовании углового интерфейса командной строки заключается в том, что он настраивает все строительные леса для

11
00:00:45,571 --> 00:00:49,869
вы автоматически включаете поддержку

12
00:00:49,869 --> 00:00:53,393
тестирования вашего углового приложения.

13
00:00:53,393 --> 00:00:59,108
Таким образом, вы заметите, что всякий раз, когда вы создаете компонент или

14
00:00:59,108 --> 00:01:03,454
сервис вместе с файлами компонентов ts,

15
00:01:03,454 --> 00:01:08,942
вы также заметите файл component.spect.tts

16
00:01:08,942 --> 00:01:13,422
уже включен в ваши папки проекта.

17
00:01:13,422 --> 00:01:17,423
А также, если вы перейдете к файлу package.json,

18
00:01:17,423 --> 00:01:24,434
вы увидите, что уже есть поддержка углового тестирования, включенного там.

19
00:01:24,434 --> 00:01:30,640
Поэтому, если вы перейдете в зависимости от dev, вы увидите, что ядро жасмина,

20
00:01:30,640 --> 00:01:34,201
репортер жасмина, модули npm, связанные с кармой и

21
00:01:34,201 --> 00:01:39,394
кармой, уже установлены в вашем угловом приложении

22
00:01:39,394 --> 00:01:44,414
, которое является эшафот угловым CLI.

23
00:01:44,414 --> 00:01:47,716
Итак, у нас есть все вещи и место для

24
00:01:47,716 --> 00:01:53,538
нас, чтобы просто сделать наше тестирование для нашего углового приложения.

25
00:01:53,538 --> 00:01:58,617
Итак, если вы посмотрите вокруг, вы увидите, что есть

26
00:01:58,617 --> 00:02:03,572
файл с именем test.ts в вашей исходной папке,

27
00:02:03,572 --> 00:02:07,269
, поэтому давайте откроем файл test.ts.

28
00:02:07,269 --> 00:02:11,518
Вы также увидите, что здесь есть еще одна папка, называемая e2e.

29
00:02:11,518 --> 00:02:16,409
Мы вернемся к этому в следующем упражнении.

30
00:02:16,409 --> 00:02:21,232
Но в папке test.ts вы увидите, что здесь настроена поддержка кармы

31
00:02:21,232 --> 00:02:25,084
.

32
00:02:25,084 --> 00:02:29,551
Таким образом, войдя в этот файл test.ts, по умолчанию

33
00:02:29,551 --> 00:02:33,907
при использовании угловой поддержки CLS для теста,

34
00:02:33,907 --> 00:02:38,261
он будет запускать тесты для всех компонентов и услуг

35
00:02:38,261 --> 00:02:43,750
, которые включены в ваше угловое приложение.

36
00:02:43,750 --> 00:02:49,017
Теперь я собираюсь проиллюстрировать вам, как сделать тестирование для

37
00:02:49,017 --> 00:02:53,516
одного конкретного компонента, menuComponent.

38
00:02:53,516 --> 00:03:00,469
Поэтому я хочу ограничить себя только для использования файла.spec компонента меню и

39
00:03:00,469 --> 00:03:04,696
для тестирования только компонента меню.

40
00:03:04,696 --> 00:03:07,823
Итак, заходите в файл test.ts.

41
00:03:07,823 --> 00:03:16,388
Один из способов, который мы можем настроить тест Angular CLI для запуска теста только для

42
00:03:16,388 --> 00:03:22,397
определенного компонента, это перейти к этой строке здесь,

43
00:03:22,397 --> 00:03:29,308
, который говорит const контекст, а затем изменить это на меню,

44
00:03:29,308 --> 00:03:36,088
вы можете увидеть /menu\ .component и spec.ts файл.

45
00:03:36,088 --> 00:03:41,615
Ранее это был просто файл/\ .spec.ts, что означало, что вы

46
00:03:41,615 --> 00:03:47,992
будете запускать все файлы спецификаций, которые находятся в исходной папке проекта.

47
00:03:47,992 --> 00:03:51,379
Итак, прямо сейчас, указав это здесь,

48
00:03:51,379 --> 00:03:57,225
мне интересно запустить тест только для файла спецификации компонента меню здесь.

49
00:03:57,225 --> 00:04:02,285
Теперь это я выясню, выполнив поиск в переполнении стека

50
00:04:02,285 --> 00:04:08,268
, где я нашел, что кто-то дал мне ответ на это,

51
00:04:08,268 --> 00:04:12,985
указывает на какой-то ресурс в угловом CLI, и поэтому

52
00:04:12,985 --> 00:04:18,393
, вот как я понял, что это способ ограничить

53
00:04:18,393 --> 00:04:23,019
тест тестовым файлом конкретного компонента.

54
00:04:23,019 --> 00:04:28,465
Поэтому после внесения изменений в файл test.ts, давайте сохраним изменения.

55
00:04:28,465 --> 00:04:32,622
Теперь мы попытаемся запустить наш тест на компоненте меню.

56
00:04:32,622 --> 00:04:37,198
Итак, как видите, в компоненте меню у нас уже есть файл menu

57
00:04:37,198 --> 00:04:42,051
компонент .spec.ts, который уже содержит код.

58
00:04:42,051 --> 00:04:45,631
Давайте попробуем запустить этот тест и посмотрим, что произойдет.

59
00:04:45,631 --> 00:04:50,650
Перейдя к терминалу, добавьте подсказку, введите ng test, и это

60
00:04:50,650 --> 00:04:56,644
приведет к Angular CLI, запустив тестирование компонента меню.

61
00:04:56,644 --> 00:04:59,875
Поэтому, когда вы набираете это и нажимаете Return,

62
00:04:59,875 --> 00:05:05,216
, тогда Angular CLI начнет компилировать ваше угловое приложение.

63
00:05:05,216 --> 00:05:10,129
Он также откроет окно браузера, в моем случае он откроет окно браузера Chrome

64
00:05:10,129 --> 00:05:13,874
, а затем использует это окно браузера для запуска теста.

65
00:05:13,874 --> 00:05:20,992
И вы видите, что в задней части у вас есть окно браузера Chrome, и

66
00:05:20,992 --> 00:05:25,980
все это полно красного цвета и целой кучи слов там.

67
00:05:25,980 --> 00:05:30,937
Та же информация также будет распечатана в окне консоли

68
00:05:30,937 --> 00:05:34,980
, и из этого я вижу, что мой тест не работал правильно.

69
00:05:34,980 --> 00:05:41,070
В моем тестовом файле есть что-то неправильно настроенное, поэтому мне нужно будет пойти и

70
00:05:41,070 --> 00:05:47,272
отредактировать свой тестовый файл, чтобы включить соответствующую поддержку для правильного запуска этого теста.

71
00:05:47,272 --> 00:05:51,425
Итак, давайте перейдем к файлу spec.ts компонента меню и

72
00:05:51,425 --> 00:05:54,430
затем подготовим наш тест соответственно.

73
00:05:54,430 --> 00:06:00,134
Теперь мы можем оставить тест ng работает прямо здесь.

74
00:06:00,134 --> 00:06:04,337
Каждый раз, когда вы вносите изменения в файл mini component.ts или

75
00:06:04,337 --> 00:06:07,169
файл mini component.spec.ts и

76
00:06:07,169 --> 00:06:12,078
сохраняете изменения, этот тест автоматически запускается в этот момент.

77
00:06:12,078 --> 00:06:17,011
Итак, давайте перейдем к файлу MenuComponent.spect.ts.

78
00:06:17,011 --> 00:06:21,882
Переходя к файлу MenuComponent.spect.ts,

79
00:06:21,882 --> 00:06:30,417
мы понимаем, что файл spect использует синтаксис Jasmine для описания теста.

80
00:06:30,417 --> 00:06:33,478
Итак, вы уже заметили, что здесь есть что-то

81
00:06:33,478 --> 00:06:38,118
, которое начинается с описания, а затем есть функция, определенная там.

82
00:06:38,118 --> 00:06:43,174
Так вот что я имел в виду, когда говорил о синтаксисе Jasmine ранее.

83
00:06:43,174 --> 00:06:47,961
А также, если вы прокрутите вниз, вы увидите его или около того там.

84
00:06:47,961 --> 00:06:53,922
И кроме того, вы увидите что-то под названием beforeEach, здесь.

85
00:06:53,922 --> 00:06:59,594
Давайте рассмотрим этот файл немного более подробно, чтобы понять, как настроен этот файл

86
00:06:59,594 --> 00:07:05,794
и как этот тест настроен в данном конкретном файле.

87
00:07:05,794 --> 00:07:10,843
Таким образом, в этом тестовом файле, вы заметите, что

88
00:07:10,843 --> 00:07:17,979
мы импортируем здесь набор классов из Angular Core тестирования.

89
00:07:17,979 --> 00:07:22,874
Таким образом, этот модуль позволяет обеспечить поддержку тестирования

90
00:07:22,874 --> 00:07:29,603
вашего углового приложения и позволяет вам разработать тест для вашего компонента.

91
00:07:29,603 --> 00:07:33,304
Таким образом, вы видите, что я импортирую async и

92
00:07:33,304 --> 00:07:39,105
ComponentFixture и TestBed из этой тестовой библиотеки.

93
00:07:39,105 --> 00:07:40,955
Я собираюсь назвать это библиотекой тестирования.

94
00:07:40,955 --> 00:07:44,783
Также вы видите, что MenuComponent также импортируется здесь.

95
00:07:44,783 --> 00:07:47,220
Теперь, как только мы поймем эти два,

96
00:07:47,220 --> 00:07:51,788
давайте пройдем по коду, чтобы понять, что мы пытаемся сделать здесь.

97
00:07:51,788 --> 00:07:56,358
Итак, здесь, как вы ожидаете, это описание здесь

98
00:07:56,358 --> 00:08:02,330
указывает, что эта конкретная функция описывает,

99
00:08:02,330 --> 00:08:08,129
Жасмин тест, который мы указываем для нашего углового приложения.

100
00:08:08,129 --> 00:08:11,056
Итак, когда вы посмотрите на описание здесь,

101
00:08:11,056 --> 00:08:15,181
вы увидите, что это включает в себя весь этот код здесь.

102
00:08:15,181 --> 00:08:19,950
Таким образом, это часть одного набора тестов, которые мы запускаем, наш компонент меню

103
00:08:19,950 --> 00:08:21,670
.

104
00:08:21,670 --> 00:08:26,670
Так что внутри описания вы увидите, что здесь есть строка.

105
00:08:26,670 --> 00:08:32,120
Это определяет этот конкретный набор тестов, которые вы здесь выполняете.

106
00:08:32,120 --> 00:08:34,130
Итак, он говорит в компоненте меню.

107
00:08:34,130 --> 00:08:36,770
Таким образом, здесь вы можете указать любую строку, которую вы хотите.

108
00:08:36,770 --> 00:08:39,930
Вы можете использовать это как описание, чтобы

109
00:08:39,930 --> 00:08:43,610
указать, что делает этот конкретный набор тестов.

110
00:08:43,610 --> 00:08:46,930
Так вот, я останусь с тем, что раньше.

111
00:08:46,930 --> 00:08:49,380
Мы пытаемся протестировать компонент меню.

112
00:08:49,380 --> 00:08:53,320
И после этого вы видите, что здесь мы указываем функцию addo.

113
00:08:53,320 --> 00:08:57,036
В рамках этой функции addo мы собираемся построить тест.

114
00:08:57,036 --> 00:09:00,700
Для нашего MenuComponent здесь.

115
00:09:00,700 --> 00:09:05,670
Таким образом, после этого вы увидите, что мы объявляем переменную с именем компонента,

116
00:09:05,670 --> 00:09:08,080
которая имеет тип MenuComponent.

117
00:09:08,080 --> 00:09:11,950
Теперь и тогда, мы также объявляем переменную арматуры,

118
00:09:11,950 --> 00:09:14,140
, которая имеет тип ComponentFixture.

119
00:09:15,390 --> 00:09:19,060
Который имеет тип MenuComponent.

120
00:09:19,060 --> 00:09:21,180
Почему это интересно?

121
00:09:21,180 --> 00:09:24,450
Теперь, в рамках нашего углового приложения,

122
00:09:24,450 --> 00:09:27,130
у нас есть MenuComponent, который мы уже разработали.

123
00:09:27,130 --> 00:09:29,990
Итак, в этом тестовом файле

124
00:09:29,990 --> 00:09:35,310
мы собираемся создать, что MenuComponent с помощью углового TestBed,

125
00:09:35,310 --> 00:09:38,110
, а затем мы собираемся провести тесты на MenuComponent.

126
00:09:38,110 --> 00:09:45,760
Таким образом, мы собираемся изолировать MenuComponent, а затем провести модульные тесты для этого конкретного компонента.

127
00:09:45,760 --> 00:09:50,470
Теперь, это где угловые утилиты тестирования

128
00:09:50,470 --> 00:09:54,900
, которые поставляются с поддержкой TestBed.

129
00:09:54,900 --> 00:09:58,890
TestBed позволяет мне настроить среду, в которой

130
00:09:58,890 --> 00:10:01,280
я могу проверить свой угловой компонент.

131
00:10:01,280 --> 00:10:04,935
Итак, здесь вы видите, что мы говорим TestBed и

132
00:10:04,935 --> 00:10:11,049
, а затем вызываем метод модуля настройки тестирования класса TestBed здесь.

133
00:10:11,049 --> 00:10:14,233
И внутри этого модуля тестирования конфигурации

134
00:10:14,233 --> 00:10:19,406
вы можете объявить кучу вещей, и вы увидите, что я добавляю больше здесь.

135
00:10:19,406 --> 00:10:24,296
Это действует точно так же, как конфигурация модуля NG

136
00:10:24,296 --> 00:10:27,714
, что вы делаете для нашего модуля там.

137
00:10:27,714 --> 00:10:30,950
Таким образом, вся информация, которая вам нужна для

138
00:10:30,950 --> 00:10:35,375
настройки MenuComponent, будет объявлена здесь.

139
00:10:35,375 --> 00:10:40,022
Таким образом, часть модели NG, которую вы видели в модуле приложения,

140
00:10:40,022 --> 00:10:45,999
аналогичный синтаксис может быть использован здесь, чтобы объявить поддержку

141
00:10:45,999 --> 00:10:49,690
тестирования MenuComponent здесь.

142
00:10:49,690 --> 00:10:55,849
А также после этого вы увидите эту функцию, вызываемую compileComponents.

143
00:10:55,849 --> 00:11:00,205
Таким образом, этот метод будет скомпилировать MenuComponent и

144
00:11:00,205 --> 00:11:03,427
сделать его готовым для выполнения тестирования.

145
00:11:03,427 --> 00:11:08,852
Обратите внимание также, что все это, эта функция здесь,

146
00:11:08,852 --> 00:11:14,250
заключена внутри чего-то, называемого асинхронным здесь.

147
00:11:14,250 --> 00:11:16,548
Теперь, зачем нам эта асинхронная?

148
00:11:16,548 --> 00:11:21,315
Теперь, потому что подготовка компонентов с помощью этого метода

149
00:11:21,315 --> 00:11:25,711
compileComponents занимает некоторое время.

150
00:11:25,711 --> 00:11:30,643
И пока это не будет завершено, мы не можем продолжать испытания.

151
00:11:30,643 --> 00:11:34,583
Таким образом, используя асинхронный модуль, мы по существу указываем, что

152
00:11:34,583 --> 00:11:39,432
я собираюсь ждать, пока все это закончится, прежде чем двигаться вперед.

153
00:11:39,432 --> 00:11:42,107
Таким образом, асинхронный модуль, как вы видите,

154
00:11:42,107 --> 00:11:47,690
обертывает тестовую функцию внутри асинхронной тестовой зоны.

155
00:11:47,690 --> 00:11:52,510
Итак, это означает, что этот тест автоматически завершится

156
00:11:52,510 --> 00:11:56,830
, когда будут выполнены все асинхронные вызовы внутри этой зоны.

157
00:11:56,830 --> 00:12:03,755
Так вот что делает использование асинхронного, что у нас здесь.

158
00:12:03,755 --> 00:12:08,206
Итак, это означает, что вы можете использовать эту функцию синхронизации,

159
00:12:08,206 --> 00:12:14,442
либо в перед каждым, либо в нем также, поэтому в нем, наша декларация.

160
00:12:14,442 --> 00:12:20,032
Поэтому, когда вы увидите внутри него также, вы увидите, что вы можете использовать асинхронную.

161
00:12:20,032 --> 00:12:24,160
Поэтому, если у вас есть какие-либо операции, которые выполняются асинхронно.

162
00:12:24,160 --> 00:12:29,500
Тогда вам нужно дождаться завершения этих операций, чтобы этот тест завершился.

163
00:12:29,500 --> 00:12:33,996
Так, например, если вы вызываете службу и ожидаете, пока

164
00:12:33,996 --> 00:12:37,070
служба вернет значение тогда.

165
00:12:37,070 --> 00:12:41,997
Все, что нужно завершить, прежде чем вы сможете продолжить.

166
00:12:41,997 --> 00:12:48,603
Таким образом, они включены с помощью этой асинхронной, чтобы окружить эту функцию здесь.

167
00:12:48,603 --> 00:12:53,726
Теперь, кроме того, второй beforeEach, теперь мы разделили

168
00:12:53,726 --> 00:12:59,592
это на два отдельных перед каждым здесь, потому что мы хотим это завершить.

169
00:12:59,592 --> 00:13:04,592
И эта compileComponents займет определенное количество времени,

170
00:13:04,592 --> 00:13:09,000
особенно если ваш компонент использует внешний шаблон,

171
00:13:09,000 --> 00:13:11,570
, как мы делаем в нашем MenuComponent.

172
00:13:11,570 --> 00:13:16,850
Таким образом, требуется некоторое время для внешнего шаблона, чтобы подготовиться к

173
00:13:16,850 --> 00:13:19,430
мое тестирование, чтобы продолжить.

174
00:13:19,430 --> 00:13:22,210
Итак, нам нужно подождать, пока все это закончится.

175
00:13:22,210 --> 00:13:25,634
Так вот почему после того, как это будет завершено,

176
00:13:25,634 --> 00:13:30,449
то мы доберемся до второй части, где мы собираемся

177
00:13:30,449 --> 00:13:35,710
получить некоторые ссылки на некоторые значения из тестового стенда.

178
00:13:35,710 --> 00:13:40,752
Теперь, что это за функция beforeEach, которую вы здесь делаете?

179
00:13:40,752 --> 00:13:45,718
То, что beforeEach означает, что все, что вы объявите внутри здесь,

180
00:13:45,718 --> 00:13:49,313
эта функция будет выполняться beforeEach тест,

181
00:13:49,313 --> 00:13:53,012
, который вы собираетесь указать позже при его использовании.

182
00:13:53,012 --> 00:13:57,734
Таким образом, используя это beforeEach, вы можете настроить начальную конфигурацию

183
00:13:57,734 --> 00:14:02,253
для вашего теста, чтобы продолжить работу.

184
00:14:02,253 --> 00:14:05,923
Таким образом, это означает, что здесь, мы настраиваем наш TestBed,

185
00:14:05,923 --> 00:14:10,330
готовит наш компонент меню, а затем настраиваем несколько вещей для

186
00:14:10,330 --> 00:14:14,752
нашего компонента меню, прежде чем мы приступим к проведению теста.

187
00:14:14,752 --> 00:14:19,292
Таким образом, для каждого теста, который вы собираетесь указать, используя его здесь,

188
00:14:19,292 --> 00:14:23,428
перед каждым, что вы укажете в этом перед каждым,

189
00:14:23,428 --> 00:14:26,692
будет выполняться до того, как тест будет проведен.

190
00:14:26,692 --> 00:14:30,008
Итак, как вы видите, я готовлю TestBed.

191
00:14:30,008 --> 00:14:34,980
Затем я получу доступ к приспособления.

192
00:14:34,980 --> 00:14:39,143
Поэтому я использую TestBed, я говорю createComponent и MenuComponent.

193
00:14:39,143 --> 00:14:43,782
Таким образом, это вернет мне ссылку на MenuComponent, который

194
00:14:43,782 --> 00:14:47,215
я создаю в моем тестовом скрипте здесь, а затем получите ссылку на это, потому что мне понадобится ссылка на

195
00:14:47,215 --> 00:14:57,178
, чтобы сделать некоторые манипуляции с этим компонентом там.

196
00:14:57,178 --> 00:15:02,608
Кроме того, из прибора я получаю доступ к экземпляру компонента

197
00:15:02,608 --> 00:15:07,324
, который создается моим компонентным приспособлением здесь.

198
00:15:07,324 --> 00:15:12,828
Итак, как вы можете видеть, компонентный прибор типа MenuComponent и

199
00:15:12,828 --> 00:15:18,799
, затем вызывающий componentInstance, дает мне доступ к этому конкретному компоненту меню

200
00:15:18,799 --> 00:15:25,259
, который я создал внутри TestBed для проведения модульных тестов.

201
00:15:25,259 --> 00:15:30,004
Теперь, после этого мы называем это detectChanges.

202
00:15:30,004 --> 00:15:35,482
Теперь это означает, что это будет продолжаться только после завершения всех изменений

203
00:15:35,482 --> 00:15:40,254
, а затем признать, что изменения завершены.

204
00:15:40,254 --> 00:15:45,686
Таким образом, это вызовет цикл обнаружения изменений для этого компонента.

205
00:15:45,686 --> 00:15:50,323
Таким образом, это означает, что это гарантирует, что вы сделали какие-либо изменения

206
00:15:50,323 --> 00:15:54,086
раньше, все изменения обнаружены и

207
00:15:54,086 --> 00:16:00,170
все стабилизируется, прежде чем вы сможете продолжить свой тест.

208
00:16:00,170 --> 00:16:07,500
Теперь, после этого, мы будем использовать его для настройки нашего первого теста здесь.

209
00:16:07,500 --> 00:16:10,500
Каков первый тест, который мы здесь делаем?

210
00:16:10,500 --> 00:16:11,520
Первый тест,

211
00:16:11,520 --> 00:16:15,670
, что мы собираемся проверить, чтобы убедиться, что компонент был создан.

212
00:16:15,670 --> 00:16:21,848
Итак, внутри этого здесь я использую синтаксис Jasmin, и я говорю это.

213
00:16:21,848 --> 00:16:27,035
И тут вы можете дать описание в виде строки

214
00:16:27,035 --> 00:16:31,760
, чтобы указать, что этот тест на самом деле тестирует.

215
00:16:31,760 --> 00:16:33,640
Итак, мы говорим,

216
00:16:33,640 --> 00:16:37,540
мы тестируем, чтобы увидеть, был ли компонент создан или нет.

217
00:16:37,540 --> 00:16:40,810
Поэтому для этого я говорю, что это должно создать смысл, что

218
00:16:40,810 --> 00:16:44,610
эта настройка здесь должна была создать компонент правильно.

219
00:16:44,610 --> 00:16:49,350
Так вот почему внутри я использую этот метод, называемый ожидание.

220
00:16:49,350 --> 00:16:53,760
Таким образом, метод ожидания внутри здесь принимает значение здесь, а

221
00:16:53,760 --> 00:16:57,840
вы можете проверить, удовлетворяет ли это значение что-то.

222
00:16:57,840 --> 00:17:04,640
Итак, здесь мы говорим toBeTruthy, что означает, что эта конкретная ценность должна быть истинной.

223
00:17:04,640 --> 00:17:09,950
Это то, что задается этим методом, называемым здесь toBetruthy.

224
00:17:09,950 --> 00:17:15,010
Вы также можете сказать toBefalsy, что означает, что это должно оцениваться как ложное.

225
00:17:15,010 --> 00:17:15,873
Но в этом случае

226
00:17:15,873 --> 00:17:19,510
мы тестируем, чтобы убедиться, что компонент был создан правильно.

227
00:17:19,510 --> 00:17:24,000
Так вот почему мы говорим, что ожидаем от Бетрути здесь.

228
00:17:24,000 --> 00:17:28,877
Таким образом, это простой тест, который мы делаем, чтобы убедиться, что наш компонент

229
00:17:28,877 --> 00:17:32,404
правильно создается.

230
00:17:32,404 --> 00:17:37,713
Но, как мы понимаем, когда я запускаю этот тест, он работает неправильно.

231
00:17:37,713 --> 00:17:42,638
Давайте быстро взглянем и посмотрим, в чем проблема в рамках

232
00:17:42,638 --> 00:17:47,770
создания нашего компонента в окне консоли там.

233
00:17:47,770 --> 00:17:51,390
Возвращаясь к окну консоли, позвольте мне просто вернуться назад и

234
00:17:51,390 --> 00:17:54,840
посмотреть, где проблема.

235
00:17:54,840 --> 00:17:59,820
И я начинаю замечать, что это указывает на то, что, похоже,

236
00:17:59,820 --> 00:18:04,480
не распознает некоторые вещи, которые использует мой компонент.

237
00:18:04,480 --> 00:18:09,065
В частности, он говорит, что MdSpinach

238
00:18:09,065 --> 00:18:13,191
это то, что он не признает,

239
00:18:13,191 --> 00:18:17,330
MdGetGridList и несколько других вещей.

240
00:18:17,330 --> 00:18:21,289
Это сразу подсказывает мне, что мне нужно сделать еще несколько конфигураций

241
00:18:21,289 --> 00:18:26,170
в моем тестовом файле, прежде чем мой тест сможет работать правильно.

242
00:18:26,170 --> 00:18:30,994
Итак, вернемся к нашему файлу спецификации и внешим в него некоторые изменения.

243
00:18:30,994 --> 00:18:34,142
Возвращаясь к нашему файлу спецификации,

244
00:18:34,142 --> 00:18:40,182
из нашего воспоминания о том, как мы создали шаблон.

245
00:18:40,182 --> 00:18:44,865
Мы знаем, что в шаблоне у нас была ссылка маршрутизатора в шаблоне

246
00:18:44,865 --> 00:18:45,605
MenuComponent.

247
00:18:45,605 --> 00:18:50,325
Поэтому мне нужна поддержка маршрутизации, чтобы распознать эту ссылку маршрутизатора

248
00:18:50,325 --> 00:18:54,698
, которую мы использовали в файле MenuComponent.html.

249
00:18:54,698 --> 00:18:59,640
Так вот, где я собираюсь импортировать

250
00:18:59,640 --> 00:19:03,926
другую поддержку тестирования, предоставляемую

251
00:19:03,926 --> 00:19:09,199
называется RouterTestingModule,

252
00:19:09,199 --> 00:19:18,615
, который доступен из библиотеки Angular/router/testing здесь.

253
00:19:18,615 --> 00:19:24,135
Таким образом, этот модуль тестирования маршрутизатора позволит мне настроить некоторые аспекты моего маршрутизатора.

254
00:19:24,135 --> 00:19:28,235
Мы увидим, что способ использования этого немного отличается от модуля маршрутизатора

255
00:19:28,235 --> 00:19:30,195
, который мы использовали в нашем приложении.

256
00:19:30,195 --> 00:19:34,835
Таким образом, мы будем импортировать модуль тестирования маршрутизации, также вы обратите внимание

257
00:19:34,835 --> 00:19:39,640
, что мы используем некоторые анимации, и

258
00:19:39,640 --> 00:19:45,660
также используя компонент Angular материал в нашем шаблоне.

259
00:19:45,660 --> 00:19:49,410
Поэтому мне нужно импортировать

260
00:19:49,410 --> 00:19:57,079
модуль BrowserAnimationsModule в мой тестовый файл.

261
00:19:58,490 --> 00:20:05,070
Таким образом, это происходит из угловой/платформы/браузера.

262
00:20:05,070 --> 00:20:09,619
Теперь вы заметите, что нам нужно сделать это явно здесь просто потому, что

263
00:20:10,700 --> 00:20:16,960
в фактическом угловом приложении все это было в модуле приложения

264
00:20:16,960 --> 00:20:20,310
и так, что было доступно для компонентов.

265
00:20:20,310 --> 00:20:24,340
Прямо сейчас мы тестируем этот компонент, MenuComponent в изоляции, поэтому

266
00:20:24,340 --> 00:20:27,500
поэтому он не знает обо всех этих вещах, поэтому

267
00:20:27,500 --> 00:20:31,190
нам нужно явно указать все эти вещи здесь.

268
00:20:31,190 --> 00:20:38,569
Поэтому я буду импортировать это из анимации браузера платформы IM здесь.

269
00:20:38,569 --> 00:20:43,358
Таким образом angular.platform.browser анимации импорта браузера анимации

270
00:20:43,358 --> 00:20:44,220
модуль здесь.

271
00:20:44,220 --> 00:20:47,300
Позвольте мне включить модуль гибкого слоя, поэтому

272
00:20:47,300 --> 00:20:53,060
я буду включать Angular FlexLayout.

273
00:20:53,060 --> 00:20:58,525
Так что они необходимы, потому что мне нужны они в шаблоне,

274
00:20:58,525 --> 00:21:02,605
Я собираюсь также импортировать это блюдо из,

275
00:21:06,495 --> 00:21:09,348
Shared/блюдо, потому что, как вы увидите позже,

276
00:21:09,348 --> 00:21:14,125
Мне нужно настроить, A,

277
00:21:20,002 --> 00:21:26,070
DishService, потому что мой MenuComponent

278
00:21:26,070 --> 00:21:31,033
зависит от DishService так

279
00:21:31,033 --> 00:21:35,170
мне нужно, что также на месте.

280
00:21:35,170 --> 00:21:39,170
Хотя вы увидите, что я собираюсь остановить это.

281
00:21:39,170 --> 00:21:44,860
Я объясню это за короткое время, а также мне нужно импортировать еще несколько вещей.

282
00:21:44,860 --> 00:21:47,410
Я буду импортировать БЛЮДИ из,

283
00:21:48,530 --> 00:21:53,260
вы помните, что мы используем эту константу под названием DISHES

284
00:21:56,870 --> 00:22:01,640
, что мы экспортировали из файла shared/dishes.ts.

285
00:22:01,640 --> 00:22:05,650
Мне это понадобится, чтобы настроить еще несколько вещей.

286
00:22:05,650 --> 00:22:09,702
Я также собираюсь импортировать baseURL.

287
00:22:11,343 --> 00:22:19,105
Который я объявил в файле URL-адреса Shared/base

288
00:22:21,057 --> 00:22:23,368
.

289
00:22:23,368 --> 00:22:28,692
А также, мне нужно импортировать

290
00:22:28,692 --> 00:22:33,294
Наблюдаемый из,

291
00:22:35,992 --> 00:22:41,319
rxjs, косая черта, Потому что я

292
00:22:41,319 --> 00:22:47,220
также будет использовать Observable немного позже, когда я настраиваю несколько вещей.

293
00:22:47,220 --> 00:22:50,806
Так что теперь я импортировал все эти вещи.

294
00:22:50,806 --> 00:22:56,157
Спустившись в конфигурацию TestBed, вы видите, что эта

295
00:22:56,157 --> 00:23:02,813
часть точно похожа на декоратор модуля движка, который у нас есть в модуле приложения.

296
00:23:02,813 --> 00:23:07,450
Так что здесь я также могу использовать импорт просто

297
00:23:07,450 --> 00:23:11,000
, как я сделал с модулем движка.

298
00:23:11,000 --> 00:23:16,900
И в рамках импорта я собираюсь импортировать модуль BrowserAnimation

299
00:23:16,900 --> 00:23:21,765
, потому что это то, что я требую, а затем

300
00:23:21,765 --> 00:23:25,090
также импортировать модуль FlexLayout.

301
00:23:26,660 --> 00:23:32,690
А также RouterTestingModule, потому что

302
00:23:32,690 --> 00:23:36,540
мне понадобится RouterTestingModule для настройки нескольких вещей.

303
00:23:36,540 --> 00:23:40,705
Теперь, когда вы используете RouterTestingModule, вам нужно использовать этот метод

304
00:23:40,705 --> 00:23:46,950
calledwithRoutes вместо использования forRoot, как мы использовали с модулем маршрутизатора здесь.

305
00:23:46,950 --> 00:23:52,400
Таким образом, в этом withRoutes вы можете указать некоторые маршруты

306
00:23:52,400 --> 00:23:58,460
по умолчанию, которые вам нужны для вашего конкретного приложения здесь.

307
00:23:58,460 --> 00:24:03,737
Я просто собираюсь настроить только один путь здесь,

308
00:24:03,737 --> 00:24:09,359
, и этого достаточно для меня для тестирования этого модуля здесь.

309
00:24:09,359 --> 00:24:14,497
Поэтому я просто собираюсь сказать путь: «меню»,

310
00:24:14,497 --> 00:24:19,021
и компонент: MenuComponent.

311
00:24:19,021 --> 00:24:24,235
Поскольку шаблоны MenuComponent используют определенные компоненты материалов,

312
00:24:24,235 --> 00:24:26,523
давайте продолжим и импортировать их.

313
00:24:26,523 --> 00:24:35,263
Таким образом, мы будем импортировать MatGridListModule

314
00:24:35,263 --> 00:24:45,034
из @angular /materal/grid-list и

315
00:24:45,034 --> 00:24:54,033
также MatProgressSpinnerModule из

316
00:24:54,033 --> 00:25:03,747
@angular /материал/Прогресс-спиннер.

317
00:25:04,327 --> 00:25:09,123
И как только мы их импортировали, тогда давайте продолжим и

318
00:25:09,123 --> 00:25:13,322
включим их в импорт ниже.

319
00:25:13,322 --> 00:25:19,568
Итак, давайте добавим в MatGridListModule и MatProgressSpinnerModule.

320
00:25:19,568 --> 00:25:23,047
И это все, что мне нужно для

321
00:25:23,047 --> 00:25:28,997
этот конкретный импорт должен быть настроен здесь.

322
00:25:28,997 --> 00:25:34,422
Таким образом, наряду с импортом, у нас есть объявления, где у меня есть

323
00:25:34,422 --> 00:25:41,067
MenuComponent, который используется здесь, я также могу настроить поставщиков здесь.

324
00:25:41,067 --> 00:25:43,295
Поэтому мне нужно настроить провайдеров здесь.

325
00:25:43,295 --> 00:25:47,998
Теперь это то, где мы собираемся

326
00:25:47,998 --> 00:25:52,898
, чтобы создать несколько заглушек здесь, поэтому

327
00:25:52,898 --> 00:25:58,779
я скажу предоставить: DishService.

328
00:25:58,779 --> 00:26:02,825
Теперь, DishService, который мы будем использовать здесь, не будет настоящим

329
00:26:02,825 --> 00:26:03,713
DishService.

330
00:26:03,713 --> 00:26:08,422
Когда вы тестируете компонент, вы не хотите использовать реальный сервис.

331
00:26:08,422 --> 00:26:19,262
Вместо этого вы рискуете убирать службу, а затем использовать заглушку DishService, которую я собираюсь назвать как dishServiceStub.

332
00:26:19,262 --> 00:26:27,040
Так я скажу, useValue: dishServiceStub.

333
00:26:27,040 --> 00:26:32,018
Таким образом, это будет функция заглушки, которую я буду использовать в порядке

334
00:26:32,018 --> 00:26:34,904
, чтобы отметить DishService здесь.

335
00:26:34,904 --> 00:26:38,272
Так что это то, что я собираюсь использовать.

336
00:26:38,272 --> 00:26:42,776
А также второй, который я собираюсь использовать

337
00:26:42,776 --> 00:26:47,455
, является BaseURL,

338
00:26:47,455 --> 00:26:54,040
, который я собираюсь использовать значение в качестве baseURL

339
00:26:54,040 --> 00:26:59,951
, который мы уже импортировали ранее.

340
00:26:59,951 --> 00:27:06,280
Итак, теперь, с этим, я фактически сконфигурировал свой тестовый модуль,

341
00:27:06,280 --> 00:27:17,160
, поэтому обратите внимание, что способ, которым мы указываем это, точно так же, как мы указываем декоратор модуля NG для нашего модуля приложения.

342
00:27:17,160 --> 00:27:22,250
И здесь мы только настраиваем те, которые требуются MenuComponent, поэтому

343
00:27:22,250 --> 00:27:27,890
у меня нет других, которые мы используем в самом модуле приложения.

344
00:27:27,890 --> 00:27:32,220
Так вот как мы будем настраивать модуль тестирования.

345
00:27:32,220 --> 00:27:36,600
Теперь одна вещь не хватает, это dishServiceStub.

346
00:27:36,600 --> 00:27:41,718
Итак, что я собираюсь сделать, это реализовать функцию здесь и

347
00:27:41,718 --> 00:27:47,283
вызов, который позволит dishServiceStub

348
00:27:47,283 --> 00:27:53,072
быть простым объектом JavaScript здесь,

349
00:27:53,072 --> 00:27:59,973
, который я собираюсь позволить ему действовать в

350
00:27:59,973 --> 00:28:10,679
месте реальной службы.

351
00:28:10,679 --> 00:28:13,067
Мы можем заглушить такие услуги, как это видно здесь.

352
00:28:13,067 --> 00:28:17,807
Итак, внутри здесь я просто собираюсь

353
00:28:17,807 --> 00:28:21,846
предоставить простую функцию,

354
00:28:21,846 --> 00:28:26,412
функцию getDishes здесь,

355
00:28:26,412 --> 00:28:33,803
которая вернет Observable типа массива Dish.

356
00:28:33,803 --> 00:28:38,133
Так что именно так было настроено возвращаемое значение.

357
00:28:38,133 --> 00:28:42,776
И я собираюсь вернуть

358
00:28:42,776 --> 00:28:48,819
наблюдаемые БЛЮДИ здесь.

359
00:28:48,819 --> 00:28:51,692
Таким образом, используя эту функцию заглушки здесь,

360
00:28:51,692 --> 00:28:56,349
то, что я делаю, я вытаскиваю dishService, а затем настраиваю его с помощью этого метода, который мне нужен для

361
00:28:56,349 --> 00:29:00,906
мой кеш, говоря getDises, и когда этот метод вызывается,

362
00:29:00,906 --> 00:29:09,355
я просто собираюсь вернуть это значение.

363
00:29:09,355 --> 00:29:11,334
Постоянная БЛЮДИ, вот.

364
00:29:11,334 --> 00:29:16,740
Таким образом, теперь вы можете видеть, как я контролирую то, что поставляется

365
00:29:16,740 --> 00:29:23,449
компоненту из заглушки dishService, который я только что создал здесь.

366
00:29:23,449 --> 00:29:27,333
Так вот как вы будете создавать заглушки для вашего dishService.

367
00:29:27,333 --> 00:29:30,570
Другой подход, который мы можем использовать для

368
00:29:30,570 --> 00:29:35,910
случаев, когда мы используем услуги называется использование шпиона.

369
00:29:37,300 --> 00:29:42,840
Jasmine поддерживает что-то под названием Spy, что позволяет нам шпионить за вызовами функций,

370
00:29:42,840 --> 00:29:47,040
, а затем захватывать вызовы функций, а затем реагировать на эти вызовы функции.

371
00:29:47,040 --> 00:29:52,981
Так что это еще один способ использовать поддельный сервис вместо реального сервиса.

372
00:29:52,981 --> 00:29:59,778
Таким образом, теперь мы можем контролировать то, что поставляется в наш компонент меню.

373
00:29:59,778 --> 00:30:04,410
Так что после этих изменений мы собираемся

374
00:30:04,410 --> 00:30:09,424
спуститься в наш перед каждым методом здесь.

375
00:30:09,424 --> 00:30:14,172
После асинхронного, то, что я собираюсь сделать

376
00:30:14,172 --> 00:30:19,085
, я получу dishService.

377
00:30:19,085 --> 00:30:24,187
Итак, вы видите, что я использую тестовую стенду, а затем использую метод get

378
00:30:24,187 --> 00:30:31,415
тестового стенда, чтобы получить информацию о DishService, которая была создана здесь,

379
00:30:31,415 --> 00:30:37,819
из этой конкретной заглушки, которую мы объявили здесь, в провайдерах.

380
00:30:39,520 --> 00:30:43,140
Таким образом, это дает мне ссылку на DishService, так что

381
00:30:43,140 --> 00:30:47,870
, что я могу вызвать методы DishService везде, где мне нужно здесь.

382
00:30:47,870 --> 00:30:52,453
Итак, после внесения этих изменений, давайте сохраним изменения и

383
00:30:52,453 --> 00:30:57,679
затем посмотрим, как наш угловой интерфейс командной строки будет выполнять этот тест после этих изменений,

384
00:30:57,679 --> 00:31:02,369
и будет ли наш тест успешным в данный момент или нет.

385
00:31:02,369 --> 00:31:04,462
Так что давайте сохраним изменения.

386
00:31:04,462 --> 00:31:09,412
В тот момент, когда вы сохраните изменения, вы заметите, что ваш тест NG

387
00:31:09,412 --> 00:31:13,060
снова начнет повторный запуск нашего теста.

388
00:31:13,060 --> 00:31:16,310
Таким образом, он будет скомпилировать приложение, а затем повторно запустить тест.

389
00:31:16,310 --> 00:31:21,450
И вуаля, наш тест успешно прошел после

390
00:31:22,540 --> 00:31:27,574
внесения изменений в наш файл component.spec.ts.

391
00:31:27,574 --> 00:31:33,270
Итак, наш первый тест, означающий, что теперь мы можем создать компонент меню

392
00:31:33,270 --> 00:31:37,950
из нашего меню, component.spec.ts файл там.

393
00:31:37,950 --> 00:31:40,990
Таким образом, наша тестовая установка работает правильно.

394
00:31:40,990 --> 00:31:48,460
Теперь я могу войти и сделать более интенсивные тесты в моем тестовом компоненте.

395
00:31:48,460 --> 00:31:53,790
Возвращаясь к этому файлу компонента.spec меню, позвольте мне добавить еще один тест.

396
00:31:53,790 --> 00:32:00,420
Теперь вы видите, что, поскольку у меня теперь есть установленная служба здесь

397
00:32:00,420 --> 00:32:07,292
, которая возвращает это значение BISHES, я теперь могу воспользоваться моим блюдом,

398
00:32:07,292 --> 00:32:11,290
, на который я получил ссылку здесь.

399
00:32:11,290 --> 00:32:15,934
Внутри был перед каждым, а затем вызовите метод getDises и

400
00:32:15,934 --> 00:32:18,830
, тогда я смогу получить значение.

401
00:32:18,830 --> 00:32:23,800
И это будет доступно в моем компоненте меню, который я только что создал.

402
00:32:23,800 --> 00:32:28,615
Таким образом, мой MenuComponent должен теперь получить доступ к постоянному блюду, что

403
00:32:28,615 --> 00:32:32,856
был поставлен обратно к нему через эту остановку обслуживания посуды.

404
00:32:32,856 --> 00:32:37,608
Поэтому теперь я могу проверить, правильно ли переменная блюд внутри моего

405
00:32:37,608 --> 00:32:43,642
MenuComponent получает значения или нет.

406
00:32:43,642 --> 00:32:46,982
Итак, зайдя, позвольте мне создать еще один тест здесь.

407
00:32:46,982 --> 00:32:52,413
Так что я создаю тест здесь, С ним,

408
00:32:52,413 --> 00:32:57,228
, как вы видели ранее, так же, как и предыдущий.

409
00:32:57,228 --> 00:33:03,447
Этот второй тест я собираюсь назвать, что как это и

410
00:33:03,447 --> 00:33:09,460
блюда, Пункты должны быть 4,

411
00:33:09,460 --> 00:33:14,605
потому что блюда константа, что мы объявили в

412
00:33:14,605 --> 00:33:21,562
shared.diss файл имеет четыре блюда в константе там.

413
00:33:21,562 --> 00:33:26,232
Поэтому, когда моя переменная блюд внутри моего файла MenuComponent или

414
00:33:26,232 --> 00:33:31,018
ts инициализируется, вызвав dishservice.

415
00:33:31,018 --> 00:33:34,632
Он должен был получить эти четыре блюда и

416
00:33:34,632 --> 00:33:37,970
был инициализирован этими четырьмя блюдами.

417
00:33:37,970 --> 00:33:43,182
Так что я собираюсь провести несколько тестов на эту переменную блюд там.

418
00:33:43,182 --> 00:33:46,492
Итак, как мне получить доступ к переменной посуды здесь?

419
00:33:46,492 --> 00:33:50,431
Так что я бы сказал, что блюда должны быть 4, и

420
00:33:50,431 --> 00:33:54,171
тогда я объявлю функцию стрелки здесь.

421
00:33:54,171 --> 00:33:59,453
И внутри этой функции стрелки я собираюсь указать

422
00:33:59,453 --> 00:34:04,024
различные тесты, которые я собираюсь провести.

423
00:34:04,024 --> 00:34:10,348
Так что здесь я собираюсь теперь сказать ожидание (компонент.,

424
00:34:10,348 --> 00:34:15,378
и обратите внимание, что он автоматически дает мне

425
00:34:15,378 --> 00:34:22,290
доступ к этому свойству блюд из MenuComponent.

426
00:34:22,290 --> 00:34:27,400
Поэтому я могу сказать, что component.diss, а затем я могу проверить

427
00:34:27,400 --> 00:34:34,053
, чтобы увидеть, что длина этого массива объектов JavaScript должны быть.

428
00:34:34,053 --> 00:34:38,367
Так вот, где я использую метод Jasmine toBe здесь.

429
00:34:38,367 --> 00:34:41,517
И тогда я могу указать значение 4,

430
00:34:41,517 --> 00:34:46,347
, потому что я поставлял 4 блюда в моей тарелки постоянной

431
00:34:46,347 --> 00:34:51,284
, что я объявил в файле shared.diss.

432
00:34:51,284 --> 00:34:54,709
Так что это первый тест, который я собираюсь провести,

433
00:34:54,709 --> 00:34:56,867
это должно оказаться правдой.

434
00:34:56,867 --> 00:35:01,096
В противном случае установка работала неправильно, поэтому

435
00:35:01,096 --> 00:35:05,120
я знаю, что мой код работает неправильно.

436
00:35:05,120 --> 00:35:09,891
Но я точно знаю, что этот тест должен работать правильно.

437
00:35:09,891 --> 00:35:11,547
Если вы хотите быть уверены,

438
00:35:11,547 --> 00:35:16,011
давайте сохраним изменения, а затем пойдем и посмотрим, как работает наш тест.

439
00:35:16,011 --> 00:35:18,084
Идя на этот терминал,

440
00:35:18,084 --> 00:35:23,323
вы видите, что теперь мое приложение перекомпилируется, и тест запускается.

441
00:35:23,323 --> 00:35:27,941
И обратите внимание на все зелень в окне терминала.

442
00:35:27,941 --> 00:35:32,355
Он говорит, что выполнен 1 из 2 успеха, выполнен 2 из 2 успеха.

443
00:35:32,355 --> 00:35:36,021
Что означает, что оба моих теста прошли успешно.

444
00:35:36,021 --> 00:35:41,221
Если я смотрю на мой браузер, так что вы видите, что MenuComponent,

445
00:35:41,221 --> 00:35:44,031
оба теста успешны.

446
00:35:44,031 --> 00:35:46,189
Позвольте мне создать еще несколько и

447
00:35:46,189 --> 00:35:51,994
добавить их в этот набор второй группы тестов, которые я создаю там.

448
00:35:51,994 --> 00:35:58,106
Перейдя в файл menu_component_spec.ts, я добавлю еще один.

449
00:35:58,106 --> 00:36:05,535
Я скажу, что ожидаю компонента.,

450
00:36:05,535 --> 00:36:12,420
и я скажу блюда [1].

451
00:36:12,420 --> 00:36:16,105
Вспомните, что первое блюдо имя было,

452
00:36:18,858 --> 00:36:22,552
Так вот что я собираюсь проверить, блюда [1] .name.

453
00:36:22,552 --> 00:36:26,774
Так вот как я могу проверить, правильно ли он получает значения.

454
00:36:26,774 --> 00:36:28,431
Каковы все способы, которые я могу проверить?

455
00:36:28,431 --> 00:36:34,594
Если я поставлю точку там, это даст мне предложение о всех возможностях здесь.

456
00:36:34,594 --> 00:36:42,862
Так что я скажу, я также снова буду использовать метод toBe здесь.

457
00:36:42,862 --> 00:36:45,623
И затем второе название блюдо,

458
00:36:51,916 --> 00:36:55,779
Просто, что там, так что это второй заклинатель я собираюсь выполнить.

459
00:36:55,779 --> 00:36:59,819
Поэтому, если мой код работал правильно, то это также должно пройти.

460
00:36:59,819 --> 00:37:03,389
Точно так же позвольте мне добавить еще один здесь.

461
00:37:03,389 --> 00:37:06,072
Так что я скажу ожидать,

462
00:37:09,579 --> 00:37:16,457
Component.diss и я скажу 3.

463
00:37:16,457 --> 00:37:21,520
И здесь, рекомендуемый

464
00:37:21,520 --> 00:37:26,819
свойство должно быть Falsy.

465
00:37:26,819 --> 00:37:33,572
Что вы должны быть ложными, это не правда в данном случае, так что позвольте мне добавить еще один.

466
00:37:33,572 --> 00:37:35,748
Вы можете начать добавлять больше, если хотите,

467
00:37:35,748 --> 00:37:38,405
играть с ним, пока не будете удовлетворены.

468
00:37:38,405 --> 00:37:40,936
Так же делайте эти дополнения. Позвольте мне сохранить изменения, которые я сделал

469
00:37:40,936 --> 00:37:44,292
здесь, давайте пойдем и посмотрим, работает ли этот тест правильно.

470
00:37:44,292 --> 00:37:50,041
И возвращаясь к моему терминалу, вы видите, что мой тест снова работает.

471
00:37:50,041 --> 00:37:52,720
Вы видите, что оба теста были успешными,

472
00:37:52,720 --> 00:37:55,551
теперь я собираюсь заставить одну из этих вещей потерпеть неудачу.

473
00:37:55,551 --> 00:37:59,754
Так что я собираюсь пойти и изменить это на правду.

474
00:37:59,754 --> 00:38:03,950
Видите, это весело играть с кодом.

475
00:38:03,950 --> 00:38:08,111
Я собираюсь изменить это на правду, и я знаю, что этот тест потерпит неудачу.

476
00:38:08,111 --> 00:38:10,186
Так что давайте сохраним изменения.

477
00:38:10,186 --> 00:38:15,977
Взгляните на терминал, там вы видите, что тест потерпел неудачу.

478
00:38:15,977 --> 00:38:23,603
Вы видите здесь все это красное, что означает, что второй тест прошел неправильно.

479
00:38:23,603 --> 00:38:30,750
И если вы прокрутите назад, вы увидите, что этот конкретный тест потерпел неудачу,

480
00:38:30,750 --> 00:38:36,295
потому что где-то там внизу будет сказано, что это не так.

481
00:38:36,295 --> 00:38:42,119
Хорошо, смотрите это заявление здесь, в котором говорится, что ложное, чтобы быть правдой,

482
00:38:42,119 --> 00:38:44,378
, так вот почему это не удалось.

483
00:38:44,378 --> 00:38:47,978
Так что это не должно было быть правдой, но я сказал, что это должно быть правдой, и

484
00:38:47,978 --> 00:38:51,393
очевидно, тест ошибочен, поэтому тест потерпел неудачу.

485
00:38:51,393 --> 00:38:55,865
Так вот, как вы можете даже проверить, если тест терпит неудачу,

486
00:38:55,865 --> 00:38:59,086
, если вы попросили неправильные вещи также.

487
00:38:59,086 --> 00:39:04,107
Но опять же, позвольте мне вернуться и исправить это еще раз.

488
00:39:04,107 --> 00:39:09,068
Итак, возвращаясь к моему, File я изменю их

489
00:39:09,068 --> 00:39:13,529
обратно на falsy, потому что я хочу, чтобы этот тест работал правильно.

490
00:39:13,529 --> 00:39:15,517
Теперь мы еще не удовлетворены.

491
00:39:15,517 --> 00:39:20,117
Теперь в этом конкретном тесте я тестирую только блюда

492
00:39:20,117 --> 00:39:23,825
переменную, которая находится внутри моего MenuComponent.

493
00:39:23,825 --> 00:39:29,777
Как мне играть с самим шаблоном?

494
00:39:29,777 --> 00:39:35,454
Так вот, где нам нужна дополнительная помощь от Angular.

495
00:39:35,454 --> 00:39:40,216
Чтобы провести некоторые тесты на шаблоне, я собираюсь войти и

496
00:39:40,216 --> 00:39:42,972
вытащить еще пару импортов здесь.

497
00:39:42,972 --> 00:39:49,896
Таким образом, идем в мой верхней части этого файла, menu_component_spec.tsfile.

498
00:39:49,896 --> 00:39:55,105
Я собираюсь импортировать, Один

499
00:39:55,105 --> 00:40:00,594
больше называется By, который является методом.

500
00:40:00,594 --> 00:40:03,044
Вы увидите, как я использую это через некоторое время.

501
00:40:03,044 --> 00:40:10,855
Это должно быть импортировано из, Angular,

502
00:40:15,209 --> 00:40:18,863
/платформ-браузер.

503
00:40:18,863 --> 00:40:27,301
А также, я собираюсь импортировать еще один, который является элементом отладки.

504
00:40:27,301 --> 00:40:32,009
Элемент отладки позволяет мне получить доступ к DOM, так что

505
00:40:32,009 --> 00:40:37,040
, что я могу проводить тесты на элементах DOM напрямую.

506
00:40:37,040 --> 00:40:44,548
Так вот, где я собираюсь импортировать это, угловой код здесь, так что эти два.

507
00:40:44,548 --> 00:40:49,580
Поэтому добавьте в «By» и «DebugElement» к импорту, а затем

508
00:40:49,580 --> 00:40:54,947
, как только вы это сделаете, мы перейдем к коду здесь.

509
00:40:54,947 --> 00:40:59,338
И тогда мы добавим еще один тест, где мы собираемся перейти в DOM и

510
00:40:59,338 --> 00:41:01,690
получить один из элементов из документа.

511
00:41:01,690 --> 00:41:06,404
Так что я бы сказал это, так что еще один тест здесь,

512
00:41:06,404 --> 00:41:09,889
что будет делать этот тест?

513
00:41:09,889 --> 00:41:14,970
Для этого теста я укажу

514
00:41:14,970 --> 00:41:22,903
тест, как следует использовать посуду в шаблоне.

515
00:41:22,903 --> 00:41:25,838
Я просто случайным образом говорю что-то здесь,

516
00:41:25,838 --> 00:41:29,804
, потому что я просто хочу проверить, что переменная блюд,

517
00:41:29,804 --> 00:41:34,905
, независимо от того, что она делает доступным, используется в шаблоне правильно.

518
00:41:34,905 --> 00:41:38,412
Так что это часть, которую я настраиваю, а затем

519
00:41:38,412 --> 00:41:42,104
вторая часть - функция стрелки, и

520
00:41:42,104 --> 00:41:47,760
в рамках этой функции стрелки я собираюсь предоставить код для следующего теста.

521
00:41:47,760 --> 00:41:52,734
Таким образом, внутри этой функции стрелки я собираюсь сделать

522
00:41:52,734 --> 00:41:58,008
, я сначала вызову арматуру и

523
00:41:58,008 --> 00:42:00,880
, а затем обнаружу изменения.

524
00:42:00,880 --> 00:42:05,990
И после этого я скажу пусть де:,

525
00:42:12,226 --> 00:42:13,908
Является DebugElement.

526
00:42:13,908 --> 00:42:20,748
Через это я собираюсь получить доступ к DOM и

527
00:42:20,748 --> 00:42:26,566
, тогда элемент будет HTMLElement.

528
00:42:26,566 --> 00:42:33,243
Поэтому я хочу получить доступ к одному из HTMLElements из моего DOM.

529
00:42:33,243 --> 00:42:35,369
Итак, какой элемент я хочу?

530
00:42:35,369 --> 00:42:38,846
Поэтому, чтобы сделать это, я получу доступ к,

531
00:42:41,533 --> 00:42:48,138
DebugElement, сказав fixture и debugElement.

532
00:42:48,138 --> 00:42:54,933
Таким образом, это позволяет мне получить доступ к элементам из моего DOM здесь, так что debugElement.

533
00:42:54,933 --> 00:43:02,220
И тогда я могу запросить, а затем выбрать только те, которые будут мне интересны.

534
00:43:02,220 --> 00:43:08,690
Поэтому я собираюсь запросить, а затем я попрошу, используя By.

535
00:43:08,690 --> 00:43:15,908
Так что обратите внимание, где я использую By, который я включил, импортировав его.

536
00:43:15,908 --> 00:43:20,780
Таким образом, By поддерживает кучу метрик, с помощью которых я могу

537
00:43:20,780 --> 00:43:25,020
попросить получить доступ к определенным элементам в DOM.

538
00:43:25,020 --> 00:43:31,824
Итак, как вы можете видеть, он скажет мне, что я могу импортировать, и

539
00:43:31,824 --> 00:43:36,846
, тогда .css позволяет мне получить доступ

540
00:43:36,846 --> 00:43:43,018
для соответствия элементам с помощью данного селектора css.

541
00:43:43,018 --> 00:43:45,789
Итак, что такое селектор css, который я собираюсь использовать?

542
00:43:45,789 --> 00:43:50,503
Я знаю, что в DOM есть элемент h1, html-элемент в DOM и

543
00:43:50,503 --> 00:43:55,750
, который я собираюсь получить доступ к первому элементу h1 из DOM.

544
00:43:55,750 --> 00:44:00,764
И один из элементов h1 есть тот, который

545
00:44:00,764 --> 00:44:05,670
собирается отображать название каждого блюда там.

546
00:44:05,670 --> 00:44:10,459
Оглянитесь назад и вы видите, что внутри временной шкалы сетки, используя h1 и

547
00:44:10,459 --> 00:44:13,839
, что h1 содержит название блюда там.

548
00:44:13,839 --> 00:44:16,723
Поэтому я собираюсь получить это и

549
00:44:16,723 --> 00:44:21,198
, то я собираюсь получить элемент, а затем я бы сказал de,

550
00:44:21,198 --> 00:44:26,385
от элемента отладки, а затем я бы сказал nativeElement.

551
00:44:26,385 --> 00:44:31,572
И это дает мне доступ к элементу, конкретно в DOM

552
00:44:31,572 --> 00:44:37,873
, на который я ссылаюсь, и я выбрал, используя это заявление ранее.

553
00:44:37,873 --> 00:44:43,091
Поэтому, когда я запрашиваю DOM, а затем говорю, верните мне все

554
00:44:43,091 --> 00:44:48,964
те, которые используют тег h1 для элемента HTML.

555
00:44:48,964 --> 00:44:54,077
И я получаю доступ к этому, и я могу запросить и

556
00:44:54,077 --> 00:44:58,349
сказать ожидание (el.textContent).

557
00:44:58,349 --> 00:45:02,869
Поэтому я ищу контент внутри этого h1 в моем фиксированном контенте

558
00:45:02,869 --> 00:45:07,718
шаблона, а затем я скажу toContain.

559
00:45:07,718 --> 00:45:12,596
Так что это другой метод, toContain, это метод жасмина называется toContain.

560
00:45:12,596 --> 00:45:18,352
Это проверяет, содержит ли это определенное значение

561
00:45:18,352 --> 00:45:23,262
, а затем я проверю DISHES (0) .name.

562
00:45:23,262 --> 00:45:29,360
Итак, первое блюдо было создано в DOM и добавлено в DOM?

563
00:45:29,360 --> 00:45:33,981
Если мой шаблон работает правильно, то он должен присутствовать в DOM.

564
00:45:33,981 --> 00:45:38,626
Так что это то, что я собираюсь проверить, была ли сетка, соответствующая

565
00:45:38,626 --> 00:45:42,658
, создана и добавлена в DOM или нет.

566
00:45:42,658 --> 00:45:47,521
Поэтому я говорю BISHES (0) .name, и говорю в верхнем регистре.

567
00:45:47,521 --> 00:45:52,395
Напомним, что я использовал прописную трубу для отображения имени

568
00:45:52,395 --> 00:45:56,647
DISH, преобразовывая имя блюда в

569
00:45:56,647 --> 00:46:01,450
все прописные в сетке в компоненте меню.

570
00:46:01,450 --> 00:46:05,830
Так вот что я собираюсь проверить, хорошо, так что я просто проверяю

571
00:46:05,830 --> 00:46:07,200
только один из них.

572
00:46:07,200 --> 00:46:10,983
Вы можете выполнить многие из этих тестов, вы можете проверить

573
00:46:10,983 --> 00:46:16,016
BISHES (1) .name, а затем DISHES (2) .name и многое другое, если хотите.

574
00:46:16,016 --> 00:46:21,683
Я просто иллюстрирую один пример того, как вы получите доступ к элементам DOM и

575
00:46:21,683 --> 00:46:24,783
, а затем проверьте, что они содержат внутри.

576
00:46:24,783 --> 00:46:29,585
Так что это один тест, который я собираюсь провести здесь, поэтому позвольте мне сохранить изменения,

577
00:46:29,585 --> 00:46:32,930
, а затем посмотреть, правильно ли работает тест.

578
00:46:32,930 --> 00:46:35,951
Зайдите в этот терминал и когда тест проходит,

579
00:46:35,951 --> 00:46:41,039
вы видите, что мой первый тест был успешным, второй тест был успешным,

580
00:46:41,039 --> 00:46:44,635
и третий тест также был успешным, замечательным.

581
00:46:44,635 --> 00:46:48,374
Теперь позвольте мне сделать третий тест неудачей.

582
00:46:48,374 --> 00:46:52,273
Переходя к файлу menucomponentspec.ts,

583
00:46:52,273 --> 00:46:58,818
Я собираюсь удалить это в верхний регистр, а затем выполнить тот же тест.

584
00:46:58,818 --> 00:47:02,269
Вы увидите, что этот тест завершится неудачей, сохраните изменения.

585
00:47:02,269 --> 00:47:06,941
И когда тест пройдет, вы увидите, что третий тест потерпит неудачу.

586
00:47:06,941 --> 00:47:11,251
Потому что я заставляю его потерпеть неудачу, проверяя неправильную вещь там и

587
00:47:11,251 --> 00:47:13,894
там вы идете, третий тест не удался здесь.

588
00:47:13,894 --> 00:47:18,490
Так вот как вы можете проверить, правильно ли есть определенные вещи, которые

589
00:47:18,490 --> 00:47:22,471
должны быть там, или нет.

590
00:47:22,471 --> 00:47:28,360
Почему это дело, так что вы можете увидеть здесь, причина, почему этот тест не удался.

591
00:47:28,360 --> 00:47:34,750
Он ожидает, что это будет в DOM,

592
00:47:34,750 --> 00:47:40,670
, но вместо этого это то, что находится в DOM в элементе h1 в DOM.

593
00:47:40,670 --> 00:47:43,929
Так вот почему тест провалился здесь.

594
00:47:43,929 --> 00:47:47,718
Итак, снова возвращаясь назад, позвольте мне исправить ошибку и

595
00:47:47,718 --> 00:47:53,922
тогда, когда я перезапускаю тест, вы должны теперь увидеть, что тест проходит успешно.

596
00:47:53,922 --> 00:47:58,757
Возвращаясь к терминалу, вы увидите, что при запуске этого теста теперь он будет

597
00:47:58,757 --> 00:47:59,875
работать правильно.

598
00:48:03,610 --> 00:48:08,670
И вот вы идете, все три теста прошли моей заявкой.

599
00:48:08,670 --> 00:48:13,970
Также, глядя на браузер, можно увидеть, что три теста

600
00:48:13,970 --> 00:48:19,770
успешно были выполнены в файле шаблона компонентов меню и

601
00:48:19,770 --> 00:48:22,571
также в самом компоненте меню.

602
00:48:22,571 --> 00:48:28,398
Теперь, очевидно, это не обязательно самый всеобъемлющий тест, но

603
00:48:28,398 --> 00:48:32,407
я просто хотел дать вам вкус того, как вы пойдете

604
00:48:32,407 --> 00:48:37,398
о построении тестов в вашем угловом приложении.

605
00:48:37,398 --> 00:48:42,025
Если вы увлекаетесь, вы можете зайти во все файлы spec.ts, которые у вас есть и

606
00:48:42,025 --> 00:48:44,194
затем написать свой собственный тест для каждого и

607
00:48:44,194 --> 00:48:49,580
каждый из этих компонентов, используя знания, которые вы получили здесь.

608
00:48:49,580 --> 00:48:55,150
Также вы можете прочитать больше о тестировании в Angular документации и

609
00:48:55,150 --> 00:49:00,590
, а затем узнать больше о способах проведения тестов на вашем Angular приложении.

610
00:49:00,590 --> 00:49:05,190
Тестирование является полем само по себе, поэтому, если мне нужно научить вас все о

611
00:49:05,190 --> 00:49:10,410
тестировании, что будет прийти весь курс сам по себе для Angular.

612
00:49:10,410 --> 00:49:14,500
И в этом курсе я просто хотел дать вам вкус того, как

613
00:49:14,500 --> 00:49:17,820
вы будете проводить тестирование в своем Angular приложении.

614
00:49:17,820 --> 00:49:21,585
И это пример того, как мы можем настроить и

615
00:49:21,585 --> 00:49:27,441
провести модульный тест на одном из компонентов в нашем Angular приложении.

616
00:49:27,441 --> 00:49:33,901
Это хорошее время для вас, чтобы сделать хороший комментарий с тестом компонентов сообщения.

617
00:49:33,901 --> 00:49:37,750
[МУЗЫКА]