Тестирование Angular с помощью Jasmine и Karma с использованием Selenium [Учебное пособие]

Тестирование программного обеспечения является лучшим способом предотвращения дефектов программного обеспечения и играет важную роль в жизненном цикле разработки программного обеспечения (SDLC). Это критически важный этап в разработке программного обеспечения, который может быть достигнут с помощью различных методов тестирования. Различные подходы к тестированию, такие как автоматизированное тестирование Selenium, тестирование производительности и автоматизированное модульное тестирование, могут быть выбраны в зависимости от требований к тестированию вашего приложения.

Тестирование программного обеспечения часто считается задачей команды QA. Однако разработчики также могут писать тесты для своего кода, чтобы убедиться, что отдельные компоненты или «единицы» программного обеспечения работают правильно, и это называется Unit-тестированием. Как показано ниже, Angular считается предпочтительным тестовым фреймворком для автоматизации тестирования. В этом блоге мы подробно рассмотрим, как выполнять тестирование Angular с помощью Jasmine и Karma.

Существуют различные фреймворки Unit-тестирования для автоматизации Selenium, такие как Angular, что облегчает разработчикам написание собственных примеров Unit-тестов. Angular считается одним из лучших фреймворков для веб-разработки. Он поставляется со встроенными инструментами модульного тестирования, такими как Jasmine и Karma, для автоматизированного модульного тестирования.

В этом учебнике по тестированию Angular мы подробно рассмотрим преимущества модульного тестирования и то, как проводить тестирование Angular с помощью Jasmine и Karma, используя Selenium.

Предположим, что вы хорошо знакомы с Typescript и приложениями Angular, давайте начнем!

Теперь выполните живое интерактивное ручное тестирование ваших Angular-сайтов на LambdaTest.

Знаете ли вы CSS grab & grabbing cursors добавляет поддержку свойства курсора css 3. Оно полезно для указания того, что что-то может быть схвачено (перетащено для перемещения).

Введение в модульное тестирование

Юнит-тестирование — это разновидность программной техники, при которой отдельные блоки или компоненты приложения тестируются, чтобы убедиться, что они работают так, как ожидается. Модульные тесты обычно представляют собой автоматизированные тесты, написанные и запущенные разработчиком программного обеспечения на этапе кодирования для проверки функциональной корректности отдельных модулей приложения. Единицей может быть отдельная функция, метод, процедура, модуль или объект.

Основная цель модульного тестирования — разбить исходный код приложения на изолированные части для выявления, анализа и устранения дефектов, возникающих в конкретной части. Изолированное тестирование означает тестирование без использования внешних ресурсов, таких как конечная точка API или база данных. Вместо этого используются такие заменители, как методы-заглушки, объекты-макеты или подделки, чтобы получить поддельный ответ и на его основе написать тестовый код.

Пример: Библиотека под названием Moxios используется для имитации вызовов API с помощью Axios.*.

Разработчики и владельцы продуктов часто игнорируют модульное тестирование, указывая в качестве причины ограниченное время и ресурсы разработки, что заставляет их обходиться без него. И да, это редко срабатывает. Но компании, которые серьезно относятся к качеству своего продукта, понимают важность модульного тестирования и старательно внедряют его.

Раз уж мы заговорили о модульном тестировании, стоит упомянуть и о наиболее популярных подходах, которые используются в сочетании с ним — Test-Driven Development (TDD) и Behaviour-Driven Development (BDD).

Преимущества модульного тестирования

Юнит-тестирование становится все более популярным в мире веб-разработки. Согласно отчетам, представленным в четвертом ежегодном исследовании Developer Ecosystem Survey (2020), проведенном компанией JetBrains, 77% разработчиков заявили, что тестирование является неотъемлемой частью процесса разработки в их компаниях или командах. Более того, 68% проголосовали за модульное тестирование как наиболее популярный подход.

Крупный или мелкий, каждый проект может воспользоваться преимуществами модульного тестирования. Ниже перечислены несколько существенных преимуществ:

• Помогает выявлять и исправлять ошибки на ранних стадиях разработки и экономить затраты.

• Заставляет разработчиков улучшать дизайн реализаций, поскольку трудно писать модульные тесты для плохо написанного кода.

• Гарантирует разработчику, что добавленная новая функция не нарушает существующий код, что дает уверенность в качестве кода.

• Упрощенная отладка; если тест не прошел, отлаживать нужно только последний код.

• Способствует ускорению разработки в целом.

• Позволяет лучше рефакторить код.

• Хорошее модульное тестирование может даже служить в качестве проектной документации. Разработчики, особенно те, кто недавно присоединился к команде, могут посмотреть на модульные тесты, чтобы узнать о функциональности, предоставляемой модулем, как его использовать и т.д.

Ограничения модульного тестирования

Не менее важно понимать ограничения модульного тестирования. Ниже перечислены некоторые из них:

• Невозможно выявить все ошибки в программе с помощью модульного тестирования, поскольку оно не может оценить все пути выполнения. Оно не может выявить ошибки интеграции, ошибки сложной широкой системы или нефункциональные атрибуты, такие как удобство использования, масштабируемость, производительность и т.д.

• Сложность настройки реалистичных и релевантных модульных тестов. Если они настроены неправильно, это может снизить ценность и точность результатов тестирования.

• Если модульный тест включает в себя только передачу входных данных и проверку выходных данных для метода, его, как правило, легко создать. Однако он не так прост, если включает в себя что-то более сложное, например, взаимодействие с внешним ресурсом.

Знаете ли вы, что CSS3 Colors — это небольшая, легкая и модульная библиотека цветов, которая позволяет описывать RGB и HSLA с помощью массивов, а также устанавливать прозрачные цвета с помощью rgba() и hsla().

Модульное тестирование с Angular Framework

Поскольку модульное тестирование стало неотъемлемой частью разработки, все основные фреймворки для разработки теперь поставляются с поддержкой модульного тестирования. Многочисленные библиотеки и фреймворки для тестирования позволяют сократить время, затрачиваемое на написание тестов.

В следующем разделе руководства по тестированию Angular с помощью Jasmine и Karma вы узнаете, как тестировать приложения Angular с помощью Karma Testrunner и фреймворка Jasmine с использованием Selenium.

Но перед этим давайте узнаем и поймем, почему мы их используем.

Почему Karma?

Karma — это тестовый раннер по умолчанию для приложений, созданных с помощью Angular CLI. Будучи прямым продуктом команды AngularJS, Karma очень хорошо подходит для тестирования Angular или любого другого проекта на базе JavaScript. Работающая на Node.js, программа тестирования Karma может быть легко интегрирована с такими фреймворками тестирования, как Jasmine, Mocha, QUnit, а также с такими интеграционными сервисами, как Jenkins, CircleCI, TravisCI и др. Кроме того, он позволяет запускать автоматизированные тесты на различных браузерах и устройствах.

Karma использует конфигурационный файл для настройки стартового файла, фреймворка тестирования, репортеров, браузера и других вещей. Его цель — создать продуктивную среду тестирования для разработчиков, тратя меньше времени на настройку конфигураций, но больше времени на кодирование. Кроме того, имеется хорошая онлайн-документация.

Тенденции загрузки пакетов NPM показывают, что даже в 2021 году Karma является самым популярным Test Runner для тестирования Angular.

Почему Jasmine?

Jasmine — это фреймворк для тестирования на JavaScript, который поддерживает практику поведенчески ориентированной разработки (BDD). Он очень хорошо сочетается с Karma и входит в стандартную установку Angular CLI. Известно, что Jasmine обладает широкими возможностями и обеспечивает легкую интеграцию с отчетностью. Кроме того, он предоставляет дополнительные функции, такие как подделки, шпионы и проходы. Мы будем проводить тестирование Angular с помощью Jasmine.

Behaviour-Driven Development (BDD) — это практика тестирования, которая фокусируется на поведении приложения. BDD позволяет писать тесты в человекочитаемом (простом английском) формате, чтобы даже нетехнические люди могли легко понять, что тестируется. Этот простой английский формат, используемый для написания тестовых сценариев BDD, известен как **Gherkin **язык.

BDD-тесты могут выступать в качестве живой тестовой документации, которую легко поддерживать и которую могут использовать все члены команды, включая владельцев продукта, бизнес-аналитиков, разработчиков, тестировщиков и т.д.

Мы будем писать наши модульные тесты с помощью Jasmine, следуя BDD-подходу. Затем, используя Karma test runner, мы сможем запускать выполнение тестов из CLI. Karma также имеет режим наблюдения, который может автоматически обнаружить изменения в файлах разработки и повторно запустить тест. Не волнуйтесь! Вы достигнете лучшего понимания, когда начнете писать модульные тесты.

Почему именно Selenium?

Хотя Selenium — это инструмент, который не нуждается в представлении среди тестировщиков программного обеспечения, поскольку эта статья предназначена в первую очередь для разработчиков, давайте сначала уточним, что такое Selenium.

Selenium — это бесплатная платформа автоматизации тестирования с открытым исходным кодом, которая используется для автоматизации веб-браузеров. Он позволяет проверять веб-сайты и веб-приложения на различных устройствах, браузерах и ОС, чтобы убедиться, что они работают должным образом, как и ожидалось. Selenium Webdriver и Selenium Grid являются неотъемлемыми компонентами системы автоматизации Selenium.

Если вы ищете способы масштабирования за счет распределенного выполнения тестов, Selenium Grid — лучший выбор. Selenium Grid позволяет запускать тесты параллельно на нескольких машинах (средах) на различных браузерах, ОС и комбинациях устройств, что повышает скорость цикла тестирования без ущерба для покрытия тестов.

В этом руководстве по тестированию Angular с помощью Jasmine и Karma мы будем настраивать фреймворк Jasmine с онлайн Selenium Grid, предоставляемым платформой LambdaTest. LambdaTest предоставляет вам облачную инфраструктуру Grid, через которую вы можете получить доступ к 3000+ настольным и мобильным браузерным средам.

Теперь, когда вы получили представление о рассмотренных выше инструментах, давайте перейдем к написанию юнит-тестов в приложении Angular.

Но перед этим давайте создадим фиктивный проект, на основе которого мы будем писать содержательные Unit-тесты.

Посмотрите на это: Функция CSS3 attr() для всех свойств — С третьим уровнем CSS Values and Units функция «attr()» может использоваться для любого свойства CSS, а также для нестроковых значений (например, чисел и цветов).

Настройка примера проекта с использованием Angular, Karma и Jasmine

Все примеры кода, используемые в этом руководстве по тестированию Angular, вы можете найти в репозитории GitHub. Давайте начнем с создания нового приложения Angular.

Ниже перечислены выбранные мной инструменты.

• Angular CLI

• Visual Studio Code в качестве IDE

Для глобальной установки Angular CLI вы можете выполнить приведенную ниже команду.

npm install -g [@angular/cli](http://twitter.com/angular/cli)

Шаг 1: Создайте новый проект Angular с помощью Angular CLI. Это позаботится о конфигурации Jasmine и Karma для нас из коробки.

Шаг 2: Откройте IDE, создайте новую папку проекта и выполните следующую команду в терминале. Здесь я называю проект «angular-unit-test».

ng new angular-unit-test

Проект успешно установлен, все зависимости установлены. Структура корневой папки теперь выглядит следующим образом:

Чтобы запустить тест, выполните следующую команду.

ng test

Запускается выполнение теста и открывается новый экземпляр браузера. Обратите внимание на отчет браузера и журналы терминала.

Шаг 3: Давайте начнем создавать наше приложение, создавая новые компоненты. Для демонстрации я создам простое приложение Angular с использованием Bootstrap, содержащее следующие компоненты:

• Заголовок

• Нижний колонтитул

• Форма входа

• Форма регистрации

Выполните следующую команду, чтобы сгенерировать новые компоненты с помощью Angular CLI.

ng g c folder_name/component_name

Все мои компоненты были помещены в папку с именем «components» в src/app. Чтобы создать компонент с именем «header», выполните следующую команду:

ng g c components/header

Компонент header создан успешно. Обратите внимание, что для каждого компонента автоматически генерируются 4 файла — html, css, ts и spec.

Мы будем писать наш Unit-тест внутри файла spec.ts. По умолчанию файл будет выглядеть следующим образом:

Поскольку объяснение базовых вещей Angular выходит за рамки этого руководства, я не буду рассказывать о создании приложения. Ниже приведены шаги по клонированию и настройке моего готового образца приложения.

git clone [https://github.com/harita-gr/MyStay_app.git](https://github.com/harita-gr/MyStay_app.git)

npm install

npm start

Шаг 4: Настройте тестирование в вашем проекте Angular.

Когда мы запускаем ng-тест, Angular берет конфигурацию теста из файла angular.json.

Конфигурация, связанная с тестированием, в основном лежит на плечах этих двух файлов.

• test.ts — также известен как файл входа в тест, этот файл используется для загрузки всех spec.ts файлов из проекта для тестирования

• karma.conf.js — здесь мы указываем такие конфигурации, как браузер, порт, отчет, онлайн-сетка и т.д.

Давайте посмотрим на наш файл test.ts. Этот файл является точкой входа тестов для приложения. Вам не нужно вносить никаких изменений в файл test.ts.

Давайте быстро поймем, что здесь происходит.

• В начале файла мы инициализируем наше тестовое окружение Angular, используя все импорты.

• После этого мы находим все тестовые файлы, сопоставляя их имена с регулярным выражением (имя файла заканчивается на spec.ts ), и загружаем их.

В этом файле также инициализируется **TestBed **. Если вам интересно, что такое TestBed, то это мощный инструмент модульного тестирования, предоставляемый Angular. Он создает динамически конструируемый модуль тестирования, который эмулирует модуль Angular NgModule.

Теперь давайте перейдем к файлу karma.conf.js. Как вы можете заметить, большинство из них не требуют пояснений. Поэтому давайте быстро пройдемся по некоторым из них.

• *frameworks*- Здесь мы устанавливаем наш фреймворк автоматизации тестирования, который по умолчанию является Jasmine. Но вы можете изменить его в соответствии с требованиями вашего проекта.

• *репортеры*- Здесь мы устанавливаем наших репортеров. Вы можете изменять или добавлять новые.

• *autoWatch *- Если установлено значение true, тест будет выполняться в режиме наблюдения. Когда вы измените какой-либо файл и сохраните его, тесты будут пересобраны и запущены заново.

• *port *- Здесь вы можете задать свой порт.

• *browsers *- Здесь вы можете задать браузеры, на которых будут запускаться тесты. По умолчанию это Chrome. Но вы можете установить и добавить новые браузеры.

Если вы запускаете тесты на локальной машине, то такой конфигурации будет достаточно. Но поскольку мы будем использовать онлайн-сетку для запуска наших тестов, нам нужно сделать несколько дополнительных настроек, которые приведены ниже.

1. Задайте конфигурацию веб-драйвера для запуска на хосте LambdaTest. Нам нужно передать имя хоста грида, порт, пользователя и ключ доступа. Вы можете получить свое уникальное имя пользователя и ключ доступа, создав бесплатный аккаунт LambdaTest и перейдя на страницу своего профиля.

// Lambdatest grid hostname and port
      var webdriverConfig = {
        hostname: "hub.lambdatest.com",
        port: 80,
        user: process.env.LT_USERNAME || 'YOUR_USERNAME',
        accessKey: process.env.LT_ACCESS_KEY || 'YOUR_ACCESSKEY',
      };

2- Поскольку наши тесты будут выполняться на облачной сетке, нам больше не нужно устанавливать браузерную программу запуска. Вместо этого установите webdriver launcher и добавьте его в качестве плагина.

 npm install -D karma-webdriver-launcher

plugins: [
          require("karma-jasmine"),
          require("karma-webdriver-launcher"),
          require("karma-jasmine-html-reporter"),
          require("karma-coverage"),
          require("[@angular](http://twitter.com/angular)-devkit/build-angular/plugins/karma"),
        ],

3- Теперь нам нужно определить наши пользовательские пусковые установки. LambdaTest предоставляет вам доступ к 3000+ конфигурациям браузеров/устройств/ОС. Поэтому вам больше не нужно ограничивать себя, тестируя только на одном устройстве/браузере/ОС, как при локальном тестировании. Я настраиваю тесты для запуска в Chrome, Firefox и Edge в пользовательской версии браузера и ОС. Конфигурация должна быть выполнена аналогично объекту, приведенному ниже.

customLaunchers: {
          chrome: {
            base: "WebDriver",
            config: webdriverConfig,
            browserName: "chrome",
            platform: "windows 8.1",
            version: "71.0",
            build:'Unit testing in Angular', //Build name
            name: "Unit test", // Test name
            pseudoActivityInterval: 5000, // 5000 ms heartbeat
          },

Вы можете генерировать возможности Selenium с помощью LambdaTest Desired Capability Generator, чтобы найти свою пользовательскую комбинацию.

4- Также обновите имя браузера в пользовательской программе запуска.

browsers: ["chrome"],

Вот и все! Окончательный файл karma.conf.js теперь выглядит следующим образом.

// Karma configuration file, see link for more information
    // [https://karma-runner.github.io/1.0/config/configuration-file.html](https://karma-runner.github.io/1.0/config/configuration-file.html)

    module.exports = function (config) {
      // Lambdatest grid hostname and port
      var webdriverConfig = {
        hostname: "hub.lambdatest.com",
        port: 80,
        user: process.env.LT_USERNAME || 'YOUR_USERNAME',
        accessKey: process.env.LT_ACCESS_KEY || 'YOUR_ACCESSKEY',
      };

      config.set({
        basePath: "",
        // hostname: 'localhost', // hostname, where karma web server will run
        frameworks: ["jasmine", "[@angular](http://twitter.com/angular)-devkit/build-angular"],
        plugins: [
          require("karma-jasmine"),
          require("karma-webdriver-launcher"),
          require("karma-jasmine-html-reporter"),
          require("karma-coverage"),
          require("[@angular](http://twitter.com/angular)-devkit/build-angular/plugins/karma"),
        ],
        client: {
          jasmine: {},
          clearContext: false, // leave Jasmine Spec Runner output visible in browser
        },
        jasmineHtmlReporter: {
          suppressAll: true, // removes the duplicated traces
        },
        coverageReporter: {
          dir: require("path").join(__dirname, "./coverage/angular-unit-test"),
          subdir: ".",
          reporters: [{ type: "html" }, { type: "text-summary" }],
        },
        reporters: ["progress", "kjhtml"],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ["chrome","firefox","edge"],
        singleRun: false,
        restartOnFileChange: true,

        customLaunchers: {
          chrome: {
            base: "WebDriver",
            config: webdriverConfig,
            browserName: "chrome",
            platform: "windows 8.1",
            version: "71.0",
            build:'Unit testing in Angular', //Build name
            name: "Unit test", // Test name
            pseudoActivityInterval: 5000, // 5000 ms heartbeat
          },
          firefox: {
            base: "WebDriver",
            config: webdriverConfig,
            browserName: "Firefox",
            platform: "windows 10",
            version: "91.0",
            build:'Unit testing in Angular',
            name: "Unit test",
            pseudoActivityInterval: 5000, // 5000 ms heartbeat
          },
          edge: {
            base: "WebDriver",
            config: webdriverConfig,
            browserName: "MicrosoftEdge",
            platform: "windows 10",
            version: "93.0",
            build:'Unit testing in Angular',
            name: "Unit test",
            pseudoActivityInterval: 5000, // 5000 ms heartbeat
          }
        },
      });
    };

5- Давайте проверим нашу конфигурацию, запустив бегунок тестирования.

ng test

Наш тест начнет выполняться на облачной сетке.

Перейдите на панель автоматизации LambdaTest, чтобы получить доступ к результатам выполнения теста.

Это руководство по тестированию Selenium JavaScript для новичков и профессионалов поможет вам узнать все, что необходимо знать для работы с JavaScript для автоматизированного тестирования Selenium.

Написание первого модульного теста Angular с помощью Jasmine

Мы успешно завершили настройку тестов. В этом разделе, посвященном тестированию Angular с помощью Jasmine, мы напишем юнит-тесты для Angular с помощью Jasmine.

Понимание потока запуска тестов

Как упоминалось ранее, для каждого компонента генерируется файл spec.ts, внутри которого мы будем писать наш тестовый пример. Ниже показан файл spec, созданный по умолчанию для компонента App — app.component.spec.ts:

Давайте разберемся в процессе выполнения теста.

• Импортируйте все инструменты, которые мы будем использовать, например TestBed.

• Импортируйте все зависимости для этого компонента.

• Чтобы запустить наш тестовый блок, мы используем функцию «describe», название которой будет соответствовать названию компонента test.describe(string, function).

• Затем у нас есть функция «it», которая используется для определения тестовых случаев. Тестовым случаям можно давать осмысленные имена.it(string, function)

• Кроме того, у нас есть функции setup и teardown, которые будут выполняться до или после каждой функции «it». Здесь определена функция «beforeEach», которая содержит асинхронный код. Цель этой функции — дождаться завершения всего асинхронного кода, прежде чем продолжить выполнение. Эта функция вызывается перед запуском каждой спецификации теста (функции it).

Здесь у нас есть три Unit-теста:

1. Первый проверяет, что приложение успешно создано.

2. Второй проверяет, что название приложения равно ожидаемому значению.

3. Третий проверяет, что заголовок отображается.

Общий ход выполнения можно представить следующим образом:

Написание модульных тестов для компонентов

Теперь, когда у вас есть представление о том, как протекает процесс тестирования, давайте начнем с написания юнит-тестов для компонента header. Чтобы написать содержательные тесты, очень важно определить, что вам нужно протестировать.

Для компонента заголовка я хочу проверить следующие случаи:

1. Он должен отображать логотип с текстом «My Stay».

2. Он должен иметь шесть навигационных ссылок.

3. Он должен переводить на страницу регистрации при нажатии на кнопку регистрации/логина.

Код для проверки компонента заголовка показан ниже.

//header.component.spec.ts

    import { ComponentFixture, TestBed, tick } from '@angular/core/testing';
    import { By } from '@angular/platform-browser';
    import { Location } from "@angular/common";

    import { HeaderComponent } from './header.component';

    describe('HeaderComponent', () => {
      let component: HeaderComponent;
      let fixture: ComponentFixture<HeaderComponent>;

      beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [ HeaderComponent ]
        })
        .compileComponents();
      });

      beforeEach(() => {
        fixture = TestBed.createComponent(HeaderComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

      it('should create', () => {
        expect(component).toBeTruthy();
      });

      it('should display logo containing text "My Stay"', () => {
         const logoText =fixture.debugElement.query(By.css('.navbar-brand')).nativeElement;
         expect(logoText.textContent).toBe('My Stay ');
      });

      it('should contain 6 nav links', () => {
        const navLinks = fixture.debugElement.queryAll(By.css('li.nav-item'));
        expect(navLinks.length).toEqual(6);
      });

      it('navigates to register page on clicking signup/signin button', () => {
        const location: Location = TestBed.inject(Location);
        const button =fixture.debugElement.query(By.css('button.btn')).nativeElement;
        button.click();
        expect(location.path()).toBe('/user-register');
      });
    });

Теперь я хочу протестировать компонент нижнего колонтитула. Ниже приведены тестовые случаи:

1. Он должен содержать текст об авторских правах

2. Он должен содержать три кнопки контактов с социальными сетями

Код для тестирования компонента нижнего колонтитула показан ниже:

//footer.component.spec.ts

    import { ComponentFixture, TestBed } from '@angular/core/testing';
    import { By } from '@angular/platform-browser';

    import { FooterComponent } from './footer.component';

    describe('FooterComponent', () => {
      let component: FooterComponent;
      let fixture: ComponentFixture<FooterComponent>;

      beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [ FooterComponent ]
        })
        .compileComponents();
      });

      beforeEach(() => {
        fixture = TestBed.createComponent(FooterComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

      it('should create', () => {
        expect(component).toBeTruthy();
      });

      it('should contain copyright text', () => {
        const text =fixture.debugElement.query(By.css('.copyright')).nativeElement;
        expect(text.textContent).toContain('Copyright');
      });

      it('should contain 3 social media contact buttons ', () => {
        const btns = fixture.debugElement.queryAll(By.css('a.btn'));
        expect(btns.length).toEqual(3);
      });
    });

Наконец, я хочу протестировать компонент Login. Ниже приведены тестовые примеры:

1. Он должен обеспечивать возможность входа в систему путем ввода электронной почты и пароля и отправки формы.

2. Он должен переходить на страницу регистрации по ссылке «Зарегистрироваться здесь».

Код для тестирования компонента входа в систему показан ниже.

//login.component.spec.ts

    import { ComponentFixture, TestBed } from '@angular/core/testing';
    import { FormsModule } from '@angular/forms';
    import { By } from '@angular/platform-browser';
    import { Location } from "@angular/common";

    import { LoginComponent } from './login.component';

    describe('LoginComponent', () => {
      let component: LoginComponent;
      let fixture: ComponentFixture<LoginComponent>;

      beforeEach(async () => {
        await TestBed.configureTestingModule({
          imports: [FormsModule ],
          declarations: [LoginComponent],
        }).compileComponents();
      });

      beforeEach(() => {
        fixture = TestBed.createComponent(LoginComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

      it('should create', () => {
        expect(component).toBeTruthy();
      });

      it('should be able to login by entering email and password and submitting form', () => {
        component.User['email'] = 'test@test.com';
        component.User['password'] = '123456789';
        const loginBtn = fixture.debugElement.query(By.css('button.login-btn')).nativeElement;
        loginBtn.click();
        expect(component.submitted).toBeTrue;
      });


      it('should route to register page by clicking “Sign Up here” link', () => {
        const location: Location = TestBed.inject(Location);
        const link =fixture.debugElement.query(By.css('a')).nativeElement;
        link.click();
        expect(location.path()).toBe('/user-register');
      });
    });

Теперь пришло время запустить тестовые примеры. Выполните следующую команду.

ng test

Перейдите на панель автоматизации LambdaTest. Вы можете заметить, что тест запускается на облачном Selenium grid.

Перейдите в раздел «Журналы автоматизации», чтобы увидеть подробный отчет о выполнении тестов.

Мы успешно выполнили наши Unit-тесты в Angular.

Перейдите на панель LambdaTest Analytics Dashboard, чтобы просмотреть показатели производительности ваших Unit-тестов. Обзор тестов предоставит скриншот тестов с последовательным поведением. В то же время, сводка тестов покажет общее количество пройденных или проваленных тестов, а также все завершенные или поставленные в очередь тесты.

Лучшие практики для улучшения модульного тестирования

При выполнении модульного тестирования следует помнить о некоторых лучших практиках.

1. Соблюдайте последовательное соглашение об именовании и тестируйте по одному коду за раз

2. Убедитесь, что для каждого модуля есть соответствующий пример модульного тестирования.

3. Прежде чем переходить к следующей фазе, все ошибки должны быть исправлены. В итоге вы получите чистый и надежный код для фиксации.

4. Постоянно рефакторить тестовый код

5. Наконец, сосредоточьтесь больше на тестах, которые влияют на поведение системы.

Вот краткий обзор сертификации Selenium JavaScript 101 от LambdaTest:

Заключение

В этом учебном пособии по тестированию Angular с помощью Jasmine и Karma на Selenium JavaScript мы узнали, как проводить модульное тестирование в фреймворке Angular с помощью Jasmine и тестового бегуна Karma, используя Selenium. Мы также рассмотрели практическую реализацию.

Поскольку кодовая база продолжает расти, выполнение модульных тестов локально в нашей системе становится трудоемким, к тому же охват тестов ограничен. Поэтому мы воспользовались онлайн Selenium Grid, предоставляемым платформой LambdaTest, чтобы повысить эффективность выполнения тестов, запуская модульные тесты параллельно в нескольких настроенных окружениях.

Надеюсь, вы нашли это руководство по тестированию Angular полезным!

Счастливого тестирования!