From 9a64fee9110623e6216e061981cdbfd89f1d6255 Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Mon, 1 Jul 2019 18:02:32 +0530 Subject: [PATCH 01/10] uses flex-box for svg containers --- jschart/index.js | 5 +++++ tests/src/App.js | 10 ++++++---- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/jschart/index.js b/jschart/index.js index 931b7ac..13331fe 100644 --- a/jschart/index.js +++ b/jschart/index.js @@ -3701,6 +3701,11 @@ exports.create_jschart = function( stacked = 0; } + d3.select('#'+location) + .style("display","flex") + .style( "justify-content","center") + .style("align-items","center") + // add an entry to the chart generating queue charts_queue.defer( generate_chart, diff --git a/tests/src/App.js b/tests/src/App.js index f17154a..4b7f42e 100644 --- a/tests/src/App.js +++ b/tests/src/App.js @@ -141,11 +141,13 @@ class App extends Component {

JSChart Demos



-
+

- Dynamic Chart Dataset Selection: -

-
+ Dynamic Chart Dataset Selection: + +
+
+


From 8c1bebe11c1f11837e22f42b12e0f3be611dd1bd Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Thu, 11 Jul 2019 18:34:00 +0530 Subject: [PATCH 02/10] e2e testing for jschart jschart requires an automated testing environment for the sample react app that contains demos of different charts offered by jschart. Puppeteer should tests for all possible interactions with jschart on the demo page. --- tests/package.json | 8 +++++- tests/src/e2e/main.test.js | 56 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 tests/src/e2e/main.test.js diff --git a/tests/package.json b/tests/package.json index 7ee4f09..4ee862f 100644 --- a/tests/package.json +++ b/tests/package.json @@ -15,7 +15,13 @@ "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", + "test": "jest", + "debug": "NODE_ENV=debug npm test", "eject": "react-scripts eject" + }, + "devDependencies": { + "jest": "^24.8.0", + "jest-cli": "^24.8.0", + "puppeteer": "^1.18.1" } } diff --git a/tests/src/e2e/main.test.js b/tests/src/e2e/main.test.js new file mode 100644 index 0000000..18fc383 --- /dev/null +++ b/tests/src/e2e/main.test.js @@ -0,0 +1,56 @@ +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 #jschart_dynamic > h3 > select'); + const availDataset =[ 'Null', 'Dataset 1', 'Dataset 2' ] + let datasetNo = await page.$eval('div #jschart_dynamic > 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 + ); +}) +afterAll(()=>{ + if(isDebugging()){ + browser.close() + } +}) \ No newline at end of file From 4725c7a8a55b4a22832f6a1f3dba381e07bd885e Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Thu, 18 Jul 2019 17:48:38 +0530 Subject: [PATCH 03/10] fixes environment.teardown error --- tests/package.json | 2 +- tests/testconfig.json | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 tests/testconfig.json diff --git a/tests/package.json b/tests/package.json index 4ee862f..aa7fba6 100644 --- a/tests/package.json +++ b/tests/package.json @@ -15,7 +15,7 @@ "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "jest", + "test": "jest --config=testconfig.json ", "debug": "NODE_ENV=debug npm test", "eject": "react-scripts eject" }, diff --git a/tests/testconfig.json b/tests/testconfig.json new file mode 100644 index 0000000..6b6940f --- /dev/null +++ b/tests/testconfig.json @@ -0,0 +1,4 @@ +{ + "testEnvironment": "node" +} + From 58236b76fae27939202a86f1e4faf824213d45d6 Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Thu, 18 Jul 2019 15:52:26 +0530 Subject: [PATCH 04/10] scaling svg according to parent div Please enter the commit message for your changes. Lines starting --- jschart/index.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/jschart/index.js b/jschart/index.js index 13331fe..ac9aeb4 100644 --- a/jschart/index.js +++ b/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) + 20) + ""); chart.chart.defs = chart.chart.svg.append("defs"); if (!chart.options.scatterplot) { @@ -3703,9 +3703,11 @@ exports.create_jschart = function( d3.select('#'+location) .style("display","flex") - .style( "justify-content","center") - .style("align-items","center") + d3.selectAll(".svg") + .style("width",'100%') + .style("height","auto") + // add an entry to the chart generating queue charts_queue.defer( generate_chart, @@ -5390,7 +5392,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) { From 7cd2c96fb3013fda10c59ab91543cfe58ced66f7 Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Thu, 25 Jul 2019 11:06:17 +0530 Subject: [PATCH 05/10] implements e2e tests for text links --- jschart/index.js | 11 ++-- tests/src/e2e/main.test.js | 128 ++++++++++++++++++++++++------------- 2 files changed, 88 insertions(+), 51 deletions(-) diff --git a/jschart/index.js b/jschart/index.js index 931b7ac..0e4ce11 100644 --- a/jschart/index.js +++ b/jschart/index.js @@ -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") diff --git a/tests/src/e2e/main.test.js b/tests/src/e2e/main.test.js index 18fc383..bf014d3 100644 --- a/tests/src/e2e/main.test.js +++ b/tests/src/e2e/main.test.js @@ -1,56 +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 : {} +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}) +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 #jschart_dynamic > h3 > select'); - const availDataset =[ 'Null', 'Dataset 1', 'Dataset 2' ] - let datasetNo = await page.$eval('div #jschart_dynamic > 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 - ); -}) -afterAll(()=>{ - if(isDebugging()){ - browser.close() - } +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 #jschart_dynamic > h3 > select'); + const availDataset = ['Null', 'Dataset 1', 'Dataset 2'] + let datasetNo = await page.$eval('div #jschart_dynamic > 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() + } }) \ No newline at end of file From c963bb795c297c49293551cecb8941fff3070f63 Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Thu, 25 Jul 2019 15:29:28 +0530 Subject: [PATCH 06/10] fixes abnormalities in cdm --- cdm-tests/src/App.js | 24 +++++++++++++++--------- jschart/index.js | 17 ++++++++++------- 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/cdm-tests/src/App.js b/cdm-tests/src/App.js index cece457..0a234ae 100644 --- a/cdm-tests/src/App.js +++ b/cdm-tests/src/App.js @@ -238,20 +238,26 @@ class App extends Component {

JSChart CDM Demo



-
+

- FIO Chart Dataset Selection: -

+ FIO Chart Dataset Selection: + +
+
-
+

- IOSTAT Chart Dataset Selection: -

+ IOSTAT Chart Dataset Selection: + +
+
-
+

- MPSTAT Chart Dataset Selection: -

+ MPSTAT Chart Dataset Selection: + +
+
); diff --git a/jschart/index.js b/jschart/index.js index ac9aeb4..36d60e7 100644 --- a/jschart/index.js +++ b/jschart/index.js @@ -2923,7 +2923,7 @@ function build_chart(chart) { .append("svg") .classed("svg", true) .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left + - chart.dimensions.margin.right) + " " + (get_svg_height(chart) + 20) + ""); + chart.dimensions.margin.right) + " " + (get_svg_height(chart) ) + ""); chart.chart.defs = chart.chart.svg.append("defs"); if (!chart.options.scatterplot) { @@ -3647,7 +3647,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 + '".'); } @@ -3704,10 +3706,6 @@ exports.create_jschart = function( d3.select('#'+location) .style("display","flex") - d3.selectAll(".svg") - .style("width",'100%') - .style("height","auto") - // add an entry to the chart generating queue charts_queue.defer( generate_chart, @@ -3724,6 +3722,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"); @@ -5381,7 +5382,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; } From ac9b6c7257b91f24aec63836b1f6b23623e93080 Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Thu, 11 Jul 2019 18:34:00 +0530 Subject: [PATCH 07/10] e2e testing for jschart jschart requires an automated testing environment for the sample react app that contains demos of different charts offered by jschart. Puppeteer should tests for all possible interactions with jschart on the demo page. --- tests/package.json | 8 +++++- tests/src/e2e/main.test.js | 56 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 tests/src/e2e/main.test.js diff --git a/tests/package.json b/tests/package.json index 7ee4f09..4ee862f 100644 --- a/tests/package.json +++ b/tests/package.json @@ -15,7 +15,13 @@ "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", + "test": "jest", + "debug": "NODE_ENV=debug npm test", "eject": "react-scripts eject" + }, + "devDependencies": { + "jest": "^24.8.0", + "jest-cli": "^24.8.0", + "puppeteer": "^1.18.1" } } diff --git a/tests/src/e2e/main.test.js b/tests/src/e2e/main.test.js new file mode 100644 index 0000000..18fc383 --- /dev/null +++ b/tests/src/e2e/main.test.js @@ -0,0 +1,56 @@ +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 #jschart_dynamic > h3 > select'); + const availDataset =[ 'Null', 'Dataset 1', 'Dataset 2' ] + let datasetNo = await page.$eval('div #jschart_dynamic > 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 + ); +}) +afterAll(()=>{ + if(isDebugging()){ + browser.close() + } +}) \ No newline at end of file From 221021b2813f91e62ac9d007559b5d0cdd68a913 Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Thu, 18 Jul 2019 17:48:38 +0530 Subject: [PATCH 08/10] fixes environment.teardown error --- tests/package.json | 2 +- tests/testconfig.json | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 tests/testconfig.json diff --git a/tests/package.json b/tests/package.json index 4ee862f..aa7fba6 100644 --- a/tests/package.json +++ b/tests/package.json @@ -15,7 +15,7 @@ "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "jest", + "test": "jest --config=testconfig.json ", "debug": "NODE_ENV=debug npm test", "eject": "react-scripts eject" }, diff --git a/tests/testconfig.json b/tests/testconfig.json new file mode 100644 index 0000000..6b6940f --- /dev/null +++ b/tests/testconfig.json @@ -0,0 +1,4 @@ +{ + "testEnvironment": "node" +} + From 87628f2e48dcfc3e0b7ff6664c9475746e4fbdd2 Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Thu, 25 Jul 2019 11:06:17 +0530 Subject: [PATCH 09/10] implements e2e tests for text links --- jschart/index.js | 11 ++-- tests/src/e2e/main.test.js | 128 ++++++++++++++++++++++++------------- 2 files changed, 88 insertions(+), 51 deletions(-) diff --git a/jschart/index.js b/jschart/index.js index 36d60e7..c656721 100644 --- a/jschart/index.js +++ b/jschart/index.js @@ -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") diff --git a/tests/src/e2e/main.test.js b/tests/src/e2e/main.test.js index 18fc383..bf014d3 100644 --- a/tests/src/e2e/main.test.js +++ b/tests/src/e2e/main.test.js @@ -1,56 +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 : {} +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}) +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 #jschart_dynamic > h3 > select'); - const availDataset =[ 'Null', 'Dataset 1', 'Dataset 2' ] - let datasetNo = await page.$eval('div #jschart_dynamic > 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 - ); -}) -afterAll(()=>{ - if(isDebugging()){ - browser.close() - } +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 #jschart_dynamic > h3 > select'); + const availDataset = ['Null', 'Dataset 1', 'Dataset 2'] + let datasetNo = await page.$eval('div #jschart_dynamic > 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() + } }) \ No newline at end of file From 04ed09a44fc350241797b37878fe4b1d8380700c Mon Sep 17 00:00:00 2001 From: Anisha1234 Date: Tue, 30 Jul 2019 16:12:28 +0530 Subject: [PATCH 10/10] fixes after rebase --- tests/src/e2e/main.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/src/e2e/main.test.js b/tests/src/e2e/main.test.js index bf014d3..70a065d 100644 --- a/tests/src/e2e/main.test.js +++ b/tests/src/e2e/main.test.js @@ -30,9 +30,9 @@ describe('on page load', () => { }, 16000) test('dataset selection', async () => { - await page.waitForSelector('div #jschart_dynamic > h3 > select'); + await page.waitForSelector('div > h3 > select'); const availDataset = ['Null', 'Dataset 1', 'Dataset 2'] - let datasetNo = await page.$eval('div #jschart_dynamic > h3 > select', node => node.innerText); + let datasetNo = await page.$eval('div > h3 > select', node => node.innerText); datasetNo = datasetNo.split('\n') expect(datasetNo).toEqual(availDataset); });