From 9f2c51c309701a113f208e5ee65f1ae2800ef343 Mon Sep 17 00:00:00 2001 From: Jinho Yoon Date: Tue, 9 Aug 2022 14:04:34 -0400 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Restructure=20drag=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In regards to the reselect-dragged-fix, I added checks on whether the element is reselected after it has been dragged. One other thing that has been changed in this commit is: Drag tests have been crashing, and I think it's due to the sheer number of them in one file. I also set `numTestsKeptInMemory` to 0, which may help with this crashing issue. Related: https://github.com/cypress-io/cypress/issues/1906 --- cypress.config.ts | 3 +- cypress/e2e/drag.cy.ts | 164 ------------------------------- cypress/e2e/drag/bboxes.cy.ts | 63 ++++++++++++ cypress/e2e/drag/staves.cy.ts | 77 +++++++++++++++ cypress/e2e/drag/syllables.cy.ts | 63 ++++++++++++ 5 files changed, 205 insertions(+), 165 deletions(-) delete mode 100644 cypress/e2e/drag.cy.ts create mode 100644 cypress/e2e/drag/bboxes.cy.ts create mode 100644 cypress/e2e/drag/staves.cy.ts create mode 100644 cypress/e2e/drag/syllables.cy.ts diff --git a/cypress.config.ts b/cypress.config.ts index f905054d0..0647e611a 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -5,6 +5,7 @@ export default defineConfig({ setupNodeEvents() { // implement node event listeners here }, - video: false + video: false, + numTestsKeptInMemory: 0 }, }); diff --git a/cypress/e2e/drag.cy.ts b/cypress/e2e/drag.cy.ts deleted file mode 100644 index 24724a760..000000000 --- a/cypress/e2e/drag.cy.ts +++ /dev/null @@ -1,164 +0,0 @@ -// Tests for dragging glyphs -// - Do they visually move to the correct place? -// - Are there out-of-bound checks? - -Cypress.on('uncaught:exception', () => { - // returning false here prevents Cypress from - // failing the test - return false; -}); - - -/** - * Drag function for syllables and staves - */ -function drag (selector: string, offsetX = 0, offsetY = 0) { - // https://github.com/cypress-io/cypress/issues/3441#issuecomment-545292552 - cy.window().then(win => { - cy.get(selector).first() - .click({ timeout: 100, force: true }) - .trigger('mousedown', 1, 1, { timeout: 100, force: true, which: 1, view: win }) - .trigger('mousemove', offsetX + 1, offsetY + 1, { force: true }) - .trigger('mouseup', { force: true, view: win }); - }); -} - -/** - * Drag function for bounding boxes: - * Checks for whether the bounding box has moved correctly on mouseup - */ -function dragBBox (selector: string, offsetX = 0, offsetY = 0) { - cy.window().then(win => { - cy.get(selector) - .click() - .then(($bbox) => { - // Recommended way of storing variables: - // https://docs.cypress.io/guides/core-concepts/variables-and-aliases#Closures - const origin = $bbox[0].getBoundingClientRect(); - - cy.get(selector).trigger('mousedown', { view: win, force: true, timeout: 100 }) - .trigger('mousemove', offsetX, offsetY, { force: true }) - .trigger('mouseup', { view: win, force: true }) - .then(($bbox) => { - const moved = $bbox[0].getBoundingClientRect(); - - // Bounding box coordinate checks: - // We allow for some leeway on how close the positions have to be, - // for any calculation rounding in d3 and Neon - expect(moved.width).to.be.closeTo(origin.width, 1); - expect(moved.height).to.be.closeTo(origin.height, 1); - expect(moved.x).to.be.closeTo(origin.x + offsetX, 15); - expect(moved.y).to.be.closeTo(origin.y + offsetY, 15); - }); - }); - }); -} - -beforeEach(() => { - cy.visit('http://localhost:8080/editor.html?manifest=test'); - cy.get('#mei_output', { timeout: 10000 }).should('be.visible'); -}); - -describe('drag: bounding boxes', () => { - beforeEach(() => { - cy.get('#displayBBox').click(); - cy.get('#selByBBox').should('be.visible').click(); - - cy.get('.sylTextRect-display').should('have.length.gt', 0); - }); - - const BBOX_ID = '#m-8e6837fc-19d4-42c9-8266-cd54bb6f1dea'; - - it('coords(safe): move bbox in the x-direction', () => dragBBox(BBOX_ID, 350, 0)); - it('coords(safe): move bbox in the y-direction', () => dragBBox(BBOX_ID, 0, 200)); - it('coords(safe): move bbox in both directions', () => dragBBox(BBOX_ID, 100, 100)); - -}); - -// Currently, the tests only check whether the "Drag action failed" alert -// happens correctly or not. -describe('drag: syllables', () => { - const SYLLABLE_ID = '#m-090b1f54-dce2-40bf-8b1f-ecc9be5a4c63'; - - // Select by syllable before each test - beforeEach(() => { - cy.get('#selBySyllable').click(); - }); - - it('error: move out of bounds LEFT', () => { - drag(SYLLABLE_ID, -300, 0); - cy.contains('Drag action failed').should('be.visible'); - }); - - it('error: move out of bounds RIGHT', () => { - drag(SYLLABLE_ID, 700, 0); - cy.contains('Drag action failed').should('be.visible'); - }); - - it('error: move out of bounds TOP', () => { - drag(SYLLABLE_ID, 0, -500); - cy.contains('Drag action failed').should('be.visible'); - }); - - it('error: move out of bounds BOTTOm', () => { - drag(SYLLABLE_ID, 0, 500); - cy.contains('Drag action failed').should('be.visible'); - }); - - it('safe: move within bounds', () => { - drag(SYLLABLE_ID, 50, -30); - cy.contains('Drag action failed').should('not.exist'); - }); -}); - -describe('drag: staves', () => { - beforeEach(() => { - cy.get('#selByStaff').click().should('have.class', 'is-active'); - }); - - it('error: move out of bounds to the LEFT', () => { - cy.get('.staff').first().then(el => { - const origin = el[0].getBoundingClientRect(); - - drag('.staff', -300, -0); - - cy.get('.staff').first().then(el => { - const { x, y } = el[0].getBoundingClientRect(); - - expect(x).to.be.closeTo(origin.x, 15); - expect(y).to.be.closeTo(origin.y, 15); - }); - }); - - // User should be notified - cy.contains('Drag action failed').should('be.visible'); - }); - - it('error: move out of bounds to the RIGHT', () => { - drag('.staff', 200, 0); - cy.contains('Drag action failed').should('be.visible'); - }); - - it('error: move out of bounds to the TOP', () => { - drag('.staff', 0, -300); - cy.contains('Drag action failed').should('be.visible'); - }); - - it('error: move out of bounds to the BOTTOM', () => { - drag('.staff', 0, 1000); - cy.contains('Drag action failed').should('be.visible'); - }); - - it('safe: move within bounds', () => { - drag('.staff', 50, -30); - cy.contains('Drag action failed').should('not.exist'); - }); - - // This test exists due to a previous issue where only the first staff - // would have issues with dragging: - // https://github.com/DDMAL/Neon/issues/700#issuecomment-1190243501 - it('error: move random staff out of bounds', () => { - drag('#m-c64a9618-0edc-436b-8255-ae6984012c01', 200, 0); - cy.contains('Drag action failed').should('be.visible'); - }); -}); diff --git a/cypress/e2e/drag/bboxes.cy.ts b/cypress/e2e/drag/bboxes.cy.ts new file mode 100644 index 000000000..e3bb31b5b --- /dev/null +++ b/cypress/e2e/drag/bboxes.cy.ts @@ -0,0 +1,63 @@ +// Tests for dragging glyphs +// - Do they visually move to the correct place? +// - Are there out-of-bound checks? + +beforeEach(() => { + cy.visit('http://localhost:8080/editor.html?manifest=test'); + cy.get('#mei_output', { timeout: 10000 }).should('be.visible'); +}); + +describe('drag: bounding boxes', () => { + beforeEach(() => { + cy.get('#displayBBox').click(); + cy.get('#selByBBox').should('be.visible').click(); + + cy.get('.sylTextRect-display').should('have.length.gt', 0); + }); + + const BBOX_ID = '#m-8e6837fc-19d4-42c9-8266-cd54bb6f1dea'; + + it('coords(safe): move bbox in the x-direction', () => dragBBox(BBOX_ID, 350, 0)); + it('coords(safe): move bbox in the y-direction', () => dragBBox(BBOX_ID, 0, 200)); + it('coords(safe): move bbox in both directions', () => dragBBox(BBOX_ID, 100, 100)); + +}); + +/** + * Drag function for bounding boxes: + * Checks for whether the bounding box has moved correctly on mouseup + */ +function dragBBox (selector: string, offsetX = 0, offsetY = 0): void { + cy.window().then(win => { + cy.get(selector) + .click() + .then(($bbox) => { + // Recommended way of storing variables: + // https://docs.cypress.io/guides/core-concepts/variables-and-aliases#Closures + const origin = $bbox[0].getBoundingClientRect(); + + cy.get(selector).trigger('mousedown', { view: win, force: true, timeout: 100 }) + .trigger('mousemove', offsetX, offsetY, { force: true }) + .trigger('mouseup', { view: win, force: true }) + .then(($bbox) => { + const moved = $bbox[0].getBoundingClientRect(); + + // Bounding box coordinate checks: + // We allow for some leeway on how close the positions have to be, + // for any calculation rounding in d3 and Neon + expect(moved.width).to.be.closeTo(origin.width, 1); + expect(moved.height).to.be.closeTo(origin.height, 1); + expect(moved.x).to.be.closeTo(origin.x + offsetX, 15); + expect(moved.y).to.be.closeTo(origin.y + offsetY, 15); + }); + }); + }); +} + + +Cypress.on('uncaught:exception', () => { + // returning false here prevents Cypress from + // failing the test + return false; +}); + diff --git a/cypress/e2e/drag/staves.cy.ts b/cypress/e2e/drag/staves.cy.ts new file mode 100644 index 000000000..c0687b095 --- /dev/null +++ b/cypress/e2e/drag/staves.cy.ts @@ -0,0 +1,77 @@ +/** + * Drag function for syllables and staves + */ +function drag (selector: string, offsetX = 0, offsetY = 0): void { + // https://github.com/cypress-io/cypress/issues/3441#issuecomment-545292552 + cy.window().then(win => { + cy.get(selector).first() + .click({ timeout: 100, force: true }) + .trigger('mousedown', 1, 1, { timeout: 100, force: true, which: 1, view: win }) + .trigger('mousemove', offsetX + 1, offsetY + 1, { force: true }) + .trigger('mouseup', { force: true, view: win }); + }); +} + +beforeEach(() => { + cy.visit('http://localhost:8080/editor.html?manifest=test'); + cy.get('#mei_output', { timeout: 10000 }).should('be.visible'); +}); + +describe('drag: staves', () => { + beforeEach(() => { + cy.get('#selByStaff').click().should('have.class', 'is-active'); + }); + + it('error: move out of bounds to the LEFT', () => { + cy.get('.staff').first().then(el => { + const origin = el[0].getBoundingClientRect(); + + drag('.staff', -300, -0); + + cy.get('.staff').first().then(el => { + const { x, y } = el[0].getBoundingClientRect(); + + expect(x).to.be.closeTo(origin.x, 15); + expect(y).to.be.closeTo(origin.y, 15); + }); + }); + + // User should be notified + cy.contains('Drag action failed').should('be.visible'); + }); + + it('error: move out of bounds to the RIGHT', () => { + drag('.staff', 200, 0); + cy.contains('Drag action failed').should('be.visible'); + }); + + it('error: move out of bounds to the TOP', () => { + drag('.staff', 0, -300); + cy.contains('Drag action failed').should('be.visible'); + }); + + it('error: move out of bounds to the BOTTOM', () => { + drag('.staff', 0, 1000); + cy.contains('Drag action failed').should('be.visible'); + }); + + it('safe: move within bounds', () => { + drag('.staff', 50, -30); + + // Staff should still be selected even after drag + cy.get('.staff').first() + .should('have.class', 'selected'); + + cy.contains('Drag action failed').should('not.exist'); + }); + + // This test exists due to a previous issue where only the first staff + // would have issues with dragging: + // https://github.com/DDMAL/Neon/issues/700#issuecomment-1190243501 + it('error: move random staff out of bounds', () => { + drag('#m-c64a9618-0edc-436b-8255-ae6984012c01', 200, 0); + cy.contains('Drag action failed').should('be.visible'); + }); +}); + +export {}; diff --git a/cypress/e2e/drag/syllables.cy.ts b/cypress/e2e/drag/syllables.cy.ts new file mode 100644 index 000000000..1cba8e3b1 --- /dev/null +++ b/cypress/e2e/drag/syllables.cy.ts @@ -0,0 +1,63 @@ +/** + * Drag function for syllables and staves + */ +function drag (selector: string, offsetX = 0, offsetY = 0): void { + // https://github.com/cypress-io/cypress/issues/3441#issuecomment-545292552 + cy.window().then(win => { + cy.get(selector).first() + .click({ timeout: 100, force: true }) + .trigger('mousedown', 1, 1, { timeout: 100, force: true, which: 1, view: win }) + .trigger('mousemove', offsetX + 1, offsetY + 1, { force: true }) + .trigger('mouseup', { force: true, view: win }); + }); +} + +beforeEach(() => { + cy.visit('http://localhost:8080/editor.html?manifest=test'); + cy.get('#mei_output', { timeout: 10000 }).should('be.visible'); +}); + +// +// Currently, the tests only check whether the "Drag action failed" alert +// happens correctly or not. +describe('drag: syllables', () => { + const SYLLABLE_ID = '#m-090b1f54-dce2-40bf-8b1f-ecc9be5a4c63'; + + // Select by syllable before each test + beforeEach(() => { + cy.get('#selBySyllable').click(); + }); + + it('error: move out of bounds LEFT', () => { + drag(SYLLABLE_ID, -300, 0); + cy.contains('Drag action failed').should('be.visible'); + }); + + it('error: move out of bounds RIGHT', () => { + drag(SYLLABLE_ID, 700, 0); + cy.contains('Drag action failed').should('be.visible'); + }); + + it('error: move out of bounds TOP', () => { + drag(SYLLABLE_ID, 0, -500); + cy.contains('Drag action failed').should('be.visible'); + }); + + it('error: move out of bounds BOTTOM', () => { + drag(SYLLABLE_ID, 0, 500); + cy.contains('Drag action failed').should('be.visible'); + + cy.get(SYLLABLE_ID).should('have.class', 'selected'); + }); + + it('safe: move within bounds', () => { + drag(SYLLABLE_ID, 50, -30); + cy.contains('Drag action failed').should('not.exist'); + + // Syllable should still be selected even after drag + cy.get(SYLLABLE_ID).should('have.class', 'selected'); + + }); +}); + +export {};