Add test

apache · Mar 9, 2022 · 2b1922a · 2b1922a
1 parent e90f8fd
commit 2b1922a
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 13 deletions.
diff --git a/...ntend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx b/...ntend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigPane.test.tsx
@@ -22,6 +22,9 @@ import { buildNativeFilter } from 'spec/fixtures/mockNativeFilters';
 import { act, fireEvent, render, screen } from 'spec/helpers/testing-library';
 import FilterConfigPane from './FilterConfigurePane';
 
+const scrollMock = jest.fn();
+Element.prototype.scroll = scrollMock;
+
 const defaultProps = {
   children: jest.fn(),
   getFilterTitle: (id: string) => id,
@@ -56,6 +59,10 @@ function defaultRender(initialState: any = defaultState, props = defaultProps) {
   });
 }
 
+beforeEach(() => {
+  scrollMock.mockClear();
+});
+
 test('renders form', async () => {
   await act(async () => {
     defaultRender();
@@ -65,7 +72,7 @@ test('renders form', async () => {
 
 test('drag and drop', async () => {
   defaultRender();
-  // Drag the state and contry filter above the product filter
+  // Drag the state and country filter above the product filter
   const [countryStateFilter, productFilter] = document.querySelectorAll(
     'div[draggable=true]',
   );
@@ -132,3 +139,41 @@ test('add divider', async () => {
   });
   expect(defaultProps.onAdd).toHaveBeenCalledWith('DIVIDER');
 });
+
+test('filter container should scroll to bottom when adding items', async () => {
+  const state = {
+    dashboardInfo: {
+      metadata: {
+        native_filter_configuration: new Array(35)
+          .fill(0)
+          .map((_, index) =>
+            buildNativeFilter(`NATIVE_FILTER-${index}`, `filter-${index}`, []),
+          ),
+      },
+    },
+    dashboardLayout,
+  };
+  const props = {
+    ...defaultProps,
+    filters: new Array(35).fill(0).map((_, index) => `NATIVE_FILTER-${index}`),
+  };
+
+  defaultRender(state, props);
+
+  const addButton = screen.getByText('Add filters and dividers')!;
+  fireEvent.mouseOver(addButton);
+
+  const addFilterButton = await screen.findByText('Filter');
+  await act(async () => {
+    fireEvent(
+      addFilterButton,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+  });
+
+  const containerElement = screen.getByTestId('filter-title-container');
+  expect(containerElement.scroll).toHaveBeenCalled();
+});
diff --git a/...rontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx b/...rontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
@@ -50,7 +50,7 @@ const TitlesContainer = styled.div`
   border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
 `;
 
-const FiltureConfigurePane: React.FC<Props> = ({
+const FilterConfigurePane: React.FC<Props> = ({
   getFilterTitle,
   onChange,
   onRemove,
@@ -98,4 +98,4 @@ const FiltureConfigurePane: React.FC<Props> = ({
   );
 };
 
-export default FiltureConfigurePane;
+export default FilterConfigurePane;
diff --git a/...ontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx b/...ontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
@@ -194,7 +194,11 @@ const FilterTitleContainer = forwardRef<HTMLDivElement, Props>(
       return items;
     };
 
-    return <Container ref={ref}>{renderFilterGroups()}</Container>;
+    return (
+      <Container data-test="filter-title-container" ref={ref}>
+        {renderFilterGroups()}
+      </Container>
+    );
   },
 );
 

diff --git a/...et-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx b/...et-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
@@ -81,12 +81,10 @@ const FilterTitlePane: React.FC<Props> = ({
         navList.scrollTop = navList.scrollHeight;
       }
 
-      if (filtersContainerRef?.current) {
-        filtersContainerRef.current.scroll({
-          top: filtersContainerRef.current.scrollHeight,
-          behavior: 'smooth',
-        });
-      }
+      filtersContainerRef?.current?.scroll?.({
+        top: filtersContainerRef.current.scrollHeight,
+        behavior: 'smooth',
+      });
     }, 0);
   };
   const menu = (

diff --git a/...frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/...frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
@@ -38,7 +38,7 @@ import ErrorBoundary from 'src/components/ErrorBoundary';
 import { StyledModal } from 'src/components/Modal';
 import { testWithId } from 'src/utils/testUtils';
 import { useFilterConfigMap, useFilterConfiguration } from '../state';
-import FiltureConfigurePane from './FilterConfigurePane';
+import FilterConfigurePane from './FilterConfigurePane';
 import FiltersConfigForm, {
   FilterPanels,
 } from './FiltersConfigForm/FiltersConfigForm';
@@ -522,7 +522,7 @@ export function FiltersConfigModal({
             onValuesChange={onValuesChange}
             layout="vertical"
           >
-            <FiltureConfigurePane
+            <FilterConfigurePane
               erroredFilters={erroredFilters}
               onRemove={handleRemoveItem}
               onAdd={addFilter}
@@ -535,7 +535,7 @@ export function FiltersConfigModal({
               filters={orderedFilters}
             >
               {(id: string) => getForm(id)}
-            </FiltureConfigurePane>
+            </FilterConfigurePane>
           </StyledForm>
         </StyledModalBody>
       </ErrorBoundary>