From edbc41963bdb59636dddac48b8564b1b63c296bb Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Jul 2020 11:37:36 +0200
Subject: [PATCH] test(minimap): add tests

---
 .../flow/{controls.js => controls.spec.js}    |  6 +-
 .../{custom-node.js => custom-node.spec.js}   |  0
 cypress/integration/flow/minimap.spec.js      | 67 +++++++++++++++++++
 3 files changed, 68 insertions(+), 5 deletions(-)
 rename cypress/integration/flow/{controls.js => controls.spec.js} (97%)
 rename cypress/integration/flow/{custom-node.js => custom-node.spec.js} (100%)
 create mode 100644 cypress/integration/flow/minimap.spec.js

diff --git a/cypress/integration/flow/controls.js b/cypress/integration/flow/controls.spec.js
similarity index 97%
rename from cypress/integration/flow/controls.js
rename to cypress/integration/flow/controls.spec.js
index c68dc836..f460f4b3 100644
--- a/cypress/integration/flow/controls.js
+++ b/cypress/integration/flow/controls.spec.js
@@ -1,11 +1,7 @@
 describe('Controls Testing', () => {
-  it('renders a flow', () => {
+  it('renders the control panel', () => {
     cy.visit('/');
 
-    cy.get('.react-flow__renderer');
-  });
-
-  it('renders the control panel', () => {
     cy.get('.react-flow__controls');
   });
 
diff --git a/cypress/integration/flow/custom-node.js b/cypress/integration/flow/custom-node.spec.js
similarity index 100%
rename from cypress/integration/flow/custom-node.js
rename to cypress/integration/flow/custom-node.spec.js
diff --git a/cypress/integration/flow/minimap.spec.js b/cypress/integration/flow/minimap.spec.js
new file mode 100644
index 00000000..92055ab9
--- /dev/null
+++ b/cypress/integration/flow/minimap.spec.js
@@ -0,0 +1,67 @@
+describe('Minimap Testing', () => {
+  it('renders the mini map', () => {
+    cy.visit('/');
+
+    cy.get('.react-flow__minimap');
+    cy.get('.react-flow__minimap-mask');
+  });
+
+  it('has same number of nodes as the pane', () => {
+    const paneNodes = Cypress.$('.react-flow__node').length;
+    const minimapNodes = Cypress.$('.react-flow__minimap-node').length;
+
+    expect(paneNodes).equal(minimapNodes);
+  });
+
+  it('changes zoom level', () => {
+    const viewBoxBeforeZoom = Cypress.$('.react-flow__minimap').attr('viewBox');
+    const maskPathBeforeZoom = Cypress.$('.react-flow__minimap-mask').attr('d');
+
+    cy.get('.react-flow__zoompane')
+      .trigger('wheel', 'topLeft', { deltaY: -200 })
+      .then(() => {
+        const viewBoxAfterZoom = Cypress.$('.react-flow__minimap').attr('viewBox');
+        const maskPathAfterZoom = Cypress.$('.react-flow__minimap-mask').attr('d');
+
+        expect(viewBoxBeforeZoom).to.not.equal(viewBoxAfterZoom);
+        expect(maskPathBeforeZoom).to.not.equal(maskPathAfterZoom);
+      });
+  });
+
+  it('changes node position', () => {
+    const xPosBeforeDrag = Cypress.$('.react-flow__minimap-node:first').attr('x');
+    const yPosBeforeDrag = Cypress.$('.react-flow__minimap-node:first').attr('y');
+    const maskPathBeforeDrag = Cypress.$('.react-flow__minimap-mask').attr('d');
+
+    cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then(($el) => {
+      const xPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr('x');
+      const yPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr('y');
+      const maskPathAfterDrag = Cypress.$('.react-flow__minimap-mask').attr('d');
+
+      expect(xPosBeforeDrag).to.not.equal(xPosAfterDrag);
+      expect(yPosBeforeDrag).to.not.equal(yPosAfterDrag);
+      expect(maskPathBeforeDrag).to.not.equal(maskPathAfterDrag);
+    });
+  });
+
+  it('changes node positions via pane drag', () => {
+    const viewBoxBeforeDrag = Cypress.$('.react-flow__minimap').attr('viewBox');
+    const maskPathBeforeDrag = Cypress.$('.react-flow__minimap-mask').attr('d');
+
+    // for d3 we have to pass the window to the event
+    // https://github.com/cypress-io/cypress/issues/3441
+    cy.window().then((win) => {
+      cy.get('.react-flow__zoompane')
+        .trigger('mousedown', 'topLeft', { which: 1, view: win })
+        .trigger('mousemove', 'bottomLeft')
+        .trigger('mouseup', { force: true, view: win })
+        .then(() => {
+          const viewBoxAfterDrag = Cypress.$('.react-flow__minimap').attr('viewBox');
+          const maskPathAfterDrag = Cypress.$('.react-flow__minimap-mask').attr('d');
+
+          expect(viewBoxBeforeDrag).to.not.equal(viewBoxAfterDrag);
+          expect(maskPathBeforeDrag).to.not.equal(maskPathAfterDrag);
+        });
+    });
+  });
+});