24.10 test ids

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="compliance-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="compliance-status-bar"
     >
       {text}
     </ProgressBar>

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,8 +79,8 @@ const StatusBar = ({status = 'Unknown', progress = '0'}) => {
       : getTranslatableTaskStatus(status);
 
   return (
-    <ProgressBar title={title} progress={progress} background={background}>
-      <Span>{text}</Span>
+    <ProgressBar title={title} progress={progress} background={background} data-testid={`progress-bar-${status.toLowerCase()}`}>
+      <Span data-testid="statusbar-text">{text}</Span>
     </ProgressBar>
   );
 };

src/web/components/certinfo/certinfo.jsx

@@ -24,15 +24,15 @@
 const CertInfo = ({info}) => {
   const {activationTime, expirationTime, issuer, md5_fingerprint} = info;
   return (
-    <InfoTable>
+    <InfoTable data-testid="cert-info-table">
       <colgroup>
         <Col width="10%" />
         <Col width="90%" />
       </colgroup>
       <TableBody>
-        <TableRow>
-          <TableData>{_('Activation')}</TableData>
-          <TableData>
+        <TableRow data-testid="cert-info-activation-row">
+          <TableData data-testid="cert-info-activation-label">{_('Activation')}</TableData>
+          <TableData data-testid="cert-info-activation-data">
             {isDefined(activationTime) ? (
               <DateTime date={activationTime} />
             ) : (
@@ -41,9 +41,9 @@
           </TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('Expiration')}</TableData>
-          <TableData>
+        <TableRow data-testid="cert-info-expiration-row">
+          <TableData data-testid="cert-info-expiration-label">{_('Expiration')}</TableData>
+          <TableData data-testid="cert-info-expiration-data">
             {isDefined(expirationTime) ? (
               <DateTime date={expirationTime} />
             ) : (
@@ -52,14 +52,14 @@
           </TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('MD5 Fingerprint')}</TableData>
-          <TableData>{md5_fingerprint}</TableData>
+        <TableRow data-testid="cert-info-md5-row">
+          <TableData data-testid="cert-info-md5-label">{_('MD5 Fingerprint')}</TableData>
+          <TableData data-testid="cert-info-md5-data">{md5_fingerprint}</TableData>
         </TableRow>
 
-        <TableRow>
-          <TableData>{_('Issuer')}</TableData>
-          <TableData>{issuer}</TableData>
+        <TableRow data-testid="cert-info-issuer-row">
+          <TableData data-testid="cert-info-issuer-label">{_('Issuer')}</TableData>
+          <TableData data-testid="cert-info-issuer-data">{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,6 +119,7 @@ export class DashboardControls extends React.Component {
                 : _('Dashboard limit reached')
             }
             onClick={canAdd ? this.handleNewClick : undefined}
+            data-testid="add-dashboard-display"
           />
           <ResetIcon
             title={_('Reset to Defaults')}

src/web/components/dialog/closebutton.jsx

@@ -48,6 +48,7 @@ const CloseButton = ({title = _('Close'), size = 'medium', ...props}) => {
       $lineHeight={height}
       title={title}
       {...props}
+      data-testid="close-button"
     >
       ×{/* Javascript unicode: \u00D7 */}
     </StyledCloseButton>

src/web/components/dialog/composercontent.jsx

@@ -64,6 +64,7 @@
           onChange={onValueChange}
         />
         <CheckBox
+          data-testid="include-overrides"
           name="includeOverrides"
           checked={includeOverrides}
           checkedValue={YES_VALUE}
@@ -72,6 +73,7 @@
           onChange={onValueChange}
         />
         <CheckBox
+          data-testid="include-tls-cert"
           disabled={true}
           name="includeTlsCertificates"
           checked={true}

src/web/components/dialog/confirmationdialog.jsx

@@ -31,6 +31,7 @@ const ConfirmationDialog = ({
 
   return (
     <Dialog
+      data-testid="confirmation-dialog"
       width={width}
       onClose={onClose}
       title={title}

src/web/components/dialog/error.jsx

@@ -50,7 +50,7 @@ const DialogError = ({error, onCloseClick}) => {
       >
         {error}
       </span>
-      <DialogCloseButton onClick={onCloseClick} title={_('Close')} />
+      <DialogCloseButton onClick={onCloseClick} title={_('Close')} data-testid="error-close-button"/>
     </StyledLayout>
   );
 };

src/web/components/form/DatePicker.jsx

@@ -31,6 +31,7 @@ const DatePickerComponent = (
 
   return (
     <DatePickerInput
+      data-testid="datepicker-input"
       disabled={disabled}
       locale={getLocale()}
       value={value.toDate()}

src/web/components/form/button.jsx

@@ -30,6 +30,7 @@ const Button = ({
   });
   return (
     <OpenSightButton
+      data-testid="opensight-button"
       {...other}
       disabled={disabled}
       name={name}

src/web/components/form/checkbox.jsx

@@ -50,6 +50,7 @@ const Checkbox = ({
   );
   return (
     <OpenSightCheckbox
+      data-testid="opensight-checkbox"
       {...props}
       label={title}
       title={toolTipTitle}

src/web/components/form/filefield.jsx

@@ -23,6 +23,7 @@ const FileField = ({disabled, grow, name, title, onChange, ...props}) => {
 
   return (
     <FileInput
+      data-testid="file-input"
       {...props}
       styles={{root: {flexGrow: grow}}}
       label={title}

src/web/components/form/multiselect.jsx

@@ -75,6 +75,7 @@ const MultiSelect = ({
   if (isLoading) {
     return (
       <TextInput
+        data-testid="text-input"
         styles={{root: {flexGrow: grow}}}
         placeholder={_('Loading...')}
         readOnly={true}
@@ -84,6 +85,7 @@ const MultiSelect = ({
   }
   return (
     <StyledMultiSelect
+      data-testid="multi-select"
       {...props}
       styles={{root: {flexGrow: grow}}}
       disabled={disabled || !items?.length}

src/web/components/form/numberfield.jsx

@@ -81,6 +81,7 @@ const NumberField = forwardRef(
 
     return (
       <StyledNumberInput
+        data-testid="number-input"
         {...props}
         ref={ref}
         allowDecimal={type === 'float'}

src/web/components/form/passwordfield.jsx

@@ -29,6 +29,7 @@ const PasswordField = ({
   const handleChange = useValueChange({onChange, name, disabled});
   return (
     <PasswordInput
+      data-testid="password-input"
       {...props}
       error={isDefined(errorContent) && `${errorContent}`}
       styles={{root: {flexGrow: grow}}}

src/web/components/form/textfield.jsx

@@ -29,6 +29,7 @@ const TextField = ({
   const handleChange = useValueChange({onChange, disabled, name});
   return (
     <Input
+      data-testid="form-input"
       {...props}
       styles={{root: {flexGrow: grow}}}
       autoComplete={autoComplete}

src/web/components/form/yesnoradio.jsx

@@ -33,6 +33,7 @@ const YesNoRadio = ({
       convert={convert}
       onChange={onChange}
       disabled={disabled}
+      data-testid="radio-yes"
     />
     <Radio
       title={_('No')}
@@ -42,6 +43,7 @@ const YesNoRadio = ({
       convert={convert}
       onChange={onChange}
       disabled={disabled}
+      data-testid="radio-no"
     />
   </Row>
 );

src/web/components/icon/XIcon.jsx

@@ -10,7 +10,7 @@ import {X as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const XIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="X-icon"/>
 ));
 
 export default XIcon;

src/web/components/icon/addtoassetsicon.jsx

@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/add_to_assets.svg';
 
-const AddToAssetsIcon = withSvgIcon()(Icon);
+const AddToAssetsIconComponent = withSvgIcon()(Icon);
+
+const AddToAssetsIcon = props => (
+  <AddToAssetsIconComponent {...props} data-testid="add-to-assets-icon" />
+);
 
 export default AddToAssetsIcon;
 

src/web/components/icon/alerticon.jsx

@@ -9,7 +9,7 @@ import {Megaphone as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const AlertIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="alert-icon"/>
 ));
 
 export default AlertIcon;

src/web/components/icon/alterableicon.jsx

@@ -9,7 +9,7 @@ import {FilePenLine as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const AlterableIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="alterable-icon"/>
 ));
 
 export default AlterableIcon;

src/web/components/icon/arrowicon.jsx

@@ -44,7 +44,7 @@ const ArrowIcon = ({down = false, isLoading = false, size, ...props}) => {
     icon = <Loading />;
   }
   return (
-    <Styled $height={height} $width={width} $lineHeight={height} {...props}>
+    <Styled $height={height} $width={width} $lineHeight={height} {...props} data-testid="arrow-icon">
       {icon}
     </Styled>
   );

src/web/components/icon/auditicon.jsx

@@ -10,7 +10,7 @@ import {ClipboardCheck as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const AuditIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="audit-icon"/>
 ));
 
 export default AuditIcon;

src/web/components/icon/calendaricon.jsx

@@ -9,7 +9,7 @@ import {Calendar as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const CalendarIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="calendar-icon"/>
 ));
 
 export default CalendarIcon;

src/web/components/icon/certbundadvicon.jsx

@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/cert_bund_adv.svg';
 
-const CertBundAdvIcon = withSvgIcon()(Icon);
+const CertBundAdvIconComponent = withSvgIcon()(Icon);
+
+const CertBundAdvIcon = props => (
+  <CertBundAdvIconComponent {...props} data-testid="cert-bund-adv-icon" />
+);
 
 export default CertBundAdvIcon;
 

src/web/components/icon/cloneicon.jsx

@@ -7,7 +7,9 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/clone.svg';
 
-const CloneIcon = withSvgIcon()(Icon);
+const CloneIconComponent = withSvgIcon()(Icon);
+
+const CloneIcon = props => <CloneIconComponent {...props} data-testid="clone-icon" />;
 
 export default CloneIcon;
 

src/web/components/icon/cpeicon.jsx

@@ -18,7 +18,7 @@ const CpeIcon = ({name, ...props}) => {
 
   const icon = isDefined(cpe) ? cpe.icon : 'cpe/other.svg';
 
-  return <Img {...props} width="16px" src={icon} />;
+  return <Img {...props} width="16px" src={icon} data-testid="cpe-icon"/>;
 };
 
 CpeIcon.propTypes = {

src/web/components/icon/cpelogoicon.jsx

@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/cpe.svg';
 
-const CpeLogoIcon = withSvgIcon()(Icon);
+const CpeLogoIconComponent = withSvgIcon()(Icon);
+
+const CpeLogoIcon = props => (
+  <CpeLogoIconComponent {...props} data-testid="cpe-logo-icon" />
+);
 
 export default CpeLogoIcon;
 

src/web/components/icon/credentialicon.jsx

@@ -10,7 +10,7 @@ import {KeyRound as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const CredentialIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="credential-icon"/>
 ));
 
 export default CredentialIcon;

src/web/components/icon/cveicon.jsx

@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/cve.svg';
 
-const CveIcon = withSvgIcon()(Icon);
+const CveIconComponent = withSvgIcon()(Icon);
+
+const CveIcon = props => (
+  <CveIconComponent {...props} data-testid="cve-icon" />
+);
 
 export default CveIcon;
 

src/web/components/icon/cvssicon.jsx

@@ -7,7 +7,11 @@ import withSvgIcon from './withSvgIcon';
 
 import Icon from './svg/cvss_calculator.svg';
 
-const CvssIcon = withSvgIcon()(Icon);
+const CvssIconComponent = withSvgIcon()(Icon);
+
+const CvssIcon = props => (
+  <CvssIconComponent {...props} data-testid="cvss-icon" />
+);
 
 export default CvssIcon;
 

src/web/components/icon/dashboardicon.jsx

@@ -10,7 +10,7 @@ import {BarChart3 as Icon} from 'lucide-react';
 import IconWithStrokeWidth from 'web/components/icon/IconWithStrokeWidth';
 
 const DashboardIcon = withSvgIcon()(props => (
-  <IconWithStrokeWidth IconComponent={Icon} {...props} />
+  <IconWithStrokeWidth IconComponent={Icon} {...props} data-testid="dashboard-icon"/>
 ));
 
 export default DashboardIcon;