add cypress scaffolding

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3000/"
+}

cypress/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  globals: {
+    Cypress: "readonly",
+    cy: "readonly"
+  }
+};

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"
+}

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 });
+  });
+});

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`);
+    }
+  });
+};

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);
+  }
+);

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
+  }
+};

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')

package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@types/react": "16.9.17",
     "@types/react-dom": "16.9.4",
+    "cypress": "^3.8.1",
     "husky": "3.1.0",
     "lint-staged": "9.5.0",
     "prettier": "1.19.1",