genesets e2e tests (#2241)

* __test: create geneset

* example dataset test geneset

* delete geneset test

* edit __test

* gene crud

* Update client/Makefile

Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>

* copy gene sets separately

* make fix

* ignore test files locally

* csv update

* updated csvs

* fix unit tests for gene set load routes

* add missing fix to czi_hosted unit test

* pin tiledb version, for czi_hosted backend, to <0.9

* Revert tiledb pin to be less than 0.9. Broken tests have been updated in main branch.

* newline, gitignore

* color by and subset

* diffexp sets equal

* add diff exp test class

* fix data class

* diffexp snapshot

* snapshot

* snap3

* snapshot parentInnerhtml

* remove snap

* updated anno snaps

* add test class to gene list div

* new snapshots

* kick off

* Revert "kick off"

This reverts commit 743f551d55.

* remove import

* eol

* revert changes to csv re: gene tests

* global name

Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
Co-authored-by: bkmartinjr <bruce@chanzuckerberg.com>
Co-authored-by: Arathi Mani <arathi.mani@chanzuckerberg.com>
Co-authored-by: maniarathi <mani.arathi@gmail.com>

client/src/components/brushableHistogram/index.js

@@ -366,6 +366,10 @@ class HistogramBrush extends React.PureComponent {
     const fieldForId = field.replace(/\s/g, "_");
     const showScatterPlot = isUserDefined;
 
+    let testClass = "histogram-continuous-metadata";
+    if (isUserDefined) testClass = "histogram-user-gene";
+    else if (isGeneSetSummary) testClass = "histogram-gene-set-summary";
+
     return (
       <Async
         watchFn={HistogramBrush.watchAsync}
@@ -386,11 +390,7 @@ class HistogramBrush extends React.PureComponent {
               <div
                 id={`histogram_${fieldForId}`}
                 data-testid={`histogram-${field}`}
-                data-testclass={
-                  isUserDefined
-                    ? "histogram-user-gene"
-                    : "histogram-continuous-metadata"
-                }
+                data-testclass={testClass}
                 style={{
                   padding: mini ? 0 : globals.leftSidebarSectionPadding,
                   backgroundColor: zebra ? globals.lightestGrey : "white",

client/src/components/brushableHistogram/loading.js

@@ -9,6 +9,7 @@ const StillLoading = ({ zebra, displayName }) => {
     */
   return (
     <div
+      data-testclass="gene-loading-spinner"
       style={{
         padding: globals.leftSidebarSectionPadding,
         backgroundColor: zebra ? globals.lightestGrey : "white",

client/src/components/continuousLegend/index.js

@@ -98,6 +98,8 @@ const continuous = (selectorId, colorScale, colorAccessor) => {
     .attr("y", 2)
     .attr("x", 0 - legendHeight / 2)
     .attr("dy", "1em")
+    .attr("data-testid", "continuous_legend_color_by_label")
+    .attr("aria-label", colorAccessor)
     .style("text-anchor", "middle")
     .style("fill", "white")
     .text(colorAccessor);

client/src/components/geneExpression/gene.js

@@ -135,7 +135,7 @@ class Gene extends React.Component {
             <Button
               minimal
               small
-              data-testid={`delete-from-geneset-${gene}`}
+              data-testid={`delete-from-geneset:${gene}`}
               onClick={
                 quickGene ? removeGene(gene) : this.handleDeleteGeneFromSet
               }

client/src/components/geneExpression/geneSet.js

@@ -10,6 +10,8 @@ import GenesetMenus from "./menus/genesetMenus";
 import EditGenesetNameDialogue from "./menus/editGenesetNameDialogue";
 import HistogramBrush from "../brushableHistogram";
 
+import { diffexpPopNamePrefix1, diffexpPopNamePrefix2 } from "../../globals";
+
 @connect((state, ownProps) => {
   return {
     world: state.world,
@@ -81,18 +83,22 @@ class GeneSet extends React.Component {
   renderGenes() {
     const { setName, setGenes, setGenesWithDescriptions } = this.props;
 
-    return setGenes.map((gene) => {
-      const { geneDescription } = setGenesWithDescriptions.get(gene);
+    return (
+      <div data-testclass="gene-set-genes">
+        {setGenes.map((gene) => {
+          const { geneDescription } = setGenesWithDescriptions.get(gene);
 
-      return (
-        <Gene
-          key={gene}
-          gene={gene}
-          geneDescription={geneDescription}
-          geneset={setName}
-        />
-      );
-    });
+          return (
+            <Gene
+              key={gene}
+              gene={gene}
+              geneDescription={geneDescription}
+              geneset={setName}
+            />
+          );
+        })}
+      </div>
+    );
   }
 
   render() {
@@ -100,6 +106,12 @@ class GeneSet extends React.Component {
     const { isOpen } = this.state;
     const genesetNameLengthVisible = 150; /* this magic number determines how much of a long geneset name we see */
     const genesetIsEmpty = setGenes.length === 0;
+    let testClass = "geneset-expand";
+
+    if (setName.includes(diffexpPopNamePrefix1))
+      testClass = "pop-1-geneset-expand";
+    else if (setName.includes(diffexpPopNamePrefix2))
+      testClass = "pop-2-geneset-expand";
 
     return (
       <div style={{ marginBottom: 3 }}>
@@ -113,7 +125,7 @@ class GeneSet extends React.Component {
           <span
             role="menuitem"
             tabIndex="0"
-            data-testclass="geneset-expand"
+            data-testclass={testClass}
             data-testid={`${setName}:geneset-expand`}
             onKeyPress={
               /* TODO(colinmegill): #2101: click handler on span */ () => {}
@@ -133,7 +145,7 @@ class GeneSet extends React.Component {
                 style={{
                   maxWidth: globals.leftSidebarWidth - genesetNameLengthVisible,
                 }}
-                data-testid={`${setName}:geneset-label`}
+                data-testid={`${setName}:geneset-name`}
               >
                 {setName}
               </span>

client/src/components/geneExpression/index.js

@@ -69,7 +69,7 @@ class GeneExpression extends React.Component {
             <H4
               role="menuitem"
               tabIndex="0"
-              data-testclass="category-expand"
+              data-testclass="geneset-heading-expand"
               onKeyPress={this.handleExpandGeneSets}
               style={{
                 cursor: "pointer",

client/src/components/geneExpression/menus/addGeneToGenesetDialogue.js

@@ -58,7 +58,7 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
           isActive={genesetsUI.isAddingGenesToGeneset === geneset}
           inputProps={{ "data-testid": `${geneset}:create-label-dialog` }}
           primaryButtonProps={{
-            "data-testid": `${geneset}:submit-label`,
+            "data-testid": `${geneset}:submit-gene`,
           }}
           title="Add genes to gene set"
           instruction={`Add genes to ${geneset}`}

client/src/components/geneExpression/menus/createGenesetDialogue.js

@@ -128,8 +128,8 @@ class CreateGenesetDialogue extends React.PureComponent {
   };
 
   render() {
-    const { genesetName, nameErrorMessage } = this.state;
-    const { metadataField, genesetsUI, genesets } = this.props;
+    const { genesetName, nameErrorMessage} = this.state;
+    const { genesetsUI, genesets } = this.props;
 
     return (
       <>
@@ -150,7 +150,7 @@ class CreateGenesetDialogue extends React.PureComponent {
                 <LabelInput
                   onChange={this.handleChange}
                   inputProps={{
-                    "data-testid": "create-geneset-modal",
+                    "data-testid": "create-geneset-input",
                     leftIcon: "manually-entered-data",
                     intent: "none",
                     autoFocus: true,
@@ -205,7 +205,7 @@ class CreateGenesetDialogue extends React.PureComponent {
                   </Button>
                 </Tooltip2>
                 <Button
-                  data-testid={`${metadataField}:submit-geneset`}
+                  data-testid="submit-geneset"
                   onClick={this.createGeneset}
                   disabled={nameErrorMessage !== ""}
                   intent="primary"

client/src/components/geneExpression/menus/genesetMenus.js

@@ -55,7 +55,7 @@ class GenesetMenus extends React.PureComponent {
     });
   };
 
-  handleDeleteCategory = () => {
+  handleDeleteGeneset = () => {
     const { dispatch, geneset } = this.props;
     dispatch(actions.genesetDelete(geneset));
   };
@@ -76,8 +76,8 @@ class GenesetMenus extends React.PureComponent {
             >
               <Button
                 style={{ marginLeft: 0, marginRight: 2 }}
-                data-testclass="handleAddNewLabelToCategory"
-                data-testid={`${geneset}:add-new-label-to-category`}
+                data-testclass="handleAddNewGeneToGeneset"
+                data-testid={`${geneset}:add-new-gene-to-geneset`}
                 icon={<Icon icon="plus" iconSize={10} />}
                 onClick={this.activateAddGeneToGenesetMode}
                 small
@@ -101,9 +101,9 @@ class GenesetMenus extends React.PureComponent {
                   <MenuItem
                     icon="trash"
                     intent="danger"
-                    data-testclass="handleDeleteCategory"
-                    data-testid={`${geneset}:delete-category`}
-                    onClick={this.handleDeleteCategory}
+                    data-testclass="handleDeleteGeneset"
+                    data-testid={`${geneset}:delete-geneset`}
+                    onClick={this.handleDeleteGeneset}
                     text="Delete this gene set (destructive, will remove set and collection of genes)"
                   />
                 </Menu>

client/src/components/geneExpression/quickGene.js

@@ -122,7 +122,7 @@ function QuickGene() {
       <H4
         role="menuitem"
         tabIndex="0"
-        data-testclass="category-expand"
+        data-testclass="quickgene-heading-expand"
         onKeyPress={handleExpand}
         style={{
           cursor: "pointer",

client/src/globals.js

@@ -79,6 +79,9 @@ export const categoryDisplayStringMaxLength = 33;
 export const maxUserDefinedGenes = 25;
 export const maxGenes = 100;
 
+export const diffexpPopNamePrefix1 = "Pop1 high";
+export const diffexpPopNamePrefix2 = "Pop2 high";
+
 /* various timing-related behaviors */
 export const tooltipHoverOpenDelay = 1000; /* ms delay before a tooltip displays */
 export const tooltipHoverOpenDelayQuick = 500;

client/src/reducers/genesets.js

@@ -22,6 +22,8 @@
  * routes. Do not rely on it to enforce geneset integrity - eg, no duplicate
  * genes in a geneset.
  */
+import { diffexpPopNamePrefix1, diffexpPopNamePrefix2 } from "../globals";
+
 const GeneSets = (
   state = {
     initialized: false,
@@ -365,8 +367,8 @@ const GeneSets = (
       const dateString = new Date().toLocaleString();
 
       const genesetNames = {
-        positive: `Pop1 high (${dateString})`,
-        negative: `Pop2 high (${dateString})`,
+        positive: `${diffexpPopNamePrefix1} (${dateString})`,
+        negative: `${diffexpPopNamePrefix2} (${dateString})`,
       };
 
       const diffExpGeneSets = [];