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.