Cypress

.github/workflows/tests.yml

@@ -21,4 +21,10 @@ jobs:
         uses: coverallsapp/[email protected]
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-
+  cypress:
+    name: End-to-End tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cypress run
+        uses: cypress-io/github-action@v2

.gitignore

@@ -4,3 +4,5 @@
 /.idea
 tsconfig.tsbuildinfo
 /coverage
+/cypress/videos/
+/.nyc_output/

cypress.json

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

cypress/component/click.spec.tsx

@@ -0,0 +1,89 @@
+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',
+        },
+      })
+    })
+
+  cy.get('.dsg-container')
+    .click(20, 20)
+    .then(() => {
+      expect(ref.current.selection).to.deep.equal({
+        min: {
+          col: 0,
+          row: 0,
+          colId: 'a',
+        },
+        max: {
+          col: 1,
+          row: 1,
+          colId: 'b',
+        },
+      })
+    })
+})
+
+export {}

cypress/plugins/index.ts

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+import injectDevServer from '@cypress/react/plugins/react-scripts'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import injectCoverage from '@cypress/code-coverage/task'
+
+const pluginConfig: Cypress.PluginConfig = (on, config) => {
+  injectCoverage(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,12 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import './commands'
+import '@cypress/code-coverage/support'
+
+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"
+  ]
+}

jest.config.ts

@@ -4,7 +4,7 @@ const config: Config.InitialOptions = {
   verbose: true,
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ['./dist'],
+  testPathIgnorePatterns: ['./dist', './cypress'],
   collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
   moduleNameMapper: {
     '\\.css$': '<rootDir>/tests/helpers/styleMock.ts',