fix: sorting indicators in editconfigfamilydialog header

greenbone · Jan 6, 2025 · 3299b8f · 3299b8f
1 parent 3115308
commit 3299b8f
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 113 deletions.
diff --git a/src/web/pages/scanconfigs/__tests__/editconfigfamilydialog.jsx b/src/web/pages/scanconfigs/__tests__/editconfigfamilydialog.jsx
@@ -12,7 +12,15 @@ import {
   getTableBody,
   getTableHeader,
 } from 'web/components/testing';
-import {rendererWith, fireEvent} from 'web/utils/testing';
+import {
+  rendererWith,
+  fireEvent,
+  prettyDOM,
+  within,
+  wait,
+  userEvent,
+  screen,
+} from 'web/utils/testing';
 
 import EditConfigFamilyDialog from '../editconfigfamilydialog';
 
@@ -229,102 +237,72 @@ describe('EditConfigFamilyDialog component tests', () => {
       />,
     );
 
-    const editButtons = getAllByTestId('svg-icon');
+    const editButtons = getAllByTestId('edit-icon');
     fireEvent.click(editButtons[0]);
 
     expect(handleOpenEditNvtDetailsDialog).toHaveBeenCalledWith(nvt.id);
   });
 
-  test('should sort table', async () => {
-    const handleClose = testing.fn();
-    const handleSave = testing.fn();
-    const handleOpenEditNvtDetailsDialog = testing.fn();
-
-    const newSelected = {
-      1234: 0,
-      5678: 1,
-      2345: 0,
-    };
-
-    const {render} = rendererWith({capabilities: true});
-    render(
-      <EditConfigFamilyDialog
-        configId="c1"
-        configName="foo"
-        configNameLabel="Config"
-        familyName="family"
-        isLoadingFamily={false}
-        nvts={[nvt, nvt2, nvt3]}
-        selected={newSelected}
-        title="Foo title"
-        onClose={handleClose}
-        onEditNvtDetailsClick={handleOpenEditNvtDetailsDialog}
-        onSave={handleSave}
-      />,
-    );
-    const getOidColumn = row => row.querySelectorAll('td')[1];
-
-    const dialog = getDialog();
-    const tableHeader = getTableHeader(dialog);
-    const tableBody = getTableBody(dialog);
-    let rows = tableBody.querySelectorAll('tr');
-    const columns = tableHeader.querySelectorAll('a');
-
-    expect(getOidColumn(rows[0])).toHaveTextContent('1234');
-    expect(getOidColumn(rows[1])).toHaveTextContent('5678');
-    expect(getOidColumn(rows[2])).toHaveTextContent('2345');
-
-    // sort by name column desc
-    expect(columns[0]).toHaveTextContent('Name');
-    await clickElement(columns[0]);
-
-    rows = tableBody.querySelectorAll('tr');
-
-    expect(getOidColumn(rows[0])).toHaveTextContent('2345');
-    expect(getOidColumn(rows[1])).toHaveTextContent('5678');
-    expect(getOidColumn(rows[2])).toHaveTextContent('1234');
-
-    // sort by oid column
-    expect(columns[1]).toHaveTextContent('OID');
-    await clickElement(columns[1]);
-
-    rows = tableBody.querySelectorAll('tr');
-
-    expect(getOidColumn(rows[0])).toHaveTextContent('1234');
-    expect(getOidColumn(rows[1])).toHaveTextContent('2345');
-    expect(getOidColumn(rows[2])).toHaveTextContent('5678');
-
-    // sort by severity column
-    expect(columns[2]).toHaveTextContent('Severity');
-    await clickElement(columns[2]);
-
-    rows = tableBody.querySelectorAll('tr');
-
-    expect(getOidColumn(rows[0])).toHaveTextContent('2345');
-    expect(getOidColumn(rows[1])).toHaveTextContent('1234');
-    expect(getOidColumn(rows[2])).toHaveTextContent('5678');
-
-    // sort by timeout column
-    expect(columns[3]).toHaveTextContent('Timeout');
-    await clickElement(columns[3]);
-
-    rows = tableBody.querySelectorAll('tr');
-
-    expect(getOidColumn(rows[0])).toHaveTextContent('1234');
-    expect(getOidColumn(rows[1])).toHaveTextContent('5678');
-    expect(getOidColumn(rows[2])).toHaveTextContent('2345');
-
-    // sort by selected column
-    expect(columns[4]).toHaveTextContent('Selected');
-    fireEvent.click(columns[4]);
-
-    rows = tableBody.querySelectorAll('tr');
-
-    expect(getOidColumn(rows[0])).toHaveTextContent('5678');
-    expect(getOidColumn(rows[1])).toHaveTextContent('1234');
-    expect(getOidColumn(rows[2])).toHaveTextContent('2345');
-  });
-
+  test.each`
+    columnIndex | columnName    | initialOrder                | sortedOrder
+    ${0}        | ${'Name'}     | ${['1234', '5678', '2345']} | ${['2345', '5678', '1234']}
+    ${1}        | ${'OID'}      | ${['1234', '5678', '2345']} | ${['1234', '2345', '5678']}
+    ${2}        | ${'Severity'} | ${['1234', '5678', '2345']} | ${['2345', '1234', '5678']}
+    ${3}        | ${'Timeout'}  | ${['1234', '5678', '2345']} | ${['1234', '5678', '2345']}
+    ${5}        | ${'Selected'} | ${['1234', '5678', '2345']} | ${['5678', '1234', '2345']}
+  `(
+    'should sort table by $columnName column',
+    async ({columnName, initialOrder, sortedOrder}) => {
+      const handleClose = testing.fn();
+      const handleSave = testing.fn();
+      const handleOpenEditNvtDetailsDialog = testing.fn();
+
+      const newSelected = {
+        1234: 0,
+        5678: 1,
+        2345: 0,
+      };
+
+      const {render} = rendererWith({capabilities: true});
+      render(
+        <EditConfigFamilyDialog
+          configId="c1"
+          configName="foo"
+          configNameLabel="Config"
+          familyName="family"
+          isLoadingFamily={false}
+          nvts={[nvt, nvt2, nvt3]}
+          selected={newSelected}
+          title="Foo title"
+          onClose={handleClose}
+          onEditNvtDetailsClick={handleOpenEditNvtDetailsDialog}
+          onSave={handleSave}
+        />,
+      );
+
+      const getOidColumn = row => row.querySelectorAll('td')[1];
+
+      const dialog = getDialog();
+      const tableHeader = getTableHeader(dialog);
+      const tableBody = getTableBody(dialog);
+      let rows = tableBody.querySelectorAll('tr');
+      const columns = within(tableHeader).getAllByRole('columnheader');
+      expect(columns).toHaveLength(7);
+
+      initialOrder.forEach((oid, index) => {
+        expect(getOidColumn(rows[index])).toHaveTextContent(oid);
+      });
+
+      const columnHeader = screen.getByText(columnName);
+      fireEvent.click(columnHeader);
+
+      rows = tableBody.querySelectorAll('tr');
+
+      sortedOrder.forEach((oid, index) => {
+        expect(getOidColumn(rows[index])).toHaveTextContent(oid);
+      });
+    },
+  );
   test('should allow selecting an NVT', () => {
     const handleClose = testing.fn();
     const handleSave = testing.fn();

diff --git a/src/web/pages/scanconfigs/editconfigfamilydialog.jsx b/src/web/pages/scanconfigs/editconfigfamilydialog.jsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
-
 import {YES_VALUE, NO_VALUE} from 'gmp/parser';
 import {isDefined} from 'gmp/utils/identity';
 import {isEmpty} from 'gmp/utils/string';
@@ -127,6 +125,20 @@ const sortNvts = (sortBy, sortReverse, selected = {}, nvts = []) => {
   return [...nvts].sort(compare);
 };
 
+const renderTableHead = (sortBy, sortDir, handleSortChange, columns) => {
+  return columns.map(({sortBy: columnSortBy, title, align}) => (
+    <TableHead
+      key={columnSortBy || title}
+      align={align}
+      currentSortBy={sortBy}
+      currentSortDir={sortDir}
+      sortBy={columnSortBy}
+      title={title}
+      onSortChange={handleSortChange}
+    />
+  ));
+};
+
 const EditScanConfigFamilyDialog = ({
   configId,
   configName,
@@ -181,6 +193,12 @@ const EditScanConfigFamilyDialog = ({
     {sortBy: EDIT_CONFIG_COLUMNS_SORT.severity, title: _('Severity')},
     {sortBy: EDIT_CONFIG_COLUMNS_SORT.timeout, title: _('Timeout')},
     {title: _('Prefs')},
+    {
+      sortBy: EDIT_CONFIG_COLUMNS_SORT.selected,
+      title: _('Selected'),
+      align: 'center',
+    },
+    {title: _('Actions'), align: 'center'},
   ];
 
   return (
@@ -204,25 +222,7 @@ const EditScanConfigFamilyDialog = ({
         <Table>
           <TableHeader>
             <TableRow>
-              {tableHeaders.map(({sortBy, title}) => (
-                <TableHead
-                  key={title}
-                  currentSortBy={sortBy}
-                  currentSortDir={sortDir}
-                  sortBy={sortBy}
-                  title={title}
-                  onSortChange={handleSortChange}
-                />
-              ))}
-              <TableHead
-                align="center"
-                currentSortBy={sortBy}
-                currentSortDir={sortDir}
-                sortBy={EDIT_CONFIG_COLUMNS_SORT.selected}
-                title={_('Selected')}
-                onSortChange={handleSortChange}
-              />
-              <TableHead align="center">{_('Actions')}</TableHead>
+              {renderTableHead(sortBy, sortDir, handleSortChange, tableHeaders)}
             </TableRow>
           </TableHeader>
           <TableBody>