feat: cypress testing (#206)

* feat: initial cypress config

* test: trying gh action

* fix: remove build step

* fix: gh-actions

* fix: gh

* fix: gh

* fix: gh

* fix: run cypress from root

* fix(ci): run build before attempting to start the dev server

* fix(ci): increase timeout for cypress

* fix(ci): move cypress package to top level

* fix(ci): move cypress config back to package level

* fix(ci): change server command for cypress

* fix(ci): avoid installation phase for cypress GH action

* fix(ci): port number typo

* fix(ci): revert to using pnpm run dev

* fix(ci): cache the cypress binary after node_modules install

* fix(ci): bump timeout for the dev server to start

* fix(ci): use production build for cypress test

* fix(ci): missing cypress binary

* feat: cypress tests

---------

Co-authored-by: Mircea Nistor <mirceanis@gmail.com>

.github/workflows/build-test-on-pr.yml

@@ -16,10 +16,9 @@ jobs:
  with:
  node-version: 18
  cache: 'pnpm'
- - run: pnpm add -g pnpm
 
  - run: pnpm install
- - run: pnpm run build
+ - run: pnpm run -r build:js
  - run: pnpm run test
 
  build-electron:
@@ -42,10 +41,9 @@ jobs:
  with:
  node-version: 18
  cache: 'pnpm'
- - run: pnpm add -g pnpm
 
  - run: pnpm install
- - run: pnpm run -r --filter "agent-explore^..." build # only the dependencies of agent-explore
+ - run: pnpm run -r --filter "agent-explore^..." build:js # only the dependencies of agent-explore
 
  - name: Build Electron app
  uses: paneron/action-electron-builder@v1.8.1

.github/workflows/build-test-publish-on-push.yml

@@ -30,9 +30,8 @@ jobs:
  with:
  node-version: 18
  cache: 'pnpm'
- - run: pnpm add -g pnpm
  - run: pnpm install
- - run: pnpm run build
+ - run: pnpm run build:js
  - run: pnpm run test
  - name: 'Setup git coordinates'
  run: |
@@ -84,10 +83,9 @@ jobs:
  with:
  node-version: 18
  cache: 'pnpm'
- - run: pnpm add -g pnpm
 
  - run: pnpm install
- - run: pnpm run -r --filter "agent-explore^..." build # only the dependencies of agent-explore
+ - run: pnpm run -r --filter "agent-explore^..." build:js # only the dependencies of agent-explore
 
  - name: Build/release Electron app
  uses: paneron/action-electron-builder@v1.8.1

.github/workflows/cypress.yml

@@ -0,0 +1,51 @@
+name: cypress-test-on-pr
+on: [ pull_request, workflow_dispatch ]
+jobs:
+ cypress-run:
+ runs-on: ubuntu-latest
+ # Runs tests in parallel with matrix strategy https://docs.cypress.io/guides/guides/parallelization
+ # https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs
+ # Also see warning here https://github.com/cypress-io/github-action#parallel
+ strategy:
+ fail-fast: false # https://github.com/cypress-io/github-action/issues/48
+ matrix:
+ containers: [1, 2] # Uses 2 parallel instances
+ steps:
+ - uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+ - uses: pnpm/action-setup@v2
+ with:
+ version: 8
+
+ - name: 'Setup Node.js with pnpm cache'
+ uses: actions/setup-node@v3
+ with:
+ node-version: 18
+ cache: 'pnpm'
+
+ - run: pnpm install
+ - run: cd packages/agent-explore && pnpm cypress install; cd -
+ - run: pnpm run build
+
+ - name: Cypress run
+ # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
+ uses: cypress-io/github-action@v6
+ with:
+ # Starts web server for E2E tests - replace with your own server invocation
+ # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
+ working-directory: packages/agent-explore
+ start: pnpm run -r agent-explore serve --port 3456
+ wait-on: 'http://localhost:3456' # Waits for above
+ wait-on-timeout: 120 # Waits for above
+ # Records to Cypress Cloud
+ # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
+ record: true
+ parallel: true # Runs test in parallel using settings above
+ install: false
+ env:
+ # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
+ # in GitHub repo → Settings → Secrets → Actions
+ CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+ # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
+ GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

.gitignore

@@ -27,3 +27,4 @@ yarn-error.log*
 
 .idea/
 tsconfig.tsbuildinfo
+packages/agent-explore/cypress/videos/*

packages/agent-explore/.npmignore

@@ -1,2 +1,2 @@
 public
-src
+src

packages/agent-explore/cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+ projectId: "21c5nu",
+ video: true,
+ e2e: {
+ experimentalStudio: true,
+ setupNodeEvents(on, config) {
+ // implement node event listeners here
+ },
+ },
+});

packages/agent-explore/cypress/e2e/create-bs-posts.cy.ts

@@ -0,0 +1,33 @@
+describe('Create identifier and BrainShare post', () => {
+ it('passes', () => {
+ cy.viewport('ipad-mini', 'landscape')
+ cy.visit('http://localhost:3456/')
+
+ cy.contains('Identifiers').click()
+ cy.wait(1000)
+ cy.contains('New').click()
+ cy.wait(1000)
+ cy.contains('Next').click()
+ cy.get('#form_in_form_name').clear();
+ cy.get('#form_in_form_name').type('Alice Smith');
+ cy.get('#form_in_form_name').blur();
+ cy.wait(1000)
+ cy.contains('Finish').click()
+ cy.wait(1000)
+ cy.contains('BrainShare').click()
+ cy.wait(1000)
+ cy.contains('Compose').click()
+ cy.wait(1000)
+
+ /* ==== Generated with Cypress Studio ==== */
+ cy.get('.ant-input').clear();
+ cy.get('.ant-input').type('Welcome');
+ cy.wait(1000)
+ cy.get('textarea').type( 'Welcome to BrainShare', {force: true} )
+ cy.contains('Save to: Private').click()
+ cy.wait(1000)
+ // cy.get('.monaco-editor textarea:first').click().focused().type( 'Welcome to BrainShare' )
+ // cy.get('.ant-btn-primary > span').click();
+ /* ==== End Cypress Studio ==== */
+ })
+})

packages/agent-explore/cypress/e2e/discovery.cy.ts

@@ -0,0 +1,52 @@
+describe('Discovery shows BrainShare home page', () => {
+ it('passes', () => {
+ cy.viewport('ipad-mini', 'landscape')
+ cy.visit('http://localhost:3456/')
+ cy.get('#rc_select_0').click().type('{enter}')
+ cy.wait(2000)
+
+ cy.contains('DID Document').click()
+ cy.wait(2000)
+ cy.get(':nth-child(3) > .ant-list-item-action > li > .ant-btn > span').click();
+ cy.wait(2000)
+ cy.contains('Add connection').click()
+ cy.wait(2000)
+ cy.get(':nth-child(2) > .ant-pro-list-row-header > .ant-list-item-meta > .ant-list-item-meta-content > .ant-list-item-meta-title > .ant-pro-list-row-header-container > .ant-pro-list-row-title > .ant-btn > span').click();
+ cy.wait(2000)
+ cy.contains('Contacts').click()
+ cy.wait(2000)
+ cy.contains('VeramoLabs').click()
+ cy.wait(2000)
+
+ cy.contains('Veramo community').click()
+ cy.wait(2000)
+ cy.contains('Private').click()
+ cy.wait(2000)
+ cy.contains('Identifiers').click()
+ cy.wait(2000)
+ cy.contains('New').click()
+ cy.wait(2000)
+ cy.get('#form_in_form_alias').clear();
+ cy.get('#form_in_form_alias').type('alice');
+ cy.wait(2000)
+ cy.contains('Next').click()
+ cy.wait(2000)
+ cy.contains('Finish').click()
+ cy.wait(2000)
+ cy.contains('alice').click()
+ cy.wait(2000)
+ cy.contains('Profile').click();
+ cy.wait(1000)
+ cy.contains('Edit').click();
+ cy.wait(1000)
+ cy.get('#form_in_form_name').clear();
+ cy.wait(1000)
+ cy.get('#form_in_form_name').type('Alice');
+ cy.wait(1000)
+ cy.get('#form_in_form_email').clear();
+ cy.wait(1000)
+ cy.get('#form_in_form_email').type('alice@wonderland.com');
+ cy.contains('Save to: Private').click();
+ cy.wait(1000)
+ })
+})

packages/agent-explore/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"
+}

packages/agent-explore/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>
+// }
+// }
+// }

packages/agent-explore/cypress/support/e2e.ts

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

packages/agent-explore/package.json

@@ -34,7 +34,9 @@
  "scripts": {
  "dev": "craco start",
  "build": "craco build",
+ "build:js": "tsc",
  "test": "craco test --watchAll=false",
+ "test:cypress": "cypress run",
  "release": "semantic-release",
  "agent-explore": "./bin/bin.js",
  "upgrade-veramo": "pnpm add -D @veramo/core @veramo/core-types @veramo/did-discovery @veramo/credential-w3c @veramo/credential-ld @veramo/credential-eip712 @veramo/data-store @veramo/did-comm @veramo/did-jwt @veramo/did-resolver @veramo/message-handler @veramo/remote-client @veramo/selective-disclosure @veramo/credential-eip712 @veramo/data-store-json @veramo/did-manager @veramo/kms-web3 @veramo/key-manager @veramo/did-provider-ethr @veramo/utils @veramo/did-provider-peer @veramo/did-provider-key @veramo/did-provider-jwk @veramo/did-provider-pkh @veramo/kms-local @veramo-community/veramo-react@latest",
@@ -137,6 +139,7 @@
  "buffer": "^6.0.3",
  "cross-env": "^7.0.3",
  "crypto": "npm:crypto-browserify@^3.12.0",
+ "cypress": "13.3.1",
  "date-fns": "^2.30.0",
  "did-resolver": "^4.1.0",
  "electron": "26.2.2",

packages/plugin/package.json

@@ -15,6 +15,7 @@
  "license": "Apache-2.0",
  "scripts": {
  "build": "tsc",
+ "build:js": "tsc",
  "watch": "tsc -w",
  "upgrade-veramo:next": "pnpm add @veramo/core@next @veramo/core-types@next @veramo/data-store@next @veramo/utils@next @veramo/did-discovery@next @veramo-community/veramo-react@latest"
  },

packages/plugin/src/components/DIDDiscoveryBar.tsx

@@ -50,6 +50,7 @@ export const DIDDiscoveryBar: React.FC<DIDDiscoveryBarProps> = ({
  defaultValue={placeholder}
  >
  <Input.Search
+ id='did-discovery-bar'
  onSearch={handleSelect}
  style={{
  flex: 1,