Increase coverage by improving e2e and unit testing

Significantly redesigned the e2e testing to allow testing of zooming and checking that values changes if we wait enough in e2e. Add also unit testing.
ekacnet · May 1, 2024 · 1c69705 · 1c69705
1 parent 509217f
commit 1c69705
Show file tree

Hide file tree

Showing 19 changed files with 1,070 additions and 64 deletions.
diff --git a/cypress/e2e/e2e.cy.js b/cypress/e2e/e2e.cy.js
diff --git a/demo/random.html b/demo/random.html
@@ -120,7 +120,8 @@
         .each(function(d) { context.axis().ticks(12).orient(d).render(d3.select(this)); });
 
     const r = d3.select("body").append("div")
-        .attr("class", "rule");
+        .attr("class", "rule")
+        .attr('id', 'rule');
 
     context.rule().render(r);
     const z = d3.select("body").append("div")

diff --git a/demo/random1s.html b/demo/random1s.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+    body {
+        font-family: "Helvetica Neue", Helvetica, sans-serif;
+        margin: 30px auto;
+        width: 1280px;
+        position: relative;
+    }
+
+    header {
+        padding: 6px 0;
+    }
+
+    .group {
+        margin-bottom: 1em;
+    }
+
+    .axis {
+        font: 10px sans-serif;
+        position: fixed;
+        pointer-events: none;
+        z-index: 2;
+    }
+
+    .axis text {
+        -webkit-transition: fill-opacity 250ms linear;
+    }
+
+    .axis path {
+        display: none;
+    }
+
+    .axis line {
+        stroke: #000;
+        shape-rendering: crispEdges;
+    }
+
+    .axis.top {
+        background-image: linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
+        background-image: -o-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
+        background-image: -moz-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
+        background-image: -webkit-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
+        background-image: -ms-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
+        top: 0px;
+        padding: 0 0 24px 0;
+    }
+
+    .axis.bottom {
+        background-image: linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
+        background-image: -o-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
+        background-image: -moz-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
+        background-image: -webkit-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
+        background-image: -ms-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
+        bottom: 0px;
+        padding: 24px 0 0 0;
+    }
+
+    .horizon {
+        border-bottom: solid 1px #000;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .horizon {
+        border-top: solid 1px #000;
+        border-bottom: solid 1px #000;
+    }
+
+    .horizon + .horizon {
+        border-top: none;
+    }
+
+    .horizon canvas {
+        display: block;
+    }
+
+    .horizon .title,
+    .horizon .value {
+        bottom: 0;
+        line-height: 30px;
+        margin: 0 6px;
+        position: absolute;
+        text-shadow: 0 1px 0 rgba(255,255,255,.5);
+        white-space: nowrap;
+    }
+
+    .horizon .title {
+        left: 0;
+    }
+
+    .horizon .value {
+        right: 0;
+    }
+
+    .zoom{
+        z-index: 2;
+    }
+    .line {
+        background: #000;
+        z-index: 2;
+    }
+
+</style>
+<script src="lib/d3.v7.min.js" charset="utf-8"></script>
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.js"></script>-->
+<script src="./cubism-es.standalone.js"></script>
+<body id="demo">
+<script>
+
+    var context = cubism.context()
+        .step(1e3)
+        .size(1280);
+
+    d3.select("#demo").selectAll(".axis")
+        .data(["top", "bottom"])
+        .enter().append("div")
+        .attr("class", function(d) { return d + " axis"; })
+        .each(function(d) { context.axis().ticks(12).orient(d).render(d3.select(this)); });
+
+    const r = d3.select("body").append("div")
+        .data(d3.range(1, 2).map(rulePoints))
+        .attr("class", "rule")
+        .attr('id', 'rule');
+
+    context.rule().render(r);
+    const z = d3.select("body").append("div")
+        .attr("class", "zoom");
+
+    context.zoom(function(start, end) {
+        console.log(`Doing a zoom from point ${start} to point ${end}`);
+        context.zoom().zoomTime(start, end);
+    }).render(z);
+
+    const h = d3.select("body").selectAll(".horizon")
+        .data(d3.range(1, 50).map(random))
+        .enter().insert("div", ".bottom")
+        .attr("class", "horizon");
+    context.horizon()
+        .extent([-10, 10])
+        .render(h);
+
+    context.on("focus", function(i) {
+        d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
+    });
+
+    context.setCSSClass('primary', 'abc');
+    var newName = context.getCSSClass('primary');
+    console.log("After setting className for 'primary'", newName);
+
+    // Pretend to generate a list of interesting point(s)
+    // for the moment just one in the middle ...
+    function rulePoints(x) {
+        var values = [];
+        var last;
+        return context.metric(function(start, stop, step, callback) {
+            start = +start, stop = +stop;
+            if (isNaN(last)) last = start;
+            while (last < stop) {
+                last += step;
+                var v = (last -start) - ((stop - start) / 2);
+                if ( v > 0 && v <= step) {
+                    values.push(5);
+                } else {
+                    values.push(null);
+                }
+            }
+            callback(null, values);
+        }, "rule")
+    }
+
+    // Replace this with context.graphite and graphite.metric!
+    function random(x) {
+        var value = 0,
+            values = [],
+            i = 0,
+            last, last_width = 0,
+            last_stop = null, last_step =0;
+
+        var metric_name = x;
+
+        return context.metric(function(start, stop, step, callback) {
+            start = +start, stop = +stop;
+            if (isNaN(last)) last = start;
+            while (last < stop) {
+                last += step;
+                value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += x * .02)));
+                values.push(value);
+            }
+            if (last_step == 0) {
+                last_width = (stop - start) / step;
+            }
+            if (last_step ==  0 || last_step == step) {
+                // first argument is the error, null indicates no error
+                callback(null, values.slice((start - stop) / step));
+            } else {
+                // calculate last_start relative to last stop, store witdth
+                last_start = last_stop - (last_step * last_width);
+                // get the last width / nb_points elements
+                var tmp = values.slice(-last_width);
+                var offset_start = (start - last_start) / last_step
+                var cur = start - step;
+                var offset = offset_start;
+                var old_cur = start;
+                var new_values = []
+                while (cur < stop) {
+                    while((cur = cur + step ) < old_cur && cur <= stop) new_values.push(tmp[offset  - 1])
+                    if (cur < stop) {
+                        new_values.push(tmp[offset])
+                        old_cur = old_cur + last_step;
+                        offset++;
+                    }
+                }
+                callback(null, new_values);
+            }
+            last_stop = stop;
+            last_step = step;
+        }, metric_name);
+    }
+
+</script>
diff --git a/demo/stock.html b/demo/stock.html
@@ -107,10 +107,11 @@
 <script>
 
     var delay = Date.now()  - new Date(2012, 4, 2)
+    var size = 1280;
     var context = cubism.context()
         .serverDelay(delay)
         .step(864e5) // 86400 000 aka 86400 seconds
-        .size(1280)
+        .size(size)
         .stop();
 
     d3.select("#demo").selectAll(".axis")

diff --git a/jest-setup.js b/jest-setup.js
@@ -15,4 +15,7 @@ Object.defineProperty(global, 'matchMedia', {
   })),
 });
 
+// Disable this and use instead jest-canvas-mock
+/*
 HTMLCanvasElement.prototype.getContext = () => {};
+*/
diff --git a/jest.config.ts b/jest.config.ts
@@ -16,10 +16,14 @@ const ESModules = [
 
 module.exports = {
   modulePaths: ['./src'],
+  setupFiles: ['jest-canvas-mock'],
   setupFilesAfterEnv: ['./jest-setup.js'],
   testEnvironment: 'jest-environment-jsdom',
   testMatch: ['<rootDir>/src/tests/*.{test,jest}.{js,ts}'],
   coverageDirectory: 'coverage/jest',
+  testEnvironmentOptions: {
+    url: 'https://localhost/?mockedQueryString=true&Another=2',
+  },
   watchPathIgnorePatterns: [
     '/node_modules/', // Ignore changes in node_modules directory
     '/dist/', // Ignore changes in the dist directory

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "precombine:reports": "npm run copy:reports && mkdir -p .nyc_output",
     "combine:reports": "npx nyc merge coverage/combined && mv coverage.json .nyc_output/out.json",
     "prereport:combined": "npm run combine:reports",
+    "prereport:lcov": "npm run precombine:reports",
     "report:combined": "npx nyc report --reporter text --reporter clover --report json --report-dir coverage",
     "report:lcov": "genhtml coverage/cypress/lcov.info coverage/jest/lcov.info --output-directory=coverage/lcov-report",
     "pretty": "prettier --write \"{src,__{tests,demo,dist}__}/**/*.js\""
@@ -69,6 +70,7 @@
     "cypress-localstorage-commands": "^2.2.5",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "mocha": "^10.4.0",
     "nyc": "^15.1.0",

diff --git a/rollup.config.dev.mjs b/rollup.config.dev.mjs
@@ -46,7 +46,7 @@ export default {
   external: ['d3'],
   output: [
     {
-      file: 'dist/cubism-es.standalone.js',
+      file: 'demo/cubism-es.standalone.js',
       format: 'umd',
       name: 'cubism',
       globals: {

diff --git a/src/context/apiAxis.js b/src/context/apiAxis.js
@@ -28,7 +28,9 @@ const apiRemove = (axisState) => ({
 const apiFocusFormat = (axisState) => ({
   focusFormat: (_ = null) => {
     if (_ === null)
-      return axisState.format === formatDefault(axisState.context) ? null : _;
+      return axisState.format === formatDefault(axisState.context)
+        ? null
+        : axisState.format;
     axisState.format = _ == null ? formatDefault(context) : _;
     return axisState;
   },

diff --git a/src/context/apiRule.js b/src/context/apiRule.js
@@ -58,9 +58,11 @@ const apiRender = (state) => ({
           .style('top', 0)
           .style('bottom', 0)
           .style('width', '1px')
-          .style('pointer-events', 'none');
-
-        lines.style('left', (i) => i + 'px');
+          .style('pointer-events', 'none')
+          .style('left', (d) => {
+            var px = d + 'px';
+            return px;
+          });
       };
 
       _context.on('change.rule-' + id, change);
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,7 @@ Object.defineProperty(global, 'matchMedia', { @@
       })),
     });
+    // Disable this and use instead jest-canvas-mock
+    /*
     HTMLCanvasElement.prototype.getContext = () => {};
+    */