diff --git a/.eslintrc.js b/.eslintrc.js index 6db866b..f7ca289 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,5 +5,15 @@ module.exports = { 'extends': [ 'naat', 'plugin:vue/vue3-strongly-recommended' + ], + 'rules': { 'vue/multi-word-component-names': 'off' }, + 'overrides': [ + { + files: ['app/views/scripts/components/Tools.vue'], + rules: { + 'max-lines': 'off', + 'no-undef': 'off' + } + } ] }; diff --git a/app/views/scripts/components/Tools.vue b/app/views/scripts/components/Tools.vue index 78509cd..9b4bdd2 100644 --- a/app/views/scripts/components/Tools.vue +++ b/app/views/scripts/components/Tools.vue @@ -3,12 +3,19 @@ - - - - @@ -43,7 +82,11 @@ @click="selectTool($event)" title="Navigate" > - Navigate + Navigate + - - - - - - - - - - - - - - - @@ -221,11 +428,10 @@ import { Chat, RangeSlider, Row, - Col, - ScriptConsole, -} from "nwl-components"; -import { ref, onMounted } from "vue"; -import useVisualization from "../store/visualization"; + ScriptConsole +} from 'nwl-components'; + +import useVisualization from '../store/visualization'; const { title, @@ -248,7 +454,7 @@ const sliceChange = (slice) => { Microdraw.sliderOnChange(slice); }; -const toggleFullscreen = async () => { +const toggleFullscreen = () => { fullscreen.value = !fullscreen.value; setTimeout(() => { Microdraw.resizeAnnotationOverlay(); @@ -274,8 +480,10 @@ const toggleOntology = () => { }; const selectTool = (event) => { - currentTool.value = event.currentTarget.id; - Microdraw.toolSelection(event.currentTarget.id); + let tool = event.currentTarget.id; + if (tool === 'doDelete') { tool = 'delete'; } + currentTool.value = tool; + Microdraw.toolSelection(tool); }; const sendChatMessage = (message) => { @@ -322,5 +530,5 @@ button img.icon { height: calc(100% - 22px); } - - \ No newline at end of file + + diff --git a/test/UI.js b/test/UI.js index f1c79d3..9a5acc5 100644 --- a/test/UI.js +++ b/test/UI.js @@ -5,7 +5,7 @@ module.exports = { 'BACKWARD': '#backward', 'CANVAS': '#openseadragon1', 'COPY':'#copy', - 'DELETE':'#delete', + 'DELETE':'#doDelete', 'DELETEPOINT':'#deletePoint', 'DRAW':'#draw', 'DRAWLine':'#drawLine', @@ -15,9 +15,9 @@ module.exports = { 'FRONT': '#front', 'HOME':'#home', 'NAVIGATE': '#navigate', - 'NEXT':'#next', + 'NEXT':'.range-slider button:last-child', 'PASTE':'#paste', - 'PREVIOUS':'#previous', + 'PREVIOUS':'.range-slider button:first-child', 'REDO': '#redo', 'ROTATE':'#rotate', 'SAVE':'#save', diff --git a/test/e2e/microdraw.addRegion.spec.js b/test/e2e/microdraw.addRegion.spec.js index 522d389..3a4399f 100644 --- a/test/e2e/microdraw.addRegion.spec.js +++ b/test/e2e/microdraw.addRegion.spec.js @@ -1,10 +1,13 @@ /* global Microdraw */ 'use strict'; -const UI = require('../UI'); -const U = require('../mocha.test.util'); const chai = require('chai'); -var {assert} = chai; +const puppeteer = require('puppeteer'); + +const U = require('../mocha.test.util'); +const UI = require('../UI'); + +const {assert} = chai; // try { // require('puppeteer'); @@ -12,21 +15,21 @@ var {assert} = chai; // console.warn(`[microdraw]: dependency error: puppeteer needs to be installed manually. - npm i puppeteer`); // process.exit(1); // } -const puppeteer = require('puppeteer'); - -const shadow = (sel) => `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; let browser; let page; -const shadowclick = async function (sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; + +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; + describe('Editing tools: Add regions', () => { before(async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'] }); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'] }); }); it('opens a data page', async () => { page = await browser.newPage(); @@ -49,7 +52,7 @@ describe('Editing tools: Add regions', () => { // eslint-disable-next-line max-statements it('draws a square', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); // draw a square A await page.mouse.click(400, 400); await page.mouse.click(500, 400); @@ -58,7 +61,7 @@ describe('Editing tools: Add regions', () => { await page.mouse.click(400, 400); await U.waitUntilHTMLRendered(page); - const filename = "addRegion.02.cat-square-A.png"; + const filename = 'addRegion.02.cat-square-A.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -85,7 +88,7 @@ describe('Editing tools: Add regions', () => { await page.mouse.click(450, 450); await U.waitUntilHTMLRendered(page); - const filename = "addRegion.03.cat-square-B.png"; + const filename = 'addRegion.03.cat-square-B.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -106,7 +109,7 @@ describe('Editing tools: Add regions', () => { it('does the union of the 2 squares', async () => { // select union tool - await shadowclick(UI.ADDREGION); + await clickTool(UI.ADDREGION); // click on square A (square B is already selected) await page.mouse.click(405, 405); @@ -115,7 +118,7 @@ describe('Editing tools: Add regions', () => { await page.mouse.click(540, 540); await U.waitUntilHTMLRendered(page); - const filename = "addRegion.04.cat-union.png"; + const filename = 'addRegion.04.cat-union.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ diff --git a/test/e2e/microdraw.copy-paste.spec.js b/test/e2e/microdraw.copy-paste.spec.js index 54f2d76..e24caa8 100644 --- a/test/e2e/microdraw.copy-paste.spec.js +++ b/test/e2e/microdraw.copy-paste.spec.js @@ -1,10 +1,13 @@ /* global Microdraw */ 'use strict'; -const UI = require('../UI'); -const U = require('../mocha.test.util'); const chai = require('chai'); -var {assert} = chai; +const puppeteer = require('puppeteer'); + +const U = require('../mocha.test.util'); +const UI = require('../UI'); + +const {assert} = chai; // try { // require('puppeteer'); @@ -12,21 +15,20 @@ var {assert} = chai; // console.warn(`[microdraw]: dependency error: puppeteer needs to be installed manually. - npm i puppeteer`); // process.exit(1); // } -const puppeteer = require('puppeteer'); -const shadow = (sel) => `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; let browser; let page; -const shadowclick = async function (sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; describe('Editing tools: Copy and paste', () => { before(async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'] }); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'] }); }); it('opens a data page', async () => { page = await browser.newPage(); @@ -49,7 +51,7 @@ describe('Editing tools: Copy and paste', () => { // eslint-disable-next-line max-statements it('draws a square', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); // draw a square await page.mouse.click(400, 400); await page.mouse.click(500, 400); @@ -58,7 +60,7 @@ describe('Editing tools: Copy and paste', () => { await page.mouse.click(400, 400); await U.waitUntilHTMLRendered(page); - const filename = "copyPaste.02.cat-square.png"; + const filename = 'copyPaste.02.cat-square.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -78,11 +80,11 @@ describe('Editing tools: Copy and paste', () => { // eslint-disable-next-line max-statements it('move the first square and paste a second one', async () => { // move feature is currently disabled, the square will stay in place - await shadowclick(UI.SELECT); + await clickTool(UI.SELECT); await page.mouse.click(405, 405); - await shadowclick(UI.COPY); + await clickTool(UI.COPY); - await shadowclick(UI.SELECT); + await clickTool(UI.SELECT); await page.mouse.click(405, 405); await page.mouse.move(405, 405); @@ -90,10 +92,10 @@ describe('Editing tools: Copy and paste', () => { await page.mouse.move(355, 355); await page.mouse.up(); - await shadowclick(UI.PASTE); + await clickTool(UI.PASTE); await U.waitUntilHTMLRendered(page); - const filename = "copyPaste.03.cat-paste.png"; + const filename = 'copyPaste.03.cat-paste.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ diff --git a/test/e2e/microdraw.draw.spec.js b/test/e2e/microdraw.draw.spec.js index 202faa9..da42fb7 100644 --- a/test/e2e/microdraw.draw.spec.js +++ b/test/e2e/microdraw.draw.spec.js @@ -1,10 +1,13 @@ /* global Microdraw */ 'use strict'; -const UI = require('../UI'); -const U = require('../mocha.test.util'); const chai = require('chai'); -var {assert} = chai; +const puppeteer = require('puppeteer'); + +const U = require('../mocha.test.util'); +const UI = require('../UI'); + +const {assert} = chai; // try { // require('puppeteer'); @@ -12,21 +15,28 @@ var {assert} = chai; // console.warn(`[microdraw]: dependency error: puppeteer needs to be installed manually. - npm i puppeteer`); // process.exit(1); // } -const puppeteer = require('puppeteer'); -const shadow = (sel) => `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; +const shadow = (sel) => `document.querySelector("#microdraw").shadowRoot.querySelector("${sel}")`; + +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; let browser; let page; +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); + await handle.click(); +}; + const shadowclick = async function (sel) { const handle = await page.evaluateHandle(shadow(sel)); + console.log('handle', handle); await handle.click(); }; describe('Editing tools: draw polygons and curves', () => { it('opens a data page', async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'], dumpio: false}); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'], dumpio: false}); page = await browser.newPage(); await page.setViewport({width: U.width, height: U.height}); await page.goto( // load test page @@ -47,14 +57,14 @@ describe('Editing tools: draw polygons and curves', () => { // eslint-disable-next-line max-statements it('draws a triangle', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); // draw a triangle await page.mouse.click(300, 100); await page.mouse.click(400, 100); await page.mouse.click(350, 200); await page.mouse.click(300, 100); - const filename = "draw.02.cat-triangle.png"; + const filename = 'draw.02.cat-triangle.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -96,14 +106,14 @@ describe('Editing tools: draw polygons and curves', () => { // eslint-disable-next-line max-statements it('draws and saves a triangle', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); // draw a triangle await page.mouse.click(300, 100); await page.mouse.click(400, 100); await page.mouse.click(350, 200); await page.mouse.click(300, 100); - await shadowclick(UI.SAVE); // select the save tool + await clickTool(UI.SAVE); // select the save tool await page.goto( // reloads 'http://localhost:3000/data?source=/test_data/cat.json&slice=0', { waitUntil: 'networkidle0' } @@ -132,11 +142,11 @@ describe('Editing tools: draw polygons and curves', () => { // eslint-disable-next-line max-statements it('selects, deletes and saves the triangle', async () => { - await shadowclick(UI.SELECT); // select tool + await clickTool(UI.SELECT); // select tool await shadowclick(UI.CANVAS); // select triangle - await page.mouse.click(350, 150); - await shadowclick(UI.DELETE); // delete tool - await shadowclick(UI.SAVE); // select the save tool + await page.mouse.click(350, 182); + await clickTool(UI.DELETE); // delete tool + await clickTool(UI.SAVE); // select the save tool await page.goto( // reload 'http://localhost:3000/data?source=/test_data/cat.json&slice=0', { waitUntil: 'networkidle0' } @@ -164,7 +174,7 @@ describe('Editing tools: draw polygons and curves', () => { // eslint-disable-next-line max-statements it('draws a curve', async () => { // page.on('console', message => console.log(`${message.type().substr(0, 3).toUpperCase()} ${message.text()}`)); - await shadowclick(UI.DRAW); + await clickTool(UI.DRAW); const o = [U.width*2/3, U.height/2]; const r = U.width/4; @@ -181,7 +191,7 @@ describe('Editing tools: draw polygons and curves', () => { await page.mouse.up(); await U.waitUntilHTMLRendered(page); - const filename = "draw.06.cat-draw-circle.png"; + const filename = 'draw.06.cat-draw-circle.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -201,7 +211,7 @@ describe('Editing tools: draw polygons and curves', () => { // eslint-disable-next-line max-statements it('adds a point', async () => { - await shadowclick(UI.ADDPOINT); + await clickTool(UI.ADDPOINT); const o = [U.width*2/3, U.height/2]; const r = U.width/4; @@ -211,7 +221,7 @@ describe('Editing tools: draw polygons and curves', () => { await page.mouse.click(x, y); await U.waitUntilHTMLRendered(page); - const filename = "draw.07.cat-draw-addPoint.png"; + const filename = 'draw.07.cat-draw-addPoint.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -230,7 +240,7 @@ describe('Editing tools: draw polygons and curves', () => { // eslint-disable-next-line max-statements it('removes a point', async () => { - await shadowclick(UI.DELETEPOINT); + await clickTool(UI.DELETEPOINT); const o = [U.width*2/3, U.height/2]; const r = U.width/4; @@ -240,7 +250,7 @@ describe('Editing tools: draw polygons and curves', () => { await page.mouse.click(x, y); await U.waitUntilHTMLRendered(page); - const filename = "draw.08.cat-draw-deletePoint.png"; + const filename = 'draw.08.cat-draw-deletePoint.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -258,6 +268,6 @@ describe('Editing tools: draw polygons and curves', () => { }).timeout(0); after(async () => { - await browser.close(); + //await browser.close(); }); }); diff --git a/test/e2e/microdraw.multiple-slices.spec.js b/test/e2e/microdraw.multiple-slices.spec.js index 425c402..55d9c60 100644 --- a/test/e2e/microdraw.multiple-slices.spec.js +++ b/test/e2e/microdraw.multiple-slices.spec.js @@ -1,26 +1,28 @@ /* global Microdraw */ 'use strict'; -const UI = require('../UI'); -const U = require('../mocha.test.util'); const chai = require('chai'); -const {assert} = chai; - const puppeteer = require('puppeteer'); -const shadow = (sel) => `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; +const U = require('../mocha.test.util'); +const UI = require('../UI'); + +const {assert} = chai; -const shadowclick = async function (sel, testPage) { - const handle = await testPage.evaluateHandle(shadow(sel)); - await handle.click(); -}; + +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; let browser; let page; +const clickTool = async function (tool, testPage) { + const handle = await testPage.evaluateHandle(selectTool(tool)); + await handle.click(); +}; + describe('Editing tools: draw in multiple slices', () => { before(async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'] }); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'] }); }); it('opens data page', async () => { page = await browser.newPage(); @@ -34,28 +36,28 @@ describe('Editing tools: draw in multiple slices', () => { { waitUntil: 'networkidle0' } ); - const filename = "multiple-slices.01.slice1.png"; + const filename = 'multiple-slices.01.slice1.png'; await page.screenshot({path: U.newPath + filename}); }).timeout(0); // eslint-disable-next-line max-statements it('draw and save a square in 1st slice', async () => { - await shadowclick(UI.DRAWPOLYGON, page); + await clickTool(UI.DRAWPOLYGON, page); await page.mouse.click(400, 100); await page.mouse.click(500, 100); await page.mouse.click(500, 200); await page.mouse.click(400, 200); await page.mouse.click(400, 100); - await shadowclick(UI.SAVE, page); + await clickTool(UI.SAVE, page); await U.delay(1000); - const filename = "multiple-slices.02.slice1-square.png"; + const filename = 'multiple-slices.02.slice1-square.png'; await page.screenshot({path: U.newPath + filename}); // const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); // assert(diff ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length, pathSegments: Microdraw.ImageInfo[0].Regions[0].path.segments.length @@ -71,32 +73,32 @@ describe('Editing tools: draw in multiple slices', () => { // eslint-disable-next-line max-statements it('move to the 2nd slice and draw and save a triangle', async () => { - await shadowclick(UI.NEXT, page); + await U.waitUntilHTMLRendered(page); + await clickTool(UI.NEXT, page); await U.waitUntilHTMLRendered(page); - let filename = "multiple-slices.03.slice2.png"; + let filename = 'multiple-slices.03.slice2.png'; await page.screenshot({path: U.newPath + filename}); - await shadowclick(UI.DRAWPOLYGON, page); + await clickTool(UI.DRAWPOLYGON, page); await page.mouse.click(300, 100); await page.mouse.click(400, 100); await page.mouse.click(350, 200); await page.mouse.click(300, 100); - await shadowclick(UI.SAVE, page); + await clickTool(UI.SAVE, page); await U.delay(1000); - filename = "multiple-slices.04.slice2-triangle.png"; + filename = 'multiple-slices.04.slice2-triangle.png'; await page.screenshot({path: U.newPath + filename}); // const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); // assert(diff ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[1].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[1].Regions.length, pathSegments: Microdraw.ImageInfo[1].Regions[0].path.segments.length })); - // console.log(res); assert(res.sliceIndex === 1, 'Slice index is not 1'); assert(res.regionsExists === true, 'No Regions object'); @@ -111,11 +113,11 @@ describe('Editing tools: draw in multiple slices', () => { { waitUntil: 'networkidle0' } ); - const filename = "multiple-slices.05.slice1-reload.png"; + const filename = 'multiple-slices.05.slice1-reload.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length, pathSegments: Microdraw.ImageInfo[0].Regions[0].path.segments.length @@ -132,17 +134,17 @@ describe('Editing tools: draw in multiple slices', () => { it('triangle is still present after reloading 2nd slice', async () => { await page.reload(); await U.waitUntilHTMLRendered(page); - await shadowclick(UI.NEXT, page); + await clickTool(UI.NEXT, page); await U.waitUntilHTMLRendered(page); const res = await page.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[1].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[1].Regions.length, pathSegments: Microdraw.ImageInfo[1].Regions[0].path.segments.length })); - const filename = "multiple-slices.06.slice2-reload.png"; + const filename = 'multiple-slices.06.slice2-reload.png'; await page.screenshot({path: U.newPath + filename}); // console.log(res); @@ -161,51 +163,51 @@ describe('Editing tools: draw in multiple slices', () => { // cleanup 1st slice await U.waitUntilHTMLRendered(page); - await shadowclick(UI.SELECT, page); + await clickTool(UI.SELECT, page); await page.mouse.click(450, 150); - await shadowclick(UI.DELETE, page); - await shadowclick(UI.SAVE, page); + await clickTool(UI.DELETE, page); + await clickTool(UI.SAVE, page); await U.delay(1000); // cleanup 2nd slice - await shadowclick(UI.NEXT, page); + await clickTool(UI.NEXT, page); await U.waitUntilHTMLRendered(page); - await shadowclick(UI.SELECT, page); + await clickTool(UI.SELECT, page); await page.mouse.click(350, 150); - await shadowclick(UI.DELETE, page); - await shadowclick(UI.SAVE, page); + await clickTool(UI.DELETE, page); + await clickTool(UI.SAVE, page); await U.delay(1000); await page.reload(); await U.waitUntilHTMLRendered(page); // check 1st slice is clean - await shadowclick(UI.PREVIOUS, page); + await clickTool(UI.PREVIOUS, page); await U.waitUntilHTMLRendered(page); - let filename = "multiple-slices.07.slice1-cleanup.png"; + let filename = 'multiple-slices.07.slice1-cleanup.png'; await page.screenshot({path: U.newPath + filename}); const res1 = await page.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length })); // console.log(res1); assert(res1.sliceIndex === 0, 'Slice index is not 0'); - assert(res1.regionsExists === true, 'No Regions object in slice 2'); - assert(res1.regionsLength === 0, `Regions.length is ${res1.regionsLength} instead of 0 in slice 2`); + assert(res1.regionsExists === true, 'No Regions object in slice 1'); + assert(res1.regionsLength === 0, `Regions.length is ${res1.regionsLength} instead of 0 in slice 1`); // check 2nd slice is clean - await shadowclick(UI.NEXT, page); + await clickTool(UI.NEXT, page); await U.waitUntilHTMLRendered(page); const res2 = await page.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[1].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[1].Regions.length })); // console.log(res2); - filename = "multiple-slices.08.slice2-cleanup.png"; + filename = 'multiple-slices.08.slice2-cleanup.png'; await page.screenshot({path: U.newPath + filename}); assert(res2.sliceIndex === 1, 'Slice index is not 1'); diff --git a/test/e2e/microdraw.multiple-users.spec.js b/test/e2e/microdraw.multiple-users.spec.js index 8f56871..4372df8 100644 --- a/test/e2e/microdraw.multiple-users.spec.js +++ b/test/e2e/microdraw.multiple-users.spec.js @@ -3,17 +3,19 @@ /* global Microdraw */ 'use strict'; -const UI = require('../UI'); -const U = require('../mocha.test.util'); const chai = require('chai'); +const puppeteer = require('puppeteer'); + +const U = require('../mocha.test.util'); +const UI = require('../UI'); + const {assert} = chai; -const puppeteer = require('puppeteer'); -const shadow = (sel) => `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; -const shadowclick = async function (sel, testPage) { - const handle = await testPage.evaluateHandle(shadow(sel)); +const clickTool = async function (tool, testPage) { + const handle = await testPage.evaluateHandle(selectTool(tool)); await handle.click(); }; @@ -24,7 +26,7 @@ let filename, res; // eslint-disable-next-line max-statements describe('Editing tools: multiple users drawing on the same dataset', () => { before(async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'] }); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'] }); }); describe('simultaneously opening the same data set', () => { @@ -36,11 +38,11 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { { waitUntil: 'networkidle0' } ); - filename = "multiple-users.01.page1-slice1.png"; + filename = 'multiple-users.01.page1-slice1.png'; await page1.screenshot({path: U.newPath + filename}); res = await page1.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length })); @@ -58,14 +60,14 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { 'http://localhost:3000/data?source=/test_data/cat.json&slice=0', { waitUntil: 'networkidle0' } ); - await shadowclick(UI.NEXT, page2); + await clickTool(UI.NEXT, page2); await U.waitUntilHTMLRendered(page2); - filename = "multiple-users.02.page2-slice2.png"; + filename = 'multiple-users.02.page2-slice2.png'; await page2.screenshot({path: U.newPath + filename}); res = await page2.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[1].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[1].Regions.length })); @@ -79,19 +81,19 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { describe('simultaneously drawing on different slices', () => { it('draws triangle in slice 1, browser 1, and save', async () => { await page1.bringToFront(); - await shadowclick(UI.DRAWPOLYGON, page1); + await clickTool(UI.DRAWPOLYGON, page1); await page1.mouse.click(300, 100); await page1.mouse.click(400, 100); await page1.mouse.click(350, 200); await page1.mouse.click(300, 100); - await shadowclick(UI.SAVE, page1); + await clickTool(UI.SAVE, page1); await U.waitUntilHTMLRendered(page1); - filename = "multiple-users.03.page1-slice1-triangle.png"; + filename = 'multiple-users.03.page1-slice1-triangle.png'; await page1.screenshot({path: U.newPath + filename}); res = await page1.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length, pathSegments: Microdraw.ImageInfo[0].Regions[0].path.segments.length @@ -107,20 +109,20 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { // eslint-disable-next-line max-statements it('draw square in slice 2, browser 2, and save', async () => { await page2.bringToFront(); - await shadowclick(UI.DRAWPOLYGON, page2); + await clickTool(UI.DRAWPOLYGON, page2); await page2.mouse.click(400, 100); await page2.mouse.click(500, 100); await page2.mouse.click(500, 200); await page2.mouse.click(400, 200); await page2.mouse.click(400, 100); - await shadowclick(UI.SAVE, page2); + await clickTool(UI.SAVE, page2); await U.waitUntilHTMLRendered(page2); - filename = "multiple-users.04.page2-slice2-square.png"; + filename = 'multiple-users.04.page2-slice2-square.png'; await page2.screenshot({path: U.newPath + filename}); res = await page2.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[1].Regions.length, pathSegments: Microdraw.ImageInfo[1].Regions[0].path.segments.length @@ -133,14 +135,14 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { }); it('show triangle in slice 1 when browser 2 moves to slice 1', async () => { - await shadowclick(UI.PREVIOUS, page2); + await clickTool(UI.PREVIOUS, page2); await U.waitUntilHTMLRendered(page2); - filename = "multiple-users.05.page2-slice1-triangle.png"; + filename = 'multiple-users.05.page2-slice1-triangle.png'; await page2.screenshot({path: U.newPath + filename}); res = await page2.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length, pathSegments: Microdraw.ImageInfo[0].Regions[0].path.segments.length @@ -155,14 +157,14 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { it('show square in slice 2 when browser 1 moves to slice 2', async () => { await page1.bringToFront(); - await shadowclick(UI.NEXT, page1); + await clickTool(UI.NEXT, page1); await U.waitUntilHTMLRendered(page1); - filename = "multiple-users.06.page1-slice2-square.png"; + filename = 'multiple-users.06.page1-slice2-square.png'; await page1.screenshot({path: U.newPath + filename}); res = await page1.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[1].Regions.length, pathSegments: Microdraw.ImageInfo[1].Regions[0].path.segments.length @@ -179,12 +181,12 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { describe('simultaneously deleting', () => { // eslint-disable-next-line max-statements it('delete triangle in browser 1, disappears from both browsers', async () => { - await shadowclick(UI.PREVIOUS, page1); + await clickTool(UI.PREVIOUS, page1); await U.waitUntilHTMLRendered(page1); - await shadowclick(UI.SELECT, page1); + await clickTool(UI.SELECT, page1); await page1.mouse.click(350, 150); - await shadowclick(UI.DELETE, page1); - await shadowclick(UI.SAVE, page1); + await clickTool(UI.DELETE, page1); + await clickTool(UI.SAVE, page1); await U.delay(1000); await page1.reload(); await U.waitUntilHTMLRendered(page1); @@ -193,13 +195,13 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { await page2.reload(); await U.waitUntilHTMLRendered(page2); - filename = "multiple-users.07.page1-slice1-cleanup.png"; + filename = 'multiple-users.07.page1-slice1-cleanup.png'; await page1.screenshot({path: U.newPath + filename}); - filename = "multiple-users.08.page2-slice1-cleanup.png"; + filename = 'multiple-users.08.page2-slice1-cleanup.png'; await page2.screenshot({path: U.newPath + filename}); res = await page1.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length })); @@ -209,7 +211,7 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { assert(res.regionsLength === 0, `Regions.length is ${res.regionsLength} instead of 0`); res = await page2.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length })); @@ -221,27 +223,27 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { // eslint-disable-next-line max-statements it('delete square in browser 2, disappears from both browsers', async () => { - await shadowclick(UI.NEXT, page2); + await clickTool(UI.NEXT, page2); await U.waitUntilHTMLRendered(page2); - await shadowclick(UI.SELECT, page2); + await clickTool(UI.SELECT, page2); await page2.mouse.click(450, 150); - await shadowclick(UI.DELETE, page2); - await shadowclick(UI.SAVE, page2); + await clickTool(UI.DELETE, page2); + await clickTool(UI.SAVE, page2); await U.delay(1000); await page2.reload(); await U.waitUntilHTMLRendered(page2); await page1.bringToFront(); - await shadowclick(UI.NEXT, page1); + await clickTool(UI.NEXT, page1); await U.waitUntilHTMLRendered(page1); - filename = "multiple-users.09.page1-slice2-cleanup.png"; + filename = 'multiple-users.09.page1-slice2-cleanup.png'; await page1.screenshot({path: U.newPath + filename}); - filename = "multiple-users.10.page2-slice2-cleanup.png"; + filename = 'multiple-users.10.page2-slice2-cleanup.png'; await page2.screenshot({path: U.newPath + filename}); res = await page1.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[1].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[1].Regions.length })); @@ -251,7 +253,7 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { assert(res.regionsLength === 0, `Regions.length is ${res.regionsLength} instead of 0`); res = await page2.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[1].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[1].Regions.length })); @@ -278,19 +280,19 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { // eslint-disable-next-line max-statements it('draw triangle in slice 1, browser 1, and save', async () => { await page1.bringToFront(); - await shadowclick(UI.DRAWPOLYGON, page1); + await clickTool(UI.DRAWPOLYGON, page1); await page1.mouse.click(300, 100); await page1.mouse.click(400, 100); await page1.mouse.click(350, 200); await page1.mouse.click(300, 100); - await shadowclick(UI.SAVE, page1); + await clickTool(UI.SAVE, page1); await U.waitUntilHTMLRendered(page1); - filename = "multiple-users.11.page1-triangle.png"; + filename = 'multiple-users.11.page1-triangle.png'; await page1.screenshot({path: U.newPath + filename}); res = await page1.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length, pathSegments: Microdraw.ImageInfo[0].Regions[0].path.segments.length @@ -305,20 +307,20 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { // eslint-disable-next-line max-statements it('draw square in slice 1, browser 2, and save', async () => { await page2.bringToFront(); - await shadowclick(UI.DRAWPOLYGON, page2); + await clickTool(UI.DRAWPOLYGON, page2); await page2.mouse.click(400, 100); await page2.mouse.click(500, 100); await page2.mouse.click(500, 200); await page2.mouse.click(400, 200); await page2.mouse.click(400, 100); - await shadowclick(UI.SAVE, page2); + await clickTool(UI.SAVE, page2); await U.waitUntilHTMLRendered(page2); - filename = "multiple-users.12.page2-square.png"; + filename = 'multiple-users.12.page2-square.png'; await page2.screenshot({path: U.newPath + filename}); res = await page2.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length, pathSegments: Microdraw.ImageInfo[0].Regions[0].path.segments.length @@ -335,11 +337,11 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { await page1.reload(); await U.waitUntilHTMLRendered(page1); - filename = "multiple-users.13.page1-both.png"; + filename = 'multiple-users.13.page1-both.png'; await page1.screenshot({path: U.newPath + filename}); res = await page1.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length, pathSegments: Microdraw.ImageInfo[0].Regions.reduce((x, y) => x + y.path.segments.length, 0) @@ -356,11 +358,11 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { await page2.reload(); await U.waitUntilHTMLRendered(page2); - filename = "multiple-users.14.page2-both.png"; + filename = 'multiple-users.14.page2-both.png'; await page2.screenshot({path: U.newPath + filename}); res = await page2.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length, pathSegments: Microdraw.ImageInfo[0].Regions.reduce((x, y) => x + y.path.segments.length, 0) @@ -375,13 +377,13 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { // eslint-disable-next-line max-statements it('delete triangle and square in browser 1, disappears from both browsers', async () => { await page1.bringToFront(); - await shadowclick(UI.SELECT, page1); + await clickTool(UI.SELECT, page1); await page1.mouse.click(350, 150); - await shadowclick(UI.DELETE, page1); + await clickTool(UI.DELETE, page1); await U.delay(1000); await page1.mouse.click(450, 150); - await shadowclick(UI.DELETE, page1); - await shadowclick(UI.SAVE, page1); + await clickTool(UI.DELETE, page1); + await clickTool(UI.SAVE, page1); await U.delay(1000); await page1.reload(); await U.waitUntilHTMLRendered(page1); @@ -390,14 +392,14 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { await page2.reload(); await U.waitUntilHTMLRendered(page2); - filename = "multiple-users.15.page1-cleanup.png"; + filename = 'multiple-users.15.page1-cleanup.png'; await page2.screenshot({path: U.newPath + filename}); - filename = "multiple-users.16.page2-cleanup.png"; + filename = 'multiple-users.16.page2-cleanup.png'; await page2.screenshot({path: U.newPath + filename}); res = await page1.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length })); @@ -407,7 +409,7 @@ describe('Editing tools: multiple users drawing on the same dataset', () => { assert(res.regionsLength === 0, `Regions.length is ${res.regionsLength} instead of 0`); res = await page2.evaluate(() => ({ - sliceIndex: Number(Microdraw.dom.querySelector("#slice").dataset.val), + sliceIndex: Number(document.querySelector('.tools input[type=range]').value), regionsExists: typeof (Microdraw.ImageInfo[0].Regions) !== 'undefined', regionsLength: Microdraw.ImageInfo[0].Regions.length })); diff --git a/test/e2e/microdraw.order.spec.js b/test/e2e/microdraw.order.spec.js index a663e82..4242066 100644 --- a/test/e2e/microdraw.order.spec.js +++ b/test/e2e/microdraw.order.spec.js @@ -1,10 +1,13 @@ /* global Microdraw */ 'use strict'; -const UI = require('../UI'); -const U = require('../mocha.test.util'); const chai = require('chai'); -var {assert} = chai; +const puppeteer = require('puppeteer'); + +const U = require('../mocha.test.util'); +const UI = require('../UI'); + +const {assert} = chai; // try { // require('puppeteer') @@ -12,21 +15,20 @@ var {assert} = chai; // console.warn(`[microdraw]: dependency error: puppeteer needs to be installed manually. - npm i puppeteer`) // process.exit(1) // } -const puppeteer = require('puppeteer'); - -const shadow = (sel) => `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; let browser; let page; -const shadowclick = async function (sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; + +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; describe('Editing tools: order', () => { it('opens a data page', async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'], dumpio: false}); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'], dumpio: false}); page = await browser.newPage(); await page.setViewport({width: U.width, height: U.height}); await page.goto('http://localhost:3000/data?source=/test_data/cat.json&slice=0', @@ -47,7 +49,7 @@ describe('Editing tools: order', () => { // eslint-disable-next-line max-statements it('draws four overlapping triangles', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); for(let i=0; i<4; i++) { // draw a triangle @@ -59,11 +61,11 @@ describe('Editing tools: order', () => { /* eslint-enable no-await-in-loop */ } - await shadowclick(UI.SELECT); + await clickTool(UI.SELECT); await page.mouse.click(500, 100); await U.waitUntilHTMLRendered(page); - const filename = "order.02.triangles.png"; + const filename = 'order.02.triangles.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -75,7 +77,7 @@ describe('Editing tools: order', () => { console.log(res); assert(res.regionsExists === true, 'No Regions object'); assert(res.regionsLength === 4, `Regions.length is ${res.regionsLength} instead of 4`); - assert(res.firstRegionX < res.lastRegionX, `X-coord of 1st region is not smaller than that of the last region`); + assert(res.firstRegionX < res.lastRegionX, 'X-coord of 1st region is not smaller than that of the last region'); // const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); // assert(diff<1000, `${diff} pixels were different`); @@ -85,17 +87,17 @@ describe('Editing tools: order', () => { it('invert the order by sending front', async () => { for(let i=2; i>=0; i--) { /* eslint-disable no-await-in-loop */ - await shadowclick(UI.SELECT); + await clickTool(UI.SELECT); await page.mouse.click(395 + i*10, 101 + i*10); - await shadowclick(UI.FRONT); + await clickTool(UI.FRONT); /* eslint-enable no-await-in-loop */ } - await shadowclick(UI.SELECT); + await clickTool(UI.SELECT); await page.mouse.click(500, 100); await U.waitUntilHTMLRendered(page); - const filename = "order.03.invert.png"; + const filename = 'order.03.invert.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -107,7 +109,7 @@ describe('Editing tools: order', () => { console.log(res); assert(res.regionsExists === true, 'No Regions object'); assert(res.regionsLength === 4, `Regions.length is ${res.regionsLength} instead of 4`); - assert(res.lastRegionX < res.firstRegionX, `X-coord of last region is not smaller than that of the 1st region`); + assert(res.lastRegionX < res.firstRegionX, 'X-coord of last region is not smaller than that of the 1st region'); // const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); // assert(diff { it('invert the order by sending back', async () => { for (let i = 2; i >= 0; i--) { /* eslint-disable no-await-in-loop */ - await shadowclick(UI.SELECT); + await clickTool(UI.SELECT); await page.mouse.click(395 + i*10, 101 + i*10); - await shadowclick(UI.BACK); + await clickTool(UI.BACK); /* eslint-enable no-await-in-loop */ } - await shadowclick(UI.SELECT); + await clickTool(UI.SELECT); await page.mouse.click(500, 100); await U.waitUntilHTMLRendered(page); - const filename = "order.04.invert-again.png"; + const filename = 'order.04.invert-again.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -139,7 +141,7 @@ describe('Editing tools: order', () => { console.log(res); assert(res.regionsExists === true, 'No Regions object'); assert(res.regionsLength === 4, `Regions.length is ${res.regionsLength} instead of 4`); - assert(res.firstRegionX < res.lastRegionX, `X-coord of 1st region is not smaller than that of the last region`); + assert(res.firstRegionX < res.lastRegionX, 'X-coord of 1st region is not smaller than that of the last region'); // const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); // assert(diff `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; let browser; let page; -const shadowclick = async function(sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; + +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; describe('Editing tools: simplify', () => { before(async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'] }); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'] }); }); it('opens a data page', async () => { page = await browser.newPage(); @@ -40,7 +43,7 @@ describe('Editing tools: simplify', () => { // eslint-disable-next-line max-statements it('draws a star polygon', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); const o = [U.width*2/3, U.height/2]; const r = U.width/4; @@ -53,27 +56,27 @@ describe('Editing tools: simplify', () => { } await U.waitUntilHTMLRendered(page); - const filename = "simplify.02.cat-star.png"; + const filename = 'simplify.02.cat-star.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { - await shadowclick(UI.SIMPLIFY); + await clickTool(UI.SIMPLIFY); await U.waitUntilHTMLRendered(page); - const filename = "simplify.03.cat-simplified.png"; + const filename = 'simplify.03.cat-simplified.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { - await shadowclick(UI.SIMPLIFY); + await clickTool(UI.SIMPLIFY); await U.waitUntilHTMLRendered(page); - const filename = "simplify.04.cat-simplified.png"; + const filename = 'simplify.04.cat-simplified.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; let browser; let page; -const shadowclick = async function (sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; + +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; describe('Editing tools: split regions', () => { it('opens a data page', async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'] }); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'] }); page = await browser.newPage(); await page.setViewport({width: U.width, height: U.height}); const diff = await U.comparePageScreenshots( @@ -37,7 +39,7 @@ describe('Editing tools: split regions', () => { // eslint-disable-next-line max-statements it('draws a square', async () => { - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); await page.mouse.click(400, 400); await page.mouse.click(500, 400); await page.mouse.click(500, 500); @@ -45,7 +47,7 @@ describe('Editing tools: split regions', () => { await page.mouse.click(400, 400); await U.waitUntilHTMLRendered(page); - const filename = "split.02.cat-square-E.png"; + const filename = 'split.02.cat-square-E.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { await page.mouse.click(450, 450); await U.waitUntilHTMLRendered(page); - const filename = "split.03.cat-square-F.png"; + const filename = 'split.03.cat-square-F.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { - await shadowclick(UI.SPLITREGION); + await clickTool(UI.SPLITREGION); // click on square E (square F is already selected) await page.mouse.click(405, 405); await U.waitUntilHTMLRendered(page); - const filename = "split.04.cat-split.png"; + const filename = 'split.04.cat-split.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; let browser; let page; -const shadowclick = async function (sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; describe('Editing tools: subtract regions', () => { before(async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'] }); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'] }); }); it('opens a data page', async () => { page = await browser.newPage(); @@ -48,7 +50,7 @@ describe('Editing tools: subtract regions', () => { // eslint-disable-next-line max-statements it('draws a square', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); // draw a square C await page.mouse.click(400, 400); await page.mouse.click(500, 400); @@ -57,7 +59,7 @@ describe('Editing tools: subtract regions', () => { await page.mouse.click(400, 400); await U.waitUntilHTMLRendered(page); - const filename = "subtractRegion.02.cat-square-C.png"; + const filename = 'subtractRegion.02.cat-square-C.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -84,7 +86,7 @@ describe('Editing tools: subtract regions', () => { await page.mouse.click(450, 450); await U.waitUntilHTMLRendered(page); - const filename = "subtractRegion.03.cat-square-D.png"; + const filename = 'subtractRegion.03.cat-square-D.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -102,13 +104,13 @@ describe('Editing tools: subtract regions', () => { }).timeout(0); it('subtract 2nd square from 1st square', async () => { - await shadowclick(UI.SUBTRACTREGION); + await clickTool(UI.SUBTRACTREGION); // click on square C (square D is already selected) await page.mouse.click(405, 405); await U.waitUntilHTMLRendered(page); - const filename = "subtractRegion.04.cat-subtraction.png"; + const filename = 'subtractRegion.04.cat-subtraction.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ diff --git a/test/e2e/microdraw.toBezier-toPolygon.spec.js b/test/e2e/microdraw.toBezier-toPolygon.spec.js index bda3289..8d60bfd 100644 --- a/test/e2e/microdraw.toBezier-toPolygon.spec.js +++ b/test/e2e/microdraw.toBezier-toPolygon.spec.js @@ -1,8 +1,11 @@ 'use strict'; -const UI = require('../UI'); -const U = require('../mocha.test.util'); const chai = require('chai'); -var {assert} = chai; +const puppeteer = require('puppeteer'); + +const U = require('../mocha.test.util'); +const UI = require('../UI'); + +const {assert} = chai; // try { // require('puppeteer') @@ -10,21 +13,20 @@ var {assert} = chai; // console.warn(`[microdraw]: dependency error: puppeteer needs to be installed manually. - npm i puppeteer`) // process.exit(1) // } -const puppeteer = require('puppeteer'); -const shadow = (sel) => `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; let browser; let page; -const shadowclick = async function (sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; describe('Editing tools: convert polygons to bézier and vice-versa', () => { it('opens a data page', async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'], dumpio: false}); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'], dumpio: false}); page = await browser.newPage(); await page.setViewport({width: U.width, height: U.height}); const diff = await U.comparePageScreenshots( @@ -38,7 +40,7 @@ describe('Editing tools: convert polygons to bézier and vice-versa', () => { // eslint-disable-next-line max-statements it('draws a star polygon', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); const o = [U.width*2/3, U.height/2]; const r = U.width/4; @@ -51,17 +53,17 @@ describe('Editing tools: convert polygons to bézier and vice-versa', () => { } await U.waitUntilHTMLRendered(page); - const filename = "toBezierPolygon.02.cat-star.png"; + const filename = 'toBezierPolygon.02.cat-star.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { - await shadowclick(UI.TOBEZIER); + await clickTool(UI.TOBEZIER); await U.waitUntilHTMLRendered(page); - const filename = "toBezierPolygon.03.cat-star-toBezier.png"; + const filename = 'toBezierPolygon.03.cat-star-toBezier.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { await dialog.accept(); }); - await shadowclick(UI.TOPOLYGON); + await clickTool(UI.TOPOLYGON); await U.waitUntilHTMLRendered(page); - const filename = "toBezierPolygon.04.cat-star-toPolygon.png"; + const filename = 'toBezierPolygon.04.cat-star-toPolygon.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; let browser; let page; -const shadowclick= async function (sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; describe('Editing tools: Translate, rotate, flip', () => { before(async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'] }); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'] }); }); it('opens a data page', async () => { page = await browser.newPage(); @@ -48,7 +50,7 @@ describe('Editing tools: Translate, rotate, flip', () => { // eslint-disable-next-line max-statements it('draws a square', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); // draw a square await page.mouse.click(400, 400); await page.mouse.click(500, 400); @@ -57,7 +59,7 @@ describe('Editing tools: Translate, rotate, flip', () => { await page.mouse.click(400, 400); await U.waitUntilHTMLRendered(page); - const filename = "transform.02.cat-square.png"; + const filename = 'transform.02.cat-square.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -81,7 +83,7 @@ describe('Editing tools: Translate, rotate, flip', () => { // eslint-disable-next-line max-statements it('translate', async () => { - await shadowclick(UI.SELECT); + await clickTool(UI.SELECT); await page.mouse.click(405, 405); const res1 = await page.evaluate(() => ({ @@ -111,10 +113,10 @@ describe('Editing tools: Translate, rotate, flip', () => { // eslint-disable-next-line max-statements it('rotate', async () => { - await shadowclick(UI.SELECT); + await clickTool(UI.SELECT); await page.mouse.click(405, 405); - await shadowclick(UI.ROTATE); + await clickTool(UI.ROTATE); await page.mouse.move(400, 300); await page.mouse.down(); @@ -122,7 +124,7 @@ describe('Editing tools: Translate, rotate, flip', () => { await page.mouse.up(); await U.waitUntilHTMLRendered(page); - const filename = "transform.04.cat-rotate.png"; + const filename = 'transform.04.cat-rotate.png'; await page.screenshot({path: U.newPath + filename}); const res = await page.evaluate(() => ({ @@ -142,9 +144,9 @@ describe('Editing tools: Translate, rotate, flip', () => { })); // console.log(res1); - await shadowclick(UI.FLIPREGION); + await clickTool(UI.FLIPREGION); - const filename = "transform.05.cat-flip.png"; + const filename = 'transform.05.cat-flip.png'; await page.screenshot({path: U.newPath + filename}); const res2 = await page.evaluate(() => ({ @@ -152,7 +154,7 @@ describe('Editing tools: Translate, rotate, flip', () => { })); // console.log(res2); - assert(res2.regionX < res1.regionX, "X-coord of region is not smaller after flip"); + assert(res2.regionX < res1.regionX, 'X-coord of region is not smaller after flip'); // const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); // assert(diff `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; let browser; let page; -const shadowclick = async function(sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; describe('Editing tools: undo and redo', () => { it('opens a data page', async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'], dumpio: false}); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'], dumpio: false}); page = await browser.newPage(); await page.setViewport({width: U.width, height: U.height}); const diff = await U.comparePageScreenshots( @@ -38,7 +40,7 @@ describe('Editing tools: undo and redo', () => { // eslint-disable-next-line max-statements it('draws a triangle, a square and a circle', async () => { // select the polygon tool - await shadowclick(UI.DRAWPOLYGON); + await clickTool(UI.DRAWPOLYGON); // draw a triangle await page.mouse.click(300, 100); @@ -54,7 +56,7 @@ describe('Editing tools: undo and redo', () => { await page.mouse.click(400, 150); // draw a circle - await shadowclick(UI.DRAW); + await clickTool(UI.DRAW); const o = [500, 200]; const r = 100; for(let a=0; a<=360; a+=1) { @@ -70,7 +72,7 @@ describe('Editing tools: undo and redo', () => { await page.mouse.up(); await U.waitUntilHTMLRendered(page); - const filename = "undo.02.cat-triangle-square-circle.png"; + const filename = 'undo.02.cat-triangle-square-circle.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff<1000, `${diff} pixels were different`); @@ -79,11 +81,11 @@ describe('Editing tools: undo and redo', () => { it('undo', async () => { for(let i=0; i<10; i+=1) { // eslint-disable-next-line no-await-in-loop - await shadowclick(UI.UNDO); + await clickTool(UI.UNDO); } await U.waitUntilHTMLRendered(page); - const filename = "undo.03.undo.png"; + const filename = 'undo.03.undo.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { it('redo', async () => { for(let i=0; i<10; i+=1) { // eslint-disable-next-line no-await-in-loop - await shadowclick(UI.REDO); + await clickTool(UI.REDO); } await U.waitUntilHTMLRendered(page); - const filename = "undo.04.redo.png"; + const filename = 'undo.04.redo.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { await U.waitUntilHTMLRendered(page); // draw a triangle - await shadowclick(UI.DRAWPOLYGON); + await selectTool(UI.DRAWPOLYGON); await page.mouse.click(300, 100); await page.mouse.click(400, 100); await page.mouse.click(350, 200); await page.mouse.click(300, 100); // delete it - await shadowclick(UI.DELETE); + await clickTool(UI.DELETE); // go to the next image - await shadowclick(UI.NEXT); + await clickTool(UI.NEXT); await U.waitUntilHTMLRendered(page); // undo - await shadowclick(UI.UNDO); + await clickTool(UI.UNDO); await U.waitUntilHTMLRendered(page); - const filename = "undo.05.undo-different-page.png"; + const filename = 'undo.05.undo-different-page.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff `document.querySelector("#content").shadowRoot.querySelector("${sel}")`; +const selectTool = (tool) => `document.querySelector(".tools ${tool}")`; let browser; let page; -const shadowclick = async function(sel) { - const handle = await page.evaluateHandle(shadow(sel)); +const clickTool = async function (tool) { + const handle = await page.evaluateHandle(selectTool(tool)); await handle.click(); }; describe('View pages and data', () => { before(async () => { - browser = await puppeteer.launch({headless: "new", args: ['--no-sandbox', '--disable-setuid-sandbox'] }); + browser = await puppeteer.launch({headless: 'new', args: ['--no-sandbox', '--disable-setuid-sandbox'] }); }); it('shows the landing page', async () => { @@ -48,30 +50,30 @@ describe('View pages and data', () => { }).timeout(0); it('can go to the next page', async () => { - await shadowclick(UI.NEXT); + await clickTool(UI.NEXT); await page.waitForFunction('Microdraw.isAnimating === false'); await U.waitUntilHTMLRendered(page); - const filename = "view.03.cat-next.png"; + const filename = 'view.03.cat-next.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { - await shadowclick(UI.PREVIOUS); + await clickTool(UI.PREVIOUS); await page.waitForFunction('Microdraw.isAnimating === false'); await U.waitUntilHTMLRendered(page); - const filename = "view.04.cat-prev.png"; + const filename = 'view.04.cat-prev.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { - await shadowclick(UI.ZOOMIN); + await clickTool(UI.ZOOMIN); await page.waitForFunction('Microdraw.isAnimating === false'); await U.waitUntilHTMLRendered(page); - const filename = "view.05.cat-zoom-in.png"; + const filename = 'view.05.cat-zoom-in.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { // eslint-disable-next-line max-statements it('can translate', async () => { - await shadowclick(UI.NAVIGATE); + await clickTool(UI.NAVIGATE); await page.mouse.move(U.width/2, U.height/2); await page.mouse.down(); @@ -87,16 +89,16 @@ describe('View pages and data', () => { await page.mouse.up(); await page.waitForFunction('Microdraw.isAnimating === false'); await U.waitUntilHTMLRendered(page); - const filename = "view.06.cat-zoom-in-translate.png"; + const filename = 'view.06.cat-zoom-in-translate.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff { - await shadowclick(UI.ZOOMOUT); + await clickTool(UI.ZOOMOUT); await U.waitUntilHTMLRendered(page); - const filename = "view.07.cat-zoom-out.png"; + const filename = 'view.07.cat-zoom-out.png'; await page.screenshot({path: U.newPath + filename}); const diff = await U.compareImages(U.newPath + filename, U.refPath + filename); assert(diff