feat: create E2E suite to test on real browser

.github/workflows/main.yml

@@ -33,18 +33,12 @@ jobs:
 
       - name: Install dependencies
         run: yarn install --immutable
-        env:
-          CI: true
 
       - name: Lint
         run: yarn lint
-        env:
-          CI: true
 
       - name: Test
         run: yarn test --ci --coverage --maxWorkers=2
-        env:
-          CI: true
 
       - name: Report coverage
         uses: codecov/codecov-action@v1
@@ -54,5 +48,10 @@ jobs:
 
       - name: Build docs
         run: yarn docz:build
-        env:
-          CI: true
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          # Dependencies already installed before
+          install: false
+          start: yarn dlx serve -l 3000 .docz/dist

cypress.json

@@ -0,0 +1 @@
+{}

cypress/integration/modal.spec.ts

@@ -0,0 +1,68 @@
+/// <reference types="cypress" />
+
+describe('simple modal', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/examples');
+    // Page is heavy to load so we wait for it to be loaded
+    cy.wait(500);
+  });
+
+  it('should open modal when clicking open button', () => {
+    cy.get('button').eq(2).click();
+    cy.get('[data-testid=modal]').should('exist');
+  });
+
+  // TODO overlay not working, see how to fix
+  // it('should close modal when clicking overlay', () => {
+  //   cy.get('button').eq(2).click();
+  //   cy.get('[data-testid=overlay]').click();
+  //   cy.get('[data-testid=modal]').should('not.exist');
+  // });
+
+  it('should close modal when clicking the close icon', () => {
+    cy.get('button').eq(2).click();
+    cy.get('[data-testid=close-button]').click();
+    cy.get('[data-testid=modal]').should('not.exist');
+  });
+
+  it('should close modal when pressing esc key', () => {
+    cy.get('button').eq(2).click();
+    cy.get('body').type('{esc}');
+    cy.get('[data-testid=modal]').should('not.exist');
+  });
+
+  it('should close only last modal when pressing esc key when multiple modals are opened', () => {
+    cy.get('button').eq(8).click();
+    cy.get('[data-testid=modal] button').eq(0).click();
+    cy.get('[data-testid=modal]').should('have.length', 2);
+    cy.get('body').type('{esc}');
+    cy.get('[data-testid=modal]').should('have.length', 1);
+    cy.get('body').type('{esc}');
+    cy.get('[data-testid=modal]').should('not.exist');
+  });
+
+  it('should block the scroll when modal is opened', () => {
+    cy.get('button').eq(2).click();
+    cy.get('html').should('have.css', 'position', 'fixed');
+  });
+
+  it('should unblock the scroll when modal is closed', () => {
+    cy.get('button').eq(2).click();
+    cy.get('html').should('have.css', 'position', 'fixed');
+    cy.get('body').type('{esc}');
+    cy.get('html').should('not.have.css', 'position', 'fixed');
+  });
+
+  it('should unblock scroll only after last modal is closed when multiple modals are opened', () => {
+    cy.get('button').eq(8).click();
+    cy.get('[data-testid=modal] button').eq(0).click();
+    cy.get('[data-testid=modal]').should('have.length', 2);
+    cy.get('html').should('have.css', 'position', 'fixed');
+    cy.get('body').type('{esc}');
+    cy.get('[data-testid=modal]').should('have.length', 1);
+    cy.get('html').should('have.css', 'position', 'fixed');
+    cy.get('body').type('{esc}');
+    cy.get('[data-testid=modal]').should('not.exist');
+    cy.get('html').should('not.have.css', 'position', 'fixed');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// 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) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["**/*.ts"]
+}

package.json

@@ -26,6 +26,9 @@
     "setupFilesAfterEnv": [
       "./__tests__/setupTests.ts"
     ],
+    "modulePathIgnorePatterns": [
+      "cypress"
+    ],
     "coveragePathIgnorePatterns": [
       "src/lib"
     ]
@@ -80,6 +83,7 @@
     "@types/react": "16.9.56",
     "@types/react-dom": "16.9.9",
     "@types/react-transition-group": "4.4.0",
+    "cypress": "5.5.0",
     "docz": "2.3.1",
     "gatsby": "2.23.11",
     "gatsby-theme-docz": "2.3.1",