chore: Added data-test attributes for testing (#11254)

* Added data-test attributes for testing

* fixed incorrect naming change

* review changes

superset-frontend/src/explore/components/controls/AnnotationLayerControl.jsx

@@ -113,6 +113,7 @@ class AnnotationLayerControl extends React.PureComponent {
     const { theme } = this.props;
     return (
       <Popover
+        data-test="annotation-popover"
         style={{ maxWidth: 'none' }}
         title={
           annotation ? t('Edit Annotation Layer') : t('Add Annotation Layer')
@@ -188,7 +189,11 @@ class AnnotationLayerControl extends React.PureComponent {
             overlay={this.renderPopover('overlay-new')}
           >
             <ListGroupItem>
-              <i className="fa fa-plus" /> &nbsp; {t('Add Annotation Layer')}
+              <i
+                data-test="add-annotation-layer-button"
+                className="fa fa-plus"
+              />{' '}
+              &nbsp; {t('Add Annotation Layer')}
             </ListGroupItem>
           </OverlayTrigger>
         </ListGroup>

superset-frontend/src/explore/components/controls/BoundsControl.jsx

@@ -90,6 +90,7 @@ export default class BoundsControl extends React.Component {
           <Row>
             <Col xs={6}>
               <FormControl
+                data-test="min-bound"
                 type="text"
                 placeholder={t('Min')}
                 onChange={this.onMinChange}
@@ -99,6 +100,7 @@ export default class BoundsControl extends React.Component {
             <Col xs={6}>
               <FormControl
                 type="text"
+                data-test="max-bound"
                 placeholder={t('Max')}
                 onChange={this.onMaxChange}
                 value={this.state.minMax[1]}

superset-frontend/src/explore/components/controls/DatasourceControl.jsx

@@ -210,6 +210,7 @@ class DatasourceControl extends React.PureComponent {
               className=""
               bsSize="sm"
               id="datasource_menu"
+              data-test="datasource-menu"
             >
               <MenuItem eventKey="3" onClick={this.toggleChangeDatasourceModal}>
                 {t('Change Dataset')}
@@ -225,7 +226,11 @@ class DatasourceControl extends React.PureComponent {
                 </MenuItem>
               )}
               {this.props.isEditable && (
-                <MenuItem eventKey="3" onClick={this.toggleEditDatasourceModal}>
+                <MenuItem
+                  data-test="edit-dataset"
+                  eventKey="3"
+                  onClick={this.toggleEditDatasourceModal}
+                >
                   {t('Edit Dataset')}
                 </MenuItem>
               )}

superset-frontend/src/explore/components/controls/DateFilterControl.jsx

@@ -523,9 +523,10 @@ class DateFilterControl extends React.Component {
                       this.startEndSectionRef = ref;
                     }}
                   >
-                    <InputGroup>
+                    <InputGroup data-test="date-input-group">
                       <div style={{ margin: '5px 0' }}>
                         <Datetime
+                          inputProps={{ 'data-test': 'date-from-input' }}
                           value={this.state.since}
                           defaultValue={this.state.since}
                           viewDate={this.state.since}
@@ -546,6 +547,7 @@ class DateFilterControl extends React.Component {
                       </div>
                       <div style={{ margin: '5px 0' }}>
                         <Datetime
+                          inputProps={{ 'data-test': 'date-to-input' }}
                           value={this.state.until}
                           defaultValue={this.state.until}
                           viewDate={this.state.until}
@@ -572,6 +574,7 @@ class DateFilterControl extends React.Component {
           </Tabs>
           <div className="clearfix">
             <Button
+              data-test="date-ok-button"
               buttonSize="small"
               className="float-right ok"
               buttonStyle="primary"
@@ -601,7 +604,11 @@ class DateFilterControl extends React.Component {
           overlay={this.renderPopover()}
           onClick={this.handleClickTrigger}
         >
-          <Label name="popover-trigger" className="pointer">
+          <Label
+            name="popover-trigger"
+            className="pointer"
+            data-test="popover-trigger"
+          >
             {formatTimeRange(timeRange, this.props.endpoints)}
           </Label>
         </OverlayTrigger>

superset-frontend/src/explore/components/controls/TextControl.tsx

@@ -90,6 +90,7 @@ export default class TextControl extends React.Component<
         <FormGroup controlId={this.state.controlId} bsSize="small">
           <FormControl
             type="text"
+            data-test="inline-name"
             placeholder={this.props.placeholder}
             onChange={this.onChange}
             onFocus={this.props.onFocus}

superset-frontend/src/explore/components/controls/VizTypeControl.jsx

@@ -151,7 +151,9 @@ export default class VizTypeControl extends React.PureComponent {
           className={`viztype-selector ${isSelected ? 'selected' : ''}`}
           src={type.thumbnail}
         />
-        <div className="viztype-label">{type.name}</div>
+        <div className="viztype-label" data-test="viztype-label">
+          {type.name}
+        </div>
       </div>
     );
   }
@@ -174,7 +176,7 @@ export default class VizTypeControl extends React.PureComponent {
     const rows = [];
     for (let i = 0; i <= filteredTypes.length; i += IMAGE_PER_ROW) {
       rows.push(
-        <Row key={`row-${i}`}>
+        <Row data-test="viz-row" key={`row-${i}`}>
           {filteredTypes.slice(i, i + IMAGE_PER_ROW).map(entry => (
             <Col md={12 / IMAGE_PER_ROW} key={`grid-col-${entry.key}`}>
               {this.renderItem(entry)}