Better smoke tests (#669)

client/src/components/brushableHistogram/index.js

@@ -342,7 +342,7 @@ class HistogramBrush extends React.Component {
       .select(svgRef)
       .append("g")
       .attr("class", "brush")
-      .attr("data-testid", `${svgRef.id}-brush`)
+      .attr("data-testid", `${svgRef.dataset.testid}-brush`)
       .call(brushX);
 
     /* AXIS */
@@ -380,12 +380,18 @@ class HistogramBrush extends React.Component {
       scatterplotYYaccessor,
       zebra
     } = this.props;
-
+    const field_for_id = field.replace(/\s/g, "_");
     return (
       <div
-        id={`histogram_${field}`}
+        id={`histogram_${field_for_id}`}
         data-testid={`histogram-${field}`}
-        data-testclass={isDiffExp ? `histogram-diffexp` : ""}
+        data-testclass={
+          isDiffExp
+            ? "histogram-diffexp"
+            : isUserDefined
+            ? "histogram-user-gene"
+            : "histogram-continuous-metadata"
+        }
         style={{
           padding: globals.leftSidebarSectionPadding,
           backgroundColor: zebra ? globals.lightestGrey : "white"
@@ -400,6 +406,7 @@ class HistogramBrush extends React.Component {
               />
               <ButtonGroup style={{ marginRight: 7 }}>
                 <Button
+                  data-testid={`plot-x-${field}`}
                   onClick={this.handleSetGeneAsScatterplotX(field).bind(this)}
                   active={scatterplotXXaccessor === field}
                   intent={scatterplotXXaccessor === field ? "primary" : "none"}
@@ -407,6 +414,7 @@ class HistogramBrush extends React.Component {
                   plot x
                 </Button>
                 <Button
+                  data-testid={`plot-y-${field}`}
                   onClick={this.handleSetGeneAsScatterplotY(field).bind(this)}
                   active={scatterplotYYaccessor === field}
                   intent={scatterplotYYaccessor === field ? "primary" : "none"}
@@ -434,6 +442,8 @@ class HistogramBrush extends React.Component {
               onClick={this.handleColorAction.bind(this)}
               active={colorAccessor === field}
               intent={colorAccessor === field ? "primary" : "none"}
+              data-testclass="colorby"
+              data-testid={`colorby-${field}`}
               icon="tint"
             />
           </Tooltip>
@@ -441,9 +451,9 @@ class HistogramBrush extends React.Component {
         <svg
           width={this.width}
           height={this.height}
-          id={`histogram_${field}_svg`}
-          data-testclass="histogram-svg"
-          data-testid={`histogram_${field}_svg`}
+          id={`histogram_${field_for_id}_svg`}
+          data-testclass="histogram-plot"
+          data-testid={`histogram-${field}-plot`}
           ref={svgRef => {
             this.drawHistogram(svgRef);
           }}

client/src/components/categorical/category.js

@@ -46,6 +46,7 @@ class Category extends React.Component {
       } else if (categoryCount.selectedCatCount < categoryCount.totalCatCount) {
         /* to be explicit... */
         this.checkbox.indeterminate = true;
+        this.setState({ isChecked: false });
       }
     }
   }
@@ -111,6 +112,8 @@ class Category extends React.Component {
         style={{
           maxWidth: globals.maxControlsWidth
         }}
+        data-testclass="category"
+        data-testid={`category-${metadataField}`}
       >
         <div
           style={{
@@ -128,8 +131,8 @@ class Category extends React.Component {
           >
             <label className="bp3-control bp3-checkbox">
               <input
-                data-testclass="category-checkbox"
-                data-testid={`category-checkbox-${metadataField}`}
+                data-testclass="category-select"
+                data-testid={`category-select-${metadataField}`}
                 onChange={this.handleToggleAllClick.bind(this)}
                 ref={el => {
                   this.checkbox = el;
@@ -143,6 +146,7 @@ class Category extends React.Component {
             </label>
 
             <span
+              data-testid={`category-expand-${metadataField}`}
               style={{
                 cursor: "pointer",
                 display: "inline-block"
@@ -153,14 +157,22 @@ class Category extends React.Component {
             >
               {metadataField}
               {isExpanded ? (
-                <FaChevronDown style={{ fontSize: 10, marginLeft: 5 }} />
+                <FaChevronDown
+                  data-testclass="category-expand-is-expanded"
+                  style={{ fontSize: 10, marginLeft: 5 }}
+                />
               ) : (
-                <FaChevronRight style={{ fontSize: 10, marginLeft: 5 }} />
+                <FaChevronRight
+                  data-testclass="category-expand-is-not-expanded"
+                  style={{ fontSize: 10, marginLeft: 5 }}
+                />
               )}
             </span>
           </div>
           <Tooltip content="Use as color scale" position="bottom">
             <Button
+              data-testclass="colorby"
+              data-testid={`colorby-${metadataField}`}
               onClick={this.handleColorChange}
               active={colorAccessor === metadataField}
               intent={colorAccessor === metadataField ? "primary" : "none"}

client/src/components/categorical/value.js

@@ -81,6 +81,7 @@ class CategoryValue extends React.Component {
           alignItems: "baseline",
           justifyContent: "space-between"
         }}
+        data-testclass="categorical-row"
       >
         <div
           style={{
@@ -97,13 +98,18 @@ class CategoryValue extends React.Component {
               onChange={
                 selected ? this.toggleOff.bind(this) : this.toggleOn.bind(this)
               }
-              data-testclass="categorical-value-checkbox"
-              data-testid={`categorical-value-checkbox-${metadataField}`}
+              data-testclass="categorical-value-select"
+              data-testid={`categorical-value-select-${metadataField}-${displayString}`}
               checked={selected}
               type="checkbox"
             />
             <span className="bp3-control-indicator" />
-            {displayString}
+            <span
+              data-testid={`categorical-value-${metadataField}-${displayString}`}
+              data-testclass="categorical-value"
+            >
+              {displayString}
+            </span>
           </label>
           <span style={{ flexShrink: 0 }}>
             {colorAccessor &&
@@ -120,7 +126,8 @@ class CategoryValue extends React.Component {
         </div>
         <span>
           <span
-            data-testid={`categorical-value-count-${metadataField}-${count}`}
+            data-testclass="categorical-value-count"
+            data-testid={`categorical-value-count-${metadataField}-${displayString}`}
           >
             {count}
           </span>

client/src/components/geneExpression/cellSetButtons.js

@@ -32,6 +32,9 @@ class CellSetButton extends React.Component {
   render() {
     const { differential, eitherCellSetOneOrTwo } = this.props;
     const cellListName = `celllist${eitherCellSetOneOrTwo}`;
+    let cells_selected = differential[cellListName]
+      ? differential[cellListName].length
+      : 0;
     return (
       <Tooltip
         content="Save current selection for differential expression computation"
@@ -46,9 +49,10 @@ class CellSetButton extends React.Component {
         >
           {eitherCellSetOneOrTwo}
           {": "}
-          {differential[cellListName]
-            ? `${differential[cellListName].length} cells`
-            : "0 cells"}
+          <span data-testid={`cellset-count-${eitherCellSetOneOrTwo}`}>
+            {cells_selected}
+          </span>
+          {" cells"}
         </AnchorButton>
       </Tooltip>
     );

client/src/components/geneExpression/index.js

@@ -203,7 +203,7 @@ class GeneExpression extends React.Component {
               active={tab === "bulkadd"}
               minimal
               small
-              data-testid="tab-bulkadd"
+              data-testid="section-bulk-add"
               onClick={() => {
                 this.setState({ tab: "bulkadd" });
               }}
@@ -271,7 +271,7 @@ class GeneExpression extends React.Component {
                         this.setState({ bulkAdd: e.target.value });
                       }}
                       id="text-input-bulk-add"
-                      data-testid="text-input-bulk-add"
+                      data-testid="input-bulk-add"
                       placeholder={this.placeholderGeneNames()}
                       value={bulkAdd}
                     />

client/src/components/graph/graph.js

@@ -479,6 +479,8 @@ class Graph extends React.Component {
                 intent="warning"
                 style={{ marginRight: 10 }}
                 onClick={this.resetInterface}
+                data-testid="reset"
+                data-testclass={`resetting-${resettingInterface}`}
               >
                 reset
               </AnchorButton>
@@ -488,6 +490,7 @@ class Graph extends React.Component {
                 <Tooltip content="Lasso selection" position="left">
                   <Button
                     type="button"
+                    data-testid="mode-lasso"
                     className="bp3-button bp3-icon-polygon-filter"
                     active={mode === "lasso"}
                     onClick={() => {
@@ -503,6 +506,7 @@ class Graph extends React.Component {
                 <Tooltip content="Pan and zoom" position="left">
                   <Button
                     type="button"
+                    data-testid="mode-pan-zoom"
                     className="bp3-button bp3-icon-zoom-in"
                     active={mode === "zoom"}
                     onClick={() => {

client/src/components/scatterplot/scatterplot.js

@@ -338,6 +338,7 @@ class Scatterplot extends React.Component {
           <Button
             type="button"
             minimal
+            data-testid="clear-scatterplot"
             onClick={() =>
               dispatch({
                 type: "clear scatterplot"
@@ -358,6 +359,7 @@ class Scatterplot extends React.Component {
           <canvas
             width={width}
             height={height}
+            data-testid="scatterplot"
             style={{
               marginLeft: margin.left - 7,
               marginTop: margin.top