4196 integration tests with cypress (#4206)

* - update gitignore
- add cypress configuration and example test

* add integration tests to ci workflow

* add note about running integration tests

* Update docs/general/contributing.md

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* Update .gitignore

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* Update cypress.json

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* add baseUrl, remove goTo command

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

.github/workflows/ci.yml

@@ -12,6 +12,7 @@ jobs:
       matrix:
         command:
           - 'test'
+          - 'test:integration'
           - 'lint:eslint'
           - 'lint:prettier'
           - 'lint:typescript'
@@ -25,6 +26,6 @@ jobs:
           node-version: 12
 
       - name: Run ${{ matrix.command }}
-        run: yarn && yarn build:rollup && yarn ${{ matrix.command }}
+        run: yarn && yarn build && yarn ${{ matrix.command }}
         env:
           CI: true

.gitignore

@@ -10,3 +10,8 @@ node_modules/
 packages/*/yarn.lock
 site/out/
 tmp/
+cypress/screenshots
+cypress/videos
+cypress/fixtures
+cypress/plugins
+.DS_Store

cypress.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "slate-react",
+  "baseUrl": "http://localhost:3000"
+}

cypress/integration/richtext.ts

@@ -0,0 +1,10 @@
+describe('On richtext example', () => {
+  it('inserts text when typed', () => {
+    cy.visit('examples/richtext')
+
+    cy.findByRole('textbox')
+      .type('{movetostart}')
+      .type('Hello World')
+      .should('contain.text', 'Hello World')
+  })
+})

cypress/support/commands.ts

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands'

cypress/support/index.ts

@@ -0,0 +1 @@
+import './commands'

cypress/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    "downlevelIteration": true,
+    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": [
+      "DOM",
+      "ES2020"
+    ] /* Specify library files to be included in the compilation. */,
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    "noEmit": true,
+    "sourceMap": true /* Generates corresponding '.map' file. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "types": ["cypress", "@testing-library/cypress"],
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    "resolveJsonModule": true,
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "isolatedModules": false,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+  }
+}

docs/general/contributing.md

@@ -87,6 +87,10 @@ yarn lint
 
 This will catch TypeScript, Prettier, and Eslint errors.
 
+## Running integration tests
+
+To run integrations with [cypress](https://github.com/cypress-io/cypress), first run `yarn start` to run the examples website, then run `yarn cypress:open` in a separate session to open the cypress GUI.
+
 ## Testing Input Methods
 
 [Here's a helpful page](https://github.com/Microsoft/vscode/wiki/IME-Test) detailing how to test various input scenarios on Windows, Mac and Linux.

package.json

@@ -30,7 +30,10 @@
     "test": "mocha --require ./config/babel/register.cjs ./packages/*/test/index.js",
     "test:custom": "mocha --require ./config/babel/register.cjs ./packages/slate/test/index.js",
     "test:inspect": "yarn test --inspect-brk",
-    "watch": "yarn build:rollup --watch"
+    "test:integration": "run-p -r serve cypress:run",
+    "watch": "yarn build:rollup --watch",
+    "cypress:run": "cypress run",
+    "cypress:open": "cypress open"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.4",
@@ -48,6 +51,7 @@
     "@babel/runtime": "^7.7.4",
     "@changesets/changelog-github": "^0.3.0",
     "@changesets/cli": "^2.14.1",
+    "@testing-library/cypress": "^7.0.5",
     "@types/lodash": "^4.14.149",
     "@types/mocha": "^5.2.7",
     "@types/node": "^12.12.14",
@@ -59,6 +63,7 @@
     "babel-plugin-dev-expression": "^0.2.2",
     "babel-plugin-module-resolver": "^3.1.1",
     "cross-env": "6.0.3",
+    "cypress": "^7.1.0",
     "emotion": "^10.0.9",
     "eslint": "^6.7.1",
     "eslint-config-prettier": "^6.7.0",