Merge pull request #2649 from GMOD/embedded_tests

Add Cypress test of package that uses embedded components

.eslintrc.base.json

@@ -99,6 +99,25 @@
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }
+    },
+    {
+      "files": ["**/component_test/**"],
+      "parserOptions": {
+        "ecmaFeatures": {
+          "jsx": true
+        },
+        "project": "./component_test/tsconfig.json"
+      }
+    },
+    {
+      "files": ["**/component_test/cypress/**"],
+      "extends": ["plugin:cypress/recommended"],
+      "parserOptions": {
+        "ecmaFeatures": {
+          "jsx": true
+        },
+        "project": "./component_test/cypress/tsconfig.json"
+      }
     }
   ]
 }

.github/workflows/push.yml

@@ -53,6 +53,14 @@ jobs:
         run: yarn build
       - name: Test build
         run: BUILT_TESTS=1 yarn built-test-ci
+      - name: Test embedded
+        # CI=false since we have a warning that gets treated as an error under CI
+        # Warning is: "Critical dependency: the request of a dependency is an expression"
+        run: |
+          yarn
+          CI=false yarn build
+          yarn test:e2e
+        working-directory: component_test
 
   buildjbrowseweb:
     name: Build only jbrowse-web and upload to s3 on node 14 and ubuntu-latest

component_test/.gitignore

@@ -0,0 +1,7 @@
+packed/
+/node_modules
+/coverage
+/build
+yarn.lock
+cypress/screenshots/
+cypress/videos/

component_test/README.md

@@ -0,0 +1 @@
+# Demo of `@jbrowse/react-linear-genome-view`

component_test/cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:5000",
+  "chromeWebSecurity": false,
+  "video": false
+}

component_test/cypress/integration/basic.spec.ts

@@ -0,0 +1,13 @@
+describe('JBrowse embedded view', () => {
+  it('page loads', () => {
+    cy.visit('/')
+    cy.contains('JBrowse 2 React Linear Genome View Demo')
+  })
+  it('track loads', () => {
+    cy.visit('/')
+    cy.findByTestId('Blockset-pileup').findByTestId(
+      'prerendered_canvas_{GRCh38}10:29,838,733..29,838,818-0',
+      { timeout: 10000 },
+    )
+  })
+})

component_test/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <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}
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

component_test/cypress/support/commands.js

@@ -0,0 +1,27 @@
+// ***********************************************
+// 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) => { ... })
+
+import '@testing-library/cypress/add-commands'

component_test/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')

component_test/cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "@testing-library/cypress"],
+    "allowJs": true,
+    "outDir": "dist"
+  },
+  "include": ["./**/*"]
+}

component_test/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "jbrowse-react-linear-genome-view-demo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@jbrowse/react-linear-genome-view": "1.5.8",
+    "@testing-library/cypress": "^8.0.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/cypress": "^1.1.3",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "cypress": "^9.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "fontsource-roboto": "^4.0.0",
+    "prettier": "^2.3.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "serve": "^13.0.2",
+    "start-server-and-test": "^1.14.0",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.0.1"
+  },
+  "resolutions": {
+    "@jbrowse/core": "file:./packed/jbrowse-core.tgz",
+    "@jbrowse/plugin-alignments": "file:./packed/jbrowse-plugin-alignments.tgz",
+    "@jbrowse/plugin-bed": "file:./packed/jbrowse-plugin-bed.tgz",
+    "@jbrowse/plugin-circular-view": "file:./packed/jbrowse-plugin-circular-view.tgz",
+    "@jbrowse/plugin-config": "file:./packed/jbrowse-plugin-config.tgz",
+    "@jbrowse/plugin-data-management": "file:./packed/jbrowse-plugin-data-management.tgz",
+    "@jbrowse/plugin-gff3": "file:./packed/jbrowse-plugin-gff3.tgz",
+    "@jbrowse/plugin-linear-genome-view": "file:./packed/jbrowse-plugin-linear-genome-view.tgz",
+    "@jbrowse/plugin-sequence": "file:./packed/jbrowse-plugin-sequence.tgz",
+    "@jbrowse/plugin-svg": "file:./packed/jbrowse-plugin-svg.tgz",
+    "@jbrowse/plugin-trix": "file:./packed/jbrowse-plugin-trix.tgz",
+    "@jbrowse/plugin-variants": "file:./packed/jbrowse-plugin-variants.tgz",
+    "@jbrowse/plugin-wiggle": "file:./packed/jbrowse-plugin-wiggle.tgz",
+    "@jbrowse/react-linear-genome-view": "file:./packed/jbrowse-react-linear-genome-view.tgz"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "test:e2e": "start-test 'serve --listen 5000 build/' 5000 'cypress run --headless --browser chrome'"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}