[МУЗЫКА]
Аромат жасмина из всех тех цветочных гирлянд
на храмовой улице, пролетающий по воздуху.
Какое оседающее чувство.
Должно быть хорошая карма из моей прошлой жизни.
Извините, где я был?
Я говорил с тобой об угловом тестировании, верно?
И мы будем использовать адаптацию кармы для нашего углового тестирования.
Так что давай займемся этим.
Одна хорошая вещь об использовании углового интерфейса командной строки заключается в том, что он настраивает все строительные леса для
вы автоматически включаете поддержку
тестирования вашего углового приложения.
Таким образом, вы заметите, что всякий раз, когда вы создаете компонент или
сервис вместе с файлами компонентов ts,
вы также заметите файл component.spect.tts
уже включен в ваши папки проекта.
А также, если вы перейдете к файлу package.json,
вы увидите, что уже есть поддержка углового тестирования, включенного там.
Поэтому, если вы перейдете в зависимости от dev, вы увидите, что ядро жасмина,
репортер жасмина, модули npm, связанные с кармой и
кармой, уже установлены в вашем угловом приложении
, которое является эшафот угловым CLI.
Итак, у нас есть все вещи и место для
нас, чтобы просто сделать наше тестирование для нашего углового приложения.
Итак, если вы посмотрите вокруг, вы увидите, что есть
файл с именем test.ts в вашей исходной папке,
, поэтому давайте откроем файл test.ts.
Вы также увидите, что здесь есть еще одна папка, называемая e2e.
Мы вернемся к этому в следующем упражнении.
Но в папке test.ts вы увидите, что здесь настроена поддержка кармы
.
Таким образом, войдя в этот файл test.ts, по умолчанию
при использовании угловой поддержки CLS для теста,
он будет запускать тесты для всех компонентов и услуг
, которые включены в ваше угловое приложение.
Теперь я собираюсь проиллюстрировать вам, как сделать тестирование для
одного конкретного компонента, menuComponent.
Поэтому я хочу ограничить себя только для использования файла.spec компонента меню и
для тестирования только компонента меню.
Итак, заходите в файл test.ts.
Один из способов, который мы можем настроить тест Angular CLI для запуска теста только для
определенного компонента, это перейти к этой строке здесь,
, который говорит const контекст, а затем изменить это на меню,
вы можете увидеть /menu\ .component и spec.ts файл.
Ранее это был просто файл/\ .spec.ts, что означало, что вы
будете запускать все файлы спецификаций, которые находятся в исходной папке проекта.
Итак, прямо сейчас, указав это здесь,
мне интересно запустить тест только для файла спецификации компонента меню здесь.
Теперь это я выясню, выполнив поиск в переполнении стека
, где я нашел, что кто-то дал мне ответ на это,
указывает на какой-то ресурс в угловом CLI, и поэтому
, вот как я понял, что это способ ограничить
тест тестовым файлом конкретного компонента.
Поэтому после внесения изменений в файл test.ts, давайте сохраним изменения.
Теперь мы попытаемся запустить наш тест на компоненте меню.
Итак, как видите, в компоненте меню у нас уже есть файл menu
компонент .spec.ts, который уже содержит код.
Давайте попробуем запустить этот тест и посмотрим, что произойдет.
Перейдя к терминалу, добавьте подсказку, введите ng test, и это
приведет к Angular CLI, запустив тестирование компонента меню.
Поэтому, когда вы набираете это и нажимаете Return,
, тогда Angular CLI начнет компилировать ваше угловое приложение.
Он также откроет окно браузера, в моем случае он откроет окно браузера Chrome
, а затем использует это окно браузера для запуска теста.
И вы видите, что в задней части у вас есть окно браузера Chrome, и
все это полно красного цвета и целой кучи слов там.
Та же информация также будет распечатана в окне консоли
, и из этого я вижу, что мой тест не работал правильно.
В моем тестовом файле есть что-то неправильно настроенное, поэтому мне нужно будет пойти и
отредактировать свой тестовый файл, чтобы включить соответствующую поддержку для правильного запуска этого теста.
Итак, давайте перейдем к файлу spec.ts компонента меню и
затем подготовим наш тест соответственно.
Теперь мы можем оставить тест ng работает прямо здесь.
Каждый раз, когда вы вносите изменения в файл mini component.ts или
файл mini component.spec.ts и
сохраняете изменения, этот тест автоматически запускается в этот момент.
Итак, давайте перейдем к файлу MenuComponent.spect.ts.
Переходя к файлу MenuComponent.spect.ts,
мы понимаем, что файл spect использует синтаксис Jasmine для описания теста.
Итак, вы уже заметили, что здесь есть что-то
, которое начинается с описания, а затем есть функция, определенная там.
Так вот что я имел в виду, когда говорил о синтаксисе Jasmine ранее.
А также, если вы прокрутите вниз, вы увидите его или около того там.
И кроме того, вы увидите что-то под названием beforeEach, здесь.
Давайте рассмотрим этот файл немного более подробно, чтобы понять, как настроен этот файл
и как этот тест настроен в данном конкретном файле.
Таким образом, в этом тестовом файле, вы заметите, что
мы импортируем здесь набор классов из Angular Core тестирования.
Таким образом, этот модуль позволяет обеспечить поддержку тестирования
вашего углового приложения и позволяет вам разработать тест для вашего компонента.
Таким образом, вы видите, что я импортирую async и
ComponentFixture и TestBed из этой тестовой библиотеки.
Я собираюсь назвать это библиотекой тестирования.
Также вы видите, что MenuComponent также импортируется здесь.
Теперь, как только мы поймем эти два,
давайте пройдем по коду, чтобы понять, что мы пытаемся сделать здесь.
Итак, здесь, как вы ожидаете, это описание здесь
указывает, что эта конкретная функция описывает,
Жасмин тест, который мы указываем для нашего углового приложения.
Итак, когда вы посмотрите на описание здесь,
вы увидите, что это включает в себя весь этот код здесь.
Таким образом, это часть одного набора тестов, которые мы запускаем, наш компонент меню
.
Так что внутри описания вы увидите, что здесь есть строка.
Это определяет этот конкретный набор тестов, которые вы здесь выполняете.
Итак, он говорит в компоненте меню.
Таким образом, здесь вы можете указать любую строку, которую вы хотите.
Вы можете использовать это как описание, чтобы
указать, что делает этот конкретный набор тестов.
Так вот, я останусь с тем, что раньше.
Мы пытаемся протестировать компонент меню.
И после этого вы видите, что здесь мы указываем функцию addo.
В рамках этой функции addo мы собираемся построить тест.
Для нашего MenuComponent здесь.
Таким образом, после этого вы увидите, что мы объявляем переменную с именем компонента,
которая имеет тип MenuComponent.
Теперь и тогда, мы также объявляем переменную арматуры,
, которая имеет тип ComponentFixture.
Который имеет тип MenuComponent.
Почему это интересно?
Теперь, в рамках нашего углового приложения,
у нас есть MenuComponent, который мы уже разработали.
Итак, в этом тестовом файле
мы собираемся создать, что MenuComponent с помощью углового TestBed,
, а затем мы собираемся провести тесты на MenuComponent.
Таким образом, мы собираемся изолировать MenuComponent, а затем провести модульные тесты для этого конкретного компонента.
Теперь, это где угловые утилиты тестирования
, которые поставляются с поддержкой TestBed.
TestBed позволяет мне настроить среду, в которой
я могу проверить свой угловой компонент.
Итак, здесь вы видите, что мы говорим TestBed и
, а затем вызываем метод модуля настройки тестирования класса TestBed здесь.
И внутри этого модуля тестирования конфигурации
вы можете объявить кучу вещей, и вы увидите, что я добавляю больше здесь.
Это действует точно так же, как конфигурация модуля NG
, что вы делаете для нашего модуля там.
Таким образом, вся информация, которая вам нужна для
настройки MenuComponent, будет объявлена здесь.
Таким образом, часть модели NG, которую вы видели в модуле приложения,
аналогичный синтаксис может быть использован здесь, чтобы объявить поддержку
тестирования MenuComponent здесь.
А также после этого вы увидите эту функцию, вызываемую compileComponents.
Таким образом, этот метод будет скомпилировать MenuComponent и
сделать его готовым для выполнения тестирования.
Обратите внимание также, что все это, эта функция здесь,
заключена внутри чего-то, называемого асинхронным здесь.
Теперь, зачем нам эта асинхронная?
Теперь, потому что подготовка компонентов с помощью этого метода
compileComponents занимает некоторое время.
И пока это не будет завершено, мы не можем продолжать испытания.
Таким образом, используя асинхронный модуль, мы по существу указываем, что
я собираюсь ждать, пока все это закончится, прежде чем двигаться вперед.
Таким образом, асинхронный модуль, как вы видите,
обертывает тестовую функцию внутри асинхронной тестовой зоны.
Итак, это означает, что этот тест автоматически завершится
, когда будут выполнены все асинхронные вызовы внутри этой зоны.
Так вот что делает использование асинхронного, что у нас здесь.
Итак, это означает, что вы можете использовать эту функцию синхронизации,
либо в перед каждым, либо в нем также, поэтому в нем, наша декларация.
Поэтому, когда вы увидите внутри него также, вы увидите, что вы можете использовать асинхронную.
Поэтому, если у вас есть какие-либо операции, которые выполняются асинхронно.
Тогда вам нужно дождаться завершения этих операций, чтобы этот тест завершился.
Так, например, если вы вызываете службу и ожидаете, пока
служба вернет значение тогда.
Все, что нужно завершить, прежде чем вы сможете продолжить.
Таким образом, они включены с помощью этой асинхронной, чтобы окружить эту функцию здесь.
Теперь, кроме того, второй beforeEach, теперь мы разделили
это на два отдельных перед каждым здесь, потому что мы хотим это завершить.
И эта compileComponents займет определенное количество времени,
особенно если ваш компонент использует внешний шаблон,
, как мы делаем в нашем MenuComponent.
Таким образом, требуется некоторое время для внешнего шаблона, чтобы подготовиться к
мое тестирование, чтобы продолжить.
Итак, нам нужно подождать, пока все это закончится.
Так вот почему после того, как это будет завершено,
то мы доберемся до второй части, где мы собираемся
получить некоторые ссылки на некоторые значения из тестового стенда.
Теперь, что это за функция beforeEach, которую вы здесь делаете?
То, что beforeEach означает, что все, что вы объявите внутри здесь,
эта функция будет выполняться beforeEach тест,
, который вы собираетесь указать позже при его использовании.
Таким образом, используя это beforeEach, вы можете настроить начальную конфигурацию
для вашего теста, чтобы продолжить работу.
Таким образом, это означает, что здесь, мы настраиваем наш TestBed,
готовит наш компонент меню, а затем настраиваем несколько вещей для
нашего компонента меню, прежде чем мы приступим к проведению теста.
Таким образом, для каждого теста, который вы собираетесь указать, используя его здесь,
перед каждым, что вы укажете в этом перед каждым,
будет выполняться до того, как тест будет проведен.
Итак, как вы видите, я готовлю TestBed.
Затем я получу доступ к приспособления.
Поэтому я использую TestBed, я говорю createComponent и MenuComponent.
Таким образом, это вернет мне ссылку на MenuComponent, который
я создаю в моем тестовом скрипте здесь, а затем получите ссылку на это, потому что мне понадобится ссылка на
, чтобы сделать некоторые манипуляции с этим компонентом там.
Кроме того, из прибора я получаю доступ к экземпляру компонента
, который создается моим компонентным приспособлением здесь.
Итак, как вы можете видеть, компонентный прибор типа MenuComponent и
, затем вызывающий componentInstance, дает мне доступ к этому конкретному компоненту меню
, который я создал внутри TestBed для проведения модульных тестов.
Теперь, после этого мы называем это detectChanges.
Теперь это означает, что это будет продолжаться только после завершения всех изменений
, а затем признать, что изменения завершены.
Таким образом, это вызовет цикл обнаружения изменений для этого компонента.
Таким образом, это означает, что это гарантирует, что вы сделали какие-либо изменения
раньше, все изменения обнаружены и
все стабилизируется, прежде чем вы сможете продолжить свой тест.
Теперь, после этого, мы будем использовать его для настройки нашего первого теста здесь.
Каков первый тест, который мы здесь делаем?
Первый тест,
, что мы собираемся проверить, чтобы убедиться, что компонент был создан.
Итак, внутри этого здесь я использую синтаксис Jasmin, и я говорю это.
И тут вы можете дать описание в виде строки
, чтобы указать, что этот тест на самом деле тестирует.
Итак, мы говорим,
мы тестируем, чтобы увидеть, был ли компонент создан или нет.
Поэтому для этого я говорю, что это должно создать смысл, что
эта настройка здесь должна была создать компонент правильно.
Так вот почему внутри я использую этот метод, называемый ожидание.
Таким образом, метод ожидания внутри здесь принимает значение здесь, а
вы можете проверить, удовлетворяет ли это значение что-то.
Итак, здесь мы говорим toBeTruthy, что означает, что эта конкретная ценность должна быть истинной.
Это то, что задается этим методом, называемым здесь toBetruthy.
Вы также можете сказать toBefalsy, что означает, что это должно оцениваться как ложное.
Но в этом случае
мы тестируем, чтобы убедиться, что компонент был создан правильно.
Так вот почему мы говорим, что ожидаем от Бетрути здесь.
Таким образом, это простой тест, который мы делаем, чтобы убедиться, что наш компонент
правильно создается.
Но, как мы понимаем, когда я запускаю этот тест, он работает неправильно.
Давайте быстро взглянем и посмотрим, в чем проблема в рамках
создания нашего компонента в окне консоли там.
Возвращаясь к окну консоли, позвольте мне просто вернуться назад и
посмотреть, где проблема.
И я начинаю замечать, что это указывает на то, что, похоже,
не распознает некоторые вещи, которые использует мой компонент.
В частности, он говорит, что MdSpinach
это то, что он не признает,
MdGetGridList и несколько других вещей.
Это сразу подсказывает мне, что мне нужно сделать еще несколько конфигураций
в моем тестовом файле, прежде чем мой тест сможет работать правильно.
Итак, вернемся к нашему файлу спецификации и внешим в него некоторые изменения.
Возвращаясь к нашему файлу спецификации,
из нашего воспоминания о том, как мы создали шаблон.
Мы знаем, что в шаблоне у нас была ссылка маршрутизатора в шаблоне
MenuComponent.
Поэтому мне нужна поддержка маршрутизации, чтобы распознать эту ссылку маршрутизатора
, которую мы использовали в файле MenuComponent.html.
Так вот, где я собираюсь импортировать
другую поддержку тестирования, предоставляемую
называется RouterTestingModule,
, который доступен из библиотеки Angular/router/testing здесь.
Таким образом, этот модуль тестирования маршрутизатора позволит мне настроить некоторые аспекты моего маршрутизатора.
Мы увидим, что способ использования этого немного отличается от модуля маршрутизатора
, который мы использовали в нашем приложении.
Таким образом, мы будем импортировать модуль тестирования маршрутизации, также вы обратите внимание
, что мы используем некоторые анимации, и
также используя компонент Angular материал в нашем шаблоне.
Поэтому мне нужно импортировать
модуль BrowserAnimationsModule в мой тестовый файл.
Таким образом, это происходит из угловой/платформы/браузера.
Теперь вы заметите, что нам нужно сделать это явно здесь просто потому, что
в фактическом угловом приложении все это было в модуле приложения
и так, что было доступно для компонентов.
Прямо сейчас мы тестируем этот компонент, MenuComponent в изоляции, поэтому
поэтому он не знает обо всех этих вещах, поэтому
нам нужно явно указать все эти вещи здесь.
Поэтому я буду импортировать это из анимации браузера платформы IM здесь.
Таким образом angular.platform.browser анимации импорта браузера анимации
модуль здесь.
Позвольте мне включить модуль гибкого слоя, поэтому
я буду включать Angular FlexLayout.
Так что они необходимы, потому что мне нужны они в шаблоне,
Я собираюсь также импортировать это блюдо из,
Shared/блюдо, потому что, как вы увидите позже,
Мне нужно настроить, A,
DishService, потому что мой MenuComponent
зависит от DishService так
мне нужно, что также на месте.
Хотя вы увидите, что я собираюсь остановить это.
Я объясню это за короткое время, а также мне нужно импортировать еще несколько вещей.
Я буду импортировать БЛЮДИ из,
вы помните, что мы используем эту константу под названием DISHES
, что мы экспортировали из файла shared/dishes.ts.
Мне это понадобится, чтобы настроить еще несколько вещей.
Я также собираюсь импортировать baseURL.
Который я объявил в файле URL-адреса Shared/base
.
А также, мне нужно импортировать
Наблюдаемый из,
rxjs, косая черта, Потому что я
также будет использовать Observable немного позже, когда я настраиваю несколько вещей.
Так что теперь я импортировал все эти вещи.
Спустившись в конфигурацию TestBed, вы видите, что эта
часть точно похожа на декоратор модуля движка, который у нас есть в модуле приложения.
Так что здесь я также могу использовать импорт просто
, как я сделал с модулем движка.
И в рамках импорта я собираюсь импортировать модуль BrowserAnimation
, потому что это то, что я требую, а затем
также импортировать модуль FlexLayout.
А также RouterTestingModule, потому что
мне понадобится RouterTestingModule для настройки нескольких вещей.
Теперь, когда вы используете RouterTestingModule, вам нужно использовать этот метод
calledwithRoutes вместо использования forRoot, как мы использовали с модулем маршрутизатора здесь.
Таким образом, в этом withRoutes вы можете указать некоторые маршруты
по умолчанию, которые вам нужны для вашего конкретного приложения здесь.
Я просто собираюсь настроить только один путь здесь,
, и этого достаточно для меня для тестирования этого модуля здесь.
Поэтому я просто собираюсь сказать путь: «меню»,
и компонент: MenuComponent.
Поскольку шаблоны MenuComponent используют определенные компоненты материалов,
давайте продолжим и импортировать их.
Таким образом, мы будем импортировать MatGridListModule
из @angular /materal/grid-list и
также MatProgressSpinnerModule из
@angular /материал/Прогресс-спиннер.
И как только мы их импортировали, тогда давайте продолжим и
включим их в импорт ниже.
Итак, давайте добавим в MatGridListModule и MatProgressSpinnerModule.
И это все, что мне нужно для
этот конкретный импорт должен быть настроен здесь.
Таким образом, наряду с импортом, у нас есть объявления, где у меня есть
MenuComponent, который используется здесь, я также могу настроить поставщиков здесь.
Поэтому мне нужно настроить провайдеров здесь.
Теперь это то, где мы собираемся
, чтобы создать несколько заглушек здесь, поэтому
я скажу предоставить: DishService.
Теперь, DishService, который мы будем использовать здесь, не будет настоящим
DishService.
Когда вы тестируете компонент, вы не хотите использовать реальный сервис.
Вместо этого вы рискуете убирать службу, а затем использовать заглушку DishService, которую я собираюсь назвать как dishServiceStub.
Так я скажу, useValue: dishServiceStub.
Таким образом, это будет функция заглушки, которую я буду использовать в порядке
, чтобы отметить DishService здесь.
Так что это то, что я собираюсь использовать.
А также второй, который я собираюсь использовать
, является BaseURL,
, который я собираюсь использовать значение в качестве baseURL
, который мы уже импортировали ранее.
Итак, теперь, с этим, я фактически сконфигурировал свой тестовый модуль,
, поэтому обратите внимание, что способ, которым мы указываем это, точно так же, как мы указываем декоратор модуля NG для нашего модуля приложения.
И здесь мы только настраиваем те, которые требуются MenuComponent, поэтому
у меня нет других, которые мы используем в самом модуле приложения.
Так вот как мы будем настраивать модуль тестирования.
Теперь одна вещь не хватает, это dishServiceStub.
Итак, что я собираюсь сделать, это реализовать функцию здесь и
вызов, который позволит dishServiceStub
быть простым объектом JavaScript здесь,
, который я собираюсь позволить ему действовать в
месте реальной службы.
Мы можем заглушить такие услуги, как это видно здесь.
Итак, внутри здесь я просто собираюсь
предоставить простую функцию,
функцию getDishes здесь,
которая вернет Observable типа массива Dish.
Так что именно так было настроено возвращаемое значение.
И я собираюсь вернуть
наблюдаемые БЛЮДИ здесь.
Таким образом, используя эту функцию заглушки здесь,
то, что я делаю, я вытаскиваю dishService, а затем настраиваю его с помощью этого метода, который мне нужен для
мой кеш, говоря getDises, и когда этот метод вызывается,
я просто собираюсь вернуть это значение.
Постоянная БЛЮДИ, вот.
Таким образом, теперь вы можете видеть, как я контролирую то, что поставляется
компоненту из заглушки dishService, который я только что создал здесь.
Так вот как вы будете создавать заглушки для вашего dishService.
Другой подход, который мы можем использовать для
случаев, когда мы используем услуги называется использование шпиона.
Jasmine поддерживает что-то под названием Spy, что позволяет нам шпионить за вызовами функций,
, а затем захватывать вызовы функций, а затем реагировать на эти вызовы функции.
Так что это еще один способ использовать поддельный сервис вместо реального сервиса.
Таким образом, теперь мы можем контролировать то, что поставляется в наш компонент меню.
Так что после этих изменений мы собираемся
спуститься в наш перед каждым методом здесь.
После асинхронного, то, что я собираюсь сделать
, я получу dishService.
Итак, вы видите, что я использую тестовую стенду, а затем использую метод get
тестового стенда, чтобы получить информацию о DishService, которая была создана здесь,
из этой конкретной заглушки, которую мы объявили здесь, в провайдерах.
Таким образом, это дает мне ссылку на DishService, так что
, что я могу вызвать методы DishService везде, где мне нужно здесь.
Итак, после внесения этих изменений, давайте сохраним изменения и
затем посмотрим, как наш угловой интерфейс командной строки будет выполнять этот тест после этих изменений,
и будет ли наш тест успешным в данный момент или нет.
Так что давайте сохраним изменения.
В тот момент, когда вы сохраните изменения, вы заметите, что ваш тест NG
снова начнет повторный запуск нашего теста.
Таким образом, он будет скомпилировать приложение, а затем повторно запустить тест.
И вуаля, наш тест успешно прошел после
внесения изменений в наш файл component.spec.ts.
Итак, наш первый тест, означающий, что теперь мы можем создать компонент меню
из нашего меню, component.spec.ts файл там.
Таким образом, наша тестовая установка работает правильно.
Теперь я могу войти и сделать более интенсивные тесты в моем тестовом компоненте.
Возвращаясь к этому файлу компонента.spec меню, позвольте мне добавить еще один тест.
Теперь вы видите, что, поскольку у меня теперь есть установленная служба здесь
, которая возвращает это значение BISHES, я теперь могу воспользоваться моим блюдом,
, на который я получил ссылку здесь.
Внутри был перед каждым, а затем вызовите метод getDises и
, тогда я смогу получить значение.
И это будет доступно в моем компоненте меню, который я только что создал.
Таким образом, мой MenuComponent должен теперь получить доступ к постоянному блюду, что
был поставлен обратно к нему через эту остановку обслуживания посуды.
Поэтому теперь я могу проверить, правильно ли переменная блюд внутри моего
MenuComponent получает значения или нет.
Итак, зайдя, позвольте мне создать еще один тест здесь.
Так что я создаю тест здесь, С ним,
, как вы видели ранее, так же, как и предыдущий.
Этот второй тест я собираюсь назвать, что как это и
блюда, Пункты должны быть 4,
потому что блюда константа, что мы объявили в
shared.diss файл имеет четыре блюда в константе там.
Поэтому, когда моя переменная блюд внутри моего файла MenuComponent или
ts инициализируется, вызвав dishservice.
Он должен был получить эти четыре блюда и
был инициализирован этими четырьмя блюдами.
Так что я собираюсь провести несколько тестов на эту переменную блюд там.
Итак, как мне получить доступ к переменной посуды здесь?
Так что я бы сказал, что блюда должны быть 4, и
тогда я объявлю функцию стрелки здесь.
И внутри этой функции стрелки я собираюсь указать
различные тесты, которые я собираюсь провести.
Так что здесь я собираюсь теперь сказать ожидание (компонент.,
и обратите внимание, что он автоматически дает мне
доступ к этому свойству блюд из MenuComponent.
Поэтому я могу сказать, что component.diss, а затем я могу проверить
, чтобы увидеть, что длина этого массива объектов JavaScript должны быть.
Так вот, где я использую метод Jasmine toBe здесь.
И тогда я могу указать значение 4,
, потому что я поставлял 4 блюда в моей тарелки постоянной
, что я объявил в файле shared.diss.
Так что это первый тест, который я собираюсь провести,
это должно оказаться правдой.
В противном случае установка работала неправильно, поэтому
я знаю, что мой код работает неправильно.
Но я точно знаю, что этот тест должен работать правильно.
Если вы хотите быть уверены,
давайте сохраним изменения, а затем пойдем и посмотрим, как работает наш тест.
Идя на этот терминал,
вы видите, что теперь мое приложение перекомпилируется, и тест запускается.
И обратите внимание на все зелень в окне терминала.
Он говорит, что выполнен 1 из 2 успеха, выполнен 2 из 2 успеха.
Что означает, что оба моих теста прошли успешно.
Если я смотрю на мой браузер, так что вы видите, что MenuComponent,
оба теста успешны.
Позвольте мне создать еще несколько и
добавить их в этот набор второй группы тестов, которые я создаю там.
Перейдя в файл menu_component_spec.ts, я добавлю еще один.
Я скажу, что ожидаю компонента.,
и я скажу блюда [1].
Вспомните, что первое блюдо имя было,
Так вот что я собираюсь проверить, блюда [1] .name.
Так вот как я могу проверить, правильно ли он получает значения.
Каковы все способы, которые я могу проверить?
Если я поставлю точку там, это даст мне предложение о всех возможностях здесь.
Так что я скажу, я также снова буду использовать метод toBe здесь.
И затем второе название блюдо,
Просто, что там, так что это второй заклинатель я собираюсь выполнить.
Поэтому, если мой код работал правильно, то это также должно пройти.
Точно так же позвольте мне добавить еще один здесь.
Так что я скажу ожидать,
Component.diss и я скажу 3.
И здесь, рекомендуемый
свойство должно быть Falsy.
Что вы должны быть ложными, это не правда в данном случае, так что позвольте мне добавить еще один.
Вы можете начать добавлять больше, если хотите,
играть с ним, пока не будете удовлетворены.
Так же делайте эти дополнения. Позвольте мне сохранить изменения, которые я сделал
здесь, давайте пойдем и посмотрим, работает ли этот тест правильно.
И возвращаясь к моему терминалу, вы видите, что мой тест снова работает.
Вы видите, что оба теста были успешными,
теперь я собираюсь заставить одну из этих вещей потерпеть неудачу.
Так что я собираюсь пойти и изменить это на правду.
Видите, это весело играть с кодом.
Я собираюсь изменить это на правду, и я знаю, что этот тест потерпит неудачу.
Так что давайте сохраним изменения.
Взгляните на терминал, там вы видите, что тест потерпел неудачу.
Вы видите здесь все это красное, что означает, что второй тест прошел неправильно.
И если вы прокрутите назад, вы увидите, что этот конкретный тест потерпел неудачу,
потому что где-то там внизу будет сказано, что это не так.
Хорошо, смотрите это заявление здесь, в котором говорится, что ложное, чтобы быть правдой,
, так вот почему это не удалось.
Так что это не должно было быть правдой, но я сказал, что это должно быть правдой, и
очевидно, тест ошибочен, поэтому тест потерпел неудачу.
Так вот, как вы можете даже проверить, если тест терпит неудачу,
, если вы попросили неправильные вещи также.
Но опять же, позвольте мне вернуться и исправить это еще раз.
Итак, возвращаясь к моему, File я изменю их
обратно на falsy, потому что я хочу, чтобы этот тест работал правильно.
Теперь мы еще не удовлетворены.
Теперь в этом конкретном тесте я тестирую только блюда
переменную, которая находится внутри моего MenuComponent.
Как мне играть с самим шаблоном?
Так вот, где нам нужна дополнительная помощь от Angular.
Чтобы провести некоторые тесты на шаблоне, я собираюсь войти и
вытащить еще пару импортов здесь.
Таким образом, идем в мой верхней части этого файла, menu_component_spec.tsfile.
Я собираюсь импортировать, Один
больше называется By, который является методом.
Вы увидите, как я использую это через некоторое время.
Это должно быть импортировано из, Angular,
/платформ-браузер.
А также, я собираюсь импортировать еще один, который является элементом отладки.
Элемент отладки позволяет мне получить доступ к DOM, так что
, что я могу проводить тесты на элементах DOM напрямую.
Так вот, где я собираюсь импортировать это, угловой код здесь, так что эти два.
Поэтому добавьте в «By» и «DebugElement» к импорту, а затем
, как только вы это сделаете, мы перейдем к коду здесь.
И тогда мы добавим еще один тест, где мы собираемся перейти в DOM и
получить один из элементов из документа.
Так что я бы сказал это, так что еще один тест здесь,
что будет делать этот тест?
Для этого теста я укажу
тест, как следует использовать посуду в шаблоне.
Я просто случайным образом говорю что-то здесь,
, потому что я просто хочу проверить, что переменная блюд,
, независимо от того, что она делает доступным, используется в шаблоне правильно.
Так что это часть, которую я настраиваю, а затем
вторая часть - функция стрелки, и
в рамках этой функции стрелки я собираюсь предоставить код для следующего теста.
Таким образом, внутри этой функции стрелки я собираюсь сделать
, я сначала вызову арматуру и
, а затем обнаружу изменения.
И после этого я скажу пусть де:,
Является DebugElement.
Через это я собираюсь получить доступ к DOM и
, тогда элемент будет HTMLElement.
Поэтому я хочу получить доступ к одному из HTMLElements из моего DOM.
Итак, какой элемент я хочу?
Поэтому, чтобы сделать это, я получу доступ к,
DebugElement, сказав fixture и debugElement.
Таким образом, это позволяет мне получить доступ к элементам из моего DOM здесь, так что debugElement.
И тогда я могу запросить, а затем выбрать только те, которые будут мне интересны.
Поэтому я собираюсь запросить, а затем я попрошу, используя By.
Так что обратите внимание, где я использую By, который я включил, импортировав его.
Таким образом, By поддерживает кучу метрик, с помощью которых я могу
попросить получить доступ к определенным элементам в DOM.
Итак, как вы можете видеть, он скажет мне, что я могу импортировать, и
, тогда .css позволяет мне получить доступ
для соответствия элементам с помощью данного селектора css.
Итак, что такое селектор css, который я собираюсь использовать?
Я знаю, что в DOM есть элемент h1, html-элемент в DOM и
, который я собираюсь получить доступ к первому элементу h1 из DOM.
И один из элементов h1 есть тот, который
собирается отображать название каждого блюда там.
Оглянитесь назад и вы видите, что внутри временной шкалы сетки, используя h1 и
, что h1 содержит название блюда там.
Поэтому я собираюсь получить это и
, то я собираюсь получить элемент, а затем я бы сказал de,
от элемента отладки, а затем я бы сказал nativeElement.
И это дает мне доступ к элементу, конкретно в DOM
, на который я ссылаюсь, и я выбрал, используя это заявление ранее.
Поэтому, когда я запрашиваю DOM, а затем говорю, верните мне все
те, которые используют тег h1 для элемента HTML.
И я получаю доступ к этому, и я могу запросить и
сказать ожидание (el.textContent).
Поэтому я ищу контент внутри этого h1 в моем фиксированном контенте
шаблона, а затем я скажу toContain.
Так что это другой метод, toContain, это метод жасмина называется toContain.
Это проверяет, содержит ли это определенное значение
, а затем я проверю DISHES (0) .name.
Итак, первое блюдо было создано в DOM и добавлено в DOM?
Если мой шаблон работает правильно, то он должен присутствовать в DOM.
Так что это то, что я собираюсь проверить, была ли сетка, соответствующая
, создана и добавлена в DOM или нет.
Поэтому я говорю BISHES (0) .name, и говорю в верхнем регистре.
Напомним, что я использовал прописную трубу для отображения имени
DISH, преобразовывая имя блюда в
все прописные в сетке в компоненте меню.
Так вот что я собираюсь проверить, хорошо, так что я просто проверяю
только один из них.
Вы можете выполнить многие из этих тестов, вы можете проверить
BISHES (1) .name, а затем DISHES (2) .name и многое другое, если хотите.
Я просто иллюстрирую один пример того, как вы получите доступ к элементам DOM и
, а затем проверьте, что они содержат внутри.
Так что это один тест, который я собираюсь провести здесь, поэтому позвольте мне сохранить изменения,
, а затем посмотреть, правильно ли работает тест.
Зайдите в этот терминал и когда тест проходит,
вы видите, что мой первый тест был успешным, второй тест был успешным,
и третий тест также был успешным, замечательным.
Теперь позвольте мне сделать третий тест неудачей.
Переходя к файлу menucomponentspec.ts,
Я собираюсь удалить это в верхний регистр, а затем выполнить тот же тест.
Вы увидите, что этот тест завершится неудачей, сохраните изменения.
И когда тест пройдет, вы увидите, что третий тест потерпит неудачу.
Потому что я заставляю его потерпеть неудачу, проверяя неправильную вещь там и
там вы идете, третий тест не удался здесь.
Так вот как вы можете проверить, правильно ли есть определенные вещи, которые
должны быть там, или нет.
Почему это дело, так что вы можете увидеть здесь, причина, почему этот тест не удался.
Он ожидает, что это будет в DOM,
, но вместо этого это то, что находится в DOM в элементе h1 в DOM.
Так вот почему тест провалился здесь.
Итак, снова возвращаясь назад, позвольте мне исправить ошибку и
тогда, когда я перезапускаю тест, вы должны теперь увидеть, что тест проходит успешно.
Возвращаясь к терминалу, вы увидите, что при запуске этого теста теперь он будет
работать правильно.
И вот вы идете, все три теста прошли моей заявкой.
Также, глядя на браузер, можно увидеть, что три теста
успешно были выполнены в файле шаблона компонентов меню и
также в самом компоненте меню.
Теперь, очевидно, это не обязательно самый всеобъемлющий тест, но
я просто хотел дать вам вкус того, как вы пойдете
о построении тестов в вашем угловом приложении.
Если вы увлекаетесь, вы можете зайти во все файлы spec.ts, которые у вас есть и
затем написать свой собственный тест для каждого и
каждый из этих компонентов, используя знания, которые вы получили здесь.
Также вы можете прочитать больше о тестировании в Angular документации и
, а затем узнать больше о способах проведения тестов на вашем Angular приложении.
Тестирование является полем само по себе, поэтому, если мне нужно научить вас все о
тестировании, что будет прийти весь курс сам по себе для Angular.
И в этом курсе я просто хотел дать вам вкус того, как
вы будете проводить тестирование в своем Angular приложении.
И это пример того, как мы можем настроить и
провести модульный тест на одном из компонентов в нашем Angular приложении.
Это хорошее время для вас, чтобы сделать хороший комментарий с тестом компонентов сообщения.
[МУЗЫКА]