add testing

elastic · Sep 22, 2022 · 41f4ace · 41f4ace
1 parent 694176b
commit 41f4ace
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 2 deletions.
diff --git a/.../triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.test.tsx b/.../triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.test.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { get } from 'lodash';
-import { render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { AlertConsumers } from '@kbn/rule-data-utils';
 import { EcsFieldsResponse } from '@kbn/rule-registry-plugin/common/search_strategy';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
@@ -24,6 +24,7 @@ import { useFetchAlerts } from './hooks/use_fetch_alerts';
 import { useFetchBrowserFieldCapabilities } from './hooks/use_fetch_browser_fields_capabilities';
 import { DefaultSort } from './hooks';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import { BrowserFields } from '@kbn/rule-registry-plugin/common';
 
 jest.mock('./hooks/use_fetch_alerts');
 jest.mock('./hooks/use_fetch_browser_fields_capabilities');
@@ -81,10 +82,12 @@ const alerts = [
   {
     [AlertsField.name]: ['one'],
     [AlertsField.reason]: ['two'],
+    [AlertsField.uuid]: ['1047d115-670d-469e-af7a-86fdd2b2f814'],
   },
   {
     [AlertsField.name]: ['three'],
     [AlertsField.reason]: ['four'],
+    [AlertsField.uuid]: ['bf5f6d63-5afd-48e0-baf6-f28c2b68db46'],
   },
 ] as unknown as EcsFieldsResponse[];
 
@@ -245,6 +248,100 @@ describe('AlertsTableState', () => {
     });
   });
 
+  describe('field browser', () => {
+    const browserFields: BrowserFields = {
+      kibana: {
+        fields: {
+          [AlertsField.uuid]: {
+            category: 'kibana',
+            name: AlertsField.uuid,
+          },
+          [AlertsField.name]: {
+            category: 'kibana',
+            name: AlertsField.name,
+          },
+          [AlertsField.reason]: {
+            category: 'kibana',
+            name: AlertsField.reason,
+          },
+        },
+      },
+    };
+
+    beforeEach(() => {
+      hookUseFetchBrowserFieldCapabilities.mockClear();
+      hookUseFetchBrowserFieldCapabilities.mockImplementation(() => [true, browserFields]);
+    });
+
+    it('should show field browser', () => {
+      const { queryByTestId } = render(<AlertsTableWithLocale {...tableProps} />);
+      expect(queryByTestId('show-field-browser')).not.toBe(null);
+    });
+
+    it('should remove an already existing element when selected', async () => {
+      const { getByTestId, queryByTestId } = render(<AlertsTableWithLocale {...tableProps} />);
+
+      expect(queryByTestId(`dataGridHeaderCell-${AlertsField.name}`)).not.toBe(null);
+      fireEvent.click(getByTestId('show-field-browser'));
+      const fieldCheckbox = getByTestId(`field-${AlertsField.name}-checkbox`);
+      fireEvent.click(fieldCheckbox);
+      fireEvent.click(getByTestId('close'));
+
+      await waitFor(() => {
+        expect(queryByTestId(`dataGridHeaderCell-${AlertsField.name}`)).toBe(null);
+      });
+    });
+
+    it('should restore a default element that has been removed previously', async () => {
+      storageMock.mockClear();
+      storageMock.mockImplementation(() => ({
+        get: () => {
+          return {
+            columns: [{ displayAsText: 'Reason', id: 'kibana.alert.reason', schema: undefined }],
+            sort: [],
+            visibleColumns: ['kibana.alert.reason'],
+          };
+        },
+        set: jest.fn(),
+      }));
+      const { getByTestId, queryByTestId } = render(<AlertsTableWithLocale {...tableProps} />);
+
+      expect(queryByTestId(`dataGridHeaderCell-${AlertsField.name}`)).toBe(null);
+      fireEvent.click(getByTestId('show-field-browser'));
+      const fieldCheckbox = getByTestId(`field-${AlertsField.name}-checkbox`);
+      fireEvent.click(fieldCheckbox);
+      fireEvent.click(getByTestId('close'));
+
+      await waitFor(() => {
+        expect(queryByTestId(`dataGridHeaderCell-${AlertsField.name}`)).not.toBe(null);
+        expect(
+          getByTestId('dataGridHeader')
+            .querySelectorAll('.euiDataGridHeaderCell__content')[1]
+            .getAttribute('title')
+        ).toBe('Name');
+      });
+    });
+
+    it('should insert a new field as column when its not a default one', async () => {
+      const { getByTestId, queryByTestId } = render(<AlertsTableWithLocale {...tableProps} />);
+
+      expect(queryByTestId(`dataGridHeaderCell-${AlertsField.uuid}`)).toBe(null);
+      fireEvent.click(getByTestId('show-field-browser'));
+      const fieldCheckbox = getByTestId(`field-${AlertsField.uuid}-checkbox`);
+      fireEvent.click(fieldCheckbox);
+      fireEvent.click(getByTestId('close'));
+
+      await waitFor(() => {
+        expect(queryByTestId(`dataGridHeaderCell-${AlertsField.uuid}`)).not.toBe(null);
+        expect(
+          getByTestId('dataGridHeader')
+            .querySelectorAll('.euiDataGridHeaderCell__content')[2]
+            .getAttribute('title')
+        ).toBe(AlertsField.uuid);
+      });
+    });
+  });
+
   describe('empty state', () => {
     beforeEach(() => {
       refecthMock.mockClear();

diff --git a/...rs_actions_ui/public/application/sections/alerts_table/hooks/use_columns/toggle_column.ts b/...rs_actions_ui/public/application/sections/alerts_table/hooks/use_columns/toggle_column.ts
@@ -55,7 +55,6 @@ export const toggleColumn = ({
   const currentIndex = columnIds.indexOf(columnId);
   const isVisible = currentIndex >= 0;
 
-  // if the column is shown, remove it
   if (isVisible) {
     return remove({ columnIds, index: currentIndex });
   }