Changes to test ID framework to make things more efficient and simpler

- test IDs are now hardcoded values unless they need to contain some user-defined text (like a name) - modified the test ID convert function to match the angular codebase - updated the readme
syndesisio · May 28, 2019 · edc55b4 · edc55b4
1 parent 75a6bfc
commit edc55b4
Show file tree

Hide file tree

Showing 101 changed files with 430 additions and 769 deletions.
diff --git a/app/ui-react/README.md b/app/ui-react/README.md
@@ -636,28 +636,19 @@ We now have a page that is resilient to page refreshes, can be shared with other
 
 #### Adding test identifiers
 
-UI components that have user interaction should define a `data-testid` attribute. Here are a few components that might need a test identifier: `ButtonLink`, `button`, `a`, `input`, `Link`, `PfVerticalNavItem`, `PfNavLink`, `li` used in menus, and `DropdownItem`.
+UI components that have user interaction should define a `data-testid` attribute. Here are a few components that might need a test identifier: `a`, `button`, `Button`, `ButtonLink`, `Card`, `DropdownItem`, `FormControl`, `Grid.Row`, `input`, `Label`, `li`, `Link`, `ListViewItem`, `PfNavLink`, `PfVerticalNavItem`, and `Title`.
 
-The `toTestId` utilitity function, which is found in the `testIdGenerator.ts` file in the `utils` folder of the `@syndesis/ui` package, should be used to generate **all** test identifiers. This function ensures the identifier is formatted correctly and only contains valid characters. It also provides a way to separate segments of the identifier if segments are desired.
+Test identifiers that do not contain any user-defined text should be a hardcoded string. **Only alphanumeric characters and hyphens should be used.** A common convention, though not mandatory, is to format the identifier using the file component name and the widget whose ID is being set. For example, a `data-testid` value of `api-connector-details-form-cancel-button` might be found on a button in the `ApiConnectorDetailsForm` component.
 
-The `toTestId` function accepts one or more strings and inserts a dash (`-`) character between them. It is recommended to have the first string be the name of the component. Here is an example of how to use the `toTestId` function:
+When a test identifier needs to contain some user-defined text, like for a card, list item, or row, the `toValidHtmlId` utility function, found in the `@syndesis/ui/helpers.ts` file, should be used to format the user-defined text. This function ensures the identifier only contains valid characters. Here is an example:
 
 ```tsx
-export class ExtensionListItem extends React.Component<
-...
-<Button
-  data-testid={`${toTestId(
-    'ExtensionListItem',
-    this.props.extensionName,
-    'delete-button'
-  )}`}
-  ...
->
-  {this.props.i18nDelete}
-</Button>
-```
-
-The above code produces this test ID for an extension with the name of "My Extension": `extensionlistitem-my-extension-delete-button`.
+        data-testid={`integrations-list-item-${toValidHtmlId(
+          this.props.integrationName
+        )}-list-item`}
+```
+
+The above code produces this test ID an integration with the name of "My Integration": `integrations-list-item-my-integration-list-item`.
 
 #### Unit testing
 

diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx
@@ -10,12 +10,12 @@ import * as H from '@syndesis/history';
 import { Card, DropdownKebab, Icon } from 'patternfly-react';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { toValidHtmlId } from '../helpers';
 import {
   ConfirmationButtonStyle,
   ConfirmationDialog,
   ConfirmationIconType,
 } from '../Shared';
-import { toTestId } from '../utils';
 import './ConnectionCard.css';
 
 export interface IConnectionCardMenuProps {
@@ -108,7 +108,11 @@ export class ConnectionCard extends React.PureComponent<
             onConfirm={this.doDelete}
           />
         )}
-        <Card matchHeight={true} className={'connection-card'}>
+        <Card
+          data-testid={`connection-card-${toValidHtmlId(this.props.name)}-card`}
+          matchHeight={true}
+          className={'connection-card'}
+        >
           <Card.Heading
             className={
               this.props.techPreview
@@ -119,7 +123,7 @@ export class ConnectionCard extends React.PureComponent<
             {this.props.techPreview ? (
               <Level gutter={'md'}>
                 <LevelItem>&nbsp;</LevelItem>
-                <LevelItem>
+                <LevelItem data-testid={'connection-card-tech-preview-heading'}>
                   {this.props.i18nTechPreview!}
                   {'  '}
                   <Popover
@@ -147,11 +151,7 @@ export class ConnectionCard extends React.PureComponent<
                 >
                   <li role={'presentation'} key={0}>
                     <Link
-                      data-testid={`${toTestId(
-                        'ConnectionCard',
-                        this.props.name,
-                        'view-action'
-                      )}`}
+                      data-testid={'connection-card-view-action'}
                       to={this.props.href}
                       role={'menuitem'}
                       tabIndex={1}
@@ -161,11 +161,7 @@ export class ConnectionCard extends React.PureComponent<
                   </li>
                   <li role={'presentation'} key={1}>
                     <Link
-                      data-testid={`${toTestId(
-                        'ConnectionCard',
-                        this.props.name,
-                        'edit-action'
-                      )}`}
+                      data-testid={'connection-card-edit-action'}
                       to={this.props.menuProps.editHref}
                       role={'menuitem'}
                       tabIndex={2}
@@ -186,11 +182,7 @@ export class ConnectionCard extends React.PureComponent<
                         position={'bottom'}
                       >
                         <a
-                          data-testid={`${toTestId(
-                            'ConnectionCard',
-                            this.props.name,
-                            'delete-action'
-                          )}`}
+                          data-testid={'connection-card-delete-action'}
                           href={'javascript:void(0)'}
                           onClick={this.showDeleteDialog}
                           role={'menuitem'}
@@ -201,11 +193,7 @@ export class ConnectionCard extends React.PureComponent<
                       </Tooltip>
                     ) : (
                       <a
-                        data-testid={`${toTestId(
-                          'ConnectionCard',
-                          this.props.name,
-                          'delete-action'
-                        )}`}
+                        data-testid={'connection-card-delete-action'}
                         href={'javascript:void(0)'}
                         onClick={this.showDeleteDialog}
                         role={'menuitem'}
@@ -220,11 +208,7 @@ export class ConnectionCard extends React.PureComponent<
             )}
           </Card.Heading>
           <Link
-            data-testid={`${toTestId(
-              'ConnectionCard',
-              this.props.name,
-              'details-link'
-            )}`}
+            data-testid={'connection-card-details-link'}
             to={this.props.href}
             className={'connection-card__content'}
           >
@@ -236,11 +220,7 @@ export class ConnectionCard extends React.PureComponent<
                 <Title
                   size="lg"
                   className="connection-card__title h2"
-                  data-testid={`${toTestId(
-                    'ConnectionCard',
-                    this.props.name,
-                    'title'
-                  )}`}
+                  data-testid={'connection-card-title'}
                 >
                   {this.props.name}
                 </Title>
@@ -254,6 +234,7 @@ export class ConnectionCard extends React.PureComponent<
                 className={
                   'connection-card__footer--config-required alert alert-warning'
                 }
+                data-testid={'connection-card-config-required-footer'}
               >
                 <Icon type={'pf'} name={'warning-triangle-o'} size={'2x'} />
                 {this.props.i18nConfigurationRequired}

diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCreatorLayout.tsx
@@ -4,7 +4,6 @@ import * as H from '@syndesis/history';
 import classnames from 'classnames';
 import * as React from 'react';
 import { ButtonLink, Loader } from '../Layout';
-import { toTestId } from '../utils';
 
 /**
  * @param header - a PatternFly Wizard Steps component.
@@ -95,7 +94,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
       </div>
       <div className="wizard-pf-footer integration-editor-layout__footer">
         <ButtonLink
-          data-testid={`${toTestId('ConnectionCreatorLayout', 'back-button')}`}
+          data-testid={'connection-creator-layout-back-button'}
           onClick={onBack}
           href={backHref}
           className={'wizard-pf-back'}
@@ -106,7 +105,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
           <div className={'wizard-pf-extrabuttons'}>{extraButtons}</div>
         )}
         <ButtonLink
-          data-testid={`${toTestId('ConnectionCreatorLayout', 'next-button')}`}
+          data-testid={'connection-creator-layout-next-button'}
           onClick={onNext}
           href={nextHref}
           as={'primary'}
@@ -123,10 +122,7 @@ export const ConnectionCreatorLayout: React.FunctionComponent<
           )}
         </ButtonLink>
         <ButtonLink
-          data-testid={`${toTestId(
-            'ConnectionCreatorLayout',
-            'cancel-button'
-          )}`}
+          data-testid={'connection-creator-layout-cancel-button'}
           onClick={onCancel}
           href={cancelHref}
           className={'wizard-pf-cancel'}

diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionDetailsForm.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionDetailsForm.tsx
@@ -1,7 +1,6 @@
 import { Alert, Button, Card } from 'patternfly-react';
 import * as React from 'react';
 import { Container, Loader, PageSection } from '../Layout';
-import { toTestId } from '../utils';
 import './ConnectionDetailsForm.css';
 
 export interface IConnectionDetailsValidationResult {
@@ -108,10 +107,7 @@ export class ConnectionDetailsForm extends React.Component<
                   <div>
                     {this.props.isEditing ? (
                       <Button
-                        data-testid={`${toTestId(
-                          'ConnectionDetailsForm',
-                          'validate-button'
-                        )}`}
+                        data-testid={'connection-details-form-validate-button'}
                         bsStyle="default"
                         disabled={this.props.isWorking || !this.props.isValid}
                         onClick={this.props.onValidate}
@@ -123,10 +119,7 @@ export class ConnectionDetailsForm extends React.Component<
                       </Button>
                     ) : (
                       <Button
-                        data-testid={`${toTestId(
-                          'ConnectionDetailsForm',
-                          'edit-button'
-                        )}`}
+                        data-testid={'connection-details-form-edit-button'}
                         bsStyle="primary"
                         onClick={this.props.onStartEditing}
                       >
@@ -138,10 +131,7 @@ export class ConnectionDetailsForm extends React.Component<
               </Card.Body>
               <Card.Footer>
                 <Button
-                  data-testid={`${toTestId(
-                    'ConnectionDetailsForm',
-                    'cancel-button'
-                  )}`}
+                  data-testid={'connection-details-form-cancel-button'}
                   bsStyle="default"
                   className="connection-details-form__editButton"
                   disabled={this.props.isWorking}
@@ -150,10 +140,7 @@ export class ConnectionDetailsForm extends React.Component<
                   {this.props.i18nCancelLabel}
                 </Button>
                 <Button
-                  data-testid={`${toTestId(
-                    'ConnectionDetailsForm',
-                    'save-button'
-                  )}`}
+                  data-testid={'connection-details-form-save-button'}
                   bsStyle="primary"
                   className="connection-details-form__editButton"
                   disabled={this.props.isWorking || !this.props.isValid}

diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionsListView.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionsListView.tsx
@@ -2,7 +2,6 @@ import * as H from '@syndesis/history';
 import * as React from 'react';
 import { ButtonLink, PageSection } from '../Layout';
 import { IListViewToolbarProps, ListViewToolbar } from '../Shared';
-import { toTestId } from '../utils';
 
 export interface IConnectionsListViewProps extends IListViewToolbarProps {
   createConnectionButtonStyle?: 'primary' | 'default';
@@ -20,10 +19,7 @@ export class ConnectionsListView extends React.Component<
           <ListViewToolbar {...this.props}>
             <div className="form-group">
               <ButtonLink
-                data-testid={`${toTestId(
-                  'ConnectionsListView',
-                  'create-connection-button'
-                )}`}
+                data-testid={'connections-list-view-create-connection-button'}
                 href={this.props.linkToConnectionCreate}
                 as={this.props.createConnectionButtonStyle || 'primary'}
               >

diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailCard.tsx
@@ -1,7 +1,6 @@
 import { Text } from '@patternfly/react-core';
 import { Card, CardBody } from 'patternfly-react';
 import * as React from 'react';
-import { toTestId } from '../../utils';
 import './ApiConnectorDetailCard.css';
 
 export interface IApiConnectorDetailCardProps {
@@ -23,7 +22,7 @@ export class ApiConnectorDetailCard extends React.Component<
             </div>
             <div
               className="api-connector__title h2"
-              data-testid={`${toTestId('ApiConnectorDetailCard', 'title')}`}
+              data-testid={'api-connector-detail-card-title'}
             >
               {this.props.name}
             </div>

diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorDetailsForm.tsx
@@ -1,7 +1,6 @@
 import { Button, Card } from 'patternfly-react';
 import * as React from 'react';
 import { Loader } from '../../Layout';
-import { toTestId } from '../../utils';
 import './ApiConnectorDetailsForm.css';
 
 export interface IApiConnectorDetailsFormProps {
@@ -97,10 +96,7 @@ export class ApiConnectorDetailsForm extends React.Component<
                       src={this.props.apiConnectorIcon}
                     />
                     <input
-                      data-testid={`${toTestId(
-                        'ApiConnectorDetailsForm',
-                        'icon-file-input'
-                      )}`}
+                      data-testid={'api-connector-details-form-icon-file-input'}
                       type="file"
                       id="iconFileInput"
                       onChange={this.props.onUploadImage}
@@ -113,10 +109,7 @@ export class ApiConnectorDetailsForm extends React.Component<
             {this.props.isEditing ? (
               <>
                 <Button
-                  data-testid={`${toTestId(
-                    'ApiConnectorDetailsForm',
-                    'cancel-button'
-                  )}`}
+                  data-testid={'api-connector-details-form-cancel-button'}
                   bsStyle="default"
                   className="api-connector-details-form__editButton"
                   disabled={this.props.isWorking}
@@ -125,10 +118,7 @@ export class ApiConnectorDetailsForm extends React.Component<
                   {this.props.i18nCancelLabel}
                 </Button>
                 <Button
-                  data-testid={`${toTestId(
-                    'ApiConnectorDetailsForm',
-                    'save-button'
-                  )}`}
+                  data-testid={'api-connector-details-form-save-button'}
                   bsStyle="primary"
                   className="api-connector-details-form__editButton"
                   disabled={this.props.isWorking}
@@ -140,10 +130,7 @@ export class ApiConnectorDetailsForm extends React.Component<
               </>
             ) : (
               <Button
-                data-testid={`${toTestId(
-                  'ApiConnectorDetailsForm',
-                  'edit-button'
-                )}`}
+                data-testid={'api-connector-details-form-edit-button'}
                 bsStyle="primary"
                 onClick={this.props.onStartEditing}
               >

diff --git a/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListItem.tsx b/app/ui-react/packages/ui/src/Customization/apiClientConnectors/ApiConnectorListItem.tsx
@@ -7,13 +7,13 @@ import {
   Tooltip,
 } from 'patternfly-react';
 import * as React from 'react';
+import { toValidHtmlId } from '../../helpers';
 import { ButtonLink } from '../../Layout';
 import {
   ConfirmationButtonStyle,
   ConfirmationDialog,
   ConfirmationIconType,
 } from '../../Shared';
-import { toTestId } from '../../utils';
 
 export interface IApiConnectorListItemProps {
   apiConnectorDescription?: string;
@@ -109,18 +109,17 @@ export class ApiConnectorListItem extends React.Component<
           onConfirm={this.doDelete}
         />
         <ListViewItem
+          data-testid={`api-connector-list-item-${toValidHtmlId(
+            this.props.apiConnectorName
+          )}-list-item`}
           actions={
             <div className="form-group">
               <OverlayTrigger
                 overlay={this.getDetailsTooltip()}
                 placement="top"
               >
                 <ButtonLink
-                  data-testid={`${toTestId(
-                    'ApiConnectorListItem',
-                    this.props.apiConnectorName,
-                    'details-button'
-                  )}`}
+                  data-testid={'api-connector-list-item-details-button'}
                   href={this.props.detailsPageLink}
                   as={'default'}
                 >
@@ -129,11 +128,7 @@ export class ApiConnectorListItem extends React.Component<
               </OverlayTrigger>
               <OverlayTrigger overlay={this.getDeleteTooltip()} placement="top">
                 <Button
-                  data-testid={`${toTestId(
-                    'ApiConnectorListItem',
-                    this.props.apiConnectorName,
-                    'delete-button'
-                  )}`}
+                  data-testid={'api-connector-list-item-delete-button'}
                   bsStyle="default"
                   disabled={this.props.usedBy !== 0}
                   onClick={this.showDeleteDialog}