Cypress end to end testing

.gitignore

@@ -44,3 +44,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+cypress/screenshots
+cypress/videos

.gitlab-ci.yml

@@ -1,8 +1,12 @@
-image: node:12-alpine
+image: node:12
 
 variables:
   CHROME_BIN: chromium-browser
   CONTAINER_IMAGE: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_SHORT_SHA}
+  POSTGRES_HOST_AUTH_METHOD: "trust"
+  SECRET_KEY: "testing"
+  ENABLE_TEST_API: "true"
+  FF_NETWORK_PER_BUILD: 1
 
 stages:
   - test
@@ -17,10 +21,34 @@ test:
     paths:
     - .npm/
   script:
+    - apk add --no-cache git
     - npm ci --cache .npm --prefer-offline
     - npm run lint
     - npm run test -- --progress false --watch=false --browsers=Chromium_CI
 
+test-e2e:
+  stage: test
+  services:
+    - postgres
+    - name: registry.gitlab.com/glitchtip/glitchtip-backend:master
+      alias: backend
+      command: ["./bin/run-migrate-and-runserver.sh"]
+  image:
+    name: cypress/included:4.2.0
+    entrypoint: [""]
+  script:
+    - npm ci --cache .npm --prefer-offline
+    - cp src/proxy.conf.ci.json src/proxy.conf.json 
+    - npm run e2e
+  variables:
+    CYPRESS_backendBaseURL: "http://backend:8080"
+  artifacts:
+    when: always
+    paths:
+      - cypress/videos/**/*.mp4
+      - cypress/screenshots/**/*.png
+    expire_in: 1 day
+
 build-assets:
   stage: test
   cache:

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:4200",
+  "backendBaseURL": "http://localhooost:8000"
+}

cypress/fixtures/users.ts

@@ -0,0 +1,4 @@
+export const user = {
+  email: "test@example.com",
+  password: "hunter22"
+};

cypress/integration/login.ts

@@ -0,0 +1,21 @@
+import { seedBackend } from "./utils";
+import { user } from "../fixtures/users";
+
+describe("Login", () => {
+  it("should show validation errors", () => {
+    cy.visit("/login");
+    cy.get("#submit").click();
+    cy.contains("email is required");
+    cy.contains("password should be at least");
+  });
+
+  it("should allow logging in", () => {
+    seedBackend();
+
+    cy.visit("/login");
+    cy.get("input[formcontrolname=email]").type(user.email);
+    cy.get("input[formcontrolname=password]").type(user.password);
+    cy.get("#submit").click();
+    cy.url().should("be", "/");
+  });
+});

cypress/integration/utils.ts

@@ -0,0 +1,8 @@
+export function seedBackend() {
+  let backendBaseURL = Cypress.env("backendBaseURL");
+  if (!backendBaseURL) {
+    backendBaseURL = "";
+  }
+  const url = backendBaseURL + "/api/test/seed/";
+  cy.request("POST", url);
+}

cypress/plugins/index.js

@@ -0,0 +1,26 @@
+const wp = require("@cypress/webpack-preprocessor");
+/// <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}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  const options = {
+    webpackOptions: require("../webpack.config")
+  };
+  on("file:preprocessor", wp(options));
+};

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// 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
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

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

cypress/webpack.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  mode: 'development',
+  // make sure the source maps work
+  devtool: 'eval-source-map',
+  // webpack will transpile TS and JS files
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        // every time webpack sees a TS file (except for node_modules)
+        // webpack will use "ts-loader" to transpile it to JavaScript
+        test: /\.ts$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              // skip typechecking for speed
+              transpileOnly: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+}

package.json

@@ -7,7 +7,9 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
+    "e2e": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy:run\" --kill-others --success first",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "analyze": "webpack-bundle-analyzer dist/stats-es2015.json"
@@ -38,6 +40,7 @@
     "@angular/compiler-cli": "~9.1.0",
     "@angular/language-service": "~9.1.0",
     "@babel/core": "^7.7.2",
+    "@cypress/webpack-preprocessor": "^4.1.3",
     "@storybook/addon-actions": "^5.3.12",
     "@storybook/addon-links": "^5.3.12",
     "@storybook/addon-notes": "^5.3.12",
@@ -49,6 +52,8 @@
     "@types/node": "^12.11.1",
     "babel-loader": "^8.0.6",
     "codelyzer": "^5.1.2",
+    "concurrently": "^5.1.0",
+    "cypress": "^4.2.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
@@ -60,6 +65,7 @@
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
     "typescript": "~3.7.5",
+    "wait-on": "^4.0.1",
     "webpack-bundle-analyzer": "^3.6.0"
   }
 }

src/proxy.conf.ci.json

@@ -0,0 +1,10 @@
+{
+  "/api": {
+    "target": "http://backend:8080",
+    "secure": false
+  },
+  "/rest-auth": {
+    "target": "http://backend:8080",
+    "secure": false
+  }
+}