Add e2e testing with Cypress (#283)

* Start adding some cypress tests

* Start adding some cypress tests

* Add tests and refactor

* Start adding some cypress tests

* Add tests and refactor

* Start adding some cypress tests

* Several edit to cypress tests

* Work in progress mostly on feature resizing

* Remove old test files

* Test cypress-mongodb

* Lower packageExtensions bson version

* Replace mongosh with cypress-mongo

* Fix linter

* Minor tidying up

* Start adding some cypress tests

* Add tests and refactor

* Start adding some cypress tests

* Several edit to cypress tests

* Work in progress mostly on feature resizing

* Start adding some cypress tests

* Add tests and refactor

* Start adding some cypress tests

* Remove old test files

* Test cypress-mongodb

* Lower packageExtensions bson version

* Replace mongosh with cypress-mongo

* Fix linter

* Minor tidying up

* Edits tests and add workflow

* Update script; Fix linter

* Minor edits to variable names

* Try setting viewport size; Fix assembly name

* Set viewport in config; Set log level and trigger in workflow

* Tweaks to tests. Add downloads to gitignore

* Simplify grep

* Add test:ci

* Replace system call with cypress/ts code. Wait for download

* Remove unsused import

* Allow retries to reduce false alarms (not ideal)

* Merge feature with end coordinate fixed

* Edit relevant test

* Add new test

* Fix test by simplifing input file and increase waiting

* Small cleanups

* Update Cypress file linting

* Rearrange tests a bit

---------

Co-authored-by: Garrett Stevens <[email protected]>

.eslintrc.js

@@ -113,63 +113,25 @@ module.exports = {
         ],
       },
     },
-    // Lint non-src files (e.g. jest.config.js) using a separate tsconfig
+    // Lint non-src JS files (e.g. jest.config.js) using a separate tsconfig
     {
       files: ['./packages/jbrowse-plugin-apollo/*.js'],
       parserOptions: {
         project: 'packages/jbrowse-plugin-apollo/tsconfig.eslint.json',
       },
       env: { node: true },
     },
-    // Specify Node env for cypress testing files
+    // Specify Node env and tsconfig for cypress testing and config files
     {
-      files: ['./packages/jbrowse-plugin-apollo/cypress/**/*.js'],
-      env: { node: true },
-    },
-    // Specify Node env for apollo-collaboration-server/
-    {
-      files: ['./packages/apollo-collaboration-server/**/*.ts'],
-      env: { node: true },
-    },
-    // Don't enforce tsdoc syntax in JS files
-    {
-      files: ['./packages/jbrowse-plugin-apollo/**/*.{ts,tsx}'],
-      env: { browser: true },
-      extends: [
-        'plugin:react/recommended',
-        'plugin:react-hooks/recommended',
-        'plugin:jsx-a11y/recommended',
+      files: [
+        './packages/jbrowse-plugin-apollo/cypress.config.js',
+        './packages/jbrowse-plugin-apollo/cypress/**/*.{j,t}s',
       ],
-      settings: {
-        // These settings are from eslint-plugin-react
-        react: {
-          // React version. "detect" automatically picks the version you have installed.
-          // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
-          // It will default to "latest" and warn if missing, and to "detect" in the future
-          version: 'detect',
-        },
-        componentWrapperFunctions: [
-          // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
-          'observer', // `property`
-          { property: 'styled' }, // `object` is optional
-          { property: 'observer', object: 'Mobx' },
-          { property: 'observer', object: '<pragma>' }, // sets `object` to whatever value `settings.react.pragma` is set to
-        ],
-      },
-    },
-    // Lint non-src files (e.g. jest.config.js) using a separate tsconfig
-    {
-      files: ['./packages/jbrowse-plugin-apollo/*.js'],
       parserOptions: {
-        project: 'packages/jbrowse-plugin-apollo/tsconfig.eslint.json',
+        project: 'packages/jbrowse-plugin-apollo/cypress/tsconfig.json',
       },
       env: { node: true },
     },
-    // Specify Node env for cypress testing files
-    {
-      files: ['./packages/jbrowse-plugin-apollo/cypress/**/*.js'],
-      env: { node: true },
-    },
     // Specify Node env for apollo-collaboration-server/
     {
       files: ['./packages/apollo-collaboration-server/**/*.ts'],
@@ -183,4 +145,4 @@ module.exports = {
       },
     },
   ],
-};
+}

.github/workflows/cypress_debug.yml

@@ -0,0 +1,42 @@
+name: Cypress debug
+on: workflow_dispatch
+
+jobs:
+  build:
+    name: End-to-end test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+
+      - name: Install
+        run: yarn --immutable
+
+      - name: Get latest JBrowse
+        working-directory: packages/jbrowse-plugin-apollo
+        run: yarn run jbrowse create --nightly .jbrowse
+
+      - name: Start MongoDB
+        uses: supercharge/[email protected]
+        with:
+          mongodb-version: 7
+          mongodb-replica-set: test-rs
+
+      - name: Run tests
+        working-directory: packages/jbrowse-plugin-apollo
+        env:
+          GUEST_USER_ROLE: admin
+          MONGODB_URI: mongodb://localhost:27017/apolloTestDb
+          LOG_LEVELS: error,warn,log
+        run: yarn run test:e2e:debug
+
+      - name: Archive test results
+        if: '!cancelled()'
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress_results
+          path: packages/jbrowse-plugin-apollo/cypress

.github/workflows/pull_request.yml

@@ -23,8 +23,23 @@ jobs:
         working-directory: packages/apollo-shared
       - name: Lint codebase
         run: yarn eslint --report-unused-disable-directives --max-warnings 0 --ext .js,.ts,.jsx,.tsx .
-      - name: Test codebase
+      - name: Run Jest tests
         run: yarn test
+      - name: Get latest JBrowse
+        working-directory: packages/jbrowse-plugin-apollo
+        run: yarn run jbrowse create --nightly .jbrowse
+      - name: Start MongoDB
+        uses: supercharge/[email protected]
+        with:
+          mongodb-version: 7
+          mongodb-replica-set: test-rs
+      - name: Run Cypress tests
+        working-directory: packages/jbrowse-plugin-apollo
+        env:
+          GUEST_USER_ROLE: admin
+          MONGODB_URI: mongodb://localhost:27017/apolloTestDb
+          LOG_LEVELS: error,warn,log
+        run: yarn run test:e2e
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v3
         env:

.yarnrc.yml

@@ -7,6 +7,9 @@ packageExtensions:
     dependencies:
       "#ansi-styles": "npm:[email protected]"
       "#supports-color": "npm:[email protected]"
+  cypress-mongodb@*:
+    dependencies:
+      bson: "^4"
   material-ui-popup-state@*:
     peerDependencies:
       "@emotion/react": "*"

packages/apollo-collaboration-server/package.json

@@ -20,7 +20,8 @@
     "test:watch": "jest --watch",
     "test:cov": "jest --coverage",
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
-    "test:e2e": "jest --config ./test/jest-e2e.json"
+    "test:e2e": "jest --config ./test/jest-e2e.json",
+    "cypress:start": "GUEST_USER_ROLE=admin MONGODB_URI=mongodb://localhost:27017/apolloTestDb yarn start"
   },
   "dependencies": {
     "@emotion/react": "^11.10.6",

packages/jbrowse-plugin-apollo/.gitignore

@@ -3,3 +3,4 @@
 # Cypress specific files
 cypress/videos
 cypress/screenshots
+cypress/downloads

packages/jbrowse-plugin-apollo/README.md

@@ -1 +1,63 @@
 # jbrowse-plugin-apollo
+
+## Testing with cypress
+
+These notes setup cypress and run tests. These notes are likely to change.
+
+- One time step: **Outside** the Apollo dev container
+  [install cypress](https://docs.cypress.io/guides/getting-started/installing-cypress).
+  E.g. on your OS terminal (not vscode) run:
+
+```
+yarn --cwd packages/jbrowse-plugin-apollo add cypress --dev
+yarn --cwd packages/jbrowse-plugin-apollo add cypress-mongodb --dev
+```
+
+Add these lines to the `packageExtensions` section of `.yarnrc.yml`:
+
+```
+  cypress-mongodb@*:
+    dependencies:
+      bson: "*"
+```
+
+Then run `yarn` again.
+
+---
+
+- Start [jbrowse](https://github.com/GMOD/jbrowse-components): You may want to
+  pull the latest code to be consistent with the GitHub workflow
+
+```
+cd /path/to/jbrowse-components
+git pull
+yarn --cwd products/jbrowse-web start
+```
+
+- Start Apollo server. Within the docker container (_i.e_ within vscode) and in
+  distinct terminals run:
+
+```
+yarn --cwd packages/apollo-shared start
+```
+
+```
+yarn --cwd packages/apollo-collaboration-server run cypress:start
+```
+
+```
+yarn --cwd packages/jbrowse-plugin-apollo start
+```
+
+If above you change the name fo the test database (`apolloTestDb`), change
+accordingly in `commands.ts`
+
+- Open cypress in the testing directory, _i.e._ where yo have the relevant
+  `package.json`. Typically (again outside the dev container/vscode):
+
+```
+yarn --cwd packages/jbrowse-plugin-apollo run cypress open
+```
+
+- For end-to-end testing, click "E2E Testing" `->` Chrome `->`
+  `Start E2E Testing`. Click on one of the available test scripts.

packages/jbrowse-plugin-apollo/cypress.config.js

@@ -1,7 +1,36 @@
-module.exports = {
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { defineConfig } = require('cypress')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { configurePlugin } = require('cypress-mongodb')
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fs = require('node:fs')
+
+module.exports = defineConfig({
+  // Make viewport long and thin to avoid the scrollbar on the right intefere
+  // with the coordinates
+  viewportHeight: 2000,
+  viewportWidth: 1000,
+  retries: {
+    runMode: 2,
+  },
+  env: {
+    mongodb: {
+      uri: 'mongodb://localhost:27017/?directConnection=true',
+      database: 'apolloTestDb',
+    },
+  },
+  screenshotOnRunFailure: false,
+  video: false,
   e2e: {
-    setupNodeEvents(_on, _config) {
-      // implement node event listeners here
+    baseUrl: 'http://localhost:8999',
+    setupNodeEvents(on, config) {
+      configurePlugin(on)
+      on('task', {
+        readdirSync(path) {
+          return fs.readdirSync(path)
+        },
+      })
+      return config
     },
   },
-}
+})

packages/jbrowse-plugin-apollo/cypress/e2e/addAssembly.cy.ts

@@ -0,0 +1,46 @@
+describe('Add Assembly', () => {
+  beforeEach(() => {
+    cy.deleteAssemblies()
+    cy.loginAsGuest()
+  })
+
+  it('Can add assembly from fasta', () => {
+    cy.contains('Apollo').click()
+    cy.contains('Add Assembly').click()
+    cy.get('input[type="TextField"]').type('volvox_deleteme')
+    cy.get('input[value="text/x-fasta"]').check()
+    cy.get('input[type="file"]').selectFile('test_data/volvox.fa')
+
+    cy.intercept('/changes').as('changes')
+    cy.contains('Submit').click()
+    cy.contains('is being added', { timeout: 10_000 })
+    cy.wait('@changes').its('response.statusCode').should('match', /2../)
+  })
+
+  it('Can add assembly from gff3 with fasta', () => {
+    cy.contains('Apollo').click()
+    cy.contains('Add Assembly').click()
+    cy.get('input[type="TextField"]').type('volvox_deleteme')
+    cy.get('input[value="text/x-gff3"]').check()
+    cy.get('input[type="file"]').selectFile('test_data/volvox.fasta.gff3')
+
+    cy.intercept('/changes').as('changes')
+    cy.contains('Submit').click()
+    cy.contains('is being added', { timeout: 10_000 })
+    cy.wait('@changes').its('response.statusCode').should('match', /2../)
+  })
+
+  it('FIXME: Can add assembly from 2bit', () => {
+    cy.contains('Apollo').click()
+    cy.contains('Add Assembly').click()
+    cy.get('input[type="TextField"]').type('volvox_deleteme')
+    cy.get('input[value="text/x-fasta"]').check()
+    cy.get('input[type="file"]').selectFile('test_data/volvox.2bit')
+
+    cy.intercept('/changes').as('changes')
+    cy.contains('Submit').click()
+    cy.contains('is being added', { timeout: 10_000 })
+    // Should match /2../ instead
+    cy.wait('@changes').its('response.statusCode').should('match', /4../)
+  })
+})

packages/jbrowse-plugin-apollo/cypress/e2e/downloadGff.cy.ts

@@ -0,0 +1,40 @@
+describe('Download GFF', () => {
+  beforeEach(() => {
+    cy.exec(`rm ${Cypress.config('downloadsFolder')}/*_apollo.gff3`, {
+      failOnNonZeroExit: false,
+    }).then((result) => {
+      cy.log(result.stderr)
+    })
+    cy.deleteAssemblies()
+    cy.loginAsGuest()
+  })
+
+  it('Can download gff', () => {
+    cy.addAssemblyFromGff('volvox.fasta.gff3', 'test_data/volvox.fasta.gff3')
+    cy.get('button[data-testid="dropDownMenuButton"]')
+      .contains('Apollo')
+      .click()
+    cy.contains('Download GFF3').click()
+    cy.focused()
+      .contains('Select assembly')
+      .parent()
+      .within(() => {
+        cy.get('input').parent().click()
+      })
+    cy.contains('volvox.fasta.gff3').click()
+    cy.get('button').contains('Download').click()
+
+    // We don't know when the download is done
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(4000)
+    cy.task('readdirSync', Cypress.config('downloadsFolder')).then((out) => {
+      const gff = out as string
+      cy.readFile(`${Cypress.config('downloadsFolder')}/${gff[0]}`).then(
+        (x: string) => {
+          const lines: string[] = x.trim().split('\n')
+          expect(lines.length).eq(247)
+        },
+      )
+    })
+  })
+})