Add test ids and classes (#633)

* data test ids and classes

* suggest

client/src/components/brushableHistogram/index.js

@@ -331,6 +331,8 @@ class HistogramBrush extends React.Component {
           width={this.width}
           height={this.height}
           id={`histogram_${field}_svg`}
+          data-testclass="histogram-svg"
+          data-testid={`histogram_${field}_svg`}
           ref={svgRef => {
             this.drawHistogram(svgRef);
           }}
@@ -341,7 +343,12 @@ class HistogramBrush extends React.Component {
             justifyContent: "center"
           }}
         >
-          <span style={{ fontStyle: "italic" }}>{field}</span>
+          <span
+            data-testclass="brushable-histogram-field-name"
+            style={{ fontStyle: "italic" }}
+          >
+            {field}
+          </span>
         </div>
 
         {isDiffExp ? (

client/src/components/categorical/category.js

@@ -128,6 +128,8 @@ class Category extends React.Component {
           >
             <label className="bp3-control bp3-checkbox">
               <input
+                data-testclass="category-checkbox"
+                data-testid={`category-checkbox-${metadataField}`}
                 onChange={this.handleToggleAllClick.bind(this)}
                 ref={el => {
                   this.checkbox = el;

client/src/components/categorical/value.js

@@ -101,6 +101,8 @@ 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}`}
               checked={selected}
               type="checkbox"
             />
@@ -121,7 +123,11 @@ class CategoryValue extends React.Component {
           </span>
         </div>
         <span>
-          <span>{count}</span>
+          <span
+            data-testid={`categorical-value-count-${metadataField}-${count}`}
+          >
+            {count}
+          </span>
           <svg
             style={{
               marginLeft: 5,

client/src/components/geneExpression/index.js

@@ -35,6 +35,7 @@ const renderGene = (fuzzySortResult, { handleClick, modifiers, query }) => {
     <MenuItem
       active={modifiers.active}
       disabled={modifiers.disabled}
+      data-testid={`suggest-menu-item-${geneName}`}
       // Use of annotations in this way is incorrect and dataset specific.
       // See https://github.com/chanzuckerberg/cellxgene/issues/483
       // label={gene.n_counts}
@@ -195,6 +196,7 @@ class GeneExpression extends React.Component {
               style={{ marginRight: 5 }}
               minimal
               small
+              data-testid="tab-autosuggest"
               onClick={() => {
                 this.setState({ tab: "autosuggest" });
               }}
@@ -205,6 +207,7 @@ class GeneExpression extends React.Component {
               active={tab === "bulkadd"}
               minimal
               small
+              data-testid="tab-bulkadd"
               onClick={() => {
                 this.setState({ tab: "bulkadd" });
               }}
@@ -272,6 +275,7 @@ class GeneExpression extends React.Component {
                         this.setState({ bulkAdd: e.target.value });
                       }}
                       id="text-input-bulk-add"
+                      data-testid="text-input-bulk-add"
                       placeholder={this.placeholderGeneNames()}
                       value={bulkAdd}
                     />

client/src/components/graph/graph.js

@@ -451,6 +451,7 @@ class Graph extends React.Component {
             >
               <AnchorButton
                 type="button"
+                data-testid="subset-button"
                 disabled={
                   crossfilter &&
                   (crossfilter.countFiltered() === 0 ||
@@ -584,7 +585,7 @@ class Graph extends React.Component {
             <canvas
               width={responsive.width - this.graphPaddingRight}
               height={responsive.height - this.graphPaddingTop}
-              data-testid="layout"
+              data-testid="layout-graph"
               ref={canvas => {
                 this.reglCanvas = canvas;
               }}

client/src/components/scatterplot/setupScatterplot.js

@@ -14,6 +14,7 @@ const setupScatterplot = (width, height, margin) => {
     .append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
+    .attr("data-testid", "scatterplot-svg")
     .append("g")
     .attr("transform", `translate(${margin.left},${margin.top})`);