Test JavaScript on CI

Author: tagliala

.rubocop.yml

@@ -6,6 +6,7 @@ AllCops:
   TargetRailsVersion: 5.0
   TargetRubyVersion: 2.3
   Exclude:
+    - 'gemfiles/vendor/bundle/**/*'
     - 'node_modules/**/*'
     - 'vendor/bundle/**/*'
 
@@ -28,6 +29,7 @@ Metrics/AbcSize:
 Metrics/BlockLength:
   Exclude:
     - '*.gemspec'
+    - 'Rakefile'
     - 'test/**/*'
 
 Metrics/ClassLength:

.travis.yml

@@ -1,15 +1,38 @@
 language: ruby
+
 rvm:
   - 2.3.8
   - 2.4.10
   - 2.5.8
   - 2.6.6
   - 2.7.1
   - ruby-head
+
+addons:
+  chrome: stable
+
 gemfile:
   - gemfiles/csv_15.0.gemfile
   - gemfiles/csv_16.0.gemfile
+
+cache:
+  bundler: true
+  directories:
+    - node_modules
+  yarn: true
+
+before_install:
+  - nvm install 12
+  - node -v
+  - npm i -g yarn@^1.21.1
+  - yarn
+  - LATEST_CHROMEDRIVER_VERSION=`curl -s "https://chromedriver.storage.googleapis.com/LATEST_RELEASE"`
+  - curl "https://chromedriver.storage.googleapis.com/${LATEST_CHROMEDRIVER_VERSION}/chromedriver_linux64.zip" -O
+  - unzip chromedriver_linux64.zip -d ~/bin
+
 matrix:
   allow_failures:
     - rvm: ruby-head
   fast_finish: true
+
+script: bundle exec rake test:all

Rakefile

@@ -20,24 +20,35 @@ namespace :test do
     test.warning = false
   end
 
-  desc %(Test Javascript code)
-  multitask js: ['regenerate_javascript', 'test:server', 'test:open']
+  desc %(Test JavaScript code)
+  task js: ['regenerate_javascript', 'test:server', 'test:open']
 
   desc %(Starts the test server)
   task :server do
-    system 'bundle exec ruby test/javascript/server.rb'
+    puts "Opening test app at #{test_url} ..."
+    server_command = 'bundle exec ruby test/javascript/server.rb'
+
+    if ENV['UI']
+      system server_command
+    else
+      @server = fork { exec server_command }
+    end
+
+    # Give Sinatra some time to start
+    sleep 3
   end
 
   desc %(Starts the test server which reloads everything on each refresh)
   task :reloadable do
-    exec "bundle exec shotgun test/javascript/config.ru -p #{PORT} --server thin"
+    exec "bundle exec shotgun test/javascript/config.ru -p #{test_port} --server thin"
   end
 
   task :open do
-    url = "http://localhost:#{PORT}"
-    puts "Opening test app at #{url} ..."
-    sleep 3
-    system(*browse_cmd(url))
+    if ENV['UI']
+      system(*browse_cmd(url))
+    else
+      run_headless_tests
+    end
   end
 end
 
@@ -61,8 +72,6 @@ def perform_git_commit
   end
 end
 
-PORT = 4567
-
 # Returns an array e.g.: ['open', 'http://example.com']
 def browse_cmd(url)
   require 'rbconfig'
@@ -87,5 +96,24 @@ def which(cmd)
   nil
 end
 
+def run_headless_tests
+  require 'English'
+
+  system "yarn test #{test_url}?autostart=false"
+  exit_code = $CHILD_STATUS.exitstatus
+
+  Process.kill 'INT', @server
+
+  exit exit_code unless exit_code.zero?
+end
+
+def test_port
+  @test_port ||= 4567
+end
+
+def test_url
+  @test_url ||= "http://localhost:#{test_port}"
+end
+
 task(:build).prerequisites.unshift task(:commit_javascript)
 task(:build).prerequisites.unshift task(:regenerate_javascript)

package.json

@@ -19,12 +19,15 @@
   },
   "homepage": "https://github.com/DavyJonesLocker/client_side_validations-simple_form",
   "scripts": {
-    "build": "standard --verbose && rollup -c"
+    "build": "standard --verbose && rollup -c",
+    "test": "test/javascript/run-qunit.js"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@rollup/plugin-node-resolve": "^7.1.1",
+    "chrome-launcher": "^0.13.1",
+    "puppeteer-core": "^2.1.1",
     "rollup": "^2.6.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-copy": "^3.3.0",
@@ -50,6 +53,7 @@
   "standard": {
     "ignore": [
       "/dist/",
+      "/gemfiles/",
       "/test/",
       "/vendor/"
     ]

test/javascript/public/test/settings.js

@@ -1,3 +1,5 @@
+QUnit.config.autostart = window.location.search.search('autostart=false') < 0
+
 QUnit.config.urlConfig.push({
   id: 'jquery',
   label: 'jQuery version',

test/javascript/run-qunit.js

@@ -0,0 +1,145 @@
+#!/usr/bin/env node
+
+// Inspired by David Taylor's qunit puppeteer
+//
+
+/* global QUnit */
+
+var args = process.argv.slice(2)
+
+if (args.length < 1 || args.length > 2) {
+  console.log('Usage: node run-qunit.js <URL> <timeout>')
+  process.exit(1)
+}
+
+const targetURL = args[0]
+const timeout = parseInt(args[1] || 300000, 10)
+
+const chromeLauncher = require('chrome-launcher')
+const puppeteer = require('puppeteer-core');
+
+(async () => {
+  console.log('\nRunning QUnit tests\n')
+
+  function wait (ms) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+
+  try {
+    const chromeExecutablePath = chromeLauncher.Launcher.getInstallations()[0]
+    const browser = await puppeteer.launch({ executablePath: chromeExecutablePath, headless: true })
+    const page = await browser.newPage()
+
+    // Attach to browser console log events, and log to node console
+    await page.on('console', (...params) => {
+      for (let i = 0; i < params.length; ++i) { console.log(`${(typeof (params[i]) === 'object') ? params[i]._text : params[i]}`) }
+    })
+
+    var moduleErrors = []
+    var testErrors = []
+    var assertionErrors = []
+
+    await page.exposeFunction('harness_moduleStart', context => {
+      testErrors = []
+      var skippedTests = context.tests.filter(t => t.skip).length
+      if (skippedTests === context.tests.length) {
+        // console.log(`\x1b[4m\x1b[36mSkipping Module: ${context.name}\x1b[0m`)
+      } else {
+        // console.log(`\x1b[4mRunning Module: ${context.name}\x1b[0m`)
+      }
+    })
+
+    await page.exposeFunction('harness_moduleDone', context => {
+      if (context.failed) {
+        var msg = 'Module Failed: ' + context.name + '\n' + testErrors.join('\n')
+        moduleErrors.push(msg)
+      }
+    })
+
+    await page.exposeFunction('harness_testDone', context => {
+      if (context.failed) {
+        var msg = '  Test Failed: ' + context.name + assertionErrors.join('    ')
+        testErrors.push(msg)
+        assertionErrors = []
+        process.stdout.write('\x1b[31mF\x1b[0m')
+      } else if (context.skipped) {
+        process.stdout.write('\x1b[33mS\x1b[0m')
+      } else {
+        process.stdout.write('\x1b[32m.\x1b[0m')
+      }
+    })
+
+    await page.exposeFunction('harness_log', context => {
+      if (context.result) { return } // If success don't log
+
+      var msg = '\n    Assertion Failed:'
+      if (context.message) {
+        msg += ' ' + context.message
+      }
+
+      if (context.expected) {
+        msg += '\n      Expected: ' + context.expected + ', Actual: ' + context.actual
+      }
+
+      assertionErrors.push(msg)
+    })
+
+    await page.exposeFunction('harness_done', context => {
+      process.stdout.write('\n')
+
+      if (moduleErrors.length > 0) {
+        for (var idx = 0; idx < moduleErrors.length; idx++) {
+          console.log(moduleErrors[idx])
+        }
+      }
+
+      var stats = [
+        'Time: ' + context.runtime + 'ms',
+        'Total: ' + context.total,
+        'Passed: ' + context.passed,
+        'Failed: ' + context.failed
+      ]
+
+      console.log(`\n${stats.join(', ')}\n`)
+
+      browser.close()
+
+      if (context.failed > 0) {
+        process.exit(1)
+      } else {
+        process.exit()
+      }
+    })
+
+    await page.goto(targetURL)
+
+    await page.evaluate(() => {
+      QUnit.config.testTimeout = 10000
+
+      // Cannot pass the window.harness_blah methods directly, because they are
+      // automatically defined as async methods, which QUnit does not support
+      QUnit.log((context) => { window.harness_log(context) })
+      QUnit.moduleStart((context) => { window.harness_moduleStart(context) })
+      QUnit.moduleDone((context) => { window.harness_moduleDone(context) })
+      QUnit.testDone((context) => { window.harness_testDone(context) })
+      QUnit.done((context) => { window.harness_done(context) })
+
+      if (Object.keys(QUnit.urlParams).length) {
+        console.log('With params: ' + JSON.stringify(QUnit.urlParams) + '\n')
+      }
+
+      if (!QUnit.config.autostart) {
+        QUnit.start()
+      }
+    })
+
+    await wait(timeout)
+
+    console.error('\nTests timed out\n')
+    browser.close()
+    process.exit(124)
+  } catch (err) {
+    console.error(`\nERROR: ${err}\n`)
+    process.exit(1)
+  }
+})()

test/javascript/server.rb

@@ -60,3 +60,7 @@ def test(*types)
 get '/' do
   erb :index
 end
+
+get '/favicon.ico' do
+  halt 200
+end