Подключение source и spec файлов

Подключение source и spec файлов в Jasmine

Jasmine — это фреймворк для тестирования JavaScript, который ориентирован на разработку тестов с использованием метода Behavior-Driven Development (BDD). При использовании Jasmine, тесты делятся на два типа файлов: исходные файлы (source files) и файлы спецификаций (spec files). Правильное подключение и настройка этих файлов является неотъемлемой частью тестирования, обеспечивая корректную работу тестов и изоляцию логики тестируемых компонентов.

Проект, использующий Jasmine, обычно состоит из двух частей:

  1. Source Files (исходные файлы) — это JavaScript файлы, содержащие логику приложения или библиотеки, которые подлежат тестированию.
  2. Spec Files (файлы спецификаций) — это тестовые файлы, где прописаны сценарии для тестирования исходных файлов. Спецификации могут быть как простыми, так и сложными в зависимости от сложности функционала.

Чтобы правильно организовать структуру проекта, рекомендуется придерживаться следующего принципа:

  • Папка src/ для исходных файлов
  • Папка spec/ для файлов спецификаций

Подключение исходных файлов

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

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

Пример HTML-файла для подключения исходных файлов и тестов:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тестирование Jasmine</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.7.0/jasmine.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.7.0/jasmine.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.7.0/jasmine-html.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.7.0/boot.min.js"></script>

    <!-- Подключение исходных файлов -->
    <script src="src/myModule.js"></script>

    <!-- Подключение файлов спецификаций -->
    <script src="spec/myModuleSpec.js"></script>
</head>
<body>
    <h1>Тестирование с Jasmine</h1>
</body>
</html>

В данном примере:

  • Включены необходимые библиотеки Jasmine.
  • Подключен исходный файл myModule.js, который будет тестироваться.
  • Подключен файл спецификаций myModuleSpec.js, содержащий тесты для myModule.js.

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

Подключение и организация spec файлов

Файлы спецификаций в Jasmine описывают сценарии тестирования для исходных файлов. Спецификации записываются с помощью глобальных функций, таких как describe(), it(), beforeEach(), afterEach(). Каждая спецификация должна быть описана в отдельном файле для удобства масштабирования и поддерживаемости проекта.

Пример структуры spec файлов:

spec/
├── myModuleSpec.js
└── anotherModuleSpec.js

Важно, чтобы каждый файл спецификации начинался с подключения исходных файлов, а затем описывал свои тесты.

Пример спецификации:

describe("Функция sum()", function() {
    it("должна правильно суммировать два числа", function() {
        var result = sum(1, 2);
        expect(result).toBe(3);
    });

    it("должна правильно суммировать отрицательные числа", function() {
        var result = sum(-1, -2);
        expect(result).toBe(-3);
    });
});

Здесь описаны два теста для функции sum(), которая суммирует два числа.

Использование Jasmine с модульными системами

При использовании модульных систем, таких как Webpack, или при разработке на ES6, код и тесты могут быть написаны с использованием модулей. В этом случае подключение файлов будет немного отличаться.

Пример настройки с использованием Webpack:

  1. Входной файл (например, index.js) экспортирует все необходимые компоненты.

  2. Spec файлы должны импортировать исходные модули перед использованием.

Пример использования ES6 импортов в spec файле:

import { sum } from '../src/myModule';

describe("Функция sum()", function() {
    it("должна правильно суммировать два числа", function() {
        var result = sum(1, 2);
        expect(result).toBe(3);
    });
});

Автоматизация с помощью тестовых раннеров

Jasmine позволяет интегрироваться с различными тестовыми раннерами, такими как Karma или Mocha, для автоматического запуска тестов. Это особенно полезно при работе с большими проектами, где требуется запускать тесты на различных браузерах и устройствах.

Пример настройки Karma с Jasmine:

  1. Установить Karma и плагины для Jasmine:
npm install --save-dev karma karma-jasmine karma-chrome-launcher
  1. Создать конфигурационный файл karma.conf.js:
module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        files: [
            'src/**/*.js',
            'spec/**/*.js'
        ],
        browsers: ['Chrome'],
        singleRun: true
    });
};
  1. Запуск тестов:
karma start

В данном примере Karma будет автоматически запускать тесты Jasmine на браузере Chrome.

Заключение

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