test: init

.github/workflows/ci.yml

@@ -27,3 +27,4 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: npm ci
     - run: npm run build --if-present
+    - run: npm test

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+coverage

karma.conf.js

@@ -1,32 +1,27 @@
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
 module.exports = function(config) {
     config.set({
         basePath: '',
-        frameworks: ['mocha', 'chai'],
+        frameworks: ['mocha'],
-        plugins: [
-            'karma-mocha',
-            'karma-chai',
-            'karma-mocha-reporter',
-            'karma-chrome-launcher',
-            'karma-firefox-launcher'
-        ],
-        client: {
-        },
         files: [
-            'node_modules/resemblejs/resemble.js',
+            'dist/rendering.test.js',
-            'canvas2svg.js',
-            'test/globals.js',
-            'test/example/*.js',
-            'test/unit.spec.js',
-            'test/example.spec.js'
         ],
         preprocessors: {
+            '**/*.js': ['sourcemap']
+        },
+        reporters: ['progress', 'coverage', 'mocha'],
+        coverageReporter: {
+            type: 'lcovonly',
+            dir : 'coverage/',
+            subdir: '.',
+            file: 'lcov.info'
         },
-        reporters: ['mocha'],
         port: 9876,
         colors: true,
-        logLevel: config.LOG_DISABLE,
+        logLevel: config.LOG_INFO,
         autoWatch: false,
-        browsers: ['Firefox', 'Chrome'],
+        browsers: ['ChromeHeadless'],
-        singleRun: true
+        singleRun: true // output all logs to stdout instead of click debug button
     });
 };

package.json

@@ -4,8 +4,9 @@
   "description": "svgcanvas",
   "main": "dist/svgcanvas.js",
   "scripts": {
-    "build": "rollup index.js -o dist/svgcanvas.js -f cjs && rollup index.js -o dist/svgcanvas.esm.js -f es && rollup test/index.js -o dist/test.js -f iife",
+    "build": "rollup index.js -o dist/svgcanvas.js -f cjs && rollup index.js -o dist/svgcanvas.esm.js -f es && rollup test/index.js -o dist/test.js -f iife && rollup test/rendering.test.js -o dist/rendering.test.js -f iife",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test": "karma start"
   },
   "repository": {
     "type": "git",
@@ -19,6 +20,14 @@
   "author": "Zeno Zeng",
   "license": "MIT",
   "devDependencies": {
+    "karma": "^6.3.17",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage": "^2.2.0",
+    "karma-mocha": "^2.0.1",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-sourcemap-loader": "^0.3.8",
+    "mocha": "^9.2.1",
+    "puppeteer": "^13.5.0",
     "rollup": "^2.67.0"
   }
 }

test/rendering.test.js

@@ -0,0 +1,94 @@
+import {Element} from '../index'
+import arc from './tests/arc'
+import arcTo from './tests/arcTo'
+import arcTo2 from './tests/arcTo2'
+import emptyArc from './tests/emptyArc'
+import fillstyle from './tests/fillstyle'
+import globalAlpha from './tests/globalalpha'
+import gradient from './tests/gradient'
+import linecap from './tests/linecap'
+import linewidth from './tests/linewidth'
+import rgba from './tests/rgba'
+import rotate from './tests/rotate'
+import saveandrestore from './tests/saveandrestore'
+import setLineDash from './tests/setLineDash'
+import text from './tests/text'
+import tiger from './tests/tiger'
+import transform from './tests/transform'
+import pattern from "./tests/pattern";
+
+const tests = {
+    tiger,
+    arc,
+    arcTo,
+    arcTo2,
+    emptyArc,
+    fillstyle,
+    globalAlpha,
+    gradient,
+    linecap,
+    linewidth,
+    rgba,
+    rotate,
+    saveandrestore,
+    setLineDash,
+    text,
+    transform,
+    pattern
+};
+
+const config = {
+    pixelDensity: 3 // for 200% and 150%
+}
+
+class RenderingTester {
+    constructor(fn) {
+        this.fn = fn
+    }
+
+    async test() {
+        const width = 500;
+        const height = 500;
+        const canvas = document.createElement('canvas');
+        const svgcanvas = new Element();
+    }
+
+    getPixels(image) {
+        const canvas = document.createElement('canvas');
+        const width = 100 * config.pixelDensity;
+        const height = 100 * config.pixelDensity;
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(image, 0, 0, width, height);
+        return ctx.getImageData(0, 0, width, height);
+    }    
+
+    diffPixels(imgData1, imgData2) {
+        const canvas = document.createElement('canvas');
+        const width = 100 * config.pixelDensity;
+        const height = 100 * config.pixelDensity;
+        const diffImgData = canvas.getContext('2d').getImageData(0, 0, width, height);
+        let $this = this;
+        for (var i = 0; i < imgData1.data.length; i += 4) {
+            var indexes = [i, i+1, i+2, i+3];
+            indexes.forEach(function(i) {
+                diffImgData.data[i] = 0;
+            });
+            if(indexes.some(function(i) {
+                return Math.abs(imgData1.data[i] - imgData2.data[i]) > $this.maxPixelDiff;
+            })) {
+                diffImgData.data[i+3] = 255; // set black
+            }
+        }
+        return diffImgData;
+    }    
+}
+
+describe('RenderTest', () => {
+    for (let fn of Object.keys(tests)) {
+        it(`should render same results for ${fn}`, async () => {
+
+        })
+    }
+})