Add Dashboard

apps/builder/cypress/support/commands.ts

@@ -1,37 +1,93 @@
-// ***********************************************
-// 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 will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-import '@testing-library/cypress/add-commands'
+import { signIn, signOut } from 'next-auth/react'
 
-Cypress.Commands.add('logOutByApi', () =>
-  cy
-    .request('GET', `${Cypress.env('SITE_NAME')}/api/auth/csrf/login`)
-    .its('body')
-    .then((result) => {
-      cy.request('POST', `${Cypress.env('SITE_NAME')}/api/auth/signout`, {
-        csrfToken: result.csrfToken,
+Cypress.Commands.add('signOut', () => {
+  cy.log(`🔐 Sign out`)
+  return cy.wrap(signOut({ redirect: false }), { log: false })
+})
+
+Cypress.Commands.add('signIn', (email: string) => {
+  cy.log(`🔐 Sign in as ${email}`)
+  return cy.wrap(signIn('credentials', { redirect: false, email }), {
+    log: false,
+  })
+})
+
+Cypress.Commands.add(
+  'mouseMoveBy',
+  {
+    prevSubject: 'element',
+  },
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  (
+    subject: JQuery<HTMLElement>,
+    x: number,
+    y: number,
+    options?: { delay: number }
+  ) => {
+    cy.wrap(subject, { log: false })
+      .then((subject) => {
+        const initialRect = subject.get(0).getBoundingClientRect()
+        const windowScroll = getDocumentScroll()
+
+        return [subject, initialRect, windowScroll] as const
       })
-    })
+      .then(([subject, initialRect, initialWindowScroll]) => {
+        cy.wrap(subject)
+          .trigger('mousedown', { force: true })
+          .wait(options?.delay || 0, { log: Boolean(options?.delay) })
+          .trigger('mousemove', {
+            force: true,
+            clientX: Math.floor(
+              initialRect.left + initialRect.width / 2 + x / 2
+            ),
+            clientY: Math.floor(
+              initialRect.top + initialRect.height / 2 + y / 2
+            ),
+          })
+          .trigger('mousemove', {
+            force: true,
+            clientX: Math.floor(initialRect.left + initialRect.width / 2 + x),
+            clientY: Math.floor(initialRect.top + initialRect.height / 2 + y),
+          })
+          // .wait(1000)
+          .trigger('mouseup', { force: true })
+          .wait(250)
+          .then((subject: any) => {
+            const finalRect = subject.get(0).getBoundingClientRect()
+            const windowScroll = getDocumentScroll()
+            const windowScrollDelta = {
+              x: windowScroll.x - initialWindowScroll.x,
+              y: windowScroll.y - initialWindowScroll.y,
+            }
+
+            const delta = {
+              x: Math.round(
+                finalRect.left - initialRect.left - windowScrollDelta.x
+              ),
+              y: Math.round(
+                finalRect.top - initialRect.top - windowScrollDelta.y
+              ),
+            }
+
+            return [subject, { initialRect, finalRect, delta }] as const
+          })
+      })
+  }
 )
+
+const getDocumentScroll = () => {
+  if (document.scrollingElement) {
+    const { scrollTop, scrollLeft } = document.scrollingElement
+
+    return {
+      x: scrollTop,
+      y: scrollLeft,
+    }
+  }
+
+  return {
+    x: 0,
+    y: 0,
+  }
+}

apps/builder/cypress/support/index.ts

@@ -13,20 +13,33 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-
-// Import commands.js using ES2015 syntax:
+/// <reference types="cypress" />
 
 declare global {
   namespace Cypress {
     interface Chainable {
-      /**
-       * Log out using the NextAuth API.
-       * @example cy.logOutByApi()
-       */
-      logOutByApi(): Chainable<Response<any>>
+      signOut(): Chainable<any>
+      signIn(email: string): Chainable<any>
+      mouseMoveBy(
+        x: number,
+        y: number,
+        options?: { delay: number }
+      ): Chainable<
+        [
+          Element,
+          {
+            initialRect: ClientRect
+            finalRect: ClientRect
+            delta: { x: number; y: number }
+          }
+        ]
+      >
     }
   }
 }
+
+// Import commands.js using ES2015 syntax:
+import '@testing-library/cypress/add-commands'
 import './commands'
 
 // Alternatively you can use CommonJS syntax: