Тестирование приложения 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
    

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

    Помогла вам эта статья?

    Не нашли ответ на свой вопрос? Возможно, вы найдете решение проблемы на нашем канале в Youtube! Здесь мы собрали небольшие, но эффективные инструкции. Смотрите и подписывайтесь на наш youtube-канал!

    Смотреть на Youtube