SFINT-2878 Added Cypress functional tests (#60)

* test(SFINT-2878): Add Cypress base setup

* test(SFINT-2878): Add dummy test

* chore(SFINT-2878): Switch cypress to typescript

.travis.yml

@@ -3,14 +3,29 @@ node_js:
   - lts/*
 addons:
   chrome: stable
+  apt:
+    packages:
+      # Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
+      - libgconf-2-4
 notifications:
   email:
     on_success: change
     on_failure: always
+cache:
+  # Caches $HOME/.npm when npm ci is default script command
+  # Caches node_modules in all other cases
+  npm: true
+  directories:
+    # we also need to cache folder with Cypress binary
+    - ~/.cache
+install:
+  - npm ci
 script:
   - npm run lint
   - npm run build
   - npm run testCoverage
+  - npm run dev & npx wait-on http://localhost:8080 
+  - npx cypress run
 before_deploy:
   - node ./scripts/before.deploy.js
 deploy:

README.md

@@ -37,11 +37,18 @@ The code is written in [typescript](http://www.typescriptlang.org/) and compiled
 
 ## Dev
 
-`npm run dev` will start a [webpack dev server](https://webpack.github.io/docs/webpack-dev-server.html). After it finishes, load [http://localhost:8080/index.html](http://localhost:8080/pages/index.html) in a browser, and the `index.html` page should load.
+`npm run dev` will start a [webpack dev server](https://webpack.github.io/docs/webpack-dev-server.html). After it finishes, load [http://localhost:8080/pages/attached_result.html](http://localhost:8080/pages/attached_result.html) in a browser, and the `index.html` page should load.
 
 Then, anytime you hit save in a typescript file, the server will reload your application.
 
 ## Tests
 
 -   `npm run test` will execute the tests one time and give you the report
 -   `npm run watchTest` will watch changes and reexecute the tests and coverage when saving a file.
+
+## Running functional tests
+
+1. `npm run dev` will start the developer server.
+2. `npx cypress run` will run the cypress functional tests suite.
+
+To add a new test suite simply add a new spec file in the `./cypress/integration/` folder.

cypress.json

@@ -0,0 +1,11 @@
+{
+    "baseUrl": "http://localhost:8080",
+    "reporter": "spec",
+    "viewportHeight": 1080,
+    "viewportWidth": 1920,
+    "reporterOptions": {
+        "toConsole": true
+    },
+    "chromeWebSecurity": false,
+    "video": false
+}

cypress/integration/basic.spec.ts

@@ -0,0 +1,5 @@
+describe('Basic', () => {
+    it('should run an assertion', () => {
+        expect(true).to.be.true;
+    });
+});

cypress/jsconfig.json

@@ -0,0 +1,3 @@
+{
+    "include": ["../node_modules/cypress", "./**/*.js"]
+}

cypress/plugins/index.js

@@ -0,0 +1,20 @@
+const wp = require('@cypress/webpack-preprocessor');
+module.exports = on => {
+    const options = {
+        webpackOptions: {
+            resolve: {
+                extensions: ['.ts', '.tsx', '.js']
+            },
+            module: {
+                rules: [
+                    {
+                        test: /\.tsx?$/,
+                        loader: 'ts-loader',
+                        options: { transpileOnly: true }
+                    }
+                ]
+            }
+        }
+    };
+    on('file:preprocessor', wp(options));
+};

cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "baseUrl": "../node_modules",
+        "target": "es5",
+        "lib": ["es5", "dom"],
+        "types": ["cypress", "mocha", "chai"]
+    },
+    "include": ["**/*.ts"]
+}