Cypress adjustments

cypress.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'cypress';
+import * as webpackConfig from 'visyn_scripts/config/webpack.config';
+
+export default defineConfig({
+  viewportHeight: 1080,
+  viewportWidth: 1920,
+  defaultCommandTimeout: 10000,
+  e2e: {
+    numTestsKeptInMemory: 20,
+    baseUrl: 'http://localhost:8080',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setupNodeEvents(on, config) {
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.family === 'chromium') {
+          // const newArgs = launchOptions.filter((arg) => arg !== '--disable-gpu');
+          launchOptions.args.push('--ignore-gpu-blacklist');
+          return launchOptions;
+        }
+      });
+    },
+  },
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+      webpackConfig: webpackConfig({ workspace_mode: 'single' }, { mode: 'production' }),
+    },
+  },
+});

cypress/.gitignore

@@ -0,0 +1,2 @@
+/videos
+/screenshots

cypress/e2e/coral_basic1.cy.ts

@@ -0,0 +1,131 @@
+describe('basic coral test', () => {
+  it('passes', () => {
+    cy.visit('localhost:8080');
+    cy.viewport(1920, 1080);
+    cy.get('[data-testid="start-analysis-button"]').click();
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1000);
+    cy.get('[data-testid="accept_genie_terms"]').check();
+    cy.get('[data-testid="login_button"]').click();
+
+    // Select dataset "TCGA tumors in tissues"
+    cy.contains('TISSUE').next().click();
+    cy.get('.dropdown-menu').contains('tumors').click();
+    cy.get('.rectCohort').click();
+
+    // Test clear button
+    cy.get('.floating-confirm:visible > .btn').click();
+
+    // Reselect cohort
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1000);
+    cy.get('.rectCohort').click();
+
+    // Filter by tumortype
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1000);
+    // cy.get('.layout_rect .rectCohort').eq(0).click().should('have.class', 'selected');
+
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1000);
+    // problematic:
+    // cy.get('.rectCohort').eq(1).click().should('have.class', 'selected');
+    cy.get('[data-testid="dual_button"]').click();
+    cy.get('.search-bar-container').type('tumortype');
+    cy.get('[data-optid="tumortype"]').click(); // categorical
+    cy.get('.search-bar-container').type('age');
+    cy.get('[data-optid="age"]').click(); // numerical
+
+    // Could not select a gene without getting error: "Uncaught TypeError: Cannot read properties of null (reading 'style')"
+    // cy.get('.search-bar-container').type('tp53')
+    // cy.get('[data-optid="ENSG00000141510"] > .option-text-ensemble').click()
+    // cy.get('[data-optid="ENSG00000141510:tpm"]').click()
+    cy.get('.remove-x').eq(1).click();
+
+    cy.get("path[aria-label*='breast invasive carcinoma']").click();
+    cy.get("path[aria-label*='skin cutaneous melanoma']").click();
+
+    cy.get('[data-testid="filter_button"]').click();
+    cy.get('[data-testid="split_button"]').click();
+    cy.get('[data-testid="filter_button"]').click();
+
+    cy.get('#cookie-bar-button').click();
+    // COOKIE BAR BUTTON
+
+    // Add data to Cohort Evolution View
+    cy.get('[data-testid="confirm_button"]').click();
+
+    // Spilt by gender
+    cy.get('.search-bar-container').type('gender');
+    cy.get('[data-optid="gender"]').click(); // categorical
+    cy.get('[data-testid="split_button"]').click();
+    cy.get('[data-testid="confirm_button"]').click();
+
+    // Delselect "Male" cohort in Cohort Evolution View
+    cy.get('.layout_rect .rectCohort-label-first').eq(3).click();
+
+    // Delselect "Null" cohort in Input Area
+    // cy.get('.layout_rect .rectCohort-label-second').eq(2).click()
+
+    // Deselect Gender Null
+    cy.get('.data .rectCohort-label-second').eq(2).click();
+
+    // Select  cohort with tumortypes in Cohort Evolution View
+    cy.get('.layout_rect .rectCohort-label-first').eq(1).click();
+    cy.get('.search-bar-container').type('age');
+    cy.get('[data-optid="age"]').click(); // numerical
+
+    cy.get('[data-testid="nav_tab_split"]').click();
+    // cy.get('.nav > :nth-child(2) > .nav-link').click()
+    cy.get('[data-testid="nav_tab_filter"]').click();
+    cy.get('[data-testid="nav_tab_split"]').click();
+    // cy.get('.mark-group.role-scope.splitmarks .g[transform="translate(465.5,0)"]')
+    // cy.get('.mark-group.role-scope.splitmarks g[transform="translate(465.5,0)"]').realMouseDown({ position: 'center' }).realMouseMove(100, 0, { position: 'center' })
+    // cy.get('g[transform="translate(465.5,0)"]').realMouseDown({ position: 'center' }).realMouseMove(100, 0, { position: 'center' })
+    // cy.get('.mark-group.role-scope.splitmarks').siblings().realMouseDown({ position: 'center' }).realMouseMove(100, 0, { position: 'center' })
+    // cy.get('.vis-container').realMouseDown({ position: 'center' }).realMouseMove(100, 0, { position: 'center' })
+    cy.get('.mark-group.role-scope.layer_0_pathgroup').realMouseDown({ position: 'center' }).realMouseMove(100, 0, { position: 'center' });
+
+    // cy.get('.sticky > .d-grid > .btn').click()
+    cy.get('[data-testid="apply_button"]').click();
+
+    // Change Density Plot
+    cy.get('.fas.fa-ruler').click();
+    cy.contains('Smoothed Counts').click();
+
+    // 2 numerical values => filter in scatterplot
+    cy.get('.search-bar-container').type('bmi');
+    cy.get('[data-optid="bmi"]').click(); // numerical
+    cy.get('.mark-symbol.role-mark.layer_0_marks').realMouseDown({ position: 'center' }).realMouseMove(100, 100, { position: 'center' });
+    // cy.get('[data-testid="apply_button"]').click()
+    cy.get('.sticky > .d-grid > .btn').click();
+    cy.get('[data-testid="confirm_button"]').click();
+
+    // Open Kaplan-Meier Plot
+    cy.get('.search-bar-container').type('death');
+    cy.get('[data-optid*="death"]').click();
+    cy.get('.mark-group.role-scope.layer_0_pathgroup').realMouseDown({ position: 'center' }).realMouseMove(-10, -75, { position: 'center' });
+    cy.get('[data-testid="apply_button"]').click();
+
+    // Box plot selection
+    cy.get('.search-bar-container').type('race');
+    cy.get('[data-optid*="ra"]').click();
+    // cy.get('.mark-group.role-scope.layer_0_pathgroup').realMouseDown({ position: 'center' }).realMouseMove(-10, -75, { position: 'center' })
+    cy.get('.mark-group.role-scope.cell').realMouseDown({ position: 'center' }).realMouseMove(-100, -75, { position: 'center' });
+    // cy.get('[data-testid="apply_button"]').click()
+    cy.get('.sticky > .d-grid > .btn').click();
+
+    /*
+    cy.dataCy('aevidence-app-chemical_proteomics')
+      .find('.overlay', { timeout: 40000 })
+      .click(248, 3, { force: true })
+      .should('be.visible')
+      .realMouseUp()
+      .realMouseDown({ position: 'center' })
+      .realMouseMove(100, 0, { position: 'center' })
+      .realMouseMove(300, 300, { position: 'center' })
+      .realMouseUp({ position: 'center' });
+
+    */
+  });
+});

cypress/e2e/coral_characterize_cohorts.cy.ts

@@ -0,0 +1,78 @@
+before(() =>
+  Cypress.on('uncaught:exception', (err, runnable) => {
+    return false;
+  }),
+);
+
+describe(' coral test: characterize cohorts', () => {
+  it('passes', () => {
+    cy.visit('localhost:8080');
+    cy.viewport(1920, 1080);
+    cy.get('[data-testid="start-analysis-button"]').click();
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1000);
+    cy.get('[data-testid="accept_genie_terms"]').check();
+    cy.get('[data-testid="login_button"]').click();
+
+    // Select dataset "CCLE in  CELLINES"
+    cy.contains('CELLLINE').next().click();
+    cy.get('.dropdown-menu').contains('CCLE').click();
+    cy.get('.rectCohort').click();
+
+    // Create Cohots to test  by tumortype
+
+    cy.get('[data-testid="dual_button"]').click();
+    cy.get('.search-bar-container').type('tumortype');
+    cy.get('[data-optid="tumortype"]').click(); // categorical
+
+    cy.get("path[aria-label*='melanoma']").click();
+    cy.get("path[aria-label*='liver']").click();
+
+    cy.get('[data-testid="filter_button"]').click();
+
+    cy.get('#cookie-bar-button').click();
+    // COOKIE BAR BUTTON
+
+    // Add data to Cohort Evolution View
+    cy.get('[data-testid="confirm_button"]').click();
+
+    // Spilt by gender
+    cy.get('.search-bar-container').type('gender');
+    cy.get('[data-optid="gender"]').click(); // categorical
+    cy.get('[data-testid="split_button"]').click();
+    cy.get('[data-testid="confirm_button"]').click();
+
+    // Test Prevalence
+    cy.get('.task-title').click();
+    cy.get('.prevalence > .task-icon').click();
+    cy.get('.exclude-container > .prev-checkbox > .checkbox-indicator').click();
+
+    cy.get('.prev-max-scale-label').eq(0).contains('1698');
+
+    cy.get(':nth-child(2) > .prev-legends-tasks > .prev-all-creation > .fas').click();
+    cy.get('.scale-ref-size').eq(0).contains('619');
+
+    cy.get('.ref-task-option > .prev-checkbox').eq(0).click();
+    cy.get('.scale-ref-size').eq(0).contains('34');
+    cy.get('.task-title').click();
+
+    // Inspect Items
+    cy.get('.details > .task-icon').click();
+    cy.get('.search-bar-container').type('gender');
+    cy.get('[data-optid="gender"]').click();
+    cy.get('.search-bar-container').type('egfr');
+
+    cy.get('[data-optid="ENSG00000146648"]').click();
+    cy.get('[data-optid="ENSG00000146648:tpm"]').click();
+    // gene column in local workspace not created
+    cy.get('.search-bar-container').type('tumortype');
+    cy.get('[data-optid="tumortype"]').click();
+    cy.get('.task-title').click();
+
+    // Compare
+    cy.get('.compare > .task-icon').click();
+    cy.get('[data-optid="ENSG00000146648:tpm"] > .remove-x').click();
+    cy.get('.search-bar-container').type('age');
+    cy.get('[data-optid*="age"]').click();
+  });
+});

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,47 @@
+/// <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.Commands.add(
+  'dataCy',
+  {
+    prevSubject: 'optional',
+  },
+  (subject, dataCy: string, options: { timeout?: 10000 }) => {
+    return subject ? cy.wrap(subject).find(`[data-cy*="${dataCy}"]`, options) : cy.get(`[data-cy*="${dataCy}"]`, options);
+  },
+);

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/components.ts

@@ -0,0 +1,40 @@
+// ***********************************************************
+// This example support/component.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')
+
+import { mount } from 'cypress/react18';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/support/e2e.ts

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

cypress/support/index.d.ts

@@ -0,0 +1,9 @@
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to select DOM element by data-cy attribute.
+     * @example cy.dataCy('greeting')
+     */
+    dataCy(value: string, options?: { timeout?: number }): Chainable<JQuery<HTMLElement>>;
+  }
+}

cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "visyn_scripts/config/tsconfig.template.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "sourceMap": false,
+    "types": ["cypress", "./support", "cypress-real-events"]
+  },
+  "include": ["../cypress.config.ts", "./**/*.ts", "./**/*.tsx", "../tsd.d.ts"]
+}