Implemented automatic browser tests using Selenium.

dmester · Jul 31, 2020 · 4f2428d · 4f2428d
1 parent 86573dc
commit 4f2428d
Show file tree

Hide file tree

Showing 24 changed files with 380 additions and 232 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
+artifacts
 obj
 releases
 bower_components
 node_modules
 .vs
+.nyc_output
diff --git a/package.json b/package.json
@@ -23,9 +23,11 @@
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@types/jquery": "^3.3.30",
+    "blink-diff": "^1.0.13",
     "buble": "^0.20.0",
     "del": "^1.2.1",
     "eslint": "^7.4.0",
+    "express": "^4.17.1",
     "google-closure-compiler": "^20190618.0.0",
     "gulp": "^4.0.2",
     "gulp-buble": "^0.9.0",
@@ -35,6 +37,7 @@
     "gulp-wrap": "^0.15.0",
     "gulp-zip": "^5.0.0",
     "multipipe": "^4.0.0",
+    "pngjs": "^5.0.0",
     "rollup": "^2.21.0",
     "rollup-plugin-strip-banner": "^2.0.0",
     "rollup-plugin-terser": "^6.1.0",
@@ -50,6 +53,8 @@
     "lint": "eslint ./src/**/*.js",
     "test:unit": "gulp build-tests && tap obj/test/node/*.js",
     "test:types": "tsc -p ./test/types/module/tsconfig.json & tsc -p ./test/types/umd/tsconfig.json",
+    "test:browser-win": "tap ./test/e2e/browser/test.js --test-arg=win --test-arg=chrome,firefox,edge,ie11,ie10,ie9 --timeout=240",
+    "test:browser-macos": "tap ./test/e2e/browser/test.js --test-arg=macos --test-arg=chrome,firefox,safari --timeout=180",
     "test:node-cjs": "tap ./test/e2e/node/test.js",
     "test:node-esm": "tap ./test/e2e/node/test.mjs --no-esm",
     "test:webpack": "cd ./test/e2e/webpack && webpack-cli && tap ./app.bundle.js",

diff --git a/test/browser/index.html b/test/browser/index.html
diff --git a/test/browser/amd.html → test/e2e/browser/assets/amd.html b/test/browser/amd.html → test/e2e/browser/assets/amd.html
@@ -25,7 +25,7 @@ <h1>"Icon0" - AMD - Should be equal</h1>
         <script src="https://cdn.jsdelivr.net/requirejs/2.1.22/require.min.js"></script>
         <script>
 
-            requirejs(["../../dist/jdenticon"], function (jd) {
+            requirejs(["/dist/jdenticon.min.js"], function (jd) {
                 jd.update("#AMDIcon0", "Icon0");
             });
 

diff --git a/test/browser/center.html → test/e2e/browser/assets/center.html b/test/browser/center.html → test/e2e/browser/assets/center.html
@@ -52,29 +52,11 @@ <h1>"Icon2" - Should be centered vertically and horizontally</h1>
             backColor: "#00f1",
         };
         </script>
-        <script src="../../dist/jdenticon.min.js"></script>
+        <script src="/dist/jdenticon.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/require1k@1.0.1/require1k.min.js"></script>
         <script>
-
-            function init(jdenticon) {
-                jdenticon.update("#canvas-Icon2-update-vert,#svg-Icon2-update-vert", "Icon2");
-                jdenticon.update("#canvas-Icon2-update-hori,#svg-Icon2-update-hori", "Icon2");
-            }
-
-            if (typeof jdenticon !== "undefined") {
-                init(jdenticon);
-            }
-            else {
-                R("../../src/jdenticon", function (err, jdenticon) {
-                    if (err) {
-                        console.log(err);
-                    }
-                    else {
-                        init(jdenticon);
-                    }
-                });
-            }
-
+            jdenticon.update("#canvas-Icon2-update-vert,#svg-Icon2-update-vert", "Icon2");
+            jdenticon.update("#canvas-Icon2-update-hori,#svg-Icon2-update-hori", "Icon2");
         </script>
         <script src="common.js"></script>
     </body>

diff --git a/test/browser/common.js → test/e2e/browser/assets/common.js b/test/browser/common.js → test/e2e/browser/assets/common.js
@@ -1,7 +1,7 @@
 
 addEventListener("message", function (ev) {
     var data = JSON.parse(ev.data);
-    
+
     if ("scrollHeight" in data) {
         var iframe = document.getElementsByName(data.name);
         if (iframe && iframe.length) {

diff --git a/test/e2e/browser/assets/index.html b/test/e2e/browser/assets/index.html
@@ -0,0 +1,65 @@
+<html>
+<head>
+    <title>Jdenticon browser test</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+    <script src="common.js"></script>
+
+    <div class="test-metadata">
+        <div class="jdenticon-info">Unknown Jdenticon version.</div>
+        <div class="browser-info">Unknown browser</div>
+    </div>
+
+    <!-- Tests are run in iframes to allow isolated testing of loaders and configuration -->
+    <iframe name="amd" class="amd" src="amd.html"></iframe>
+    <iframe name="normal" src="normal.html"></iframe>
+    <iframe name="padding-0" src="padding.html?padding=0"></iframe>
+    <iframe name="padding-30" src="padding.html?padding=30"></iframe>
+    <iframe name="center" src="center.html"></iframe>
+
+    <script src="/dist/jdenticon.min.js"></script>
+    <script>
+
+        var BROWSER_REGEX = ["Firefox/", "SamsungBrowser/", "Opera/", "OPR/", "MSIE ", "Trident/", "Edge?/", "Chrome/", "Safari/"];
+
+        function htmlEncode(text) {
+            var div = document.createElement("div");
+            div.innerText = text;
+            return div.innerHTML;
+        }
+
+        function detectBrowser() {
+            var html = navigator.userAgent;
+            var hasMatch = false;
+
+            for (var i = 0; !hasMatch && i < BROWSER_REGEX.length; i++) {
+                var tempHtml = html.replace(new RegExp("(\\b" + BROWSER_REGEX[i] + "\\S+)|<|>|&", "g"), function (match) {
+                    if (match === "<") return "&lt;";
+                    if (match === ">") return "&gt;";
+                    if (match === "&") return "&amp;";
+                    hasMatch = true;
+                    return "<strong>" + htmlEncode(match) + "</strong>";
+                })
+
+                if (hasMatch) {
+                    html = tempHtml;
+                }
+            }
+
+            if (!hasMatch) {
+                html = htmlEncode(html);
+            }
+
+            var browserInfo = document.querySelector(".browser-info");
+            browserInfo.innerHTML = html;
+        }
+
+        var versionInfo = document.querySelector(".jdenticon-info");
+        versionInfo.innerText = "Jdenticon " + jdenticon.version;
+
+        detectBrowser();
+
+    </script>
+</body>
+</html>
diff --git a/test/browser/normal.html → test/e2e/browser/assets/normal.html b/test/browser/normal.html → test/e2e/browser/assets/normal.html
@@ -158,85 +158,66 @@ <h1>"Icon04" - Should be equal but different to the icon above</h1>
         };
         </script>
         <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.slim.min.js"></script>
-        <script src="../../dist/jdenticon.min.js"></script>
+        <script src="/dist/jdenticon.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/require1k@1.0.1/require1k.min.js"></script>
         <script>
-
-            function init(jdenticon) {
-                // Explicit config
-                setTimeout(function () {
-                    var explicitConfig = {
-                        lightness: {
-                            color: [0.00, 0.00],
-                            grayscale: [0.00, 0.00]
-                        },
-                        saturation: {
-                            color: 0.00,
-                            grayscale: 0.00
-                        },
-                        padding: 0.08
-                    };
-                    jdenticon.update("#explicit-config-update", null, explicitConfig);
-                    var ctx = document.getElementById("explicit-config-drawIcon").getContext("2d");
-                    jdenticon.drawIcon(ctx, "Icon0", 100, explicitConfig);
-                    document.getElementById("explicit-config-toSvg").innerHTML = 
-                        jdenticon.toSvg("Icon0", 100, explicitConfig);
-                    $("#explicit-config-jquery").jdenticon("Icon0", explicitConfig);
-                });
+            // Explicit config
+            setTimeout(function () {
+                var explicitConfig = {
+                    lightness: {
+                        color: [0.00, 0.00],
+                        grayscale: [0.00, 0.00]
+                    },
+                    saturation: {
+                        color: 0.00,
+                        grayscale: 0.00
+                    },
+                    padding: 0.08
+                };
+                jdenticon.update("#explicit-config-update", null, explicitConfig);
+                var ctx = document.getElementById("explicit-config-drawIcon").getContext("2d");
+                jdenticon.drawIcon(ctx, "Icon0", 100, explicitConfig);
+                document.getElementById("explicit-config-toSvg").innerHTML = 
+                    jdenticon.toSvg("Icon0", 100, explicitConfig);
+                $("#explicit-config-jquery").jdenticon("Icon0", explicitConfig);
+            });
 
-                // update()
-                jdenticon.update("#canvas-Jdenticon-update-value,#svg-Jdenticon-update-value", "Icon04");
-                jdenticon.update("#canvas-Jdenticon-update-hash,#svg-Jdenticon-update-hash", "f97deee25dde01afb80ec1c7e4fae746492ddacb");
-
-                // drawIcon()
-                var ctx = document.getElementById("canvas-Jdenticon-drawIcon-value").getContext("2d");
-                jdenticon.drawIcon(ctx, "Icon04", 100, 0.08);
-
-                var ctx = document.getElementById("canvas-Jdenticon-drawIcon-hash").getContext("2d");
-                jdenticon.drawIcon(ctx, "f97deee25dde01afb80ec1c7e4fae746492ddacb", 100, 0.08);
-
-                // toSvg()
-                document.getElementById("svg-Jdenticon-toSvg-value").innerHTML = 
-                    jdenticon.toSvg("Icon04", 100);
-
-                document.getElementById("svg-Jdenticon-toSvg-hash").innerHTML = 
-                    jdenticon.toSvg("f97deee25dde01afb80ec1c7e4fae746492ddacb", 100);
-
-                // jQuery
-                $("#canvas-Jdenticon-jquery-value,#svg-Jdenticon-jquery-value").jdenticon("Icon04");
-                $("#canvas-Jdenticon-jquery-hash,#svg-Jdenticon-jquery-hash").jdenticon("f97deee25dde01afb80ec1c7e4fae746492ddacb");
-
-                // Dynamic icons
-                setTimeout(function () {
-                    // Canvas
-                    document.getElementById("placeholder-canvas-Jdenticon-dynamic").innerHTML = 
-                        '<canvas data-jdenticon-value="Icon04" width="100" height="100"> Error </canvas>';
-                    document.getElementById("canvas-Jdenticon-resize").setAttribute("width", "100");
-                    document.getElementById("canvas-Jdenticon-resize").setAttribute("height", "100");
-
-                    // Svg
-                    document.getElementById("placeholder-svg-Jdenticon-dynamic").innerHTML = 
-                        '<svg data-jdenticon-value="Icon04" width="100" height="100"> Error </svg>';
-                    document.getElementById("svg-Jdenticon-resize").setAttribute("width", "100");
-                    document.getElementById("svg-Jdenticon-resize").setAttribute("height", "100");
-                }, 1000);
+            // update()
+            jdenticon.update("#canvas-Jdenticon-update-value,#svg-Jdenticon-update-value", "Icon04");
+            jdenticon.update("#canvas-Jdenticon-update-hash,#svg-Jdenticon-update-hash", "f97deee25dde01afb80ec1c7e4fae746492ddacb");
+
+            // drawIcon()
+            var ctx = document.getElementById("canvas-Jdenticon-drawIcon-value").getContext("2d");
+            jdenticon.drawIcon(ctx, "Icon04", 100, 0.08);
+
+            var ctx = document.getElementById("canvas-Jdenticon-drawIcon-hash").getContext("2d");
+            jdenticon.drawIcon(ctx, "f97deee25dde01afb80ec1c7e4fae746492ddacb", 100, 0.08);
+
+            // toSvg()
+            document.getElementById("svg-Jdenticon-toSvg-value").innerHTML = 
+                jdenticon.toSvg("Icon04", 100);
+
+            document.getElementById("svg-Jdenticon-toSvg-hash").innerHTML = 
+                jdenticon.toSvg("f97deee25dde01afb80ec1c7e4fae746492ddacb", 100);
+
+            // jQuery
+            $("#canvas-Jdenticon-jquery-value,#svg-Jdenticon-jquery-value").jdenticon("Icon04");
+            $("#canvas-Jdenticon-jquery-hash,#svg-Jdenticon-jquery-hash").jdenticon("f97deee25dde01afb80ec1c7e4fae746492ddacb");
+
+            // Dynamic icons
+            setTimeout(function () {
+                // Canvas
+                document.getElementById("placeholder-canvas-Jdenticon-dynamic").innerHTML = 
+                    '<canvas data-jdenticon-value="Icon04" width="100" height="100"> Error </canvas>';
+                document.getElementById("canvas-Jdenticon-resize").setAttribute("width", "100");
+                document.getElementById("canvas-Jdenticon-resize").setAttribute("height", "100");
 
-            }
-
-            if (typeof jdenticon !== "undefined") {
-                init(jdenticon);
-            }
-            else {
-                R("../../src/jdenticon", function (err, jdenticon) {
-                    if (err) {
-                        console.log(err);
-                    }
-                    else {
-                        init(jdenticon);
-                    }
-                });
-            }
-
+                // Svg
+                document.getElementById("placeholder-svg-Jdenticon-dynamic").innerHTML = 
+                    '<svg data-jdenticon-value="Icon04" width="100" height="100"> Error </svg>';
+                document.getElementById("svg-Jdenticon-resize").setAttribute("width", "100");
+                document.getElementById("svg-Jdenticon-resize").setAttribute("height", "100");
+            }, 1000);
         </script>
         <script src="common.js"></script>
     </body>