Выполнение тестов в ваших Laravel Elixir проектах с использованием Karma, Jasmine & Webpack

   11.08.2016      

Вы хотите выполнять тестирование ваших javascript файлов внутри вашего проекта Laravel Elixir, но не знаете, с чего начать? Нет необходимости искать дальше, с Jasmine, Karma и Webpack вы добьетесь этого в кратчайшие сроки.

Цель данной статьи состоит в том, чтобы служить отправной точкой для начала работы, и, если честно, у меня нет желания выяснять, что и как вы хотите тестировать в вашем проекте.

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

Примечание: Тестирование было проведено на Laravel 5.3 (DEV ветка), так же это должно работать на версии 5.2 и ниже. Проект уже настроен на использование Webpack. Laravel 5.3 поставляется с WebPack из коробки.

 

 Шаг 1: Установка необходимых зависимостей через NPM

Для запуска нам нужно установить несколько пакетов на Node с помощью NPM. Ниже перечислены пакеты и karma-* плагины, необходимые для создания простого тестирования.
“karma”
“jasmine-core”
“karma-jasmine”
“karma-chrome-launcher”
“karma-firefox-launcher”
“karma-phantomjs-launcher”
“karma-webpack”
“karma-babel-preprocessor”
Просто введите это в вашей консоли, чтобы установить эти зависимости и сохранить их в файл package.json как dev-зависимости:
npm install karma jasmine-core karma-babel-preprocessor karma-phantomjs-launcher karma-jasmine karma-webpack karma-firefox-launcher karma-chrome-launcher — save-dev

 

Шаг 2: создание файла конфигурации для Karma (karma.config.js)

Karma - это, попросту говоря, тест-раннер для js, который удовлетворит все ваши потребности. По сути, Karma для JS - это как PHPUnit для PHP.
Файл конфигурации необходим Karma для того, чтобы выполнять тесты. Karma по умолчанию считывает конфигурационный файл с именем “karma.config.js”, необходимый для запуска. Этот файл должен быть создан в корневом каталоге вашего проекта Laravel и должен содержать следующее:
// Karma configuration

var webpackConf = require('./webpack.config.js');
delete webpackConf.entry

module.exports = function(config) {
    config.set({

        frameworks: ['jasmine'],

        port: 9876, // web server port

        colors: true,

        logLevel: config.LOG_INFO,

        reporters: ['progress'], // dots, progress

        autoWatch: true, // enable / disable watching files & then run tests

        browsers: ['Chrome'], //'PhantomJS', 'Firefox',

        singleRun: true, // if true, Karma captures browsers, runs the tests and exits

        concurrency: Infinity, // how many browser should be started simultaneous

        webpack: webpackConf, // Pass your webpack.config.js file's content

        webpackMiddleware: {
            noInfo: true,
            stats: 'errors-only'
        },

        /**
         * base path that will be used to resolve all patterns (eg. files, exclude)
         * This should be your JS Folder where all source javascript
         * files are located.
         */
        basePath: './resources/assets/js/',

        /**
         * list of files / patterns to load in the browser
         * The pattern just says load all files within a
         * tests directory including subdirectories
         **/
        files: [
            {pattern: 'tests/**/*.js', watched: false},
        ],

        // list of files to exclude
        exclude: [
        ],

       /**
        * pre-process matching files before serving them to the browser
        * Add your App entry point as well as your Tests files which should be
        * stored under the tests directory in your basePath also this expects
        * you to save your tests with a .spec.js file extension. This assumes we
        * are writing in ES6 and would run our file through babel before webpack.
        */
        preprocessors: {
            'app.js': ['webpack', 'babel'],
            'tests/**/*.spec.js': ['babel', 'webpack']
        },
    })
}

Примечание: Не могу понять, почему PhantomJS лончер не работает при записи в ES6. Будет обновлено, когда я найду, как это пофиксить.

Если у вас еще нет файла webpack.config в корневом каталоге вашего проекта, создайте его со следующим содержанием:
module.exports = {

  // your Webpack specific config content

}

 

Шаг 3: Создайте свои тесты в пределах каталога “tests”

Я хотел бы в общих чертах дать вам понятие, как создавать компоненты, регистрировать их с помощью Vue, создавать базовые юнит-тесты для этих компонентов, ну и продемонстрировать рабочий процесс в действии.
На данный момент я имею следующее:
  1. Файл app.js находится в “resources/assets/js/app.js”;
  2. Директория “tests” создана в “resources/assets/js/tests”;
  3. Мои юнит-тесты размещены в “resources/assets/js/tests/unit”;
  4. Файлы тестов оканчиваются на .spec.js;
  5. Мои компоненты находятся в “resources/assets/js/components”;
  6. Я пишу на javascript спецификации ES6/ES2015;
  7. Моя базовая директория для js файлов создана в “resources/assets/js/”.
(А) Во-первых, давайте создадим наш Vue компонент в “components/Editor.js”
Мы просто воссоздадим пример Markdown редактора с официального сайта Vue. Я предполагаю, что вы уже установили Vue и Marked с помощью NPM.
import marked from 'marked';

export default {
    template: `
        <div :id="editor">
            <textarea v-model="input" debounce="300"></textarea>
            <div class="editorview" v-html="input | marked"></div>
        </div>
    `,
    data() {
        return { input: '# Hello!' }
    },
    filters: {
        marked: marked
    }
}

(А) Теперь зарегистрируем наш компонент Vue в “app.js”
Этот файл служит точкой входа нашего приложения и будет скомпилирован при запуске:
mix.webpack(‘app.js’);
/** Component **/

import Vue from 'vue';

import Editor from './components/Editor';

var app = new Vue({
    el: 'body',
    components: { Editor }
});

(B) И наконец, давайте напишем простой тест в “tests/Editor.spec.js”
// Test File "Editor.spec.js"

import Editor from '../../components/Editor.js';

describe('Editor', () => {
    it('should set correct default data', function () {
        expect(typeof Editor.data).toBe('function')
        var defaultData = Editor.data()
        expect(defaultData.input).toBe('# Hello!')
    });
});

 

Шаг 4: Запустите тесты с помощью Karma

Для того, что бы запустить тест, просто введите в консоли:
./node_modules/karma/bin/karma start
Вы можете сделать это проще, создав алиас, либо просто установив Karma CLI через NPM.
npm install -g karma-cli
karma start
В качестве альтернативы вы можете использовать CLI для создания файла конфигурации:
karma init karma.conf.js
Вот и всё. Проще некуда!
Используемые ресурсы
  1. Karma Config
  2. Сайт Babel Js
  3. Компоненты Vue для юнит-тестирования
  4. Сайт Jasmine
  5. Vue Specific Karma Cofig от создателя Vue
Оригинал статьи

   / /

на 07:06