Jest table filter tests on the overview pages

assets/js/components/ClustersList.test.jsx

@@ -2,14 +2,140 @@ import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import 'intersection-observer';
 import '@testing-library/jest-dom';
+import { clusterFactory } from '@lib/test-utils/factories';
+import { filterTable, clearFilter } from '@components/Table/Table.test';
+import { renderWithRouter, withState } from '@lib/test-utils';
 
 import ClustersList from './ClustersList';
-import { renderWithRouter, withDefaultState } from '../lib/test-utils';
 
 describe('ClustersList component', () => {
-  describe('query string filtering behavior', () => {
+  describe('filtering', () => {
+    const cleanInitialState = {
+      hostsList: {
+        hosts: [],
+      },
+      clustersList: {
+        clusters: [],
+      },
+      sapSystemsList: {
+        sapSystems: [],
+        applicationInstances: [],
+        databaseInstances: [],
+      },
+    };
+
+    const scenarios = [
+      {
+        filter: 'Health',
+        options: ['unknown', 'passing', 'warning', 'critical'],
+        state: {
+          ...cleanInitialState,
+          clustersList: {
+            clusters: [].concat(
+              clusterFactory.buildList(2, { health: 'unknown' }),
+              clusterFactory.buildList(2, { health: 'passing' }),
+              clusterFactory.buildList(2, { health: 'warning' }),
+              clusterFactory.buildList(2, { health: 'critical' })
+            ),
+          },
+        },
+        expectedRows: 2,
+      },
+      {
+        filter: 'Name',
+        options: ['cluster1', 'cluster2'],
+        state: {
+          ...cleanInitialState,
+          clustersList: {
+            clusters: [].concat(
+              clusterFactory.buildList(4),
+              clusterFactory.buildList(1, { name: 'cluster1' }),
+              clusterFactory.buildList(1, { name: 'cluster2' })
+            ),
+          },
+        },
+        expectedRows: 1,
+      },
+      {
+        filter: 'SID',
+        options: ['PRD', 'QAS'],
+        state: {
+          ...cleanInitialState,
+          clustersList: {
+            clusters: [].concat(
+              clusterFactory.buildList(4),
+              clusterFactory.buildList(2, { sid: 'PRD' }),
+              clusterFactory.buildList(2, { sid: 'QAS' })
+            ),
+          },
+        },
+        expectedRows: 2,
+      },
+      {
+        filter: 'Type',
+        options: ['hana_scale_up'],
+        state: {
+          ...cleanInitialState,
+          clustersList: {
+            clusters: [].concat(
+              clusterFactory.buildList(2, { type: 'unknown' }),
+              clusterFactory.buildList(2, { type: 'hana_scale_up' })
+            ),
+          },
+        },
+        expectedRows: 2,
+      },
+      {
+        filter: 'Tags',
+        options: ['Tag1', 'Tag2'],
+        state: {
+          ...cleanInitialState,
+          clustersList: {
+            clusters: [].concat(
+              clusterFactory.buildList(2),
+              clusterFactory.buildList(2, { tags: [{ value: 'Tag1' }] }),
+              clusterFactory.buildList(2, { tags: [{ value: 'Tag2' }] })
+            ),
+          },
+        },
+        expectedRows: 2,
+      },
+    ];
+
+    it.each(scenarios)(
+      'should filter the table content by $filter filter',
+      ({ filter, options, state, expectedRows }) => {
+        const [StatefulClustersList] = withState(<ClustersList />, state);
+
+        renderWithRouter(StatefulClustersList);
+
+        options.forEach((option) => {
+          filterTable(filter, option);
+
+          const table = screen.getByRole('table');
+          expect(table.querySelectorAll('tbody > tr')).toHaveLength(
+            expectedRows
+          );
+
+          clearFilter(filter);
+        });
+      }
+    );
+
     it('should put the filters values in the query string when filters are selected', () => {
-      const [StatefulClustersList] = withDefaultState(<ClustersList />);
+      const clusters = clusterFactory.buildList(1, {
+        tags: [{ value: 'Tag1' }],
+      });
+      const state = {
+        ...cleanInitialState,
+        clustersList: {
+          clusters,
+        },
+      };
+
+      const { health, name, sid, type } = clusters[0];
+
+      const [StatefulClustersList] = withState(<ClustersList />, state);
       renderWithRouter(StatefulClustersList);
 
       ['Health', 'Name', 'SID', 'Type', 'Tags'].forEach((filter) => {
@@ -23,7 +149,7 @@ describe('ClustersList component', () => {
       });
 
       expect(window.location.search).toEqual(
-        '?health=unknown&name=drbd_cluster&sid=HDD&type=unknown&tags=tag1'
+        `?health=${health}&name=${name}&sid=${sid}&type=${type}&tags=Tag1`
       );
     });
   });

assets/js/components/DatabasesOverview/DatabasesOverview.test.jsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import 'intersection-observer';
+import '@testing-library/jest-dom';
+import { databaseFactory } from '@lib/test-utils/factories';
+import { renderWithRouter, withState } from '@lib/test-utils';
+import { filterTable, clearFilter } from '@components/Table/Table.test';
+
+import DatabasesOverview from './DatabasesOverview';
+
+describe('DatabasesOverview component', () => {
+  describe('filtering', () => {
+    const cleanInitialState = {
+      hostsList: {
+        hosts: [],
+      },
+      clustersList: {
+        clusters: [],
+      },
+      databasesList: {
+        databases: [],
+        databaseInstances: [],
+      },
+    };
+
+    const scenarios = [
+      {
+        filter: 'Health',
+        options: ['unknown', 'passing', 'warning', 'critical'],
+        state: {
+          ...cleanInitialState,
+          databasesList: {
+            databases: [].concat(
+              databaseFactory.buildList(2, { health: 'unknown' }),
+              databaseFactory.buildList(2, { health: 'passing' }),
+              databaseFactory.buildList(2, { health: 'warning' }),
+              databaseFactory.buildList(2, { health: 'critical' })
+            ),
+            databaseInstances: [],
+          },
+        },
+        expectedRows: 2,
+      },
+      {
+        filter: 'SID',
+        options: ['PRD', 'QAS'],
+        state: {
+          ...cleanInitialState,
+          databasesList: {
+            databases: [].concat(
+              databaseFactory.buildList(4),
+              databaseFactory.buildList(2, { sid: 'PRD' }),
+              databaseFactory.buildList(2, { sid: 'QAS' })
+            ),
+            databaseInstances: [],
+          },
+        },
+        expectedRows: 2,
+      },
+      {
+        filter: 'Tags',
+        options: ['Tag1', 'Tag2'],
+        state: {
+          ...cleanInitialState,
+          databasesList: {
+            databases: [].concat(
+              databaseFactory.buildList(2),
+              databaseFactory.buildList(2, { tags: [{ value: 'Tag1' }] }),
+              databaseFactory.buildList(2, { tags: [{ value: 'Tag2' }] })
+            ),
+            databaseInstances: [],
+          },
+        },
+        expectedRows: 2,
+      },
+    ];
+
+    it.each(scenarios)(
+      'should filter the table content by $filter filter',
+      ({ filter, options, state, expectedRows }) => {
+        const [StatefulDatbaseList] = withState(<DatabasesOverview />, state);
+
+        renderWithRouter(StatefulDatbaseList);
+
+        options.forEach((option) => {
+          filterTable(filter, option);
+
+          const table = screen.getByRole('table');
+          expect(
+            table.querySelectorAll('tbody > tr.cursor-pointer')
+          ).toHaveLength(expectedRows);
+
+          clearFilter(filter);
+        });
+      }
+    );
+
+    it('should put the filters values in the query string when filters are selected', () => {
+      const databases = databaseFactory.buildList(1, {
+        tags: [{ value: 'Tag1' }],
+      });
+
+      const state = {
+        ...cleanInitialState,
+        databasesList: {
+          databases,
+          databaseInstances: [],
+        },
+      };
+
+      const { health, sid, tags } = databases[0];
+
+      const [StatefulDatabasesOverview] = withState(
+        <DatabasesOverview />,
+        state
+      );
+      renderWithRouter(StatefulDatabasesOverview);
+
+      ['Health', 'SID', 'Tags'].forEach((filter) => {
+        fireEvent.click(screen.getByTestId(`filter-${filter}`));
+
+        fireEvent.click(
+          screen
+            .getByTestId(`filter-${filter}-options`)
+            .querySelector('li > div > span').firstChild
+        );
+      });
+
+      expect(window.location.search).toEqual(
+        `?health=${health}&sid=${sid}&tags=${tags[0].value}`
+      );
+    });
+  });
+});