Working cypress integration test

pwa/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

pwa/cypress.json

@@ -0,0 +1 @@
+{"video": false}

pwa/cypress/README.md

@@ -0,0 +1,22 @@
+# Cypress.io end-to-end tests
+
+[Cypress.io](https://www.cypress.io) is an open source, MIT licensed end-to-end test runner
+
+## Folder structure
+
+These folders hold end-to-end tests and supporting files for the Cypress Test Runner.
+
+- [fixtures](fixtures) holds optional JSON data for mocking, [read more](https://on.cypress.io/fixture)
+- [integration](integration) holds the actual test files, [read more](https://on.cypress.io/writing-and-organizing-tests)
+- [plugins](plugins) allow you to customize how tests are loaded, [read more](https://on.cypress.io/plugins)
+- [support](support) file runs before all tests and is a great place to write or load additional custom commands, [read more](https://on.cypress.io/writing-and-organizing-tests#Support-file)
+
+## `cypress.json` file
+
+You can configure project options in the [../cypress.json](../cypress.json) file, see [Cypress configuration doc](https://on.cypress.io/configuration).
+
+## More information
+
+- [https://github.com/cypress.io/cypress](https://github.com/cypress.io/cypress)
+- [https://docs.cypress.io/](https://docs.cypress.io/)
+- [Writing your first Cypress test](http://on.cypress.io/intro)

pwa/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

pwa/cypress/integration/spec.ts

@@ -0,0 +1,12 @@
+// enables intelligent code completion for Cypress commands
+// https://on.cypress.io/intelligent-code-completion
+/// <reference types="cypress" />
+
+describe('Homepage', () => {
+  it('shows login button', function () {
+    cy.visit('http://localhost:3001')
+    cy.get('.am-button').contains('Login')
+  })
+})
+
+export {};

pwa/cypress/plugins/index.js

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const webpack = require('@cypress/webpack-preprocessor');
+
+const webpackOptions = {
+    mode: 'development',
+    // make sure the source maps work
+    devtool: 'eval-source-map',
+    // webpack will transpile TS and JS files
+    resolve: {
+        extensions: ['.ts', '.js', '.tsx', '.jsx'],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx|mjs)$/,
+                loader: 'babel-loader',
+                options: {
+                    presets: ['@babel/preset-env', '@babel/preset-react'],
+                    plugins: ['@babel/plugin-proposal-class-properties'],
+                },
+            },
+            {
+                test: /\.(ts|tsx)$/,
+                loader: ['babel-loader', 'awesome-typescript-loader'],
+            },
+            {
+                test: /\.css$/,
+                exclude: [/node_modules/],
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.svg$/,
+                exclude: [/node_modules/],
+                use: ['svg-url-loader'],
+            },
+        ],
+    },
+};
+
+const options = {
+    webpackOptions,
+    watchOptions: {},
+};
+
+module.exports = (on, config) => {
+    on('file:preprocessor', webpack(options));
+
+    return config;
+};

pwa/cypress/support/index.js

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

pwa/cypress/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "../node_modules/cypress",
+    "*/*.ts"
+  ],
+  "compilerOptions": {
+    "strict": false,
+    "baseUrl": "../node_modules",
+    "target": "es5",
+    "lib": ["es7", "dom"],
+    "esModuleInterop": true,
+    "jsx": "react",
+    "inlineSourceMap": true,
+    "skipLibCheck": true
+  }
+}

pwa/package.json

@@ -21,6 +21,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "integration-non-head": "cypress open",
+    "integration": "cypress run",
     "coverage": "react-scripts test --coverage --watchAll=false",
     "eject": "react-scripts eject"
   },
@@ -40,7 +42,14 @@
     ]
   },
   "devDependencies": {
+    "@bahmutov/add-typescript-to-cypress": "^2.1.2",
     "@testing-library/react-hooks": "^3.2.1",
-    "react-test-renderer": "^16.13.1"
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-import": "^1.13.0",
+    "cypress": "^4.2.0",
+    "react-test-renderer": "^16.13.1",
+    "svg-url-loader": "^5.0.0",
+    "webpack": "^4.42.1"
   }
 }