Working E2E tests in CI (#10)

Co-authored-by: Elliott King <[email protected]>
Co-authored-by: Akshay K <[email protected]>

.dockerignore

@@ -0,0 +1 @@
+node_modules/

.github/workflows/main.yml

@@ -1,9 +1,6 @@
 name: Cypress Tests
 
-on:
-  push:
-    branches-ignore:
-      - "renovate/**"
+on: [pull_request]
 
 jobs:
   install:

.github/workflows/shipyard.yml

@@ -0,0 +1,55 @@
+name: Run E2E Tests
+
+on: [push]
+
+jobs:
+  run-cypress-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3      
+      - name: Cypress install
+        uses: cypress-io/github-action@v6
+        with:
+          runTests: false
+      - name: Save build folder
+        uses: actions/upload-artifact@v3
+        with:
+          name: build
+          if-no-files-found: error
+          path: dist
+
+      - run: yarn cypress info
+      - run: node --version
+      - run: node -p 'os.cpus()'
+      - run: yarn types
+
+      - name: Install Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '18.16.1'
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Integrate Shipyard
+        uses: shipyard/github-action/[email protected]
+        with:
+          api-token: ${{ secrets.SHIPYARD_API_TOKEN }}
+          timeout-minutes: "10"
+          app-name: "cypress-realworld-app"
+      - name: Print Env Data
+        run: |
+          echo "CYPRESS_BASE_URL=${SHIPYARD_ENVIRONMENT_URL}" >> $GITHUB_ENV
+          echo "CYPRESS_BYPASS_TOKEN=${SHIPYARD_BYPASS_TOKEN}" >> $GITHUB_ENV
+          echo "${SHIPYARD_DOMAIN}"
+          echo "${CYPRESS_BASE_URL}"
+          env | grep -e SHIPYARD -e CYPRESS
+        shell: bash
+      - name: Run E2E tests against the ephemeral environment
+        run: |
+          echo $SHIPYARD_ENVIRONMENT_URL
+          yarn cypress:run --spec "cypress/tests/shipyard/manage-user.spec.ts"
+        shell: bash
+        env:
+            CYPRESS_BASE_URL: ${{ env.CYPRESS_BASE_URL }}
+            CYPRESS_BYPASS_TOKEN: ${{ env.CYPRESS_BYPASS_TOKEN }}

.prettierrc

@@ -1,5 +1,5 @@
 {
   "trailingComma": "es5",
-  "printWidth": 100,
+  "printWidth": 160,
   "endOfLine": "auto"
 }

.yarn/releases/yarn-1.22.19.cjs

@@ -96321,7 +96321,7 @@ let main = exports.main = (() => {
       return new Promise(function (resolve, reject) {
         const connectionOptions = {
           port: +mutexPort || (_constants || _load_constants()).SINGLE_INSTANCE_PORT,
-          host: 'localhost'
+          host: '0.0.0.0'
         };
 
         function startServer() {

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:18.16.1-alpine AS build
+WORKDIR /app
+
+COPY package.json yarn.lock .yarnrc vite.config.ts ./
+
+RUN PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn install
+
+COPY . .
+
+# start app
+CMD ["yarn", "dev"]

backend/app.ts

@@ -28,7 +28,7 @@ import { frontendPort, getBackendPort } from "../src/utils/portUtils";
 require("dotenv").config();
 
 const corsOption = {
-  origin: `http://localhost:${frontendPort}`,
+  origin: process.env.SHIPYARD_DOMAIN_FRONTEND ? `https://${process.env.SHIPYARD_DOMAIN_FRONTEND}` : `http://localhost:${frontendPort}`,
   credentials: true,
 };
 

backend/database.ts

@@ -86,7 +86,7 @@ const COMMENT_TABLE = "comments";
 const NOTIFICATION_TABLE = "notifications";
 const BANK_TRANSFER_TABLE = "banktransfers";
 
-const databaseFile = path.join(__dirname, "../data/database.json");
+const databaseFile = path.join(__dirname, "../data/database/database.json");
 const adapter = new FileSync<DbSchema>(databaseFile);
 
 const db = low(adapter);

cypress.config.ts

@@ -10,19 +10,19 @@ import { defineConfig } from "cypress";
 dotenv.config({ path: ".env.local" });
 dotenv.config();
 
-const awsConfig = require(path.join(__dirname, "./aws-exports-es5.js"));
+//const awsConfig = require(path.join(__dirname, "./aws-exports-es5.js"));
 
 module.exports = defineConfig({
   projectId: "7s5okt",
   retries: {
     runMode: 2,
   },
   env: {
-    apiUrl: "http://localhost:3001",
+    apiUrl: process.env.SHIPYARD_DOMAIN_BACKEND,
     mobileViewportWidthBreakpoint: 414,
     coverage: false,
     codeCoverage: {
-      url: "http://localhost:3001/__coverage__",
+      url: `https://${process.env.SHIPYARD_DOMAIN_BACKEND}/__coverage__`,
       exclude: "cypress/**/*.*",
     },
     defaultPassword: process.env.SEED_DEFAULT_USER_PASSWORD,
@@ -41,11 +41,11 @@ module.exports = defineConfig({
     okta_programmatic_login: process.env.OKTA_PROGRAMMATIC_LOGIN || false,
 
     // Amazon Cognito
-    cognito_username: process.env.AWS_COGNITO_USERNAME,
-    cognito_password: process.env.AWS_COGNITO_PASSWORD,
-    cognito_domain: process.env.AWS_COGNITO_DOMAIN,
+    cognito_username: process.env._COGNITO_USERNAME,
+    cognito_password: process.env._COGNITO_PASSWORD,
+    cognito_domain: process.env._COGNITO_DOMAIN,
     cognito_programmatic_login: false,
-    awsConfig: awsConfig.default,
+    //awsConfig: awsConfig.default,
 
     // Google
     googleRefreshToken: process.env.GOOGLE_REFRESH_TOKEN,
@@ -65,7 +65,7 @@ module.exports = defineConfig({
     },
   },
   e2e: {
-    baseUrl: "http://localhost:3000",
+    baseUrl: `https://frontend-${process.env.SHIPYARD_DOMAIN}`,
     specPattern: "cypress/tests/**/*.spec.{js,jsx,ts,tsx}",
     supportFile: "cypress/support/e2e.ts",
     viewportHeight: 1000,

cypress/tests/shipyard/manage-user.spec.ts

@@ -0,0 +1,80 @@
+import { User } from "models";
+const userId = Cypress._.random(1000, 9999);
+describe("Create new user", function () {
+  beforeEach(function () {
+    //console.log(process.env.SHIPYARD_DOMAIN_FRONTEND)
+    const urlToVisit = "/signup";
+    cy.visit(urlToVisit);
+    cy.url().then((url) => {
+      cy.log(`Current URL: ${url}`);
+    });
+    //cy.task("db:seed");
+  });
+  // go to sign up page and register
+  it("should create a new user", function () {
+    //cy.visit('/signup')
+    const username = `user${userId}`;
+    const firstName = `Name${userId}`
+    const lastName = `T${userId}`
+    cy.get("input[name='username']").type(username);
+    cy.get("input[name='firstName']").type(firstName);
+    cy.get("input[name='lastName']").type(lastName);
+    // only field that really matters is username because uses ID
+    // maybe we track user by the auto assigned ID instead of username?
+    cy.get("input[name='password']").type("testingPwd");
+    cy.get("input[name='confirmPassword']").type("testingPwd");
+
+    // add user to db
+    cy.get("button[type='submit']").click();
+
+  });
+});
+
+describe("Login as new user", function () {
+  it("should log in as the user we just created", function () {
+    cy.visit('/');
+    const username = `user${userId}`;
+    const password = "testingPwd";
+    cy.get("input[name='username']").type(username);
+    cy.get("input[name='password']").type(password);
+    cy.get("button[type='submit']").click();
+  });
+});
+
+describe("Initialize user", function() {
+  beforeEach(function () {
+    cy.visit('/signup');
+    const username = `user${userId}`;
+    const firstName = `Name${userId}`
+    const lastName = `T${userId}`
+    cy.get("input[name='username']").type(username);
+    cy.get("input[name='firstName']").type(firstName);
+    cy.get("input[name='lastName']").type(lastName);
+    // only field that really matters is username because uses ID
+    // maybe we track user by the auto assigned ID instead of username?
+    cy.get("input[name='password']").type("testingPwd");
+    cy.get("input[name='confirmPassword']").type("testingPwd");
+
+    // add user to db
+    cy.get("button[type='submit']").click();
+
+    cy.visit('/');
+    const password = "testingPwd";
+    cy.get("input[name='username']").type(username);
+    cy.get("input[name='password']").type(password);
+    cy.get("button[type='submit']").click();
+  });
+  it("should register user for a bank account", function() {
+    cy.contains('button', 'Next').click();
+    cy.get("input[name='bankName']").type("US Bank");
+    cy.get("input[name='routingNumber']").type("987123745");
+    cy.get("input[name='accountNumber']").type("112987234");
+    cy.get("button[type='submit']").click();
+    cy.contains('button', 'Done').click();
+
+  });
+  it("should edit a user's information", function () {
+    cy.getBySel("sidenav-user-settings").click();
+
+  });
+});

docker-compose.yml

@@ -0,0 +1,34 @@
+version: '3'
+
+services:
+  frontend:
+    build:
+      context: '.'
+    labels:
+      shipyard.route: '/'
+      shipyard.primary-route: 'true'
+    environment:
+        SHIPYARD_DOMAIN_BACKEND: ${SHIPYARD_DOMAIN_BACKEND-}
+        SHIPYARD_DOMAIN: ${SHIPYARD_DOMAIN}
+    ports:
+      - '3000:3000'
+    env_file:
+      - .env
+
+  backend:
+    build:
+      context: '.'
+    labels:
+      shipyard.route: '/'
+    environment:
+        SHIPYARD_DOMAIN_FRONTEND: ${SHIPYARD_DOMAIN_FRONTEND-}
+        SHIPYARD_DOMAIN: ${SHIPYARD_DOMAIN}       
+    ports:
+      - '3001:3001'
+    volumes:
+      - 'dbdata:/app/data/database'
+    env_file:
+      - .env
+
+volumes:
+  dbdata: