Add cypress to CI

Author: nick-keller

.gitignore

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

.travis.yml

@@ -1,9 +1,19 @@
 language: node_js
 node_js:
   - '14'
+addons:
+  apt:
+    packages:
+      - libgconf-2-4
+cache:
+  # cache both npm modules and Cypress binary
+  directories:
+    - ~/.npm
+    - ~/.cache
 branches:
   only:
     - master
 script:
   - npm test -- --coverage
+  - npm run cypress:run
   - npm run report-coverage

cypress.json

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

cypress/component/click.spec.tsx

@@ -67,6 +67,23 @@ it('should select cell on click', () => {
         },
       })
     })
+
+  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

@@ -1,7 +1,12 @@
 /// <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)
   }

cypress/support/index.ts

@@ -1,6 +1,7 @@
 // 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')) {