e2e testing for jschart test environment

cdm-tests/src/App.js

@@ -238,20 +238,26 @@ class App extends Component {
           <h1 className="App-title">JSChart CDM Demo</h1>
         </header>
         <br></br>
-        <div id="jschart_cdm_fio">
+        <div>
           <h3 id="select_fio_dataset">
-	    FIO Chart Dataset Selection:
-	  </h3>
+            FIO Chart Dataset Selection:
+	        </h3>
+          <div id="jschart_cdm_fio">
+          </div>
         </div>
-        <div id="jschart_cdm_iostat">
+        <div>
           <h3 id="select_iostat_dataset">
-	    IOSTAT Chart Dataset Selection:
-	  </h3>
+            IOSTAT Chart Dataset Selection:
+	        </h3>
+          <div id="jschart_cdm_iostat">
+          </div>
         </div>
-        <div id="jschart_cdm_mpstat">
+        <div>
           <h3 id="select_mpstat_dataset">
-	    MPSTAT Chart Dataset Selection:
-	  </h3>
+            MPSTAT Chart Dataset Selection:
+	        </h3>
+          <div id="jschart_cdm_mpstat">
+          </div>
         </div>
       </div>
     );

jschart/index.js

@@ -2813,8 +2813,13 @@ function build_chart(chart) {
     );
     return;
   }
-
-  var table = chart.dom.div.append("table");
+
+  var table = chart.dom.div.append("table")
+    .attr("class", "graphtable")
+    .style("max-width", chart.dimensions.viewport_width+"px")
+    .style("flex", "0.9 0.9 auto")
+    .style("width", 0)
+    .style("word-break", "break-all");
 
   var row = table.append("tr")
 	.classed("wrapper", true)
@@ -2917,13 +2922,8 @@ function build_chart(chart) {
     .enter()
     .append("svg")
     .classed("svg", true)
-    .attr(
-      "width",
-      chart.dimensions.viewport_width +
-        chart.dimensions.margin.left +
-        chart.dimensions.margin.right
-    )
-    .attr("height", get_svg_height(chart));
+    .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left +
+      chart.dimensions.margin.right) + " " + (get_svg_height(chart) ) + "");
 
   chart.chart.defs = chart.chart.svg.append("defs");
   if (!chart.options.scatterplot) {
@@ -2973,7 +2973,7 @@ function build_chart(chart) {
     .data([chart])
     .enter()
     .append("text")
-    .classed("actionlabel endtext", true)
+    .classed("actionlabel endtext reset", true)
     .attr(
       "x",
       chart.dimensions.viewport_width + chart.dimensions.margin.right - 10
@@ -2994,7 +2994,7 @@ function build_chart(chart) {
   if (typeof saveSvgAsPng.saveSvgAsPng == "function") {
     chart.chart.container
       .append("text")
-      .classed("actionlabel middletext", true)
+      .classed("actionlabel middletext savePNG", true)
       .attr("x", (chart.dimensions.viewport_width / 4) * 2)
       .attr("y", -chart.dimensions.margin.top + 29)
       .on("click", function() {
@@ -3010,7 +3010,7 @@ function build_chart(chart) {
     .data([chart])
     .enter()
     .append("text")
-    .classed("actionlabel middletext", true)
+    .classed("actionlabel middletext showGraph", true)
     .attr("x", (chart.dimensions.viewport_width / 4) * 3 - 40)
     .attr("y", -chart.dimensions.margin.top + 29)
     .text("Show");
@@ -3027,7 +3027,7 @@ function build_chart(chart) {
     .data([chart])
     .enter()
     .append("text")
-    .classed("actionlabel middletext", true)
+    .classed("actionlabel middletext hideGraph", true)
     .attr("x", (chart.dimensions.viewport_width / 4) * 3 + 11)
     .attr("y", -chart.dimensions.margin.top + 29)
     .text("Hide");
@@ -3109,7 +3109,8 @@ function build_chart(chart) {
 
       create_download(chart.chart_title + ".csv", "text/csv", "utf-8", string);
     })
-    .text("Export Data as CSV");
+    .text("Export Data as CSV")
+    .attr("id","csvdown");
 
   chart.chart.container
     .append("text")
@@ -3647,7 +3648,9 @@ function load_datasets(chart) {
 
     if (chart.datasets.all.length > chart.dataset_count) {
       console.log('Resizing SVG for chart "' + chart.chart_title + '".');
-      chart.chart.svg.attr("height", get_svg_height(chart));
+      chart.chart.svg.attr("height", get_svg_height(chart))
+        .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left +
+          chart.dimensions.margin.right) + " " + (get_svg_height(chart)) + "");
       console.log('...finished resizing SVG for chart "' + chart.chart_title + '".');
     }
 
@@ -3701,6 +3704,9 @@ exports.create_jschart = function(
     stacked = 0;
   }
 
+  d3.select('#'+location)
+    .style("display","flex")
+
   // add an entry to the chart generating queue
   charts_queue.defer(
     generate_chart,
@@ -3717,6 +3723,9 @@ exports.create_jschart = function(
 exports.finish_page = function () {
   // wait for initial chart generation to complete before logging that it is done and changing the page background
   // note: chart datasets may still be loading asynchronously
+  d3.selectAll(".svg")
+    .style("width",'100%')
+    .style("height","auto")
   charts_queue.await(function(error, results) {
     d3.select("body").classed("completedpage", true);
     console.log("Finished creating all charts");
@@ -5374,7 +5383,9 @@ function reset_chart(chart) {
 
   reset_axes_domains(chart);
 
-  chart.chart.svg.attr("height", get_svg_height(chart));
+  chart.chart.svg.attr("height", get_svg_height(chart))
+    .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left +
+      chart.dimensions.margin.right) + " " + (get_svg_height(chart)) + "");
 
   chart.state.reset = true;
 }
@@ -5385,7 +5396,7 @@ function get_svg_height(chart) {
          chart.dimensions.margin.bottom +
          ( Math.ceil(chart.datasets.all.length / chart.state.legend_columns) -
            1 + chart.options.legend_entries.length
-	 ) * chart.dimensions.legend_properties.row_height;
+        ) * chart.dimensions.legend_properties.row_height;
 }
 
 function reload_chart(chart) {

tests/package.json

@@ -15,7 +15,13 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "jest --config=testconfig.json ",
+    "debug": "NODE_ENV=debug npm test",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "jest": "^24.8.0",
+    "jest-cli": "^24.8.0",
+    "puppeteer": "^1.18.1"
   }
 }

tests/src/App.js

@@ -141,11 +141,13 @@ class App extends Component {
           <h1 className="App-title">JSChart Demos</h1>
         </header>
         <br></br>
-        <div id="jschart_dynamic">
+        <div>
           <h3 id="select_dataset">
-	    Dynamic Chart Dataset Selection:
-	  </h3>
-	</div>
+	        Dynamic Chart Dataset Selection:
+          </h3>
+          <div id="jschart_dynamic">
+	        </div>
+        </div> 
         <br/>
         <div id="jschart_json"></div>
         <br/>

tests/src/e2e/main.test.js

@@ -0,0 +1,92 @@
+const puppeteer = require('puppeteer')
+
+const isDebugging = () => {
+  const debugging_mode = {
+    headless: false,
+    slowMo: 250,
+    devtools: true,
+  }
+  return process.env.NODE_ENV === 'debug' ? debugging_mode : {}
+}
+
+let browser
+let page
+beforeAll(async () => {
+  browser = await puppeteer.launch(isDebugging())
+  page = await browser.newPage()
+  await page.goto('http://localhost:3000', { waitUntil: 'networkidle2' })
+  page.setViewport({ width: 500, height: 2400 })
+
+})
+
+describe('on page load', () => {
+  test('h1 loads correctly', async () => {
+
+    const html = await page.$eval('.App-title', e =>
+      e.innerHTML)
+
+    expect(html).toBe('JSChart Demos')
+
+  }, 16000)
+
+  test('dataset selection', async () => {
+    await page.waitForSelector('div > h3 > select');
+    const availDataset = ['Null', 'Dataset 1', 'Dataset 2']
+    let datasetNo = await page.$eval('div > h3 > select', node => node.innerText);
+    datasetNo = datasetNo.split('\n')
+    expect(datasetNo).toEqual(availDataset);
+  });
+  test(
+    'should show SVGs', async () => {
+      const divisions = ['jschart_dynamic', 'jschart_json', 'jschart_histogram', 'jschart_timeseries',
+        'jschart_xy', 'jschart_jitter', 'jschart_jitter_scatter'];
+
+      for (let divLocation of divisions) {
+        await page.waitForSelector(`#${divLocation} > table `, { visible: true });
+        await page.waitForSelector(`#${divLocation} > table > tr > td > svg  `, { visible: true });
+      }
+    },
+    30000
+  );
+  test('should download CSV on click', async () => {
+    await page.waitForSelector('text[id="csvdown"]', { visible: true });
+    await page.click('text[id="csvdown"]');
+  })
+  test('should download PNG on click', async () => {
+    await page.$$eval('.savePNG', elem => {
+      if (elem.innerText === 'Save as PNG') {
+        return elem.click();
+      }
+      return elem;
+    });
+  })
+  test('should show graph', async () => {
+    await page.$$eval('.showGraph', elem => {
+      if (elem.innerText === 'Show') {
+        return elem.click();
+      }
+      return elem;
+    });
+  })
+  test('should hide graph', async () => {
+    await page.$$eval('.hideGraph', elem => {
+      if (elem.innerText === 'Hide') {
+        return elem.click();
+      }
+      return elem;
+    });
+  })
+  test('should reset Zoom/Pan of graph', async () => {
+    await page.$$eval('.reset', elem => {
+      if (elem.innerText === 'Reset Zoom/Pan') {
+        return elem.click();
+      }
+      return elem;
+    });
+  })
+})
+afterAll(() => {
+  if (isDebugging()) {
+    browser.close()
+  }
+})

tests/testconfig.json

@@ -0,0 +1,4 @@
+{
+	"testEnvironment": "node"
+}
+