test(props): add tests for basic props

examples/nextjs/cypress/support/commands.ts

@@ -1,40 +1,51 @@
 /// <reference types="cypress" />
 
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
-
-Cypress.Commands.add('drag', (selector, { x, y }) => {
-  return cy.window().then((window) =>
+Cypress.Commands.add('drag', (selector, { x, y }) =>
+  cy.window().then((window) =>
     cy
       .get(selector as string)
       .trigger('mousedown', { which: 1, view: window })
       .trigger('mousemove', { clientX: x, clientY: y, force: true })
       .wait(50)
       .trigger('mouseup', { view: window, force: true })
-  );
+  )
+);
+
+Cypress.Commands.add('dragPane', ({ from, to }) =>
+  cy.window().then((window) =>
+    cy
+      .get('.react-flow__pane')
+      .trigger('mousedown', from.x, from.y, { which: 1, view: window })
+
+      .trigger('mousemove', to.x, to.y)
+      .trigger('mouseup', { force: true, view: window })
+  )
+);
+
+Cypress.Commands.add('zoomPane', (wheelDelta: number) =>
+  cy.get('.react-flow__pane').trigger('wheel', 'center', { deltaY: wheelDelta }).wait(250)
+);
+
+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 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 subject;
 });
 
 export {};

examples/nextjs/cypress/support/component.ts

@@ -20,6 +20,7 @@ import './commands';
 // require('./commands')
 
 import { mount } from 'cypress/react18';
+import { XYPosition } from '@react-flow/bundle';
 
 import '../../styles/globals.css';
 import '../../styles/rf-style.css';
@@ -28,7 +29,11 @@ declare global {
   namespace Cypress {
     interface Chainable {
       mount: typeof mount;
-      drag: (selector: string, { x, y }: { x: number; y: number }) => Cypress.Chainable<JQuery<HTMLElement>>;
+      drag: (selector: string, toPosition: XYPosition) => Cypress.Chainable<JQuery<HTMLElement>>;
+      dragPane: ({ from, to }: { from: XYPosition; to: XYPosition }) => Cypress.Chainable<JQuery<HTMLElement>>;
+      zoomPane: (wheelDelta: number) => Cypress.Chainable<JQuery<HTMLElement>>;
+      isWithinViewport: () => Cypress.Chainable<JQuery<HTMLElement>>;
+      isOutsideViewport: () => Cypress.Chainable<JQuery<HTMLElement>>;
     }
   }
 }