Add initial e2e testing with cypress

Add e2e tests with cypress using `vue add e2e-cypress`.

Vue CLI does not support creating typescript tests at this moment
(vuejs/vue-cli#1350).

.github/workflows/test.yaml

@@ -31,3 +31,7 @@ jobs:
  -
  name: Run integration tests
  run: npm run test:integration
+ -
+ name: Run e2e tests
+ if: always() # Run even if previous step fail
+ run: npm run test:e2e -- --headless

.gitignore

@@ -3,4 +3,7 @@ dist/
 .vs
 .vscode
 #Electron-builder output
-/dist_electron
+/dist_electron
+# Cypress
+/tests/e2e/screenshots
+/tests/e2e/videos

README.md

@@ -49,6 +49,9 @@
 - Testing
  - Run unit tests: `npm run test:unit`
  - Run integration tests: `npm run test:integration`
+ - Run e2e (end-to-end) tests
+ - Interactive mode with GUI: `npm run test:e2e`
+ - Headless mode without GUI: `npm run test:e2e -- --headless`
  - Lint: `npm run lint`
 - **Desktop app**
  - Development: `npm run electron:serve`

cypress.json

@@ -0,0 +1,3 @@
+{
+ "pluginsFile": "tests/e2e/plugins/index.js"
+}

docs/tests.md

@@ -3,41 +3,59 @@
 - There are two different types of tests executed:
  1. [Unit tests](#unit-tests)
  2. [Integration tests](#integration-tests)
+ 3. [End-to-end (E2E) tests](#e2e-tests)
+- All tests
+ - Uses [Mocha](https://mochajs.org/) and [Chai](https://www.chaijs.com/).
+ - Are written in files that includes `.spec` extension.
 - 💡 You can use path/module alias `@/tests` in import statements.
 
 ## Unit tests
 
-- Tests each component in isolation
-- Defined in [`./tests/unit`](./../tests/unit)
-- They follow same folder structure as [`./src`](./../src)
+- Tests each component in isolation.
+- Defined in [`./tests/unit`](./../tests/unit).
+- They follow same folder structure as [`./src`](./../src).
 
 ### Naming
 
-- Each test suite first describe the system under test
- - E.g. tests for class `Application` is categorized under `Application`
-- Tests for specific methods are categorized under method name (if applicable)
- - E.g. test for `run()` is categorized under `run`
+- Each test suite first describe the system under test.
+ - E.g. tests for class `Application` is categorized under `Application`.
+- Tests for specific methods are categorized under method name (if applicable).
+ - E.g. test for `run()` is categorized under `run`.
 
 ### Act, arrange, assert
 
-- Tests use act, arrange and assert (AAA) pattern when applicable
+- Tests use act, arrange and assert (AAA) pattern when applicable.
 - **Arrange**
- - Should set up the test case
- - Starts with comment line `// arrange`
+ - Should set up the test case.
+ - Starts with comment line `// arrange`.
 - **Act**
- - Should cover the main thing to be tested
- - Starts with comment line `// act`
+ - Should cover the main thing to be tested.
+ - Starts with comment line `// act`.
 - **Assert**
- - Should elicit some sort of response
- - Starts with comment line `// assert`
+ - Should elicit some sort of response.
+ - Starts with comment line `// assert`.
 
 ### Stubs
 
-- Stubs are defined in [`./tests/stubs`](./../tests/unit/stubs)
-- They implement dummy behavior to be functional
+- Stubs are defined in [`./tests/stubs`](./../tests/unit/stubs).
+- They implement dummy behavior to be functional.
 
 ## Integration tests
 
-- Tests functionality of a component in combination with others (not isolated)
-- Ensure dependencies to third parties work as expected
-- Defined in [`./tests/integration`](./../tests/integration)
+- Tests functionality of a component in combination with others (not isolated).
+- Ensure dependencies to third parties work as expected.
+- Defined in [`./tests/integration`](./../tests/integration).
+
+## E2E tests
+
+- Test the functionality and performance of a running application.
+- E2E tests are configured by vue plugin [`e2e-cypress`](https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-e2e-cypress#readme) for Vue CLI.
+- Names and folders are structured logically based on tests.
+- The structure is following:
+ - [`cypress.json`](./../cypress.json): Cypress configuration file.
+ - [`./tests/e2e/`](./../tests/e2e/): Base Cypress folder.
+ - [`/specs/`](./../tests/e2e/specs/): Test files, test are named with `.spec.js` extension.
+ - [`/plugins/index.js`](./../tests/e2e/plugins/index.js): Plugin file executed before project is loaded.
+ - [`/support/index.js`](./../tests/e2e/support/index.js): Support file, runs before every single spec file.
+ - *(Ignored)* `/videos`: Asset folder for videos taken during tests.
+ - *(Ignored)* `/screenshots`: Asset folder for Screenshots taken during tests.