From 9bffa6e52caf4cbbcb70b148f80c60ece3999482 Mon Sep 17 00:00:00 2001 From: dwelle Date: Fri, 3 Jan 2020 17:01:58 +0100 Subject: [PATCH] add cypress scaffolding --- cypress.json | 3 +++ cypress/.eslintrc.js | 6 +++++ cypress/fixtures/example.json | 5 ++++ cypress/integration/basic.spec.js | 10 ++++++++ cypress/plugins/index.js | 7 ++++++ cypress/support/commands.js | 39 +++++++++++++++++++++++++++++++ cypress/support/constants.js | 9 +++++++ cypress/support/index.js | 20 ++++++++++++++++ package.json | 2 +- 9 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 cypress.json create mode 100644 cypress/.eslintrc.js create mode 100644 cypress/fixtures/example.json create mode 100644 cypress/integration/basic.spec.js create mode 100644 cypress/plugins/index.js create mode 100644 cypress/support/commands.js create mode 100644 cypress/support/constants.js create mode 100644 cypress/support/index.js diff --git a/cypress.json b/cypress.json new file mode 100644 index 000000000..04cd00e32 --- /dev/null +++ b/cypress.json @@ -0,0 +1,3 @@ +{ + "baseUrl": "http://localhost:3000/" +} diff --git a/cypress/.eslintrc.js b/cypress/.eslintrc.js new file mode 100644 index 000000000..6f76e710b --- /dev/null +++ b/cypress/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + globals: { + Cypress: "readonly", + cy: "readonly" + } +}; diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 000000000..02e425437 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/cypress/integration/basic.spec.js b/cypress/integration/basic.spec.js new file mode 100644 index 000000000..583a85ee4 --- /dev/null +++ b/cypress/integration/basic.spec.js @@ -0,0 +1,10 @@ +import { tools } from "../support/constants.js"; + +describe("Drawing elements", () => { + it("should draw rectangle", () => { + cy.visit("/"); + cy.viewport(600, 600); + cy.pickTool(tools.rectangle); + cy.get("#canvas").canvasDrag({ x: 50, y: 50 }, { x: 100, y: 100 }); + }); +}); diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js new file mode 100644 index 000000000..bbe4c6188 --- /dev/null +++ b/cypress/plugins/index.js @@ -0,0 +1,7 @@ +module.exports = (on, config) => { + on(`before:browser:launch`, (browser = {}, args) => { + if (browser.name === `chrome`) { + return args.concat(`--auto-open-devtools-for-tabs`); + } + }); +}; diff --git a/cypress/support/commands.js b/cypress/support/commands.js new file mode 100644 index 000000000..122393db7 --- /dev/null +++ b/cypress/support/commands.js @@ -0,0 +1,39 @@ +function normalizeCoords(coords) { + // Note: Cypress seems to check against falsiness (thus 0 values are + // considered as not supplied, and position defualts to "center"). + // Until fixed, default to `1` + // See https://github.com/cypress-io/cypress/issues/2338 + return { + x: coords.x || 1, + y: coords.y || 1 + }; +} + +Cypress.Commands.add("pickTool", { prevSubject: false }, tool => + cy.contains("label", tool).click() +); + +Cypress.Commands.add( + "canvasClick", + { prevSubject: true }, + ($canvas, coords) => { + coords = normalizeCoords(coords); + cy.wrap($canvas) + .trigger("mousedown", coords.x, coords.y) + .trigger("mouseup", coords.x, coords.y); + } +); + +Cypress.Commands.add( + "canvasDrag", + { prevSubject: true }, + ($canvas, startCoods, endCoords) => { + startCoods = normalizeCoords(startCoods); + endCoords = normalizeCoords(endCoords); + + cy.wrap($canvas) + .trigger("mousedown", startCoods.x, startCoods.y) + .trigger("mousemove", endCoords.x, endCoords.y) + .trigger("mouseup", endCoords.x, endCoords.y); + } +); diff --git a/cypress/support/constants.js b/cypress/support/constants.js new file mode 100644 index 000000000..a996eba35 --- /dev/null +++ b/cypress/support/constants.js @@ -0,0 +1,9 @@ +export default { + tools: { + rectangle: /rectangle/i, + ellipse: /ellipse/i, + arrow: /arrow/i, + text: /text/i, + selection: /selection/i + } +}; diff --git a/cypress/support/index.js b/cypress/support/index.js new file mode 100644 index 000000000..d076cec9f --- /dev/null +++ b/cypress/support/index.js @@ -0,0 +1,20 @@ +// *********************************************************** +// This example support/index.js is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import "./commands"; + +// Alternatively you can use CommonJS syntax: +// require('./commands') diff --git a/package.json b/package.json index 04e600106..580386cf2 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "devDependencies": { "@types/react": "16.9.17", "@types/react-dom": "16.9.4", - "gh-pages": "2.1.1", + "cypress": "^3.8.1", "husky": "3.1.0", "lint-staged": "9.5.0", "prettier": "1.19.1",