Тестирование приложения JS WebApp

Перевод статьи Testing a JS WebApp с любезного согласия Benoit Girard

Содержание:

Требования к тесту

Я так долго откладывал тестирование проекта Клеопатра, потому что хотел взять время для поиска решения, которое удовлетворило бы следующие моменты:

• Тесты могут выполняться для одинаковых URL-адресов
• Тесты могут быть выполнены без помощи скрипта
• Не требуются серверные компоненты или прокси-сервер
• Ключевая цель: непрерывное интеграционное тестирование.

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

Выбор фреймворка для тестирования

В качестве тестовой платформы я выбрал QUnit. У меня не было каких-то завышенных требований, так что вы, возможно, захотите рассмотреть собственные варианты. С QUnit я загрузил страницу в iframe и проанализировал полученный документ после выполнения операции. Вот пример:

QUnit.test("Selecter", function(assert) {
  loadCleopatra({
    query: "?report=4c013822c9b91ffdebfbe6b9ef300adec6d5a99f&select=200,400",
    assert: assert,
    testFunc: function(cleopatraObj) {
    },
    profileLoadFunc: function(cleopatraObj) {
    },
    updatedFiltersFunc: function(cleopatraObj) {
      var samples = shownSamples(cleopatraObj);

      // Sample count for one of the two threads in the profile are both 150
      assert.ok(samples === 150, "Loaded profile");
    }
  });
});

Выбор (тестового) драйвера для браузера 

Теперь у нас есть страница, которая может запустить набор тестов, и нам нужен способ автоматизировать выполнение. PhantomJS на базе WebKit и SlimerJS для Gecko, обеспечивают это. При помощи небольшого сценария мы можем загрузить test.html и установить код возврата процесса на основе результатов тестовой платформы QUnit.

Цель: непрерывная интеграция

Если вы подключили драйвер браузера для запуска через скрипт test.sh, добавление непрерывной интеграции должно быть простым. Благодаря Travis-CI и github можно легко настроить тестовый скрипт для запуска и настройки уведомлений.

Все, что нужно - это настроить Travis-CI  на  репозиторий и проверить результаты. Соответствующий конфиг файл .travis.cml. travis.yml должен настроить среду. PhantomJS заранее установлен и должен работать. Вот окончательная конфигурация:

env:
  - SLIMERJSLAUNCHER=$(which firefox) DISPLAY=:99.0 PATH=$TRAVIS_BUILD_DIR/slimerjs:$PATH
addons:
  firefox: "33.1"
before_script:
  - "sh -e /etc/init.d/xvfb start"
  - "echo 'Installing Slimer'"
  - "wget http://download.slimerjs.org/releases/0.9.4/slimerjs-0.9.4.zip"
  - "unzip slimerjs-0.9.4.zip"
  - "mv slimerjs-0.9.4 ./slimerjs"

notifications:
  irc:
    channels:
      - "irc.mozilla.org#perf"
    template:
     - "BenWa: %{repository} (%{commit}) : %{message} %{build_url}"
    on_success: change
    on_failure: change

script: phantomjs js/tests/run_qunit.js test.html && ./slimerjs/slimerjs js/tests/run_qunit.js $PWD/test.html

Удачного тестирования!