Самый простой способ проверить код JavaScript (для веб-интерфейса) при каждом нажатии Git - PullRequest
0 голосов
/ 25 января 2019

Я ищу самый простой и минималистичный способ создания автоматических тестов для каждого толчка Git для относительно простого кода JavaScript (на GitHub) для веб-приложения HTML / CSS / JS, чтобы он также мог тестировать HTML-элементы (с помощью JS-манипуляции).

Я предполагаю, что для этого потребуется какое-то тестирование "безголового браузера" - в этом случае мне нужно будет только выполнить его в Google Chrome. (Это приложение не планируется использовать в любом другом браузере.)

Я уже создал функцию JS, которая выполняет тестирование. Эта функция должна выполняться после загрузки всего приложения (веб-страницы) (HTML, CSS, JS), поскольку она включает манипулирование элементами HTML. Для простого примера, скажем, я всегда ожидаю, что четное число больше 5. Число, скажем, число элементов абзаца в одном из элементов div на HTML-странице приложения. В этом случае функция будет:

function my_test() {
    var is_valid = true;
    var num = $("#my_div").find("p").length; // (JQuery is included in the app)
    if (num % 2 != 0) {
        console.log("it's not an even number");
        is_valid = false;
    } else if (num <= 5) {
        console.log("it's smaller than 5");
        is_valid = false;
    }
    return is_valid ;
}

Итак, вопрос в том, какой самый простой способ заставить этот тест автоматически запускаться в терминале при выполнении git push (любым, кто хочет внести свой вклад в хранилище)?

Я знаю, что существуют среды тестирования Node.js, такие как Tape, но это кажется сложным, потому что то, что я думаю (или надеюсь) может быть сделано проще; плюс, если я их установлю, это добавляет МБ к крошечному приложению (около 0,3 МБ), которое мне не очень нравится.

Такое тестирование может затем автоматически выполняться, например, с помощью Трэвис, так, например, я мог бы просто добавить файл ".travis.yml", с

language: node_js
node_js:
- "node"

И тогда в файл package.json я мог бы добавить, например. строка "test": "jshint my_code.js" для проверки my_code.js с пакетом jshint.

Но есть ли способ выполнить мою собственную простую функцию JS в качестве теста? Например, чтобы сказать «, сначала загрузите мою страницу (HTML, CSS) со всем моим связанным JS-кодом, затем выполните мою пользовательскую функцию my_test() (см. Выше), отобразите (в терминале) все, что будет выведено на консоль ( через console.log('output')), и, если в итоге он не вернет true, прервите git push".

Я ценю любые предложения, но лучшим будет четкое описание того, какие шаги необходимо предпринять, чтобы все это настроить. Например, «создайте .travis.yml с таким-то контентом, добавьте файл package.json с таким-то контентом и т. Д.». И / или, возможно, также возможно использовать, например, Записывайте ленту, не устанавливая ее поверх приложения, а просто автоматически вызывая ее всякий раз, когда выполняется тестирование, и как это будет сделано.

(я совсем не настаиваю на Трэвисе или Ленте, это были только примеры.)

( ОБНОВЛЕНИЕ: Теперь я принял собственное решение - из-за отсутствия лучшего - но если кто-то может предложить более простое / лучшее решение, я изменю принятый ответ.)

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Вот мое решение, хотя и не слишком простое.Я использовал Travis, Karma и очень простой код Jasmine.

Во-первых, вам нужно иметь файл package.json в корне приложения с таким содержанием:

{
  "name": "CITapp",
  "description": "Concealed Information Test app",
  "version": "1.0.2",
  "scripts": {
    "test": "karma start test/karma.conf.js --single-run"
  },
  "devDependencies": {
    "jasmine-core": "*",
    "karma": "*",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "*",
    "karma-fixture": "^0.2.6",
    "karma-html2js-preprocessor": "*",
    "karma-jasmine": "*",
    "karma-phantomjs-launcher": "*",
    "phantomjs-prebuilt": "*"
  }
}

Еслитеперь вы запускаете npm install в терминале по пути приложения, каждый необходимый модуль будет добавлен в приложение (в папке node_modules).(Для этого Node.js должен быть сначала установлен на ПК.) Это необходимо только для локального тестирования (на вашем собственном ПК), но Travis выполняет эту установку автоматически на своем сервере на каждом git push (увидеть ниже).(Эти модули занимают довольно много места, поэтому их лучше не включать в приложение, например, в частности, в хранилище.)

Для Travis вам просто необходим файл .travis.yml с:

language: node_js
node_js:
 - "stable"

Теперь в файле package.json появилась эта строка "test": "karma start test/karma.conf.js --single-run".Это направляет команду «test» в файл karma.conf.js в каталоге test в приложении.Этот файл должен содержать что-то вроде этого:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      '../js/jquery-2.1.3.min.js', // JQuery from the root's js folder
      '../js/my_scripts.js', // personal scripts from the root's js folder
      'add_html.js', // from same folder as the karma.conf.js
      'test.js' // from the same folder as the karma.conf.js
    ],
    exclude: [
    ],
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: [
                '--no-sandbox',
                '--disable-gpu',
                '--enable-logging',
                '--no-default-browser-check',
                '--no-first-run',
                '--disable-default-apps',
                '--disable-popup-blocking',
                '--disable-translate',
                '--disable-background-timer-throttling',
                '--disable-renderer-backgrounding',
                '--disable-device-discovery-notifications',
                '--remote-debugging-port=9222',
                '--disable-web-security'
        ]
      }
    },
    singleRun: true,
    concurrency: Infinity

  })
}

Самое главное, я использовал фреймворк jasmine, инициировал ChromeHeadless (с некоторыми специальными flags, потому что в противном случае он дает ошибки), и загрузил мои файлыв списке files : [...].

Файл add_html.js добавляет HTML-код на страницу с помощью кода JS, например, как (следуя примеру в вопросе):

var fixture = "<div id='my_div'><p>paragraph1</p><p>paragraph2</p></div>";
document.body.insertAdjacentHTML('afterbegin', fixture);

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

Наконец, тест с Jasmine в test.js так же прост:

describe("suite", function() {
  it("check if my_test() returns true", function() {
    expect( my_test() ).toBe(true);
  });
});

Обратите внимание, что функция my_test() взята из (гипотетического) файла my_scripts.js - возможно, идентичного тому, что был в примере вопроса - так что она определена как простая чистая (ну, только JQuery добавлен) JS скрипт.Всякий раз, когда скрипт возвращает true, тест Жасмин будет пройден.Если он не вернет true (включая любые несвязанные ошибки, которые останавливают выполнение тестового кода), тест не пройден.

Все это можно проверить локально, используя команду npm test от терминала на путиприложения (опять же, для этого сначала должны быть установлены все необходимые пакеты Node.js).

Теперь последнее, что нужно сделать, это подключить Travis CI к репозиторию, что очень просто.шаги;см. их учебник по GitHub .Это создаст специальный сайт Travis, подключенный к данному репозиторию GitHub.

Тогда все готово.При каждом нажатии Travis будет создавать страницу в безголовом («невидимом») браузере Chrome и запускать функцию my_test(), отправляя необязательные уведомления в случае сбоя.Каждое сообщение через console.log() в этой функции (или в любой другой функции приложения, выполняемой во время тестирования) отображается на сайте Travis.Еще одна приятная вещь: если вы хотите, чтобы тестирование прекратилось в определенной точке (например, если некоторые условия не выполняются), вы можете просто написать throw "this and this condition was not met", что также останавливает тест Тревиса в этой точке, показывая это сообщение об ошибке.

Для моей реальной реализации см .: https://github.com/gasparl/citapp_pc (Конечно, есть некоторые дополнения, но логика та же.)

0 голосов
/ 25 января 2019

Git имеет хуки, которые позволяют запускать разные задачи, когда что-то происходит.В этом случае вам нужно добавить логику в pre-push hook

Пример сценария pre-push: https://github.com/git/git/blob/master/templates/hooks--pre-push.sample

  1. Редактировать ваши хуки в .git/hooks/pre-push
  2. Сценарий, используемый для перехватчиков git, может быть выполнен на любом языке сценариев, поэтому в этом случае вы будете использовать свой код js.
  3. Не забудьте добавить shebang для узла
#!/usr/bin/env node
Обязательно возвращайте ненулевой ответ, если хотите остановить push.
...