Add browser auto testing

package.json

@@ -6,9 +6,13 @@
   "scripts": {
     "start": "node scripts/server.js",
     "build": "webpack --config scripts/webpack.config.prod.js",
-    "prepublishOnly": "npm run build",
-    "test": "npm run test:node",
+    "wait": "wait-on http://localhost:3000/package.json",
+    "test": "npm-run-all -p -r start test:all",
+    "test:all": "npm-run-all wait test:browser:* test:node",
     "test:node": "nyc mocha --exit --bail --require ./scripts/test-helper.js ./tests/*.test.js",
+    "test:browser-tpl": "mocha-headless-chrome -a incognito -a no-sandbox -a disable-setuid-sandbox -t 300000",
+    "test:browser:detect": "npm run test:browser-tpl -- -f ./tests/browser/detect.test.html",
+    "test:browser:recognize": "npm run test:browser-tpl -- -f ./tests/browser/recognize.test.html",
     "lint": "eslint src"
   },
   "browser": {
@@ -20,6 +24,7 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
+    "cors": "^2.8.5",
     "eslint": "^5.9.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",
@@ -28,7 +33,10 @@
     "expect.js": "^0.3.1",
     "express": "^4.16.4",
     "mocha": "^5.2.0",
+    "mocha-headless-chrome": "^2.0.2",
+    "npm-run-all": "^4.1.5",
     "nyc": "^13.1.0",
+    "wait-on": "^3.2.0",
     "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2",
     "webpack-dev-middleware": "^3.4.0"

scripts/server.js

@@ -2,11 +2,13 @@ const webpack = require('webpack');
 const middleware = require('webpack-dev-middleware');
 const express = require('express');
 const path = require('path');
+const cors = require('cors');
 const webpackConfig = require('./webpack.config.dev');
 
 const compiler = webpack(webpackConfig);
 const app = express();
 
+app.use(cors());
 app.use('/', express.static(path.resolve(__dirname, '..')));
 app.use(middleware(compiler, { publicPath: '/dist' }));
 

scripts/test-helper.js

@@ -1,26 +1,3 @@
-const express = require('express');
-const path = require('path');
 global.expect = require('expect.js');
 global.fetch = require('node-fetch');
 global.Tesseract = require('../src');
-
-const app = express();
-let devServer = null;
-
-global.startServer = (done) => {
-  if (devServer === null) {
-    app.use('/', express.static(path.resolve(__dirname, '..')));
-    devServer = app.listen(3000, done);
-  } else {
-    done();
-  }
-};
-
-global.stopServer = (done) => {
-  if (devServer !== null) {
-    devServer.close(done);
-    devServer = null;
-  } else {
-    done();
-  }
-};

tests/browser/detect.test.html

@@ -7,7 +7,7 @@
     <div id="mocha"></div>
     <script src="../../node_modules/mocha/mocha.js"></script>
     <script src="../../node_modules/expect.js/index.js"></script>
-    <script src="/dist/tesseract.dev.js"></script>
+    <script src="http://localhost:3000/dist/tesseract.dev.js"></script>
     <script>mocha.setup('bdd');</script>
     <script src="../detect.test.js"></script>
     <script>

tests/browser/recognize.test.html

@@ -7,7 +7,7 @@
     <div id="mocha"></div>
     <script src="../../node_modules/mocha/mocha.js"></script>
     <script src="../../node_modules/expect.js/index.js"></script>
-    <script src="/dist/tesseract.dev.js"></script>
+    <script src="http://localhost:3000/dist/tesseract.dev.js"></script>
     <script>mocha.setup('bdd');</script>
     <script src="../recognize.test.js"></script>
     <script>

tests/detect.test.js

@@ -1,4 +1,5 @@
 const { TesseractWorker, utils: { loadLang } } = Tesseract;
+const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
 const IMAGE_PATH = 'http://localhost:3000/tests/assets/images';
 const loadLangOptions = {
   langPath: 'http://localhost:3000/tests/assets/traineddata',
@@ -8,6 +9,7 @@ const loadLangOptions = {
 const getWorker = options => (
   new TesseractWorker({
     cacheMethod: 'readOnly',
+    ...(isBrowser ? { workerPath: 'http://localhost:3000/dist/worker.dev.js' } : {}),
     ...loadLangOptions,
     ...options,
   })

tests/recognize.test.js

@@ -16,6 +16,7 @@ const loadLangOptions = {
 const getWorker = options => (
   new TesseractWorker({
     cacheMethod: 'readOnly',
+    ...(isBrowser ? { workerPath: 'http://localhost:3000/dist/worker.dev.js' } : {}),
     ...loadLangOptions,
     ...options,
   })
@@ -189,6 +190,7 @@ describe('recognize()',() => {
     beforeEach(function cb(done) {
       canvasDOM = document.createElement('canvas');
       imageDOM = document.createElement('img');
+      imageDOM.setAttribute('crossOrigin', 'Anonymous');
       imageDOM.onload = () => {
         canvasDOM.getContext('2d').drawImage(imageDOM, 0, 0);
         done();