From 6c7f18c0a0fcf3b8a4a46f4155e908ef98dc6324 Mon Sep 17 00:00:00 2001
From: Jack Fishwick <jack@poly-ai.com>
Date: Sat, 22 Oct 2022 09:49:33 +0100
Subject: [PATCH] tests: add tests for the new features.

---
 examples/vite-app/cypress/e2e/figma.cy.ts     | 52 +++++++++++++++++++
 examples/vite-app/cypress/support/commands.ts | 22 ++++----
 2 files changed, 64 insertions(+), 10 deletions(-)
 create mode 100644 examples/vite-app/cypress/e2e/figma.cy.ts

diff --git a/examples/vite-app/cypress/e2e/figma.cy.ts b/examples/vite-app/cypress/e2e/figma.cy.ts
new file mode 100644
index 00000000..6d3ddfea
--- /dev/null
+++ b/examples/vite-app/cypress/e2e/figma.cy.ts
@@ -0,0 +1,52 @@
+describe('Figma Flow UI', () => {
+  before(() => {
+    cy.visit('/figma');
+  });
+
+  it('renders a flow with three nodes', () => {
+    cy.get('.react-flow__renderer');
+    cy.get('.react-flow-basic-example'); // check if className prop works
+    cy.get('.react-flow__node').should('have.length', 4);
+    cy.get('.react-flow__edge').should('have.length', 2);
+    cy.get('.react-flow__node').children('.react-flow__handle');
+  });
+
+  it('renders a grid', () => {
+    cy.get('.react-flow__background');
+  });
+
+  it('selects all nodes by drag', () => {
+    cy.window().then((win) => {
+      cy.get('.react-flow__pane')
+        .trigger('mousedown', 'topLeft', { button: 0, view: win })
+        .trigger('mousemove', 'bottomRight', { force: true })
+        .wait(50)
+        .trigger('mouseup', { force: true, view: win })
+        .then(() => {
+          cy.get('.react-flow__node').should('have.class', 'selected');
+        });
+    });
+  });
+
+  it('removes selection', () => {
+    cy.get('.react-flow__pane').click('topLeft');
+    cy.get('.react-flow__node').should('not.have.class', 'selected');
+  });
+
+  it('drags using right click', () => {
+    cy.window().then((win) => {
+      cy.get('.react-flow__node:last').isWithinViewport();
+      cy.get('.react-flow__pane')
+        .trigger('mousedown', 'center', { button: 2, view: win })
+        .trigger('mousemove', 'bottom', { force: true })
+        .wait(50)
+        .trigger('mouseup', { force: true, view: win })
+        .then(() => {
+          cy.get('.react-flow__node').should('not.have.class', 'selected');
+          cy.get('.react-flow__node:last').isOutsideViewport();
+        });
+    });
+  });
+});
+
+export {};
diff --git a/examples/vite-app/cypress/support/commands.ts b/examples/vite-app/cypress/support/commands.ts
index 14302409..e138e4cf 100644
--- a/examples/vite-app/cypress/support/commands.ts
+++ b/examples/vite-app/cypress/support/commands.ts
@@ -36,23 +36,25 @@ Cypress.Commands.add('zoomPane', (wheelDelta: number) =>
 Cypress.Commands.add('isWithinViewport', { prevSubject: true }, (subject) => {
   const rect = subject[0].getBoundingClientRect();
 
-  expect(rect.top).to.be.within(0, window.innerHeight);
-  expect(rect.right).to.be.within(0, window.innerWidth);
-  expect(rect.bottom).to.be.within(0, window.innerHeight);
-  expect(rect.left).to.be.within(0, window.innerWidth);
+  return cy.window().then((window) => {
+    expect(rect.top).to.be.within(0, window.innerHeight);
+    expect(rect.right).to.be.within(0, window.innerWidth);
+    expect(rect.bottom).to.be.within(0, window.innerHeight);
+    expect(rect.left).to.be.within(0, window.innerWidth);
 
-  return subject;
+    return subject;
+  });
 });
 
 Cypress.Commands.add('isOutsideViewport', { prevSubject: true }, (subject) => {
   const rect = subject[0].getBoundingClientRect();
 
-  expect(rect.top).not.to.be.within(0, window.innerHeight);
-  expect(rect.right).not.to.be.within(0, window.innerWidth);
-  expect(rect.bottom).not.to.be.within(0, window.innerHeight);
-  expect(rect.left).not.to.be.within(0, window.innerWidth);
+  return cy.window().then((window) => {
+    expect(window.innerHeight < rect.top || rect.bottom < 0 || window.innerWidth < rect.left || rect.right < 0).to.be
+      .true;
 
-  return subject;
+    return subject;
+  });
 });
 
 export {};