fix audit components and tests

greenbone · Sep 24, 2024 · 89efc29 · 89efc29
1 parent a6b9506
commit 89efc29
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 41 deletions.
diff --git a/src/web/components/form/textarea.jsx b/src/web/components/form/textarea.jsx
@@ -49,6 +49,7 @@ TextArea.propTypes = {
   disabled: PropTypes.bool,
   errorContent: PropTypes.toString,
   minRows: PropTypes.numberOrNumberString,
+  maxRows: PropTypes.numberOrNumberString,
   name: PropTypes.string,
   placeholder: PropTypes.string,
   title: PropTypes.string,

diff --git a/src/web/components/label/__tests__/severityclass.jsx b/src/web/components/label/__tests__/severityclass.jsx
@@ -13,7 +13,7 @@ describe('SeverityClassLabel tests', () => {
   test('should render', () => {
     const {element} = render(<SeverityClassLabel.High />);
 
-    expect(element).toMatchSnapshot();
+    expect(element).toBeVisible();
   });
 
   test('should render HighLabel', () => {

diff --git a/src/web/components/label/compliancestate.jsx b/src/web/components/label/compliancestate.jsx
@@ -25,25 +25,34 @@ const Label = styled.div`
 const ComplianceLabel = ({text, color, ...props}) => {
   const [_] = useTranslation();
   return (
-  <Label
-    {...props}
-    $backgroundColor={Theme[color]}
-    $borderColor={Theme[color]}
-  >
-    {_(text)}
-  </Label>
-  )
+    <Label
+      {...props}
+      $backgroundColor={Theme[color]}
+      $borderColor={Theme[color]}
+      data-testid={`compliance-state-${text}`}
+    >
+      {_(text)}
+    </Label>
+  );
 };
 
 ComplianceLabel.propTypes = {
   text: PropTypes.string,
   color: PropTypes.string,
 };
 
-const YesLabel = props => <ComplianceLabel {...props} text="Yes" color="complianceYes" />;
-const NoLabel = props => <ComplianceLabel {...props} text='No' color='complianceNo' />;
-const IncompleteLabel = props => <ComplianceLabel {...props} text='Incomplete' color='complianceIncomplete' />;
-const UndefinedLabel = props => <ComplianceLabel {...props} text='Undefined' color='complianceUndefined' />;
+const YesLabel = props => (
+  <ComplianceLabel {...props} text="Yes" color="complianceYes" />
+);
+const NoLabel = props => (
+  <ComplianceLabel {...props} text="No" color="complianceNo" />
+);
+const IncompleteLabel = props => (
+  <ComplianceLabel {...props} text="Incomplete" color="complianceIncomplete" />
+);
+const UndefinedLabel = props => (
+  <ComplianceLabel {...props} text="Undefined" color="complianceUndefined" />
+);
 
 export const ComplianceStateLabels = {
   Yes: YesLabel,
@@ -52,4 +61,4 @@ export const ComplianceStateLabels = {
   Undefined: UndefinedLabel,
 };
 
-export default ComplianceStateLabels;
+export default ComplianceStateLabels;
diff --git a/src/web/components/label/severityclass.jsx b/src/web/components/label/severityclass.jsx
@@ -29,39 +29,64 @@ const Label = styledExcludeProps(styled.div, [
 
 const HighLabel = props => {
   return (
-    <Label {...props} backgroundColor="#C83814" borderColor="#C83814">
+    <Label
+      {...props}
+      backgroundColor="#C83814"
+      borderColor="#C83814"
+      data-testid="severity-class-High"
+    >
       {_('High')}
     </Label>
   );
 };
 
 const MediumLabel = props => {
   return (
-    <Label {...props} backgroundColor="#F0A519" borderColor="#F0A519">
+    <Label
+      {...props}
+      backgroundColor="#F0A519"
+      borderColor="#F0A519"
+      data-testid="severity-class-Medium"
+    >
       {_('Medium')}
     </Label>
   );
 };
 
 const LowLabel = props => {
   return (
-    <Label {...props} backgroundColor="#4F91C7" borderColor="#4F91C7">
+    <Label
+      {...props}
+      backgroundColor="#4F91C7"
+      borderColor="#4F91C7"
+      data-testid="severity-class-Low"
+    >
       {_('Low')}
     </Label>
   );
 };
 
 const LogLabel = props => {
   return (
-    <Label {...props} backgroundColor="#191919" borderColor="#191919">
+    <Label
+      {...props}
+      backgroundColor="#191919"
+      borderColor="#191919"
+      data-testid="severity-class-Log"
+    >
       {_('Log')}
     </Label>
   );
 };
 
 const FalsePositiveLabel = props => {
   return (
-    <Label {...props} backgroundColor="#191919" borderColor="#191919">
+    <Label
+      {...props}
+      backgroundColor="#191919"
+      borderColor="#191919"
+      data-testid="severity-class-False-Positive"
+    >
       {_('False Pos.')}
     </Label>
   );

diff --git a/src/web/components/powerfilter/compliancelevelsgroup.jsx b/src/web/components/powerfilter/compliancelevelsgroup.jsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import useTranslation from 'web/hooks/useTranslation';
@@ -26,7 +25,6 @@ const ComplianceLevelsFilterGroup = ({
   isResult = false,
 }) => {
   const [_] = useTranslation();
-
   const handleComplianceChange = (value, level) => {
     const filterName = isResult
       ? 'compliance_levels'
@@ -60,36 +58,35 @@ const ComplianceLevelsFilterGroup = ({
     complianceLevels = '';
   }
   return (
-    <FormGroup title={_('Compliance')}>
+    <FormGroup
+      title={_('Compliance')}
+      data-testid="compliance-levels-filter-group"
+    >
       <IconDivider>
         <Checkbox
           checked={complianceLevels.includes('y')}
           name="y"
           onChange={handleComplianceChange}
-        >
-          <ComplianceStateLabels.Yes />
-        </Checkbox>
+        />
+        <ComplianceStateLabels.Yes />
         <Checkbox
           checked={complianceLevels.includes('n')}
           name="n"
           onChange={handleComplianceChange}
-        >
-          <ComplianceStateLabels.No />
-        </Checkbox>
+        />
+        <ComplianceStateLabels.No />
         <Checkbox
           checked={complianceLevels.includes('i')}
           name="i"
           onChange={handleComplianceChange}
-        >
-          <ComplianceStateLabels.Incomplete />
-        </Checkbox>
+        />
+        <ComplianceStateLabels.Incomplete />
         <Checkbox
           checked={complianceLevels.includes('u')}
           name="u"
           onChange={handleComplianceChange}
-        >
-          <ComplianceStateLabels.Undefined />
-        </Checkbox>
+        />
+        <ComplianceStateLabels.Undefined />
       </IconDivider>
     </FormGroup>
   );
@@ -102,4 +99,4 @@ ComplianceLevelsFilterGroup.propTypes = {
   onRemove: PropTypes.func.isRequired,
 };
 
-export default ComplianceLevelsFilterGroup;
+export default ComplianceLevelsFilterGroup;
diff --git a/src/web/components/powerfilter/severitylevelsgroup.jsx b/src/web/components/powerfilter/severitylevelsgroup.jsx
@@ -51,7 +51,10 @@ const SeverityLevelsFilterGroup = ({filter, onChange, onRemove}) => {
     levels = '';
   }
   return (
-    <FormGroup title={_('Severity (Class)')}>
+    <FormGroup
+      title={_('Severity (Class)')}
+      data-testid="severity-levels-filter-group"
+    >
       <IconDivider>
         <Checkbox
           checked={levels.includes('h')}

diff --git a/src/web/pages/reports/__tests__/auditfilterdialog.jsx b/src/web/pages/reports/__tests__/auditfilterdialog.jsx
@@ -10,7 +10,7 @@ import Capabilities from 'gmp/capabilities/capabilities';
 
 import Filter from 'gmp/models/filter';
 
-import {rendererWith} from 'web/utils/testing';
+import {rendererWith, within} from 'web/utils/testing';
 
 import AuditReportFilter from 'web/pages/reports/auditfilterdialog';
 
@@ -37,7 +37,7 @@ describe('Filter Dialog for Audit report', () => {
       capabilities: caps,
     });
 
-    const {baseElement, getByLabelText} = render(
+    const {baseElement, getByLabelText, getByTestId} = render(
       <AuditReportFilter
         filter={filter}
         delta={false}
@@ -54,6 +54,23 @@ describe('Filter Dialog for Audit report', () => {
 
     expect(formGroups[0]).toHaveTextContent('Filter');
     expect(formGroups[1]).toHaveTextContent('Compliance');
+
+    const filterGroup = getByTestId('compliance-levels-filter-group');
+    const {queryByTestId, queryAllByRole} = within(filterGroup);
+
+    const yesCheckbox = queryByTestId('compliance-state-Yes');
+    const noCheckbox = queryByTestId('compliance-state-No');
+    const incompleteCheckbox = queryByTestId('compliance-state-Incomplete');
+    const undefinedCheckbox = queryByTestId('compliance-state-Undefined');
+
+    expect(yesCheckbox).toHaveTextContent('Yes');
+    expect(noCheckbox).toHaveTextContent('No');
+    expect(incompleteCheckbox).toHaveTextContent('Incomplete');
+    expect(undefinedCheckbox).toHaveTextContent('Undefined');
+
+    const checkboxes = queryAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(4);
+
     expect(formGroups[2]).toHaveTextContent('QoD');
     expect(formGroups[3]).toHaveTextContent('From Task (name)');
     expect(formGroups[4]).toHaveTextContent('First result');

diff --git a/src/web/pages/reports/__tests__/detailsfilterdialog.jsx b/src/web/pages/reports/__tests__/detailsfilterdialog.jsx
@@ -10,7 +10,7 @@ import Capabilities from 'gmp/capabilities/capabilities';
 
 import Filter from 'gmp/models/filter';
 
-import {rendererWith} from 'web/utils/testing';
+import {rendererWith, within} from 'web/utils/testing';
 
 import FilterDialog from 'web/pages/reports/detailsfilterdialog';
 
@@ -37,7 +37,7 @@ describe('Details Filter Dialog for Audit report', () => {
       capabilities: caps,
     });
 
-    const {baseElement, getByText, getByLabelText} = render(
+    const {baseElement, getByText, getByLabelText, getByTestId} = render(
       <FilterDialog
         audit={true}
         filter={filter}
@@ -58,6 +58,22 @@ describe('Details Filter Dialog for Audit report', () => {
     expect(formGroups[0]).toHaveTextContent('Filter');
     expect(formGroups[1]).toHaveTextContent('QoD');
     expect(formGroups[2]).toHaveTextContent('Compliance');
+
+    const filterGroup = getByTestId('compliance-levels-filter-group');
+    const {queryAllByRole} = within(filterGroup);
+
+    const yesCheckbox = getByTestId('compliance-state-Yes');
+    const noCheckbox = getByTestId('compliance-state-No');
+    const incompleteCheckbox = getByTestId('compliance-state-Incomplete');
+    const undefinedCheckbox = getByTestId('compliance-state-Undefined');
+
+    expect(yesCheckbox).toHaveTextContent('Yes');
+    expect(noCheckbox).toHaveTextContent('No');
+    expect(incompleteCheckbox).toHaveTextContent('Incomplete');
+    expect(undefinedCheckbox).toHaveTextContent('Undefined');
+
+    const checkboxes = queryAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(4);
     expect(formGroups[3]).toHaveTextContent('Solution Type');
     expect(formGroups[4]).toHaveTextContent('Vulnerability');
     expect(formGroups[5]).toHaveTextContent('Host (IP)');
@@ -94,7 +110,7 @@ describe('Details Filter Dialog for Audit report', () => {
       capabilities: caps,
     });
 
-    const {getByText, baseElement, getByLabelText} = render(
+    const {getByText, baseElement, getByLabelText, getByTestId} = render(
       <FilterDialog
         audit={false}
         filter={filter}
@@ -117,6 +133,26 @@ describe('Details Filter Dialog for Audit report', () => {
     expect(formGroups[1]).toHaveTextContent('Apply Overrides');
     expect(formGroups[2]).toHaveTextContent('QoD');
     expect(formGroups[3]).toHaveTextContent('Severity (Class)');
+
+    const filterGroup = getByTestId('severity-levels-filter-group');
+
+    const {queryAllByRole} = within(filterGroup);
+
+    const highCheckbox = getByTestId('severity-class-High');
+    const mediumCheckbox = getByTestId('severity-class-Medium');
+    const lowCheckbox = getByTestId('severity-class-Low');
+    const logCheckbox = getByTestId('severity-class-Log');
+    const falsePositiveCheckbox = getByTestId('severity-class-False-Positive');
+
+    expect(highCheckbox).toHaveTextContent('High');
+    expect(mediumCheckbox).toHaveTextContent('Medium');
+    expect(lowCheckbox).toHaveTextContent('Low');
+    expect(logCheckbox).toHaveTextContent('Log');
+    expect(falsePositiveCheckbox).toHaveTextContent('False Pos.');
+
+    const checkboxes = queryAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(5);
+
     expect(formGroups[4]).toHaveTextContent('Severity');
     expect(formGroups[5]).toHaveTextContent('Solution Type');
     expect(formGroups[6]).toHaveTextContent('Vulnerability');