First cypress test

Author: nick-keller

cypress.json

@@ -0,0 +1,4 @@
+{
+  "componentFolder": "cypress/component",
+  "testFiles": "**/*.tsx"
+}

cypress/component/click.spec.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { mount } from '@cypress/react'
+import { DataSheetGrid, DataSheetGridRef } from '../../src'
+
+it('should select cell on click', () => {
+  const ref = { current: null as unknown as DataSheetGridRef }
+
+  cy.viewport(500, 500)
+  mount(
+    <DataSheetGrid
+      columns={[{ id: 'a' }, { id: 'b' }]}
+      value={[{}, {}]}
+      style={{ marginTop: 100, width: 440 }}
+      ref={ref}
+    />
+  )
+  cy.get('.dsg-container')
+    .click(100, 60)
+    .then(() => {
+      expect(ref.current.activeCell).to.deep.equal({
+        col: 0,
+        row: 0,
+        colId: 'a',
+      })
+    })
+
+  cy.get('.dsg-container')
+    .click(300, 85)
+    .then(() => {
+      expect(ref.current.activeCell).to.deep.equal({
+        col: 1,
+        row: 1,
+        colId: 'b',
+      })
+    })
+
+  cy.get('.dsg-container')
+    .click(350, 20)
+    .then(() => {
+      expect(ref.current.selection).to.deep.equal({
+        min: {
+          col: 1,
+          row: 0,
+          colId: 'b',
+        },
+        max: {
+          col: 1,
+          row: 1,
+          colId: 'b',
+        },
+      })
+    })
+
+  cy.get('.dsg-container')
+    .click(20, 50)
+    .then(() => {
+      expect(ref.current.selection).to.deep.equal({
+        min: {
+          col: 0,
+          row: 0,
+          colId: 'a',
+        },
+        max: {
+          col: 1,
+          row: 0,
+          colId: 'b',
+        },
+      })
+    })
+})
+
+export {}

cypress/plugins/index.ts

@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+import injectDevServer from '@cypress/react/plugins/react-scripts'
+
+const pluginConfig: Cypress.PluginConfig = (on, config) => {
+  if (config.testingType === 'component') {
+    injectDevServer(on, config)
+  }
+
+  return config
+}
+export default pluginConfig

cypress/support/commands.ts

@@ -0,0 +1,27 @@
+// ***********************************************
+// 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'

cypress/support/index.ts

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import './commands'
+
+Cypress.on('uncaught:exception', (err) => {
+  if (err.message.includes('ResizeObserver loop limit exceeded')) {
+    return false
+  }
+
+  return true
+})

cypress/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    // be explicit about types included
+    // to avoid clashing with Jest types
+    "types": ["cypress", "@testing-library/cypress"]
+  },
+  "include": [
+    "../node_modules/cypress",
+    "./**/*.ts",
+    "./**/*.tsx"
+  ]
+}