First e2e test (via cypress)

This adds the first e2e test via [cypress](https://cypress.io). It's still incomplete, but it was a bit of a pain to figure out the shadow dom stuff.

The next step is to force a specific verification code when running via tests so the test can progress.

.github/workflows/run-tests.yml

@@ -7,9 +7,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v2
-            - uses: actions/setup-node@v1
+            - uses: actions/setup-node@v2
               with:
-                  node-version: 16.13.1
+                  node-version-file: ".nvmrc"
             - name: Install dependencies
               run: |
                   npm i -g npm@8.2.0
@@ -24,3 +24,5 @@ jobs:
               run: npm run server:start-dry
             - name: Run tests
               run: npm test
+            - name: Run e2e tests
+              run: npm run test:e2e

cypress.env.json

@@ -0,0 +1,4 @@
+{
+    "email": "user@example.com",
+    "password": "password"
+}

cypress.json

@@ -0,0 +1,8 @@
+{
+    "baseUrl": "http://localhost:8080",
+    "includeShadowDom": true,
+    "video": false,
+    "chromeWebSecurity": false,
+    "screenshotOnRunFailure": false,
+    "videoUploadOnPasses": false
+}

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"
+}

cypress/integration/01 - signup-login.ts

@@ -0,0 +1,9 @@
+describe("Signup/Login", () => {
+    it("can signup without errors", () => {
+        cy.signup();
+    });
+
+    // it('can login without errors', () => {
+    //   cy.login();
+    // });
+});

cypress/plugins/index.ts

@@ -0,0 +1,22 @@
+/// <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}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = () => {
+    // `on` is used to hook into various events Cypress emits
+    // `config` is the resolved Cypress config
+};

cypress/support/commands.ts

@@ -0,0 +1,26 @@
+Cypress.Commands.add("signup", () => {
+    cy.visit("/");
+
+    const { email, password } = Cypress.env();
+
+    cy.get("pl-app").find("pl-start").find("pl-login-signup").find("pl-input#emailInput").find("input").type(email);
+
+    cy.get("pl-app")
+        .find("pl-start")
+        .find("pl-login-signup")
+        .find("pl-button#submitEmailButton")
+        .find("button")
+        .click({ force: true });
+
+    // TODO: get/force verification code
+
+    // TODO: Click submit
+
+    // TODO: Force defining a password
+});
+
+Cypress.Commands.add("login", () => {
+    cy.visit("/");
+
+    // TODO: Write this
+});

cypress/support/index.ts

@@ -0,0 +1,36 @@
+// ***********************************************************
+// 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
+// ***********************************************************
+
+/// <reference types="cypress" />
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * Custom command to run all the steps to signup.
+             * @example cy.signup()
+             */
+            signup(): Chainable<Element>;
+
+            /**
+             * Custom command to run all the steps to login.
+             * @example cy.login()
+             */
+            login(): Chainable<Element>;
+        }
+    }
+}
+
+import "./commands";

package.json

@@ -16,10 +16,13 @@
     },
     "main": "main.js",
     "devDependencies": {
+        "concurrently": "7.0.0",
+        "cypress": "9.3.1",
         "lerna": "4.0.0",
         "prettier": "2.5.1",
         "ts-node": "10.0.0",
-        "typescript": "4.4.3"
+        "typescript": "4.4.3",
+        "wait-on": "6.0.0"
     },
     "scripts": {
         "postinstall": "lerna bootstrap",
@@ -45,6 +48,8 @@
         "tauri:build:production": "lerna run build:production",
         "repl": "cd packages/server && npm run repl && cd ../..",
         "test": "lerna run test",
+        "test:e2e": "concurrently --prefix=name --prefix-length=30 --kill-others -n app,cypress \"npm start\" \"./node_modules/.bin/wait-on tcp:localhost:8080 && CYPRESS_CRASH_REPORTS=0 cypress run\"",
+        "test:e2e:dev": "concurrently --prefix=name --prefix-length=30 --kill-others -n app,cypress \"npm run dev\" \"./node_modules/.bin/wait-on tcp:localhost:8080 && CYPRESS_CRASH_REPORTS=0 cypress open\"",
         "locale:extract": "lerna run extract --scope '@padloc/locale'",
         "add": "lerna add $1 --scope=@padloc/$scope",
         "remove": "rm packages/$scope/package-lock.json && lerna exec \"npm uninstall $1\" --scope=@padloc/$scope",