Add: A lot of Test-IDs

These will be used in test automation to make tests more stable and resilient to code changes.

src/web/components/bar/compliancebar.jsx

@@ -30,7 +30,7 @@ const ComplianceBar = ({compliance, toolTip}) => {
   const toolTipText = isDefined(toolTip) ? toolTip : title;
 
   return (
-    <ProgressBar title={toolTipText} progress={100} background={background}>
+    <ProgressBar title={toolTipText} progress={100} background={background} data-testid="progress-bar">
       {title}
     </ProgressBar>
   );

src/web/components/bar/compliancestatusbar.jsx

@@ -30,6 +30,7 @@ const ComplianceStatusBar = ({complianceStatus}) => {
       progress={complianceStatus}
       background={Theme.statusRunGreen}
       boxBackground={boxBackground}
+      data-testid="progress-bar"
     >
       {text}
     </ProgressBar>

src/web/components/bar/menubar.jsx

@@ -114,170 +114,175 @@ const MenuBar = ({isLoggedIn}) => {
       <MenuBarPlaceholder />
       <Wrapper>
         <Ul>
-          <Menu to="/dashboard" title={_('Dashboards')} />
+          <Menu to="/dashboard" title={_('Dashboards')} data-testid="menu_dashboard"/>
           {may_op_scans && (
-            <Menu title={_('Scans')}>
+            <Menu title={_('Scans')} data-testid="menu_scans">
               {caps.mayAccess('tasks') && (
-                <MenuEntry title={_('Tasks')} to="tasks" />
+                <MenuEntry title={_('Tasks')} to="tasks" data-testid="menu_tasks"/>
               )}
               {caps.mayAccess('reports') && (
-                <MenuEntry title={_('Reports')} to="reports" />
+                <MenuEntry title={_('Reports')} to="reports" data-testid="menu_reports"/>
               )}
               {caps.mayAccess('results') && (
-                <MenuEntry title={_('Results')} to="results" />
+                <MenuEntry title={_('Results')} to="results" data-testid="menu_results"/>
               )}
               {caps.mayAccess('vulns') && (
-                <MenuEntry title={_('Vulnerabilities')} to="vulnerabilities" />
+                <MenuEntry title={_('Vulnerabilities')} to="vulnerabilities" data-testid="menu_vulnerability"/>
               )}
               {mayOpNotesOverrides && (
                 <MenuSection>
                   {caps.mayAccess('notes') && (
-                    <MenuEntry title={_('Notes')} to="notes" />
+                    <MenuEntry title={_('Notes')} to="notes" data-testid="menu_notes"/>
                   )}
                   {caps.mayAccess('overrides') && (
-                    <MenuEntry title={_('Overrides')} to="overrides" />
+                    <MenuEntry title={_('Overrides')} to="overrides" data-testid="menu_overrides"/>
                   )}
                 </MenuSection>
               )}
             </Menu>
           )}
           {mayOpAssets && (
-            <Menu title={_('Assets')}>
+            <Menu title={_('Assets')} data-testid="menu_assets">
               {caps.mayAccess('assets') && (
-                <MenuEntry title={_('Hosts')} to="hosts" />
+                <MenuEntry title={_('Hosts')} to="hosts" data-testid="menu_hosts"/>
               )}
               {caps.mayAccess('assets') && (
                 <MenuEntry
                   title={_('Operating Systems')}
                   to="operatingsystems"
+                  data-testid="menu_operating_systems"
                 />
               )}
               {caps.mayAccess('tls_certificates') && (
-                <MenuEntry title={_('TLS Certificates')} to="tlscertificates" />
+                <MenuEntry title={_('TLS Certificates')} to="tlscertificates" data-testid="menu_TLS_cert"/>
               )}
             </Menu>
           )}
           {mayOpResilience && (
-            <Menu title={_('Resilience')}>
+            <Menu title={_('Resilience')} data-testid="menu_resilience">
               {caps.mayAccess('tickets') && (
-                <MenuEntry title={_('Remediation Tickets')} to="tickets" />
+                <MenuEntry title={_('Remediation Tickets')} to="tickets" data-testid="menu_remediation_tickets"/>
               )}
               <MenuSection>
                 {caps.mayAccess('policies') && (
-                  <MenuEntry title={_('Compliance Policies')} to="policies" />
+                  <MenuEntry title={_('Compliance Policies')} to="policies" data-testid="menu_compliance_policies"/>
                 )}
                 {caps.mayAccess('audits') && (
-                  <MenuEntry title={_('Compliance Audits')} to="audits" />
+                  <MenuEntry title={_('Compliance Audits')} to="audits" data-testid="menu_compliance_audits"/>
                 )}
                 {caps.featureEnabled('COMPLIANCE_REPORTS') &&
                   caps.mayAccess('audits') && (
                     <MenuEntry
                       title={_('Compliance Audit Reports')}
                       to="auditreports"
+                      data-testid="menu_compliance_reports"
                     />
                   )}
               </MenuSection>
             </Menu>
           )}
           {caps.mayAccess('info') && (
-            <Menu title={_('SecInfo')}>
-              <MenuEntry title={_('NVTs')} to="nvts" />
-              <MenuEntry title={_('CVEs')} to="cves" />
-              <MenuEntry title={_('CPEs')} to="cpes" />
-              <MenuEntry title={_('CERT-Bund Advisories')} to="certbunds" />
-              <MenuEntry title={_('DFN-CERT Advisories')} to="dfncerts" />
+            <Menu title={_('SecInfo')} data-testid="menu_secinfo">
+              <MenuEntry title={_('NVTs')} to="nvts" data-testid="menu_nvts"/>
+              <MenuEntry title={_('CVEs')} to="cves" data-testid="menu_cves"/>
+              <MenuEntry title={_('CPEs')} to="cpes" data-testid="menu_cpes"/>
+              <MenuEntry title={_('CERT-Bund Advisories')} to="certbunds" data-testid="menu_cert_bund_advisories"/>
+              <MenuEntry title={_('DFN-CERT Advisories')} to="dfncerts" data-testid="menu_dfn_cert_advisories"/>
+
             </Menu>
           )}
           {may_op_configuration && (
-            <Menu title={_('Configuration')}>
+            <Menu title={_('Configuration')} data-testid="menu_configuration">
               {caps.mayAccess('targets') && (
-                <MenuEntry title={_('Targets')} to="targets" />
+                <MenuEntry title={_('Targets')} to="targets" data-testid="menu_targets"/>
               )}
               {caps.mayAccess('port_lists') && (
-                <MenuEntry title={_('Port Lists')} to="portlists" />
+                <MenuEntry title={_('Port Lists')} to="portlists" data-testid="menu_portlists"/>
               )}
               {caps.mayAccess('credentials') && (
-                <MenuEntry title={_('Credentials')} to="credentials" />
+                <MenuEntry title={_('Credentials')} to="credentials" data-testid="menu_credentials"/>
               )}
               {caps.mayAccess('configs') && (
-                <MenuEntry title={_('Scan Configs')} to="scanconfigs" />
+                <MenuEntry title={_('Scan Configs')} to="scanconfigs" data-testid="menu_scanconfigs"/>
               )}
               {mayOpAlertsSchedulesReportFormats && (
                 <MenuSection>
                   {caps.mayAccess('alerts') && (
-                    <MenuEntry title={_('Alerts')} to="alerts" />
+                    <MenuEntry title={_('Alerts')} to="alerts" data-testid="menu_alerts"/>
                   )}
                   {caps.mayAccess('schedules') && (
-                    <MenuEntry title={_('Schedules')} to="schedules" />
+                    <MenuEntry title={_('Schedules')} to="schedules" data-testid="menu_schedules"/>
                   )}
                   {caps.mayAccess('report_configs') && (
-                    <MenuEntry title={_('Report Configs')} to="reportconfigs" />
+                    <MenuEntry title={_('Report Configs')} to="reportconfigs" data-testid="menu_report_configs"/>
                   )}
                   {caps.mayAccess('report_formats') && (
-                    <MenuEntry title={_('Report Formats')} to="reportformats" />
+                    <MenuEntry title={_('Report Formats')} to="reportformats" data-testid="menu_report_formats"/>
                   )}
                 </MenuSection>
               )}
               {mayOpScannersFiltersTags && (
                 <MenuSection>
                   {caps.mayAccess('scanners') && (
-                    <MenuEntry title={_('Scanners')} to="scanners" />
+                    <MenuEntry title={_('Scanners')} to="scanners" data-testid="menu_scanners"/>
                   )}
                   {caps.mayAccess('filters') && (
-                    <MenuEntry title={_('Filters')} to="filters" />
+                    <MenuEntry title={_('Filters')} to="filters" data-testid="menu_filters"/>
                   )}
                   {caps.mayAccess('tags') && (
-                    <MenuEntry title={_('Tags')} to="tags" />
+                    <MenuEntry title={_('Tags')} to="tags" data-testid="menu_tags"/>
                   )}
                 </MenuSection>
               )}
             </Menu>
           )}
-          <Menu title={_('Administration')}>
+          <Menu title={_('Administration')} data-testid="menu_administration">
             {caps.mayAccess('users') && (
-              <MenuEntry title={_('Users')} to="users" />
+              <MenuEntry title={_('Users')} to="users" data-testid="menu_users"/>
             )}
             {caps.mayAccess('groups') && (
-              <MenuEntry title={_('Groups')} to="groups" />
+              <MenuEntry title={_('Groups')} to="groups" data-testid="menu_groups"/>
             )}
             {caps.mayAccess('roles') && (
-              <MenuEntry title={_('Roles')} to="roles" />
+              <MenuEntry title={_('Roles')} to="roles" data-testid="menu_roles"/>
             )}
             {caps.mayAccess('permissions') && (
-              <MenuEntry title={_('Permissions')} to="permissions" />
+              <MenuEntry title={_('Permissions')} to="permissions" data-testid="menu_permissions"/>
             )}
             <MenuSection>
               {caps.mayAccess('system_reports') && (
                 <MenuEntry
                   title={_('Performance')}
                   caps="get_system_reports"
                   to="performance"
+                  data-testid="menu_performance"
                 />
               )}
-              <MenuEntry title={_('Trashcan')} to="trashcan" />
+              <MenuEntry title={_('Trashcan')} to="trashcan" data-testid="menu_trashcan"/>
               {caps.mayAccess('feeds') && (
                 <MenuEntry
                   title={_('Feed Status')}
                   to="feedstatus"
                   caps="get_feeds"
+                  data-testid="menu_feed_status"
                 />
               )}
             </MenuSection>
             {caps.mayOp('describe_auth') && (
               <MenuSection>
                 {caps.mayOp('modify_auth') && (
-                  <MenuEntry title={_('LDAP')} to="ldap" />
+                  <MenuEntry title={_('LDAP')} to="ldap" data-testid="menu_ldap"/>
                 )}
                 {caps.mayOp('modify_auth') && (
-                  <MenuEntry title={_('RADIUS')} to="radius" />
+                  <MenuEntry title={_('RADIUS')} to="radius" data-testid="menu_radius"/>
                 )}
               </MenuSection>
             )}
           </Menu>
-          <Menu title={_('Help')}>
-            <MenuHelpEntry title={_('User Manual')} />
-            <MenuEntry title={_('CVSS Calculator')} to="cvsscalculator" />
-            <MenuEntry title={_('About')} to="about" />
+          <Menu title={_('Help')} data-testid="menu_help">
+            <MenuHelpEntry title={_('User Manual')} data-testid="menu_user_manual"/>
+            <MenuEntry title={_('CVSS Calculator')} to="cvsscalculator" data-testid="menu_cvss_calculator"/>
+            <MenuEntry title={_('About')} to="about" data-testid="menu_about"/>
           </Menu>
         </Ul>
       </Wrapper>

src/web/components/bar/severitybar.jsx

@@ -60,7 +60,7 @@ const SeverityBar = ({severity, toolTip}) => {
   const toolTipText = isDefined(toolTip) ? toolTip : title;
 
   return (
-    <ProgressBar title={toolTipText} progress={fill} background={type}>
+    <ProgressBar title={toolTipText} progress={fill} background={type} data-testid="severitybar">
       {text}
     </ProgressBar>
   );

src/web/components/bar/statusbar.jsx

@@ -79,7 +79,7 @@ const StatusBar = ({status = 'Unknown', progress = '0'}) => {
       : getTranslatableTaskStatus(status);
 
   return (
-    <ProgressBar title={title} progress={progress} background={background}>
+    <ProgressBar title={title} progress={progress} background={background} data-testid="statusbar">
       <Span>{text}</Span>
     </ProgressBar>
   );

src/web/components/bar/toolbar.jsx

@@ -18,6 +18,7 @@ const Toolbar = props => {
         align={['space-between', 'start']}
         {...props}
         className="toolbar"
+        data-testid="toolbar"
       />
     </IconSizeProvider>
   );

src/web/components/certinfo/certinfo.jsx

@@ -29,9 +29,9 @@ const CertInfo = ({info}) => {
         <Col width="90%" />
       </colgroup>
       <TableBody>
-        <TableRow>
-          <TableData>{_('Activation')}</TableData>
-          <TableData>
+        <TableRow data-testid="row_activation">
+          <TableData data-testid="label_activation">{_('Activation')}</TableData>
+          <TableData data-testid="value_activation">
             {isDefined(activationTime) ? (
               <DateTime date={activationTime} />
             ) : (
@@ -40,9 +40,9 @@ const CertInfo = ({info}) => {
           </TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('Expiration')}</TableData>
-          <TableData>
+        <TableRow data-testid="row_expiration">
+          <TableData data-testid="label_expiration">{_('Expiration')}</TableData>
+          <TableData data-testid="value_expiration">
             {isDefined(expirationTime) ? (
               <DateTime date={expirationTime} />
             ) : (
@@ -51,14 +51,14 @@ const CertInfo = ({info}) => {
           </TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('MD5 Fingerprint')}</TableData>
-          <TableData>{md5_fingerprint}</TableData>
+        <TableRow data-testid="row_fingerprint">
+          <TableData data-testid="label_expiration">{_('MD5 Fingerprint')}</TableData>
+          <TableData data-testid="value_expiration">{md5_fingerprint}</TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('Issuer')}</TableData>
-          <TableData>{issuer}</TableData>
+        <TableRow data-testid="row_issuer">
+          <TableData data-testid="label_issuer">{_('Issuer')}</TableData>
+          <TableData data-testid="value_issuer">{issuer}</TableData>
         </TableRow>
       </TableBody>
     </InfoTable>

src/web/components/comment/comment.jsx

@@ -17,7 +17,7 @@ const Comment = ({text, children}) => {
   if (!isDefined(text)) {
     return null;
   }
-  return <div className="comment">{text}</div>;
+  return <div className="comment" data-testid="comment">{text}</div>;
 };
 
 Comment.propTypes = {

src/web/components/dashboard/controls.jsx

@@ -119,10 +119,12 @@ export class DashboardControls extends React.Component {
                 : _('Dashboard limit reached')
             }
             onClick={canAdd ? this.handleNewClick : undefined}
+            data-testid="add_new_dashboard"
           />
           <ResetIcon
             title={_('Reset to Defaults')}
             onClick={this.handleResetClick}
+            data-testid="reset_icon"
           />
         </IconDivider>
         {showNewDialog && (
@@ -136,6 +138,7 @@ export class DashboardControls extends React.Component {
             }}
             onClose={this.handleNewDialogClose}
             onSave={this.handleNewDisplay}
+            data-testid="save_dialog_add"
           >
             {({values, onValueChange}) => (
               <FormGroup title={_('Choose Display')} titleSize={3}>
@@ -145,6 +148,7 @@ export class DashboardControls extends React.Component {
                   value={values.displayId}
                   width="auto"
                   onChange={onValueChange}
+                  data-testid="display_id"
                 />
               </FormGroup>
             )}

src/web/components/dialog/button.jsx

@@ -11,7 +11,7 @@ import Button from 'web/components/form/button';
 
 import Theme from 'web/utils/theme';
 
-const DialogButton = styled(({loading, ...props}) => <Button {...props} />)`
+const DialogButton = styled(({loading, ...props}) => <Button data-testid="dialog_button" {...props} />)`
   border: 1px solid ${Theme.mediumGray};
   color: ${props => (props.loading ? 'rgba(0, 0, 0, 0.0)' : Theme.white)};
   background: ${props =>

src/web/components/dialog/closebutton.jsx

@@ -43,6 +43,7 @@ const CloseButton = ({title = _('Close'), size = 'medium', ...props}) => {
 
   return (
     <StyledCloseButton
+      data-testid="close-button"
       $width={width}
       $height={height}
       $lineHeight={height}

src/web/components/dialog/composercontent.jsx

@@ -55,7 +55,7 @@ const ComposerContent = ({
     <FormGroup title={_('Include')} titleSize="3">
       <Divider>
         <CheckBox
-          data-testid="includeNotes"
+          data-testid="includenotes"
           name="includeNotes"
           checked={includeNotes}
           checkedValue={YES_VALUE}
@@ -64,6 +64,7 @@ const ComposerContent = ({
           onChange={onValueChange}
         />
         <CheckBox
+          data-testid="includeoverrides"
           name="includeOverrides"
           checked={includeOverrides}
           checkedValue={YES_VALUE}
@@ -72,6 +73,7 @@ const ComposerContent = ({
           onChange={onValueChange}
         />
         <CheckBox
+          data-testid="includetlscertificates"
           disabled={true}
           name="includeTlsCertificates"
           checked={true}