feat: add tests for filters component (#5632)

frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.test.tsx

@@ -39,21 +39,3 @@ test('should not render projects filters when less than two project', async () =
 
     expect(screen.queryByText('Projects')).not.toBeInTheDocument();
 });
-
-test('should keep filters order when adding a new filter', async () => {
-    render(<FeatureToggleFilters onChange={() => {}} state={{}} />);
-
-    const valuesElement = await screen.findByText('Tags');
-    expect(valuesElement).toBeInTheDocument();
-    valuesElement.click();
-
-    const stateElement = await screen.findByText('State');
-    expect(stateElement).toBeInTheDocument();
-
-    stateElement.click();
-
-    const filterItems = screen.getAllByTestId(FILTER_ITEM);
-    const filterTexts = filterItems.map((item) => item.textContent);
-
-    expect(filterTexts).toEqual(['Tags', 'State']);
-});

frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx

@@ -6,7 +6,7 @@ import {
     FilterItemParamHolder,
     Filters,
     IFilterItem,
-} from 'component/filter/Filters';
+} from 'component/filter/Filters/Filters';
 
 interface IFeatureToggleFiltersProps {
     state: FilterItemParamHolder;

frontend/src/component/filter/Filters/Filters.test.tsx

@@ -0,0 +1,83 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { FILTER_ITEM } from 'utils/testIds';
+import { Filters, IFilterItem } from './Filters';
+
+test('shoulder render all available filters', async () => {
+    const availableFilters: IFilterItem[] = [
+        {
+            label: 'Filter1',
+            options: [],
+            filterKey: 'irrelevantKey',
+            singularOperators: ['IRRELEVANT'],
+            pluralOperators: ['IRRELEVANT'],
+        },
+        {
+            label: 'Filter2',
+            options: [],
+            filterKey: 'irrelevantKey',
+            singularOperators: ['IRRELEVANT'],
+            pluralOperators: ['IRRELEVANT'],
+        },
+        {
+            label: 'Filter3',
+            options: [],
+            filterKey: 'irrelevantKey',
+            singularOperators: ['IRRELEVANT'],
+            pluralOperators: ['IRRELEVANT'],
+        },
+    ];
+
+    render(
+        <Filters
+            availableFilters={availableFilters}
+            onChange={() => {}}
+            state={{}}
+        />,
+    );
+
+    await screen.findByText('Filter1');
+    await screen.findByText('Filter2');
+    await screen.findByText('Filter3');
+});
+
+test('should keep filters order when adding a new filter', async () => {
+    const availableFilters: IFilterItem[] = [
+        {
+            label: 'State',
+            options: [],
+            filterKey: 'irrelevantKey',
+            singularOperators: ['IRRELEVANT'],
+            pluralOperators: ['IRRELEVANT'],
+        },
+        {
+            label: 'Tags',
+            options: [],
+            filterKey: 'irrelevantKey',
+            singularOperators: ['IRRELEVANT'],
+            pluralOperators: ['IRRELEVANT'],
+        },
+    ];
+
+    render(
+        <Filters
+            availableFilters={availableFilters}
+            onChange={() => {}}
+            state={{}}
+        />,
+    );
+
+    const valuesElement = await screen.findByText('Tags');
+    expect(valuesElement).toBeInTheDocument();
+    valuesElement.click();
+
+    const stateElement = await screen.findByText('State');
+    expect(stateElement).toBeInTheDocument();
+
+    stateElement.click();
+
+    const filterItems = screen.getAllByTestId(FILTER_ITEM);
+    const filterTexts = filterItems.map((item) => item.textContent);
+
+    expect(filterTexts).toEqual(['Tags', 'State']);
+});

frontend/src/component/filter/Filters/Filters.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState, VFC } from 'react';
 import { Box, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import AddFilterButton from './AddFilterButton';
+import AddFilterButton from '../AddFilterButton';
 import { FilterDateItem } from 'component/common/FilterDateItem/FilterDateItem';
-import { FilterItem, FilterItemParams } from './FilterItem/FilterItem';
+import { FilterItem, FilterItemParams } from '../FilterItem/FilterItem';
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',

frontend/src/component/project/Project/ExperimentalProjectFeatures/ExperimentalProjectTable/ProjectOverviewFilters.tsx

@@ -4,7 +4,7 @@ import {
     FilterItemParamHolder,
     Filters,
     IFilterItem,
-} from 'component/filter/Filters';
+} from 'component/filter/Filters/Filters';
 
 interface IProjectOverviewFilters {
     state: FilterItemParamHolder;