Remove data test ID attributes

.eslintignore

@@ -1 +0,0 @@
-*.js

.eslintrc

@@ -32,6 +32,8 @@
     "*.log",
     "*.jpg",
     "*.woff",
+    "*.js",
+    "*.snap",
     "src/**/test.tsx",
     "src/**/package.json"
   ],

src/components/modules/DetailsModule/DetailsContentHeader/DetailsContentHeader.tsx

@@ -126,7 +126,6 @@ class DetailsContentHeader extends React.Component<Props> {
         actions={this.props.dropdownActions}
         largeItems={this.props.largeDropdownActionItems}
         style={{ marginLeft: '32px' }}
-        data-test-id="dcHeader-actionButton"
       />
     )
   }
@@ -144,7 +143,7 @@ class DetailsContentHeader extends React.Component<Props> {
   render() {
     return (
       <Wrapper>
-        <BackButton to={this.props.backLink} data-test-id="dcHeader-backButton" />
+        <BackButton to={this.props.backLink} />
         <TypeImage image={this.props.typeImage} />
         <Title>
           <Status>

src/components/modules/EndpointModule/ChooseProvider/ChooseProvider.tsx

@@ -365,7 +365,6 @@ class ChooseProvider extends React.Component<Props, State> {
               height={128}
               key={k}
               endpoint={k}
-              data-test-id={`cProvider-endpointLogo-${k}`}
               onClick={() => { this.props.onProviderClick(k) }}
             />
           ))}
@@ -384,7 +383,7 @@ class ChooseProvider extends React.Component<Props, State> {
           multiple
           onChange={e => { this.handleFileUpload(e.target.files) }}
         />
-        <Button secondary onClick={this.props.onCancelClick} data-test-id="cProvider-cancelButton">Cancel</Button>
+        <Button secondary onClick={this.props.onCancelClick}>Cancel</Button>
       </Providers>
     )
   }

src/components/modules/EndpointModule/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -130,7 +130,7 @@ class EndpointDetailsContent extends React.Component<Props> {
 
     return (
       <LoadingWrapper>
-        <StatusImage loading data-test-id="edContent-connLoading" />
+        <StatusImage loading />
       </LoadingWrapper>
     )
   }
@@ -169,11 +169,11 @@ class EndpointDetailsContent extends React.Component<Props> {
       const schemaField = this.props.connectionInfoSchema.find(f => f.name === key)
 
       if (configLoader.config.passwordFields.find(fn => fn === key) || key.indexOf('password') > -1) {
-        valueElement = <PasswordValue value={value} data-test-id="edContent-connPassword" />
+        valueElement = <PasswordValue value={value} />
       } else if (schemaField?.useFile) {
         valueElement = this.renderDownloadValue(value, key)
       } else {
-        valueElement = this.renderValue(value, `connValue-${key}`)
+        valueElement = this.renderValue(value)
       }
 
       return (
@@ -189,17 +189,17 @@ class EndpointDetailsContent extends React.Component<Props> {
     return (
       <Buttons>
         <MainButtons>
-          <Button onClick={this.props.onValidateClick} data-test-id="edContent-validateButton">Validate Endpoint</Button>
+          <Button onClick={this.props.onValidateClick}>Validate Endpoint</Button>
         </MainButtons>
         <DeleteButton>
-          <Button hollow alert onClick={this.props.onDeleteClick} data-test-id="edContent-deleteButton">Delete Endpoint</Button>
+          <Button hollow alert onClick={this.props.onDeleteClick}>Delete Endpoint</Button>
         </DeleteButton>
       </Buttons>
     )
   }
 
-  renderValue(value: string, dataTestId?: string) {
-    return <CopyValue data-test-id={dataTestId ? `edContent-${dataTestId}` : undefined} value={value} maxWidth="90%" />
+  renderValue(value: string) {
+    return <CopyValue value={value} maxWidth="90%" />
   }
 
   renderRegions() {
@@ -246,11 +246,11 @@ class EndpointDetailsContent extends React.Component<Props> {
           </Field>
           <Field>
             <Label>Name</Label>
-            {this.renderValue(name || '', 'name')}
+            {this.renderValue(name || '')}
           </Field>
           <Field>
             <Label>Type</Label>
-            {this.renderValue(this.props.item ? configLoader.config.providerNames[this.props.item.type] : '', 'type')}
+            {this.renderValue(this.props.item ? configLoader.config.providerNames[this.props.item.type] : '')}
           </Field>
           <Field>
             <Label>Coriolis Regions</Label>
@@ -258,11 +258,11 @@ class EndpointDetailsContent extends React.Component<Props> {
           </Field>
           <Field>
             <Label>Description</Label>
-            {description ? <CopyMultilineValue data-test-id="edContent-description" value={description} /> : <Value>-</Value>}
+            {description ? <CopyMultilineValue value={description} /> : <Value>-</Value>}
           </Field>
           <Field>
             <Label>Created</Label>
-            {this.renderValue(DateUtils.getLocalTime(created_at).format('DD/MM/YYYY HH:mm'), 'created')}
+            {this.renderValue(DateUtils.getLocalTime(created_at).format('DD/MM/YYYY HH:mm'))}
           </Field>
           <Field>
             <Label>Used in replicas/migrations ({usage.length})</Label>

src/components/modules/EndpointModule/EndpointDuplicateOptions/EndpointDuplicateOptions.tsx

@@ -84,7 +84,6 @@ type Props = {
 type State = {
   selectedProjectId: string,
 }
-const testName = 'edOptions'
 @observer
 class EndpointDuplicateOptions extends React.Component<Props, State> {
   UNSAFE_componentWillMount() {
@@ -103,7 +102,7 @@ class EndpointDuplicateOptions extends React.Component<Props, State> {
 
   renderDuplicating() {
     return (
-      <Loading data-test-id={`${testName}-loading`}>
+      <Loading>
         <StatusImage loading />
         <Message>
           <Title>Duplicating Endpoint</Title>
@@ -119,7 +118,6 @@ class EndpointDuplicateOptions extends React.Component<Props, State> {
         <Image />
         <Form>
           <FieldInputStyled
-            data-test-id={`${testName}-field-project`}
             name="duplicate_to_project"
             label="Duplicate To Project"
             type="string"
@@ -133,7 +131,6 @@ class EndpointDuplicateOptions extends React.Component<Props, State> {
         <Buttons>
           <Button secondary onClick={this.props.onCancelClick}>Cancel</Button>
           <Button
-            data-test-id={`${testName}-duplicateButton`}
             onClick={() => { this.props.onDuplicateClick(this.state.selectedProjectId) }}
           >Duplicate
           </Button>

src/components/modules/EndpointModule/EndpointListItem/EndpointListItem.tsx

@@ -103,15 +103,14 @@ class EndpointListItem extends React.Component<Props> {
     return (
       <Wrapper>
         <CheckboxStyled
-          data-test-id={`endpointListItem-checkbox-${this.props.item.name}`}
           checked={this.props.selected}
           onChange={this.props.onSelectedChange}
         />
-        <Content onClick={this.props.onClick} data-test-id={`endpointListItem-content-${this.props.item.name}`}>
+        <Content onClick={this.props.onClick}>
           <Image image={endpointImage} />
           <Title>
-            <TitleLabel data-test-id="endpointListItem-name">{this.props.item.name}</TitleLabel>
-            <Subtitle data-test-id="endpointListItem-description">{this.props.item.description || 'N/A'}</Subtitle>
+            <TitleLabel>{this.props.item.name}</TitleLabel>
+            <Subtitle>{this.props.item.description || 'N/A'}</Subtitle>
           </Title>
           <EndpointLogos height={42} endpoint={this.props.item.type} />
           <Created>
@@ -122,7 +121,7 @@ class EndpointListItem extends React.Component<Props> {
           </Created>
           <Usage>
             <ItemLabel>Usage</ItemLabel>
-            <ItemValue data-test-id="endpointListItem-usageCount">
+            <ItemValue>
               {this.props.getUsage(this.props.item).migrationsCount} migrations,&nbsp;
               {this.props.getUsage(this.props.item).replicasCount} replicas
             </ItemValue>

src/components/modules/EndpointModule/EndpointLogos/EndpointLogos.tsx

@@ -42,7 +42,6 @@ type Props = {
   white?: boolean,
   baseUrl?: string,
   onClick?: () => void
-  'data-test-id'?: string,
   style?: React.CSSProperties
 }
 @observer
@@ -54,7 +53,6 @@ class EndpointLogos extends React.Component<Props> {
   renderGenericLogo(size: { w: number, h: number }) {
     return (
       <Generic
-        data-test-id="endpointLogos-genericLogo"
         size={size}
         name={this.props.endpoint || ''}
         disabled={this.props.disabled}
@@ -80,12 +78,11 @@ class EndpointLogos extends React.Component<Props> {
 
     return (
       // eslint-disable-next-line react/jsx-props-no-spreading
-      <Wrapper {...this.props} data-test-id={this.props['data-test-id'] || 'endpointLogos'}>
+      <Wrapper {...this.props}>
         <Logo
           width={size.w}
           height={size.h}
           url={imageUrl}
-          data-test-id="endpointLogos-logo"
         >
           {imageUrl ? null : this.renderGenericLogo(size)}
         </Logo>

src/components/modules/EndpointModule/EndpointModal/EndpointModal.tsx

@@ -388,7 +388,7 @@ class EndpointModal extends React.Component<Props, State> {
     }
 
     return (
-      <Status data-test-id="endpointStatus">
+      <Status>
         <StatusHeader>
           <StatusIcon status={status} />
           <StatusMessage>{message}{showErrorButton}</StatusMessage>

src/components/modules/EndpointModule/EndpointValidation/EndpointValidation.tsx

@@ -96,9 +96,9 @@ class EndpointValidation extends React.Component<Props> {
 
     return (
       <Loading>
-        <StatusImage loading data-test-id="eValidation-status" />
+        <StatusImage loading />
         <Message>
-          <Title data-test-id="eValidation-title">Validating Endpoint</Title>
+          <Title>Validating Endpoint</Title>
           <Subtitle>Please wait ...</Subtitle>
         </Message>
       </Loading>
@@ -112,9 +112,9 @@ class EndpointValidation extends React.Component<Props> {
 
     return (
       <Validation>
-        <StatusImage status="COMPLETED" data-test-id="eValidation-status" />
+        <StatusImage status="COMPLETED" />
         <Message>
-          <Title data-test-id="eValidation-title">Endpoint is Valid</Title>
+          <Title>Endpoint is Valid</Title>
           <Subtitle>All tests passed succesfully.</Subtitle>
         </Message>
       </Validation>
@@ -130,10 +130,10 @@ class EndpointValidation extends React.Component<Props> {
 
     return (
       <Validation>
-        <StatusImage status="ERROR" data-test-id="eValidation-status" />
+        <StatusImage status="ERROR" />
         <Message>
-          <Title data-test-id="eValidation-title">Validation Failed</Title>
-          <Error onClick={() => { this.handleCopyClick(message) }} data-test-id="eValidation-errorMessage">
+          <Title>Validation Failed</Title>
+          <Error onClick={() => { this.handleCopyClick(message) }}>
             {message}<CopyButton />
           </Error>
         </Message>

src/components/modules/LoginModule/LoginForm/LoginForm.tsx

@@ -152,7 +152,6 @@ class LoginForm extends React.Component<Props, State> {
       <LoginError>
         <LoginErrorIcon />
         <LoginErrorText
-          data-test-id="loginForm-errorText"
           dangerouslySetInnerHTML={{ __html: errorMessage }}
         />
       </LoginError>
@@ -191,7 +190,6 @@ class LoginForm extends React.Component<Props, State> {
             value={this.state.username}
             name="username"
             onChange={e => { this.handleUsernameChange(e.target.value) }}
-            data-test-id="loginForm-usernameField"
           />
           <LoginFormField
             label="Password"
@@ -199,7 +197,6 @@ class LoginForm extends React.Component<Props, State> {
             onChange={e => { this.handlePasswordChange(e.target.value) }}
             name="password"
             type="password"
-            data-test-id="loginForm-passwordField"
           />
         </FormFields>
         {button}

src/components/modules/LoginModule/LoginFormField/LoginFormField.tsx

@@ -42,9 +42,8 @@ type Props = {
 }
 const LoginFormField = (props: Props) => (
   <Wrapper>
-    <FormFieldLabel data-test-id="loginFormField-label">{props.label}</FormFieldLabel>
+    <FormFieldLabel>{props.label}</FormFieldLabel>
     <StyledTextInput
-      data-test-id="loginFormField-input"
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
       onChange={props.onChange}

src/components/modules/LoginModule/LoginOptions/LoginOptions.tsx

@@ -105,11 +105,10 @@ const LoginOptions = (props: Props) => {
     <Wrapper>
       {buttons.map(button => (
         <Button
-          data-test-id={`loginOptions-button-${button.id}`}
           key={button.id}
           id={button.id}
         >
-          <Logo data-test-id={`loginOptions-logo-${button.id}`} id={button.id} />Sign in with {button.name}
+          <Logo id={button.id} />Sign in with {button.name}
         </Button>
       ))}
     </Wrapper>

src/components/modules/NavigationModule/DetailsNavigation/test.tsx

@@ -26,7 +26,7 @@ const items = [
 
 describe('DetailsNavigation Component', () => {
   // it('renders 3 items', () => {
-  //   let wrapper = wrap({ items, 'data-test-id': 'dn-wrapper' })
+  //   let wrapper = wrap({ items})
   //   console.log(wrapper.find('dn-wrapper').debug())
   //   // items.forEach(item => {
   //   //   expect(wrapper.find(item.value).shallow.dive().dive()).toBe(item.label)

src/components/modules/NavigationModule/Navigation/Navigation.tsx

@@ -356,7 +356,6 @@ class Navigation extends React.Component<Props> {
               key={item.value}
               selected={this.props.currentPage === item.value}
               to={`/${item.value}`}
-              data-test-id={`navigation-item-${item.value}`}
             >{item.label}
             </MenuItem>
           ))
@@ -416,7 +415,6 @@ class Navigation extends React.Component<Props> {
                 key={item.value}
                 selected={this.props.currentPage === item.value}
                 to={`/${item.value}`}
-                data-test-id={`${TEST_ID}-smallMenuItem-${item.value}`}
               >
                 <SmallMenuBackground />
                 {bullet ? <SmallMenuItemBullet bullet={bullet} /> : null}

src/components/modules/NavigationModule/NavigationMini/NavigationMini.tsx

@@ -78,7 +78,6 @@ class NavigationMini extends React.Component<{}, State> {
           open={this.state.open}
           onClick={() => { this.handleMenuToggleClick() }}
           dangerouslySetInnerHTML={{ __html: menuImage() }}
-          data-test-id={`${TEST_ID}-toggleButton`}
         />
         {this.state.open ? <Stub /> : null}
         <NavigationStyled

src/components/modules/ProjectModule/ProjectDetailsContent/ProjectDetailsContent.tsx

@@ -105,7 +105,6 @@ type Props = {
 type State = {
   showRemoveUserAlert: boolean,
 }
-const testName = 'pdContent'
 @observer
 class ProjectDetailsContent extends React.Component<Props, State> {
   state = {
@@ -185,7 +184,7 @@ class ProjectDetailsContent extends React.Component<Props, State> {
       <Info>
         <Field>
           <Label>Name</Label>
-          {this.renderValue(project.name, 'name')}
+          {this.renderValue(project.name)}
         </Field>
         <Field>
           <Label>Description</Label>
@@ -197,7 +196,7 @@ class ProjectDetailsContent extends React.Component<Props, State> {
         </Field>
         <Field>
           <Label>ID</Label>
-          {this.renderValue(project.id, 'id')}
+          {this.renderValue(project.id)}
         </Field>
         <Field>
           <Label>Enabled</Label>
@@ -238,13 +237,11 @@ class ProjectDetailsContent extends React.Component<Props, State> {
       const userRoles = getUserRoles(user)
       const columns = [
         <UserName
-          data-test-id={`pdContent-users-${user.name}`}
           disabled={!user.enabled}
           to={`/users/${user.id}`}
         >{user.name}
         </UserName>,
         <DropdownLink
-          data-test-id={`${testName}-roles-${user.name}`}
           width="214px"
           getLabel={() => (userRoles.length > 0 ? userRoles.map(r => r.label).join(', ') : 'No roles')}
           selectedItems={userRoles.map(r => r.value)}
@@ -264,7 +261,6 @@ class ProjectDetailsContent extends React.Component<Props, State> {
         />,
         <UserColumn disabled={!user.enabled}>{user.enabled ? 'Enabled' : 'Disabled'}</UserColumn>,
         <DropdownLink
-          data-test-id={`${testName}-actions-${user.name}`}
           noCheckmark
           width="82px"
           items={userActions}
@@ -282,7 +278,6 @@ class ProjectDetailsContent extends React.Component<Props, State> {
 
     return (
       <TableStyled
-        data-test-id={`${testName}-members`}
         header={['Member', 'Roles', 'Status', '']}
         items={rows}
         noItemsLabel="No members available!"
@@ -291,10 +286,9 @@ class ProjectDetailsContent extends React.Component<Props, State> {
     )
   }
 
-  renderValue(value: string, dataTestId: string) {
+  renderValue(value: string) {
     return value !== '-' ? (
       <CopyValue
-        data-test-id={`${testName}-${dataTestId}`}
         value={value}
         maxWidth="90%"
       />

src/components/modules/ProjectModule/ProjectDetailsContent/test.tsx

@@ -71,10 +71,8 @@ describe('ProjectDetailsContent Component', () => {
     expect(wrapper.find('name').prop('value')).toBe('Project 1')
     expect(wrapper.find('id').prop('value')).toBe('project-1')
     let rows = wrapper.find('members').prop('items')
-    expect(rows[0][0].props['data-test-id']).toBe('pdContent-users-User 1')
     expect(rows[0][1].props.selectedItems.length).toBe(1)
     expect(rows[0][1].props.selectedItems[0]).toBe('role-1')
-    expect(rows[1][0].props['data-test-id']).toBe('pdContent-users-User 2')
     expect(rows[1][1].props.selectedItems.length).toBe(1)
     expect(rows[1][1].props.selectedItems[0]).toBe('role-2')
   })

src/components/modules/ProjectModule/ProjectListItem/ProjectListItem.tsx

@@ -96,7 +96,6 @@ type Props = {
   isCurrentProject: (projectId: string) => boolean,
   onSwitchProjectClick: (projectId: string) => void | Promise<void>,
 }
-const testName = 'plItem'
 @observer
 class ProjectListItem extends React.Component<Props> {
   render() {
@@ -104,22 +103,22 @@ class ProjectListItem extends React.Component<Props> {
 
     return (
       <Wrapper>
-        <Content onClick={this.props.onClick} data-test-id={`${testName}-content`}>
+        <Content onClick={this.props.onClick}>
           <Image />
           <Title>
-            <TitleLabel data-test-id={`${testName}-name`}>{this.props.item.name}</TitleLabel>
-            <Subtitle data-test-id={`${testName}-description`}>{this.props.item.description}</Subtitle>
+            <TitleLabel>{this.props.item.name}</TitleLabel>
+            <Subtitle>{this.props.item.description}</Subtitle>
           </Title>
           <Body>
             <Data percentage={33}>
               <ItemLabel>Members</ItemLabel>
-              <ItemValue data-test-id={`${testName}-members`}>
+              <ItemValue>
                 {this.props.getMembers(this.props.item.id)}
               </ItemValue>
             </Data>
             <Data percentage={33}>
               <ItemLabel>Enabled</ItemLabel>
-              <ItemValue data-test-id={`${testName}-enabled`}>
+              <ItemValue>
                 {this.props.item.enabled ? 'Yes' : 'No'}
               </ItemValue>
             </Data>
@@ -134,7 +133,6 @@ class ProjectListItem extends React.Component<Props> {
                   if (e) e.stopPropagation(); this.props.onSwitchProjectClick(this.props.item.id)
                 }}
                 disabled={isCurrentProject}
-                data-test-id={`${testName}-currentButton`}
               >{isCurrentProject ? 'Current' : 'Switch'}
               </Button>
             </Data>

src/components/modules/ProjectModule/ProjectMemberModal/ProjectMemberModal.tsx

@@ -99,7 +99,6 @@ type State = {
   selectedRolesExisting: string[],
   selectedRolesNew: string[],
 }
-const testName = 'pmModal'
 @observer
 class ProjectMemberModal extends React.Component<Props, State> {
   state: State = {
@@ -204,7 +203,6 @@ class ProjectMemberModal extends React.Component<Props, State> {
     }]
     return (
       <ToggleButtonBarStyled
-        data-test-id={`${testName}-formToggle`}
         items={items}
         selectedValue={this.state.isNew ? 'new' : 'existing'}
         onChange={item => { this.setState({ isNew: item.value === 'new' }) }}
@@ -226,7 +224,6 @@ class ProjectMemberModal extends React.Component<Props, State> {
 
     return (
       <FieldInput
-        data-test-id={`${testName}-roles`}
         key="roles"
         name="role(s)"
         label="Role(s)"
@@ -254,7 +251,6 @@ class ProjectMemberModal extends React.Component<Props, State> {
   renderField(field: FieldType, value: any, onChange: (value: any) => void) {
     return (
       <FieldStyled
-        data-test-id={`${testName}-field-${field.name}`}
         key={field.name}
         name={field.name}
         type={field.type || 'string'}
@@ -336,7 +332,6 @@ class ProjectMemberModal extends React.Component<Props, State> {
             Username
           </FormLabel>
           <AutocompleteDropdown
-            data-test-id={`${testName}-users`}
             items={users}
             disabled={this.props.loading}
             selectedItem={this.state.selectedUser ? this.state.selectedUser.id : ''}
@@ -381,7 +376,6 @@ class ProjectMemberModal extends React.Component<Props, State> {
               large
               disabled={this.props.loading}
               onClick={() => { this.handleAddClick() }}
-              data-test-id={`${testName}-addButton`}
             >Add Member
             </Button>
           </Buttons>

src/components/modules/ProjectModule/ProjectModal/ProjectModal.tsx

@@ -66,7 +66,6 @@ type State = {
   highlightFieldNames: string[],
   description?: string,
 }
-const testName = 'projectModal'
 @observer
 class ProjectModal extends React.Component<Props, State> {
   UNSAFE_componentWillMount() {
@@ -118,7 +117,6 @@ class ProjectModal extends React.Component<Props, State> {
     return (
       <FieldInput
         layout="modal"
-        data-test-id={`${testName}-field-${field.name}`}
         key={field.name}
         name={field.name}
         type={field.type || 'string'}
@@ -179,7 +177,6 @@ class ProjectModal extends React.Component<Props, State> {
             >Cancel
             </Button>
             <Button
-              data-test-id={`${testName}-updateButton`}
               large
               disabled={this.props.loading}
               onClick={() => { this.handleUpdateClick() }}

src/components/modules/TransferModule/Executions/Executions.tsx

@@ -259,7 +259,6 @@ class Executions extends React.Component<Props, State> {
         onPreviousClick={() => { this.handlePreviousExecutionClick() }}
         onNextClick={() => { this.handleNextExecutionClick() }}
         onItemClick={item => { this.handleTimelineItemClick(item) }}
-        data-test-id="executions-timeline"
       />
     )
   }
@@ -312,7 +311,7 @@ class Executions extends React.Component<Props, State> {
 
     return (
       <ExecutionInfo>
-        <ExecutionInfoNumber data-test-id="executions-number">Execution #{this.state.selectedExecution.number}</ExecutionInfoNumber>
+        <ExecutionInfoNumber>Execution #{this.state.selectedExecution.number}</ExecutionInfoNumber>
         <StatusPill style={{ marginRight: '16px' }} small status={this.state.selectedExecution.status} />
         <ExecutionInfoDate>
           {DateUtils.getLocalTime(this.state.selectedExecution.created_at).format('DD MMMM YYYY HH:mm')}
@@ -350,9 +349,9 @@ class Executions extends React.Component<Props, State> {
     return (
       <NoExecutions>
         <ExecutionImage />
-        <NoExecutionTitle data-test-id="executions-noExTitle">It looks like there are no executions in this replica.</NoExecutionTitle>
+        <NoExecutionTitle>It looks like there are no executions in this replica.</NoExecutionTitle>
         <NoExecutionText>This replica has not been executed yet.</NoExecutionText>
-        <Button onClick={this.props.onExecuteClick} data-test-id="executions-executeButton">Execute Now</Button>
+        <Button onClick={this.props.onExecuteClick}>Execute Now</Button>
       </NoExecutions>
     )
   }

src/components/modules/TransferModule/MainDetails/MainDetails.tsx

@@ -169,13 +169,13 @@ class MainDetails extends React.Component<Props, State> {
     return this.props.item ? this.renderValue(DateUtils.getLocalTime(this.props.item.updated_at).format('YYYY-MM-DD HH:mm:ss')) : '-'
   }
 
-  renderValue(value: string, dateTestId?: string) {
-    return <CopyValue value={value} maxWidth="90%" data-test-id={dateTestId ? `mainDetails-${dateTestId}` : undefined} />
+  renderValue(value: string) {
+    return <CopyValue value={value} maxWidth="90%" />
   }
 
   renderEndpointLink(type: string): React.ReactNode {
     const endpointIsMissing = (
-      <Value flex data-test-id={`mainDetails-missing-${type}`}>
+      <Value flex>
         <StatusIcon style={{ marginRight: '8px' }} status="ERROR" />Endpoint is missing
       </Value>
     )
@@ -289,7 +289,6 @@ class MainDetails extends React.Component<Props, State> {
           <Row>
             <EndpointLogos
               endpoint={(sourceEndpoint ? sourceEndpoint.type : '') as any}
-              data-test-id="mainDetails-sourceLogo"
             />
           </Row>
           {getPropertyNames('source').length > 0 ? (
@@ -306,20 +305,20 @@ class MainDetails extends React.Component<Props, State> {
           <Row>
             <Field>
               <Label>Id</Label>
-              {this.renderValue(this.props.item ? this.props.item.id || '-' : '-', 'id')}
+              {this.renderValue(this.props.item ? this.props.item.id || '-' : '-')}
             </Field>
           </Row>
           <Row>
             <Field>
               <Label>Created</Label>
-              {this.props.item && this.props.item.created_at ? this.renderValue(DateUtils.getLocalTime(this.props.item.created_at).format('YYYY-MM-DD HH:mm:ss'), 'created') : <Value>-</Value>}
+              {this.props.item && this.props.item.created_at ? this.renderValue(DateUtils.getLocalTime(this.props.item.created_at).format('YYYY-MM-DD HH:mm:ss')) : <Value>-</Value>}
             </Field>
           </Row>
           {lastUpdated ? (
             <Row>
               <Field>
                 <Label>Last Updated</Label>
-                <Value data-test-id="mainDetails-updated">{lastUpdated}</Value>
+                <Value>{lastUpdated}</Value>
               </Field>
             </Row>
           ) : null}
@@ -357,7 +356,6 @@ class MainDetails extends React.Component<Props, State> {
           <Row>
             <EndpointLogos
               endpoint={(destinationEndpoint ? destinationEndpoint.type : '') as any}
-              data-test-id="mainDetails-targetLogo"
             />
           </Row>
           {getPropertyNames('destination').length > 0 ? (
@@ -403,7 +401,7 @@ class MainDetails extends React.Component<Props, State> {
 
     return (
       <Loading>
-        <StatusImage loading data-test-id="mainDetails-loading" />
+        <StatusImage loading />
       </Loading>
     )
   }

src/components/modules/TransferModule/MigrationDetailsContent/MigrationDetailsContent.tsx

@@ -106,7 +106,6 @@ class MigrationDetailsContent extends React.Component<Props> {
         endpoints={this.props.endpoints}
         bottomControls={this.renderBottomControls()}
         loading={this.props.detailsLoading}
-        data-test-id="mdContent-mainDetails"
       />
     )
   }

src/components/modules/TransferModule/ReplicaDetailsContent/ReplicaDetailsContent.tsx

@@ -147,7 +147,6 @@ class ReplicaDetailsContent extends React.Component<Props, State> {
             primary
             disabled={this.isEndpointMissing()}
             onClick={this.props.onCreateMigrationClick}
-            data-test-id="rdContent-createButton"
           >Create Migration
           </Button>
         </ButtonColumn>
@@ -156,7 +155,6 @@ class ReplicaDetailsContent extends React.Component<Props, State> {
             alert
             hollow
             onClick={this.props.onDeleteReplicaClick}
-            data-test-id="rdContent-deleteButton"
           >Delete Replica
           </Button>
         </ButtonColumn>
@@ -184,7 +182,6 @@ class ReplicaDetailsContent extends React.Component<Props, State> {
         endpoints={this.props.endpoints}
         networks={this.props.networks}
         bottomControls={this.renderBottomControls()}
-        data-test-id="rdContent-mainDetails"
       />
     )
   }

src/components/modules/TransferModule/ReplicaExecutionOptions/ReplicaExecutionOptions.tsx

@@ -117,13 +117,12 @@ class ReplicaExecutionOptions extends React.Component<Props, State> {
               value={this.getFieldValue(field)}
               label={LabelDictionary.get(field.name)}
               onChange={value => this.handleValueChange(field, value)}
-              data-test-id={`reOptions-option-${field.name}`}
             />
           ))}
         </Form>
         <Buttons>
-          <Button secondary onClick={this.props.onCancelClick} data-test-id="reOptions-cancelButton">Cancel</Button>
-          <Button onClick={() => { this.props.onExecuteClick(this.state.fields) }} data-test-id="reOptions-execButton">{this.props.executionLabel}</Button>
+          <Button secondary onClick={this.props.onCancelClick}>Cancel</Button>
+          <Button onClick={() => { this.props.onExecuteClick(this.state.fields) }}>{this.props.executionLabel}</Button>
         </Buttons>
       </Wrapper>
     )

src/components/modules/TransferModule/ReplicaMigrationOptions/ReplicaMigrationOptions.tsx

@@ -294,8 +294,8 @@ class ReplicaMigrationOptions extends React.Component<Props, State> {
         <Image />
         {this.renderBody()}
         <Buttons>
-          <Button secondary onClick={this.props.onCancelClick} data-test-id="rmOptions-cancelButton">Cancel</Button>
-          <Button onClick={() => { this.migrate() }} data-test-id="rmOptions-execButton">Migrate</Button>
+          <Button secondary onClick={this.props.onCancelClick}>Cancel</Button>
+          <Button onClick={() => { this.migrate() }}>Migrate</Button>
         </Buttons>
       </Wrapper>
     )

src/components/modules/TransferModule/Schedule/Schedule.tsx

@@ -206,7 +206,7 @@ class Schedule extends React.Component<Props, State> {
 
     return (
       <LoadingWrapper>
-        <StatusImage loading data-test-id="schedule-loadingStatus" />
+        <StatusImage loading />
         <LoadingText>Loading schedules...</LoadingText>
       </LoadingWrapper>
     )
@@ -316,7 +316,6 @@ class Schedule extends React.Component<Props, State> {
         <Timezone>
           <TimezoneLabel>Show all times in</TimezoneLabel>
           <DropdownLink
-            data-test-id="schedule-timezoneDropdown"
             items={timezoneItems}
             selectedItem={selectedItem}
             onChange={item => { this.props.onTimezoneChange(item.value === 'utc' ? 'utc' : 'local') }}

src/components/modules/TransferModule/ScheduleItem/ScheduleItem.tsx

@@ -230,7 +230,6 @@ class ScheduleItem extends React.Component<Props> {
         useBold={this.shouldUseBold('month')}
         selectedItem={this.getFieldValue(items, 'month')}
         onChange={item => { this.handleMonthChange(item) }}
-        data-test-id="scheduleItem-monthDropdown"
       />
     )
   }
@@ -255,7 +254,6 @@ class ScheduleItem extends React.Component<Props> {
         useBold={this.shouldUseBold('dom')}
         selectedItem={this.getFieldValue(items, 'dom')}
         onChange={item => { this.props.onChange({ schedule: { dom: item.value } }) }}
-        data-test-id="scheduleItem-dayOfMonthDropdown"
       />
     )
   }
@@ -280,7 +278,6 @@ class ScheduleItem extends React.Component<Props> {
         useBold={this.shouldUseBold('dow')}
         selectedItem={this.getFieldValue(items, 'dow', true)}
         onChange={item => { this.props.onChange({ schedule: { dow: item.value } }) }}
-        data-test-id="scheduleItem-dayOfWeekDropdown"
       />
     )
   }
@@ -303,7 +300,6 @@ class ScheduleItem extends React.Component<Props> {
         useBold={this.shouldUseBold('hour')}
         selectedItem={this.getFieldValue(items, 'hour', true, 1)}
         onChange={item => { this.handleHourChange(item.value) }}
-        data-test-id="scheduleItem-hourDropdown"
       />
     )
   }
@@ -326,7 +322,6 @@ class ScheduleItem extends React.Component<Props> {
         useBold={this.shouldUseBold('minute')}
         selectedItem={this.getFieldValue(items, 'minute', true, 1)}
         onChange={item => { this.props.onChange({ schedule: { minute: item.value } }) }}
-        data-test-id="scheduleItem-minuteDropdown"
       />
     )
   }
@@ -356,7 +351,7 @@ class ScheduleItem extends React.Component<Props> {
   render() {
     const enabled = typeof this.props.item.enabled !== 'undefined' && this.props.item.enabled !== null ? this.props.item.enabled : false
     return (
-      <Wrapper data-test-id="scheduleItem">
+      <Wrapper>
         <Data width={this.props.colWidths[0]}>
           {this.props.enabling ? (
             <EnablingIcon>
@@ -369,7 +364,6 @@ class ScheduleItem extends React.Component<Props> {
               disabled={this.props.deleting}
               checked={enabled}
               onChange={itemEnabled => { this.props.onChange({ enabled: itemEnabled }, true) }}
-              data-test-id="scheduleItem-enabled"
             />
           )}
         </Data>
@@ -402,7 +396,6 @@ class ScheduleItem extends React.Component<Props> {
               letterSpacing: '1px',
               padding: '0 0 1px 3px',
             }}
-            data-test-id="scheduleItem-optionsButton"
           >•••
           </Button>
         </Data>
@@ -412,7 +405,6 @@ class ScheduleItem extends React.Component<Props> {
           </DeletingIcon>
         ) : (
           <DeleteButton
-            data-test-id="scheduleItem-deleteButton"
             onClick={this.props.onDeleteClick}
             hidden={this.props.item.enabled}
           />
@@ -423,7 +415,6 @@ class ScheduleItem extends React.Component<Props> {
           </SavingIcon>
         ) : (
           <SaveButton
-            data-test-id="scheduleItem-saveButton"
             onClick={this.props.onSaveSchedule}
             hidden={this.props.item.enabled
           || !this.props.unsavedSchedules.find(us => us.id === this.props.item.id)}

src/components/modules/TransferModule/TaskItem/TaskItem.tsx

@@ -271,7 +271,7 @@ class TaskItem extends React.Component<Props> {
               <ProgressUpdateDate width={this.props.columnWidths[0]}>
                 <span>{DateUtils.getLocalTime(update.created_at).format('YYYY-MM-DD HH:mm:ss')}</span>
               </ProgressUpdateDate>
-              <ProgressUpdateValue data-test-id={`taskItem-progressUpdateMessage-${i}`}>
+              <ProgressUpdateValue>
                 {update.message}
                 {progressPercentage && (
                   <ProgressBar

src/components/modules/TransferModule/Tasks/Tasks.tsx

@@ -158,7 +158,6 @@ class Tasks extends React.Component<Props, State> {
             columnWidths={ColumnWidths}
             open={Boolean(this.state.openedItems.find(i => i.id === item.id))}
             onDependsOnClick={id => { this.handleDependsOnClick(id) }}
-            data-test-id={`tasks-item-${item.id}`}
           />
         ))}
       </Body>

src/components/modules/TransferModule/Timeline/Timeline.tsx

@@ -166,10 +166,9 @@ class Timeline extends React.Component<Props> {
               key={item.id}
               ref={(ref: HTMLElement | null | undefined) => { this.itemRef = ref }}
               onClick={() => { if (this.props.onItemClick) this.props.onItemClick(item) }}
-              data-test-id={`timeline-item-${item.id}`}
             >
               <StatusIcon status={item.status} useBackground />
-              <ItemLabel selected={this.props.selectedItem && this.props.selectedItem.id === item.id} data-test-id={`timeline-label-${item.id}`}>
+              <ItemLabel selected={this.props.selectedItem && this.props.selectedItem.id === item.id}>
                 {DateUtils.getLocalTime(item.created_at).format('DD MMM YYYY')}
               </ItemLabel>
             </Item>
@@ -187,7 +186,6 @@ class Timeline extends React.Component<Props> {
           forceShow={!this.props.items || !this.props.items.length}
           primary={Boolean(this.props.items && this.props.items.length)}
           onClick={this.props.onPreviousClick}
-          data-test-id="timeline-previous"
         />
         {this.renderMainLine()}
         {this.renderItems()}
@@ -195,7 +193,6 @@ class Timeline extends React.Component<Props> {
           orientation="right"
           forceShow={!this.props.items || !this.props.items.length}
           onClick={this.props.onNextClick}
-          data-test-id="timeline-next"
         />
       </Wrapper>
     )

src/components/modules/TransferModule/TransferDetailsTable/TransferDetailsTable.tsx

@@ -208,11 +208,11 @@ class TransferDetailsTable extends React.Component<Props, State> {
         <RowHeader>
           <RowHeaderColumn>
             <HeaderIcon icon={icon} />
-            <HeaderName source data-test-id={`${TEST_ID}-source-${icon}`}>{sourceName}</HeaderName>
+            <HeaderName source>{sourceName}</HeaderName>
             {destinationName ? <ArrowIcon /> : null}
           </RowHeaderColumn>
           <RowHeaderColumn>
-            <HeaderName data-test-id={`${TEST_ID}-destination-${icon}`}>{destinationName}</HeaderName>
+            <HeaderName>{destinationName}</HeaderName>
           </RowHeaderColumn>
         </RowHeader>
         <Collapse isOpened={isOpened}>

src/components/modules/UserModule/UserDetailsContent/UserDetailsContent.tsx

@@ -112,7 +112,6 @@ class UserDetailsContent extends React.Component<Props> {
           <Button
             hollow
             onClick={this.props.onUpdatePasswordClick}
-            data-test-id={`${TEST_ID}-updateButton`}
           >Change password
           </Button>
         </ButtonsColumn>
@@ -122,7 +121,6 @@ class UserDetailsContent extends React.Component<Props> {
             hollow
             onClick={() => { this.props.onDeleteClick() }}
             disabled={this.props.isLoggedUser}
-            data-test-id={`${TEST_ID}-deleteUserButton`}
           >Delete user
           </Button>
         </ButtonsColumn>
@@ -163,7 +161,7 @@ class UserDetailsContent extends React.Component<Props> {
       <Info>
         <Field>
           <Label>Name</Label>
-          {this.renderValue(user.name, 'name')}
+          {this.renderValue(user.name)}
         </Field>
         <Field>
           <Label>Description</Label>
@@ -171,15 +169,15 @@ class UserDetailsContent extends React.Component<Props> {
         </Field>
         <Field>
           <Label>ID</Label>
-          {this.renderValue(user.id, 'id')}
+          {this.renderValue(user.id)}
         </Field>
         <Field>
           <Label>Email</Label>
-          {this.renderValue(user.email || '-', 'email')}
+          {this.renderValue(user.email || '-')}
         </Field>
         <Field>
           <Label>Primary Project</Label>
-          {this.renderValue(primaryProjectName || '-', 'primaryProject')}
+          {this.renderValue(primaryProjectName || '-')}
         </Field>
         <Field>
           <Label>Project Membership</Label>
@@ -187,16 +185,15 @@ class UserDetailsContent extends React.Component<Props> {
         </Field>
         <Field>
           <Label>Enabled</Label>
-          <Value data-test-id={`${TEST_ID}-enabled`}>{user.enabled ? 'Yes' : 'No'}</Value>
+          <Value>{user.enabled ? 'Yes' : 'No'}</Value>
         </Field>
       </Info>
     )
   }
 
-  renderValue(value: string, dataTestId?: string) {
+  renderValue(value: string) {
     return value !== '-' ? (
       <CopyValue
-        data-test-id={`${TEST_ID}-${dataTestId || ''}`}
         value={value}
         maxWidth="90%"
       />

src/components/modules/UserModule/UserListItem/UserListItem.tsx

@@ -93,34 +93,33 @@ type Props = {
   onClick: () => void,
   getProjectName: (projectId: string | null | undefined) => string,
 }
-const testName = 'ulItem'
 @observer
 class UserListItem extends React.Component<Props> {
   render() {
     return (
       <Wrapper>
-        <Content data-test-id={`${testName}-content`} onClick={this.props.onClick}>
+        <Content onClick={this.props.onClick}>
           <Image />
           <Title>
-            <TitleLabel data-test-id={`${testName}-name`}>{this.props.item.name}</TitleLabel>
-            <Subtitle data-test-id={`${testName}-description`}>{this.props.item.description}</Subtitle>
+            <TitleLabel>{this.props.item.name}</TitleLabel>
+            <Subtitle>{this.props.item.description}</Subtitle>
           </Title>
           <Body>
             <Data percentage={45}>
               <ItemLabel>Email</ItemLabel>
-              <ItemValue data-test-id={`${testName}-email`}>
+              <ItemValue>
                 {this.props.item.email || '-'}
               </ItemValue>
             </Data>
             <Data percentage={35}>
               <ItemLabel>Primary Project</ItemLabel>
-              <ItemValue data-test-id={`${testName}-project`}>
+              <ItemValue>
                 {this.props.getProjectName(this.props.item.project_id)}
               </ItemValue>
             </Data>
             <Data percentage={20}>
               <ItemLabel>Enabled</ItemLabel>
-              <ItemValue data-test-id={`${testName}-enabled`}>
+              <ItemValue>
                 {this.props.item.enabled ? 'Yes' : 'No'}
               </ItemValue>
             </Data>

src/components/modules/UserModule/UserModal/UserModal.tsx

@@ -81,7 +81,6 @@ type State = {
   confirmPassword: string,
   description?: string,
 }
-const testName = 'userModal'
 @observer
 class UserModal extends React.Component<Props, State> {
   UNSAFE_componentWillMount() {
@@ -176,7 +175,6 @@ class UserModal extends React.Component<Props, State> {
     return (
       <FieldInput
         layout="modal"
-        data-test-id={`${testName}-field-${field.name}`}
         key={field.name}
         name={field.name}
         label={LabelDictionary.get(field.name)}
@@ -275,7 +273,6 @@ class UserModal extends React.Component<Props, State> {
             >Cancel
             </Button>
             <Button
-              data-test-id={`${testName}-updateButton`}
               large
               disabled={this.props.loading}
               onClick={() => { this.handleUpdateClick() }}

src/components/modules/WizardModule/WizardBreadcrumbs/WizardBreadcrumbs.tsx

@@ -50,7 +50,7 @@ class WizardBreadcrumbs extends React.Component<Props> {
       <Wrapper>
         {this.props.pages.map(page => (
           <Breadcrumb key={page.id}>
-            <Name selected={this.props.selected.id === page.id} data-test-id={`wBreadCrumbs-name-${page.id}`}>{page.breadcrumb}</Name>
+            <Name selected={this.props.selected.id === page.id}>{page.breadcrumb}</Name>
             <ArrowStyled primary={this.props.selected.id === page.id} useDefaultCursor />
           </Breadcrumb>
         ))}

src/components/modules/WizardModule/WizardEndpointList/WizardEndpointList.tsx

@@ -97,7 +97,6 @@ class WizardEndpointList extends React.Component<Props> {
 
       actionInput = (
         <Dropdown
-          data-test-id={`wEndpointList-dropdown-${provider}`}
           primary={Boolean(selectedItem)}
           items={items}
           valueField="id"
@@ -121,7 +120,6 @@ class WizardEndpointList extends React.Component<Props> {
           hollow
           hoverPrimary
           onClick={() => { this.props.onAddEndpoint(provider) }}
-          data-test-id={`wEndpointList-addButton-${provider}`}
         >Add
         </Button>
       )
@@ -133,7 +131,6 @@ class WizardEndpointList extends React.Component<Props> {
           height={128}
           endpoint={provider}
           disabled={items.length === 0}
-          data-test-id={`wEndpointList-logo-${provider}`}
         />
         {actionInput}
       </Item>

src/components/modules/WizardModule/WizardInstances/WizardInstances.tsx

@@ -264,7 +264,7 @@ class WizardInstances extends React.Component<Props, State> {
     return (
       <SearchNotFound>
         <StatusImage status="ERROR" />
-        <SearchNotFoundText data-test-id="wInstances-notFoundText">Your search returned no results</SearchNotFoundText>
+        <SearchNotFoundText>Your search returned no results</SearchNotFoundText>
         {subtitle}
         <Button hollow onClick={() => { this.props.onReloadClick() }}>Retry</Button>
       </SearchNotFound>
@@ -290,7 +290,7 @@ class WizardInstances extends React.Component<Props, State> {
 
     return (
       <LoadingWrapper>
-        <StatusImage loading data-test-id="wInstances-loadingStatus" />
+        <StatusImage loading />
         <LoadingText>Loading instances...</LoadingText>
       </LoadingWrapper>
     )
@@ -320,7 +320,6 @@ class WizardInstances extends React.Component<Props, State> {
                 if (!this.isCheckboxMouseDown) this.props.onInstanceClick(instance)
               }}
               selected={selected}
-              data-test-id={`wInstances-item-${instance.id}`}
             >
               <CheckboxStyled
                 checked={selected}
@@ -328,7 +327,7 @@ class WizardInstances extends React.Component<Props, State> {
                 onMouseDown={() => { this.isCheckboxMouseDown = true }}
                 onMouseUp={() => { this.isCheckboxMouseDown = false }}
               />
-              <InstanceContent data-test-id="wInstances-instanceItem">
+              <InstanceContent>
                 <Image />
                 <Label>
                   <LabelTitle>{instance.name}</LabelTitle>
@@ -362,7 +361,6 @@ class WizardInstances extends React.Component<Props, State> {
             value={this.state.searchText}
             loading={this.props.searching}
             placeholder="Search VMs"
-            data-test-id="wInstances-searchInput"
           />
           {this.props.hasSourceOptions ? (
             <InfoIcon
@@ -374,11 +372,10 @@ class WizardInstances extends React.Component<Props, State> {
           ) : null}
         </SearchInputInfo>
         <FilterInfo>
-          <SelectionInfo data-test-id="wInstances-selInfo">{count} instance{plural} selected</SelectionInfo>
+          <SelectionInfo>{count} instance{plural} selected</SelectionInfo>
           <FilterSeparator>|</FilterSeparator>
           <ReloadButton
             onClick={() => { this.props.onReloadClick() }}
-            data-test-id="wInstances-reloadButton"
           />
         </FilterInfo>
       </FiltersWrapper>

src/components/modules/WizardModule/WizardNetworks/WizardNetworks.tsx

@@ -149,7 +149,7 @@ class WizardNetworks extends React.Component<Props> {
     return (
       <NoNicsMessage>
         <BigNetworkImage />
-        <NoNicsTitle data-test-id="wNetworks-noNics">No networks were found</NoNicsTitle>
+        <NoNicsTitle>No networks were found</NoNicsTitle>
         <NoNicsSubtitle>
           We could not find any Networks attached to the selected Instances.
           Coriolis will skip this step.
@@ -286,7 +286,7 @@ class WizardNetworks extends React.Component<Props> {
 
           const selectedNetwork = this.props.selectedNetworks?.find(n => n.sourceNic.network_name === nic.network_name)
           return (
-            <Nic key={nic.id} data-test-id="networkItem">
+            <Nic key={nic.id}>
               <NetworkImage />
               <NetworkTitle width={this.props.titleWidth || 320}>
                 <NetworkName>{nic.network_name}</NetworkName>

src/components/modules/WizardModule/WizardOptions/WizardOptions.tsx

@@ -358,7 +358,6 @@ class WizardOptions extends React.Component<Props> {
         enum={field.enum}
         addNullValue
         required={field.required}
-        data-test-id={`wOptions-field-${field.name}`}
         width={this.props.fieldWidth || ThemeProps.inputSizes.wizard.width}
         nullableBoolean={field.nullableBoolean}
         disabled={field.disabled}

src/components/modules/WizardModule/WizardStorage/WizardStorage.tsx

@@ -241,7 +241,6 @@ class WizardStorage extends React.Component<Props> {
           labelField="name"
           valueField="id"
           onChange={(item: StorageBackend) => { this.props.onChange({ source: disk, target: item, type }) }}
-          data-test-id={`${TEST_ID}-${type}-destination`}
         />
       )
   }

src/components/modules/WizardModule/WizardSummary/WizardSummary.tsx

@@ -252,7 +252,7 @@ class WizardSummary extends React.Component<Props> {
         <SectionTitle>Schedule</SectionTitle>
         <Table>
           {schedules.map(schedule => (
-            <Row key={schedule.id} schedule data-test-id={`wSummary-scheduleItem-${schedule.id || 0}`}>
+            <Row key={schedule.id} schedule>
               {this.renderScheduleLabel(schedule)}
             </Row>
           ))}
@@ -474,10 +474,10 @@ class WizardSummary extends React.Component<Props> {
 
             return (
               <Option key={optionName}>
-                <OptionLabel data-test-id={`wSummary-optionLabel-${optionName}`} title={optionLabel}>
+                <OptionLabel title={optionLabel}>
                   {optionLabel}
                 </OptionLabel>
-                <OptionValue data-test-id={`wSummary-optionValue-${optionName}`} title={optionValue}>
+                <OptionValue title={optionValue}>
                   {optionValue}
                 </OptionValue>
               </Option>
@@ -554,10 +554,10 @@ class WizardSummary extends React.Component<Props> {
         <Table>
           {data.networks.map(mapping => (
             <Row key={mapping.sourceNic.network_name} direction="row">
-              <SourceNetwork data-test-id="wSummary-networkSource">{mapping.sourceNic.network_name}</SourceNetwork>
+              <SourceNetwork>{mapping.sourceNic.network_name}</SourceNetwork>
               <NetworkArrow />
               <TargetNetwork>
-                <TargetNetworkName data-test-id="wSummary-networkTarget">{mapping.targetNetwork!.name}</TargetNetworkName>
+                <TargetNetworkName>{mapping.targetNetwork!.name}</TargetNetworkName>
                 {mapping.targetSecurityGroups?.length ? (
                   <TargetNetworkName>Security Groups: {mapping.targetSecurityGroups.map(s => (typeof s === 'string' ? s : s.name)).join(', ')}</TargetNetworkName>
                 ) : null}
@@ -639,9 +639,8 @@ class WizardSummary extends React.Component<Props> {
                 secondary
                 small
                 label={configLoader.config.providerNames[data.source!.type]}
-                data-test-id="wSummary-sourcePill"
               />
-              <OverviewRowLabel data-test-id="wSummary-source">{data.source ? data.source.name : ''}</OverviewRowLabel>
+              <OverviewRowLabel>{data.source ? data.source.name : ''}</OverviewRowLabel>
             </OverviewRowData>
           </OverviewRow>
           <OverviewRow>
@@ -651,9 +650,8 @@ class WizardSummary extends React.Component<Props> {
                 secondary
                 small
                 label={configLoader.config.providerNames[data.target!.type]}
-                data-test-id="wSummary-targetPill"
               />
-              <OverviewRowLabel data-test-id="wSummary-target">{data.target && data.target.name}</OverviewRowLabel>
+              <OverviewRowLabel>{data.target && data.target.name}</OverviewRowLabel>
             </OverviewRowData>
           </OverviewRow>
           <OverviewRow>
@@ -663,7 +661,6 @@ class WizardSummary extends React.Component<Props> {
                 alert={type === 'Replica'}
                 small
                 label={this.props.wizardType.toUpperCase()}
-                data-test-id="wSummary-typePill"
               />
               <OverviewRowLabel>Coriolis {type}</OverviewRowLabel>
             </OverviewRowData>

src/components/modules/WizardModule/WizardType/WizardType.tsx

@@ -79,7 +79,6 @@ class WizardType extends React.Component<Props> {
               big
               onChange={this.props.onChange}
               checked={this.props.selected === 'replica'}
-              data-test-id="wType-switch"
             />
           </Column>
           <Column width="50%">

src/components/ui/AlertModal/AlertModal.tsx

@@ -84,7 +84,7 @@ class AlertModal extends React.Component<Props> {
 
     return (
       <Buttons centered>
-        <Button secondary onClick={this.props.onRequestClose} data-test-id="aModal-dismissButton">Dismiss</Button>
+        <Button secondary onClick={this.props.onRequestClose}>Dismiss</Button>
       </Buttons>
     )
   }
@@ -96,8 +96,8 @@ class AlertModal extends React.Component<Props> {
 
     return (
       <Buttons>
-        <Button secondary onClick={this.props.onRequestClose} data-test-id="aModal-noButton">No</Button>
-        <Button onClick={this.props.onConfirmation} data-test-id="aModal-yesButton">Yes</Button>
+        <Button secondary onClick={this.props.onRequestClose}>No</Button>
+        <Button onClick={this.props.onConfirmation}>Yes</Button>
       </Buttons>
     )
   }
@@ -108,10 +108,10 @@ class AlertModal extends React.Component<Props> {
     return (
       // eslint-disable-next-line react/jsx-props-no-spreading
       <Modal {...this.props} isOpen={this.props.isOpen || false}>
-        <Wrapper data-test-id="alertModal">
-          <StatusImage status={status} data-test-id="aModal-status" />
-          {this.props.message ? <Message data-test-id="aModal-message">{this.props.message}</Message> : null}
-          {this.props.extraMessage ? <ExtraMessage data-test-id="aModal-extraMessage">{this.props.extraMessage}</ExtraMessage> : null}
+        <Wrapper>
+          <StatusImage status={status} />
+          {this.props.message ? <Message>{this.props.message}</Message> : null}
+          {this.props.extraMessage ? <ExtraMessage>{this.props.extraMessage}</ExtraMessage> : null}
           {this.renderConfirmationButtons()}
           {this.renderDismissButton()}
         </Wrapper>

src/components/ui/AutocompleteInput/AutocompleteInput.tsx

@@ -111,7 +111,6 @@ class AutocompleteInput extends React.Component<Props, State> {
         }}
       >
         <TextInput
-          data-test-id="acInput-text"
           disabled={disabled}
           value={this.props.value}
           onChange={e => { this.props.onChange(e.target.value) }}
@@ -134,7 +133,6 @@ class AutocompleteInput extends React.Component<Props, State> {
           onInputKeyDown={this.props.onInputKeyDown}
         />
         <Arrow
-          data-test-id="acInput-arrow"
           disabled={disabled}
           dangerouslySetInnerHTML={{ __html: arrowImage }}
           onClick={() => { if (this.textInputRef) this.textInputRef.focus() }}

src/components/ui/Checkbox/Checkbox.tsx

@@ -56,7 +56,6 @@ type Props = {
   checked?: boolean,
   disabled?: boolean,
   onChange?: (checked: boolean) => void,
-  'data-test-id'?: string,
   onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void,
   onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void,
 }
@@ -81,7 +80,6 @@ class Checkbox extends React.Component<Props> {
   render() {
     return (
       <Wrapper
-        data-test-id={this.props['data-test-id'] || 'checkbox'}
         className={this.props.className}
         onClick={() => { this.handleClick() }}
         checked={this.props.checked}

src/components/ui/CopyMultilineValue/CopyMultilineValue.tsx

@@ -34,7 +34,6 @@ const Wrapper = styled.div<any>`
 `
 
 type Props = {
-  'data-test-id'?: string,
   value: string | null | undefined,
   onCopy?: (value: string) => void,
   useDangerousHtml?: boolean,
@@ -67,7 +66,6 @@ class CopyMultineValue extends React.Component<Props> {
     return (
       <Wrapper
         onClick={() => { this.handleCopy() }}
-        data-test-id={(this.props && this.props['data-test-id']) || 'copyMultilineValue'}
       >
         {text}
         <CopyButtonStyled />

src/components/ui/CopyValue/CopyValue.tsx

@@ -46,7 +46,6 @@ type Props = {
   width?: string,
   maxWidth?: string,
   capitalize?: boolean,
-  'data-test-id'?: string,
   onCopy?: (value: string) => void,
   style?: React.CSSProperties
 }
@@ -71,12 +70,10 @@ class CopyValue extends React.Component<Props> {
         onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => { this.handleCopyIdClick(e) }}
         onMouseDown={(e: { stopPropagation: () => void }) => { e.stopPropagation() }}
         onMouseUp={(e: { stopPropagation: () => void }) => { e.stopPropagation() }}
-        data-test-id={this.props['data-test-id'] || 'copyValue'}
         capitalize={this.props.capitalize}
         style={this.props.style}
       >
         <Value
-          data-test-id="copyValue-value"
           width={this.props.width}
           maxWidth={this.props.maxWidth}
         >{this.props.label || this.props.value}

src/components/ui/DatetimePicker/DatetimePicker.tsx

@@ -224,7 +224,6 @@ class DatetimePicker extends React.Component<Props, State> {
         <Wrapper>
           <DropdownButtonStyled
             customRef={e => { this.buttonRef = e }}
-            data-test-id="datetimePicker-dropdownButton"
             width={207}
             value={(timezoneDate && moment(timezoneDate).format('DD/MM/YYYY hh:mm A')) || '-'}
             centered

src/components/ui/Dropdowns/ActionDropdown/ActionDropdown.tsx

@@ -66,7 +66,6 @@ export type Props = {
   label: string,
   actions: Action[],
   style?: any,
-  'data-test-id'?: string,
   largeItems?: boolean
 }
 
@@ -172,7 +171,6 @@ class ActionDropdown extends React.Component<Props, State> {
             onClick={() => { this.handleItemClick(action) }}
             color={action.color}
             disabled={action.disabled}
-            data-test-id={`${TEST_ID}-listItem-${action.label}`}
             title={action.title}
             large={this.props.largeItems}
           >
@@ -206,14 +204,13 @@ class ActionDropdown extends React.Component<Props, State> {
 
   render() {
     return (
-      <Wrapper style={this.props.style} data-test-id={this.props['data-test-id']}>
+      <Wrapper style={this.props.style}>
         <DropdownButton
           secondary
           centered
           value={this.props.label}
           customRef={ref => { this.buttonRef = ref }}
           onClick={() => { this.handleButtonClick() }}
-          data-test-id={`${TEST_ID}-dropdownButton`}
         />
         {this.renderList()}
       </Wrapper>

src/components/ui/Dropdowns/AutocompleteDropdown/AutocompleteDropdown.tsx

@@ -125,7 +125,6 @@ type Props = {
   width?: number,
   dimNullValue?: boolean,
   highlight?: boolean,
-  'data-test-id'?: string,
   required?: boolean,
   embedded?: boolean,
 }
@@ -394,7 +393,6 @@ class AutocompleteDropdown extends React.Component<Props, State> {
           const duplicatedLabel = duplicatedLabels.find(l => l === label)
           const listItem = (
             <ListItem
-              data-test-id="ad-listItem"
               key={value}
               ref={(ref: HTMLElement | null | undefined) => {
                 if (i === 0) { this.firstItemRef = ref }
@@ -468,7 +466,6 @@ class AutocompleteDropdown extends React.Component<Props, State> {
 
     return (
       <Wrapper
-        data-test-id={this.props['data-test-id'] || 'acDropdown-wrapper'}
         className={this.props.className}
         width={this.props.width}
         embedded={this.props.embedded}

src/components/ui/Dropdowns/Dropdown/Dropdown.tsx

@@ -280,7 +280,6 @@ type Props = {
   disabled?: boolean,
   disabledLoading?: boolean,
   width?: number,
-  'data-test-id'?: string,
   embedded?: boolean,
   dimFirstItem?: boolean,
   multipleSelection?: boolean,
@@ -670,7 +669,6 @@ class Dropdown extends React.Component<Props, State> {
     return (
       <Wrapper
         className={this.props.className}
-        data-test-id={this.props['data-test-id'] || 'dropdown'}
         embedded={this.props.embedded}
         tabIndex={0}
         ref={(ref: HTMLElement | null | undefined) => { this.wrapperRef = ref }}
@@ -681,7 +679,6 @@ class Dropdown extends React.Component<Props, State> {
         <DropdownButton
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...this.props}
-          data-test-id="dropdown-dropdownButton"
           customRef={ref => { this.buttonRef = ref }}
           value={buttonValue()}
           onClick={() => { this.handleButtonClick() }}

src/components/ui/Dropdowns/DropdownButton/DropdownButton.tsx

@@ -158,7 +158,6 @@ type Props = {
   className?: string,
   disabled?: boolean,
   disabledLoading?: boolean,
-  'data-test-id'?: string,
   embedded?: boolean,
   highlight?: boolean,
   secondary?: boolean,
@@ -175,7 +174,6 @@ class DropdownButton extends React.Component<Props> {
     const disabled = this.props.disabled || this.props.disabledLoading
     return (
       <Wrapper
-        data-test-id={this.props['data-test-id'] || 'dropdownButton'}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...this.props}
         disabled={disabled}
@@ -196,7 +194,6 @@ class DropdownButton extends React.Component<Props> {
           {...this.props}
           onClick={() => { }}
           ref={() => { }}
-          data-test-id="dropdownButton-value"
           disabled={disabled}
         >
           {this.props.value}
@@ -206,7 +203,6 @@ class DropdownButton extends React.Component<Props> {
           {...this.props}
           ref={(ref: HTMLElement) => { if (this.props.arrowRef) this.props.arrowRef(ref) }}
           onClick={() => { }}
-          data-test-id=""
           disabled={disabled}
           dangerouslySetInnerHTML={{ __html: arrowImage }}
         />

src/components/ui/Dropdowns/DropdownFilter/DropdownFilter.tsx

@@ -118,7 +118,6 @@ class DropdownFilter extends React.Component<Props, State> {
       <List
         onMouseDown={() => { this.itemMouseDown = true }}
         onMouseUp={() => { this.itemMouseDown = false }}
-        data-test-id="dropdownFilter-list"
       >
         <Tip />
         <ListItems>
@@ -141,7 +140,6 @@ class DropdownFilter extends React.Component<Props, State> {
   renderButton() {
     return (
       <Button
-        data-test-id="dropdownFilter-button"
         onMouseDown={() => { this.itemMouseDown = true }}
         onMouseUp={() => { this.itemMouseDown = false }}
         onClick={() => { this.handleButtonClick() }}

src/components/ui/Dropdowns/DropdownFilterGroup/DropdownFilterGroup.tsx

@@ -47,7 +47,7 @@ class DropdownFilterGroup extends React.Component<Props> {
       <Dropdowns>
         {
           // eslint-disable-next-line react/jsx-props-no-spreading
-          this.props.items.map(config => <DropdownLinkStyled data-test-id={`dfGroup-dropdown-${config.key}`} {...config} />)
+          this.props.items.map(config => <DropdownLinkStyled {...config} />)
 }
       </Dropdowns>
     )

src/components/ui/Dropdowns/DropdownInput/DropdownInput.tsx

@@ -81,7 +81,6 @@ class DropdownInput extends React.Component<Props, State> {
           secondary
           disabled={this.props.disabled}
           arrowImage={arrowImage}
-          data-test-id="ddInput-link"
         />
         <TextInput
           embedded
@@ -91,7 +90,6 @@ class DropdownInput extends React.Component<Props, State> {
           onChange={e => { this.props.onInputChange(e.target.value) }}
           placeholder={this.props.placeholder}
           disabled={this.props.disabled}
-          data-test-id="ddInput-text"
         />
         {this.props.required ? <Required /> : null}
       </Wrapper>

src/components/ui/Dropdowns/DropdownLink/DropdownLink.tsx

@@ -133,7 +133,6 @@ type Props = {
   secondary?: boolean,
   multipleSelection?: boolean,
   selectedItems?: string[],
-  'data-test-id'?: string,
   linkButtonStyle?: any,
   arrowImage?: (color: string) => string,
   noCheckmark?: boolean,
@@ -367,7 +366,6 @@ class DropdownLink extends React.Component<Props, State> {
 
     return (
       <ListItems
-        data-test-id="dropdownLink-listItem"
         ref={(ref: HTMLElement | null | undefined) => { this.listItemsRef = ref }}
         searchable={this.props.searchable}
       >
@@ -423,7 +421,6 @@ class DropdownLink extends React.Component<Props, State> {
         className={this.props.className}
         onMouseDown={() => { this.itemMouseDown = true }}
         onMouseUp={() => { this.itemMouseDown = false }}
-        data-test-id={this.props['data-test-id'] || 'dropdownLink'}
         style={this.props.style}
       >
         <LinkButton
@@ -434,7 +431,6 @@ class DropdownLink extends React.Component<Props, State> {
           <Label
             secondary={this.props.secondary}
             ref={(label: HTMLElement | null | undefined) => { this.labelRef = label }}
-            data-test-id="dropdownLink-label"
             style={this.props.labelStyle}
           >{renderLabel()}
           </Label>

src/components/ui/Dropdowns/NewItemDropdown/NewItemDropdown.tsx

@@ -244,7 +244,6 @@ class NewItemDropdown extends React.Component<Props, State> {
     return (
       <Wrapper>
         <DropdownButton
-          data-test-id="newItemDropdown-button"
           onMouseDown={() => { this.itemMouseDown = true }}
           onMouseUp={() => { this.itemMouseDown = false }}
           onClick={() => this.handleButtonClick()}

src/components/ui/Dropdowns/NotificationDropdown/NotificationDropdown.tsx

@@ -190,7 +190,6 @@ export type Props = {
 type State = {
   showDropdownList: boolean,
 }
-const testId = 'notificationDropdown'
 @observer
 class NotificationDropdown extends React.Component<Props, State> {
   state = {
@@ -241,7 +240,7 @@ class NotificationDropdown extends React.Component<Props, State> {
           onMouseDown={() => { this.itemMouseDown = true }}
           onMouseUp={() => { this.itemMouseDown = false }}
         >
-          <NoItems data-test-id={`${testId}-noItems`}>There are no notifications</NoItems>
+          <NoItems>There are no notifications</NoItems>
         </ListItemNoLink>
       </List>
     )
@@ -267,17 +266,16 @@ class NotificationDropdown extends React.Component<Props, State> {
             >
               <InfoColumn>
                 <MainItemInfo>
-                  <StatusIcon data-test-id={`${testId}-${item.id}-status`} status={item.status} hollow />
+                  <StatusIcon status={item.status} hollow />
                   <ItemReplicaBadge
                     type={item.type}
-                    data-test-id={`${testId}-${item.id}-type`}
                   >{item.type === 'replica' ? 'RE' : 'MI'}
                   </ItemReplicaBadge>
-                  <ItemTitle data-test-id={`${testId}-${item.id}-name`}>{item.name}</ItemTitle>
+                  <ItemTitle>{item.name}</ItemTitle>
                 </MainItemInfo>
-                <ItemDescription data-test-id={`${testId}-${item.id}-description`}>{item.description}</ItemDescription>
+                <ItemDescription>{item.description}</ItemDescription>
               </InfoColumn>
-              {item.unseen ? <BadgeColumn data-test-id={`${testId}-${item.id}-badge`}><Badge /></BadgeColumn> : null}
+              {item.unseen ? <BadgeColumn><Badge /></BadgeColumn> : null}
             </ListItem>
           )
         })}
@@ -292,7 +290,6 @@ class NotificationDropdown extends React.Component<Props, State> {
 
     return (
       <Icon
-        data-test-id={`${testId}-button`}
         onMouseDown={() => { this.itemMouseDown = true }}
         onMouseUp={() => { this.itemMouseDown = false }}
         onClick={() => this.handleButtonClick()}
@@ -300,10 +297,9 @@ class NotificationDropdown extends React.Component<Props, State> {
         <BellIcon
           dangerouslySetInnerHTML={{ __html: bellImage(this.props.white ? 'white' : ThemePalette.grayscale[2]) }}
         />
-        {this.props.items.find(i => i.unseen) ? <Badge data-test-id={`${testId}-bell-badge`} isBellBadge /> : null}
+        {this.props.items.find(i => i.unseen) ? <Badge isBellBadge /> : null}
         {isLoading ? (
           <Loading
-            data-test-id={`${testId}-bell-loading`}
             dangerouslySetInnerHTML={{ __html: loadingImage(this.props.white) }}
           />
         ) : null}

src/components/ui/Dropdowns/UserDropdown/UserDropdown.tsx

@@ -193,7 +193,6 @@ class UserDropdown extends React.Component<Props, State> {
         onMouseUp={() => { this.itemMouseDown = false }}
       >
         <Username
-          data-test-id="userDropdown-username"
           to={href || ''}
         >{this.props.user.name}
         </Username>
@@ -260,7 +259,6 @@ class UserDropdown extends React.Component<Props, State> {
           onMouseUp={() => { this.itemMouseDown = false }}
           onClick={() => this.handleButtonClick()}
           white={this.props.white}
-          data-test-id="userDropdown-button"
         />
         {this.renderList()}
       </Wrapper>

src/components/ui/HorizontalLoading/HorizontalLoading.tsx

@@ -35,11 +35,10 @@ const Loader = styled.div<any>`
 `
 type Props = {
   style?: any,
-  'data-test-id'?: string,
 }
 
 const HorizontalLoading = (props: Props) => (
-  <Wrapper style={props.style} data-test-id={props['data-test-id'] || 'horizontalLoading'}>
+  <Wrapper style={props.style}>
     <Loader />
   </Wrapper>
 )

src/components/ui/Lists/FilterList/FilterList.tsx

@@ -238,7 +238,6 @@ class FilterList extends React.Component<Props, State> {
           items={this.props.filterItems}
           dropdownActions={this.props.dropdownActions || []}
           largeDropdownActionItems={this.props.largeDropdownActionItems}
-          data-test-id="filterList-filter"
         />
         <MainList
           loading={this.props.loading}
@@ -253,7 +252,6 @@ class FilterList extends React.Component<Props, State> {
           emptyListExtraMessage={this.props.emptyListExtraMessage}
           emptyListButtonLabel={this.props.emptyListButtonLabel}
           onEmptyListButtonClick={this.props.onEmptyListButtonClick}
-          data-test-id="filterList-mainList"
         />
         {this.renderPagination()}
       </Wrapper>

src/components/ui/Lists/MainList/MainList.tsx

@@ -125,7 +125,7 @@ class MainList extends React.Component<Props> {
   renderLoading() {
     return (
       <Loading>
-        <StatusImage loading data-test-id="mainList-loadingStatus" />
+        <StatusImage loading />
         <LoadingText>Loading ...</LoadingText>
       </Loading>
     )
@@ -147,7 +147,7 @@ class MainList extends React.Component<Props> {
 
     const renderButton = () => {
       if (this.props.emptyListButtonLabel) {
-        return <Button onClick={this.props.onEmptyListButtonClick} data-test-id="mainList-emptyListButton">{this.props.emptyListButtonLabel}</Button>
+        return <Button onClick={this.props.onEmptyListButtonClick}>{this.props.emptyListButtonLabel}</Button>
       }
       return null
     }
@@ -155,7 +155,7 @@ class MainList extends React.Component<Props> {
     return (
       <EmptyList>
         {renderImage()}
-        <EmptyListMessage data-test-id="mainList-emptyMessage">{this.props.emptyListMessage}</EmptyListMessage>
+        <EmptyListMessage>{this.props.emptyListMessage}</EmptyListMessage>
         <EmptyListExtraMessage>{this.props.emptyListExtraMessage}</EmptyListExtraMessage>
         {renderButton()}
       </EmptyList>

src/components/ui/Lists/MainList/test.tsx

@@ -19,7 +19,7 @@ import TW from '@src/utils/TestWrapper'
 import MainList from '.'
 
 const wrap = props => new TW(shallow(
-  
+
   <MainList {...props} />
 ), 'mainList')
 
@@ -32,7 +32,7 @@ let items = [
 
 let selectedItems = [{ ...items[1] }, { ...items[2] }]
 
-let renderItemComponent = options => <div data-test-id={`mainList-item-${options.key}`} {...options}>{options.item.label}</div>
+let renderItemComponent = options => <div {...options}>{options.item.label}</div>
 
 describe('MainList Component', () => {
   it('renders all items', () => {

src/components/ui/Lists/MainListFilter/MainListFilter.tsx

@@ -106,7 +106,6 @@ class MainListFilter extends React.Component<Props> {
         {renderCustomComponent()}
         {this.props.items.map(item => (
           <FilterItem
-            data-test-id={`mainListFilter-filterItem-${item.value}`}
             onClick={() => this.props.onFilterItemClick(item)}
             key={item.value}
             selected={this.props.selectedValue === item.value}
@@ -124,7 +123,7 @@ class MainListFilter extends React.Component<Props> {
 
     return (
       <Selection>
-        <SelectionText data-test-id="mainListFilter-selectionText">
+        <SelectionText>
           {this.props.selectionInfo.selected} of {this.props.selectionInfo.total}&nbsp;
           {this.props.selectionInfo.label}(s) selected
         </SelectionText>
@@ -133,7 +132,6 @@ class MainListFilter extends React.Component<Props> {
             actions={this.props.dropdownActions}
             largeItems={this.props.largeDropdownActionItems}
             style={{ marginLeft: '8px' }}
-            data-test-id="mainListFilter-actionButton"
           />
         ) : null}
       </Selection>
@@ -159,7 +157,6 @@ class MainListFilter extends React.Component<Props> {
           {renderCheckbox()}
           {this.renderFilterGroup()}
           <ReloadButton
-            data-test-id="mainListFilter-reloadButton"
             style={{ marginRight: '16px' }}
             onClick={this.props.onReloadButtonClick}
           />

src/components/ui/Lists/MainListItem/MainListItem.tsx

@@ -171,9 +171,9 @@ class MainListItem extends React.Component<Props> {
     const destinationType = this.props.endpointType(this.props.item.destination_endpoint_id)
     const endpointImages = (
       <EndpointsImages>
-        <EndpointLogos data-test-id="mainListItem-sourceLogo" height={32} endpoint={sourceType as any} />
+        <EndpointLogos height={32} endpoint={sourceType as any} />
         <EndpointImageArrow />
-        <EndpointLogos data-test-id="mainListItem-destLogo" height={32} endpoint={destinationType as any} />
+        <EndpointLogos height={32} endpoint={destinationType as any} />
       </EndpointsImages>
     )
     const status = this.getStatus()

src/components/ui/LoadingButton/LoadingButton.tsx

@@ -47,7 +47,7 @@ class LoadingButton extends React.Component<Props> {
     return (
       // eslint-disable-next-line react/jsx-props-no-spreading
       <ButtonStyled {...this.props} disabled>
-        <span data-test-id="loadingButton-label">{this.props.children}<Loading /></span>
+        <span>{this.props.children}<Loading /></span>
       </ButtonStyled>
     )
   }

src/components/ui/Modal/Modal.tsx

@@ -162,7 +162,7 @@ class NewModal extends React.Component<Props> {
       return null
     }
 
-    return <Title data-test-id="modal-title" wide={contentWidth === '800px'}>{this.props.title}</Title>
+    return <Title wide={contentWidth === '800px'}>{this.props.title}</Title>
   }
 
   render() {

src/components/ui/Modal/test.tsx

@@ -28,7 +28,7 @@ describe('Modal Component', () => {
   })
 
   it('renders children and add resize handler', () => {
-    let wrapper = wrap({ isOpen: true, children: <div data-test-id="modal-child">Modal</div>, title: 'the_title' })
+    let wrapper = wrap({ isOpen: true, children: <div>Modal</div>, title: 'the_title' })
     expect(wrapper.findText('child', true)).toBe('Modal')
     expect(wrapper.find('child').prop('onResizeUpdate')).toBeTruthy()
   })

src/components/ui/Panel/Panel.tsx

@@ -113,14 +113,13 @@ class Panel extends React.Component<Props> {
               selected={this.props.selectedValue
                 ? this.props.selectedValue === item.value : i === 0}
               onClick={() => { this.handleItemClick(item) }}
-              data-test-id={`${TEST_ID}-navItem-${item.value}`}
               disabled={item.disabled}
               title={item.title}
             >{item.label}{item.loading ? <Loading /> : null}
             </NavigationItemDiv>
           ))}
         </Navigation>
-        <Content data-test-id={`${TEST_ID}-content`}>{this.props.content}</Content>
+        <Content>{this.props.content}</Content>
         <ReloadButton onClick={() => { this.props.onReloadClick() }}>
           {this.props.reloadLabel}
         </ReloadButton>

src/components/ui/PasswordValue/PasswordValue.tsx

@@ -66,7 +66,7 @@ class PasswordValue extends React.Component<Props, State> {
   render() {
     return (
       <Wrapper onClick={() => { this.handleShowClick() }} show={this.state.show}>
-        <Value data-test-id="passwordValue-value">{this.state.show ? this.props.value : '•••••••••'}</Value>
+        <Value>{this.state.show ? this.props.value : '•••••••••'}</Value>
         {!this.state.show ? <EyeIcon /> : null}
       </Wrapper>
     )

src/components/ui/PropertiesTable/PropertiesTable.tsx

@@ -68,7 +68,6 @@ const Row = styled.div<any>`
     border-bottom-left-radius: ${ThemeProps.borderRadius};
   }
 `
-const baseId = 'propertiesTable'
 type Props = {
   properties: Field[],
   onChange: (property: Field, value: any) => void,
@@ -95,7 +94,6 @@ class PropertiesTable extends React.Component<Props> {
   renderSwitch(prop: Field, opts: { triState: boolean }) {
     return (
       <Switch
-        data-test-id={`${baseId}-switch-${prop.name}`}
         secondary
         disabled={this.props.disabledLoading}
         triState={opts.triState}
@@ -109,7 +107,6 @@ class PropertiesTable extends React.Component<Props> {
   renderTextInput(prop: Field) {
     return (
       <TextInput
-        data-test-id={`${baseId}-textInput-${prop.name}`}
         width="100%"
         embedded
         type={prop.password ? 'password' : 'text'}
@@ -160,7 +157,6 @@ class PropertiesTable extends React.Component<Props> {
     if (items.length < 10) {
       return (
         <Dropdown
-          data-test-id={`${baseId}-dropdown-${prop.name}`}
           noSelectionMessage="Choose a value"
           dimFirstItem
           // eslint-disable-next-line react/jsx-props-no-spreading

src/components/ui/RadioInput/RadioInput.tsx

@@ -86,10 +86,13 @@ class RadioInput extends React.Component<Props> {
             type="radio"
             {...props}
             disabled={disabled}
-            data-test-id="radioInput-input"
-            onChange={e => { if (this.props.onChange) this.props.onChange(e.target.checked) }}
+            onChange={e => {
+              if (this.props.onChange) {
+                this.props.onChange(e.target.checked)
+              }
+            }}
           />
-          <Text data-test-id="radioInput-label">{this.props.label}</Text>
+          <Text>{this.props.label}</Text>
         </LabelStyled>
       </Wrapper>
     )

src/components/ui/ReloadButton/ReloadButton.tsx

@@ -34,7 +34,6 @@ const GlobalStyle = createGlobalStyle`
 
 type Props = {
   onClick: () => void,
-  'data-test-id'?: string,
   style?: React.CSSProperties
 }
 @observer
@@ -69,7 +68,6 @@ class ReloadButton extends React.Component<Props> {
       <>
         <GlobalStyle />
         <Wrapper
-          data-test-id={this.props['data-test-id'] || 'reloadButton'}
           ref={(div: HTMLElement | null | undefined) => { this.wrapper = div }}
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...this.props}

src/components/ui/SearchButton/SearchButton.tsx

@@ -45,7 +45,6 @@ class SearchButton extends React.Component<Props> {
       // eslint-disable-next-line react/jsx-props-no-spreading
       <Wrapper className={this.props.className} {...this.props}>
         <Icon
-          data-test-id="searchButton-icon"
           dangerouslySetInnerHTML={{
             __html: this.props.useFilterIcon
               ? filterImage(ThemePalette.grayscale[3])

src/components/ui/SearchButton/images/filter.ts

@@ -1,6 +1,6 @@
 const filter = (color: string) => `
 <?xml version="1.0" encoding="UTF-8"?>
-<svg data-test-id="searchButton-filterIcon" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
 
     <desc>Created with Sketch.</desc>

src/components/ui/SearchButton/images/search.ts

@@ -13,7 +13,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 const search = (color: string) => `<?xml version="1.0" encoding="UTF-8"?>
-<svg data-test-id="searchButton-searchIcon" width="14px" height="14px" viewBox="0 0 14 14" version="1.1"
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
 

src/components/ui/SearchButton/test.tsx

@@ -25,7 +25,7 @@ describe('SearchButton Component', () => {
     const getIconId = (w: TestWrapper): string => {
       /* eslint no-underscore-dangle: off */
       const iconSvg = w.find('icon').prop('dangerouslySetInnerHTML').__html
-      const iconSvgId = /data-test-id="(.*?)"/g.exec(iconSvg)
+      const iconSvgId = /data--id="(.*?)"/g.exec(iconSvg)
       return iconSvgId ? iconSvgId[1] : ''
     }
     let wrapper = wrap()

src/components/ui/SearchInput/SearchInput.tsx

@@ -160,9 +160,8 @@ class SearchInput extends React.Component<Props, State> {
           }
           onClick={() => { this.handleSearchButtonClick() }}
           useFilterIcon={this.props.useFilterIcon}
-          data-test-id="searchInput-button"
         />
-        {this.props.loading ? <StatusIconStyled status="RUNNING" data-test-id="searchInput-loading" /> : null}
+        {this.props.loading ? <StatusIconStyled status="RUNNING" /> : null}
       </Wrapper>
     )
   }

src/components/ui/SmallLoading/SmallLoading.tsx

@@ -74,7 +74,6 @@ class SmallLoading extends React.Component<Props> {
             stroke={ThemePalette.grayscale[2]}
           />
           <CircleProgressBar
-            data-test-id="statusImage-progressBar"
             r="13"
             cx="14"
             cy="14"
@@ -94,7 +93,8 @@ class SmallLoading extends React.Component<Props> {
     }
 
     return (
-      <ProgressText>{this.props.loadingProgress ? this.props.loadingProgress.toFixed(0) : 0}%
+      <ProgressText>
+        {this.props.loadingProgress ? this.props.loadingProgress.toFixed(0) : 0}%
       </ProgressText>
     )
   }

src/components/ui/StatusComponents/StatusImage/StatusImage.tsx

@@ -122,7 +122,6 @@ class StatusImage extends React.Component<Props> {
             stroke={ThemePalette.grayscale[2]}
           />
           <CircleProgressBar
-            data-test-id="statusImage-progressBar"
             r="47"
             cx="48"
             cy="48"
@@ -138,7 +137,8 @@ class StatusImage extends React.Component<Props> {
 
   renderProgressText() {
     return (
-      <ProgressText>{this.props.loadingProgress ? this.props.loadingProgress.toFixed(0) : 0}%
+      <ProgressText>
+        {this.props.loadingProgress ? this.props.loadingProgress.toFixed(0) : 0}%
       </ProgressText>
     )
   }
@@ -162,7 +162,6 @@ class StatusImage extends React.Component<Props> {
       <Wrapper size={this.props.size || 96} style={this.props.style}>
         {status !== 'PROGRESS' ? (
           <Image
-            data-test-id="statusImage-image"
             dangerouslySetInnerHTML={{ __html: image }}
             cssStyle={Images[status].style}
             size={this.props.size || 96}

src/components/ui/StatusComponents/StatusPill/StatusPill.tsx

@@ -204,7 +204,6 @@ type Props = {
   alert?: boolean,
   small?: boolean,
   style?: React.CSSProperties
-  'data-test-id'?: string,
 }
 @observer
 class StatusPill extends React.Component<Props> {
@@ -213,7 +212,6 @@ class StatusPill extends React.Component<Props> {
   }
 
   render() {
-    const dataTestId = this.props['data-test-id'] ? this.props['data-test-id'] : `statusPill-${this.props.status || 'null'}`
     let label = this.props.label || this.props.status
     const { status } = this.props
 
@@ -228,7 +226,6 @@ class StatusPill extends React.Component<Props> {
         secondary={this.props.secondary}
         alert={this.props.alert}
         small={this.props.small}
-        data-test-id={dataTestId}
       >
         {label}
       </Wrapper>

src/components/ui/Switch/Switch.tsx

@@ -157,7 +157,6 @@ type Props = {
   big?: boolean,
   checkedLabel?: string,
   uncheckedLabel?: string,
-  'data-test-id'?: string,
   style?: React.CSSProperties,
   required?: boolean,
   highlight?: boolean,
@@ -225,7 +224,6 @@ class Switch extends React.Component<Props, State> {
         onClick={() => { this.handleInputChange() }}
         tabIndex={0}
         onKeyDown={(evt: KeyboardEvent) => { this.handleKeyDown(evt) }}
-        data-test-id={this.props['data-test-id'] || 'switch-input'}
       >
         <InputBackground
           triState={this.props.triState}

src/components/ui/Table/Table.tsx

@@ -106,7 +106,6 @@ type Props = {
   noItemsStyle?: any,
   bodyStyle?: any,
   headerStyle?: any,
-  'data-test-id'?: string,
 }
 @observer
 class Table extends React.Component<Props> {
@@ -126,7 +125,6 @@ class Table extends React.Component<Props> {
             // eslint-disable-next-line react/no-array-index-key
             key={i}
             secondary={this.props.useSecondaryStyle}
-            data-test-id={`table-header-${i}`}
           >{headerItem}
           </HeaderData>
         ))}
@@ -142,7 +140,6 @@ class Table extends React.Component<Props> {
     return (
       <NoItems
         secondary={this.props.useSecondaryStyle}
-        data-test-id="table-noItems"
         style={this.props.noItemsStyle}
       >{this.props.noItemsComponent || this.props.noItemsLabel}
       </NoItems>
@@ -159,7 +156,7 @@ class Table extends React.Component<Props> {
       <Body customStyle={this.props.bodyStyle}>
         {this.props.items.map((row, i) => (
           // eslint-disable-next-line react/no-array-index-key
-          <Row key={i} secondary={this.props.useSecondaryStyle} data-test-id={`table-row-${i}`}>
+          <Row key={i} secondary={this.props.useSecondaryStyle}>
             {
                 row.constructor === Array ? row.map((data, j) => {
                   let columnStyle = ''
@@ -170,7 +167,7 @@ class Table extends React.Component<Props> {
 
                   return (
                     // eslint-disable-next-line react/no-array-index-key
-                    <RowData customStyle={columnStyle} width={dataWidth} key={`${i}-${j}`} data-test-id={`table-data-${i}-${j}`}>
+                    <RowData customStyle={columnStyle} width={dataWidth} key={`${i}-${j}`}>
                       {data}
                     </RowData>
                   )
@@ -185,7 +182,6 @@ class Table extends React.Component<Props> {
   render() {
     return (
       <Wrapper
-        data-test-id={this.props['data-test-id'] || 'table-wrapper'}
         className={this.props.className}
         secondary={this.props.useSecondaryStyle}
       >

src/components/ui/TextArea/TextArea.tsx

@@ -89,7 +89,6 @@ class TextArea extends React.Component<any> {
               this.props.customRef(r)
             }
           }}
-          data-test-id="textArea-input"
         />
         {this.props.required ? <Required /> : null}
       </Wrapper>

src/components/ui/TextInput/TextInput.tsx

@@ -105,7 +105,6 @@ type Props = {
   height?: string,
   style?: React.CSSProperties,
   lineHeight?: string,
-  'data-test-id'?: string,
   required?: boolean,
   disabledLoading?: boolean,
   onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void,
@@ -122,13 +121,12 @@ const TextInput = (props: Props) => {
   const actualDisabled = disabled || disabledLoading
   let input: { focus: () => void }
   return (
-    <Wrapper data-test-id={props['data-test-id'] || 'textInput'} disabledLoading={disabledLoading}>
+    <Wrapper disabledLoading={disabledLoading}>
       <Input
         ref={(ref: HTMLElement) => { input = ref; if (_ref) _ref(ref) }}
         type="text"
         value={value}
         onChange={onChange}
-        data-test-id="textInput-input"
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         onKeyDown={onInputKeyDown}
@@ -136,7 +134,6 @@ const TextInput = (props: Props) => {
       />
       {props.required ? <Required right={embedded ? -24 : -16} /> : null}
       <Close
-        data-test-id="textInput-close"
         show={showClose && value !== '' && value !== undefined}
         onClick={() => {
           input.focus()

src/components/ui/ToggleButtonBar/ToggleButtonBar.tsx

@@ -58,7 +58,6 @@ type Props = {
   selectedValue?: string,
   onChange?: (item: ItemType) => void,
   className?: string,
-  'data-test-id'?: string,
   style?: React.CSSProperties,
 }
 @observer
@@ -84,13 +83,11 @@ class ToggleButtonBar extends React.Component<Props> {
 
     return (
       <Wrapper
-        data-test-id={this.props['data-test-id'] || 'toggleButtonBar-wrapper'}
         className={this.props.className}
         style={this.props.style}
       >
         {this.props.items.map(item => (
           <Item
-            data-test-id={`toggleButtonBar-${item.value}`}
             key={item.value}
             selected={this.props.selectedValue === item.value}
             onClick={() => { this.change(item) }}