Merge pull request #75 from stakwork/feat/cypress-git-action

Feat/cypress git action

.github/workflows/prjob_cypress_tests.yml

@@ -0,0 +1,75 @@
+name: Cypress Tests
+
+on: 
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  cypress:
+    name: Cypress
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Enable docker.host.internal for Ubuntu
+        run: |
+          pwd && sudo bash -c 'echo "172.17.0.1 host.docker.internal" >> /etc/hosts'
+
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Clone Stack
+        run: |
+          git clone https://github.com/stakwork/sphinx-stack.git stack
+
+      - name: Give Permissions to Sphinx Tribes Frontend
+        run: chmod 777 -R cypress
+
+      - name: Give Permissions to Stack
+        working-directory: ./stack
+        run: |
+          chmod 777 ./bitcoind;    
+          chmod 777 -R ./relay;
+          chmod 777 -R ./lnd;
+          chmod 777 -R ./proxy;
+          chmod 777 -R ./cln;
+      
+      - name: Check for NODES
+        uses: nick-fields/retry@v2
+        with: 
+          timeout_minutes: 10
+          max_attempts: 3
+          command: |
+            GITACTION_ENV=gitactionenv docker-compose -f ./stack/alts/proxy.yml --project-dir ./stack up -d;
+            sleep 240;
+            docker ps
+            docker logs meme.sphinx
+            docker logs dave.sphinx
+            docker wait stack_relaysetup_1
+            cat stack/relay/NODES.json;
+
+      - name: Copy Node.json
+        uses: canastro/copy-file-action@master
+        with:
+          source: 'stack/relay/NODES.json'
+          target: 'cypress/fixtures/nodes.json'
+
+      - name: Install Frontend Dependencies
+        run: yarn install
+
+      - name: Start Server
+        run: yarn run start:cypress &
+
+      - name: Run Cypress Test
+        run: |
+          sleep 20
+          yarn run cypress:run
+      
+      - name: Stop Stack
+        working-directory: ./stack
+        run: docker-compose down

.gitignore

@@ -7,6 +7,8 @@
 
 # testing
 /coverage
+cypress/fixtures/nodes.json
+cypress/screenshots
 
 # production
 /build

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/login.cy.ts

@@ -0,0 +1,59 @@
+describe('User Login', () => {
+  it('User gets to login into the app', () => {
+    let user;
+    const userAlias = 'carol';
+    let challenge;
+    let token;
+    let info;
+
+    cy.fixture('nodes.json').then((json) => {
+      for (let i = 0; i < json.length; i++) {
+        if (json[i].alias === userAlias) {
+          user = json[i];
+        }
+      }
+
+      cy.visit('http://localhost:3007');
+      cy.contains('Sign in').click();
+
+      cy.get('[data-challenge]')
+        .invoke('attr', 'data-challenge')
+        .then((value) => {
+          const array = value?.split('&');
+          if (array && array.length === 4) {
+            challenge = array[2].substring(10);
+          }
+        });
+
+      cy.request({
+        method: 'POST',
+        url: `${user.external_ip}/verify_external`,
+        headers: {
+          'x-user-token': `${user.authToken}`
+        }
+      }).then((response) => {
+        token = response.body.response.token;
+        info = response.body.response.info;
+      });
+
+      cy.request({
+        method: 'GET',
+        url: `${user.external_ip}/signer/U98BoaW54IFZlcmlmaWNhdGlvbg==`,
+        headers: {
+          'x-user-token': `${user.authToken}`
+        }
+      }).then((response) => {
+        info.url = `${user.external_ip}`;
+        info['verification_signature'] = response.body.response.sig;
+
+        cy.request({
+          method: 'POST',
+          url: `http://localhost:13000/verify/${challenge}?token=${token}`,
+          body: info
+        }).then((response) => {});
+      });
+
+      cy.contains(userAlias).eq(0);
+    });
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts 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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,43 @@
+// ***********************************************************
+// This example support/e2e.ts 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';
+import nodes from '../fixtures/nodes.json';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+async function postAllUsersToTribe() {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    try {
+      await fetch(`${node.external_ip}/profile`, {
+        method: 'POST',
+        body: JSON.stringify({
+          price_to_meet: 0,
+          description: `Testing out how this works by ${node.alias}`,
+          owner_alias: `${node.alias}`,
+          img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR9dAUM-b34F_a6DMw8D6fQ_Y0LUIAVzvfCw&usqp=CAU'
+        }),
+        headers: { 'x-user-token': `${node.authToken}` }
+      });
+    } catch (error) {
+      console.log(`Error creating user on bounty platform: ${JSON.stringify(error)}`);
+    }
+  }
+}
+
+postAllUsersToTribe();

package.json

@@ -10,15 +10,17 @@
     "start:people": "PORT=3007 craco start",
     "start:people:docker": "PORT=23007 craco start",
     "start:people:cluster": "PORT=13007 craco start",
+    "start:cypress": "PORT=3007 craco start",
     "build": "craco build",
     "eject": "craco eject",
     "lint": "eslint src --max-warnings 71 --ext .ts --ext .tsx --ignore-pattern *.spec.tsx --ignore-pattern *.spec.ts",
     "lint:fix": "npm run lint -- --fix",
-    "prettier": "npx prettier --config .prettierrc.json -w ./src",
+    "prettier": "npx prettier --config .prettierrc.json -w ./src ./cypress",
     "prettier:check": "npx prettier --config .prettierrc.json --check ./src",
     "prepare": "cd ../.. && husky install frontend/app/.husky",
     "test": "yarn run test-jest",
-    "test-jest": "REACT_APP_IS_TEST=true NODE_ENV=test yarn jest --coverage --no-cache --transformIgnorePatterns \"./frontend/app/svg/\""
+    "test-jest": "REACT_APP_IS_TEST=true NODE_ENV=test yarn jest --coverage --no-cache --transformIgnorePatterns \"./frontend/app/svg/\"",
+    "cypress:run": "npx cypress run"
   },
   "resolutions": {
     "react-error-overlay": "6.0.9",
@@ -190,6 +192,7 @@
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "bootstrap": "^4.5.0",
+    "cypress": "^13.6.3",
     "eslint": "^8.37.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-react": "^1.1.7",
@@ -203,4 +206,4 @@
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.2"
   }
-}
+}

src/components/auth/AuthQR.tsx

@@ -3,7 +3,7 @@ import { EuiLoadingSpinner } from '@elastic/eui';
 import styled from 'styled-components';
 import { observer } from 'mobx-react-lite';
 import { AuthProps } from 'people/interfaces';
-import { formatRelayPerson } from 'helpers';
+import { formatRelayPerson } from 'helpers/helpers-extended';
 import api from '../../api';
 import { useStores } from '../../store';
 import type { MeInfo } from '../../store/ui';

src/components/common/QR.tsx

@@ -59,6 +59,7 @@ export default function QR(props: QRProps) {
           justifyContent: 'center',
           alignItems: 'center'
         }}
+        data-challenge={props.value}
       >
         {centerIcon}
       </div>

src/config/host.ts

@@ -2,7 +2,11 @@ const internalDockerHosts = ['localhost:13007', 'localhost:13000'];
 const externalDockerHosts = ['localhost:23007', 'localhost:23000'];
 
 export function getHost(): string {
-  const host = window.location.host.includes('localhost') ? 'localhost:5002' : window.location.host;
+  const host = window.location.host.includes('localhost')
+    ? window.location.host.includes('localhost:3007')
+      ? 'localhost:13000'
+      : 'localhost:5002'
+    : window.location.host;
   return host;
 }
 

tsconfig.json

@@ -24,6 +24,7 @@
     "baseUrl": "./src",
   },
   "include": [
-    "src"
-  ]
+    "src",
+  ],
+  "exclude": ["cypress"]
 }