test: filter reset functionality in CoursesTab component

Author: bra-i-am

src/studio-home/data/slice.js

@@ -3,7 +3,7 @@ import { createSlice } from '@reduxjs/toolkit';
 
 import { RequestStatus } from '../../data/constants';
 
-const studioHomeCoursesRequestParamsDefault = {
+export const studioHomeCoursesRequestParamsDefault = {
   currentPage: 1,
   search: '',
   order: 'display_name',

src/studio-home/tabs-section/courses-tab/index.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { initializeMockApp } from '@edx/frontend-platform';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 
@@ -10,6 +10,7 @@ import { studioHomeMock } from '../../__mocks__';
 import { initialState } from '../../factories/mockApiResponses';
 
 import CoursesTab from '.';
+import { studioHomeCoursesRequestParamsDefault } from '../../data/slice';
 
 const onClickNewCourse = jest.fn();
 const isLoading = false;
@@ -31,22 +32,25 @@ const renderComponent = (overrideProps = {}, studioHomeState = {}) => {
   // Initialize the store with the custom initial state
   const store = initializeStore(customInitialState);
 
-  return render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en" messages={{}}>
-        <CoursesTab
-          coursesDataItems={studioHomeMock.courses}
-          showNewCourseContainer={showNewCourseContainer}
-          onClickNewCourse={onClickNewCourse}
-          isLoading={isLoading}
-          isFailed={isFailed}
-          numPages={numPages}
-          coursesCount={coursesCount}
-          {...overrideProps}
-        />
-      </IntlProvider>
-    </AppProvider>,
-  );
+  return {
+    ...render(
+      <AppProvider store={store}>
+        <IntlProvider locale="en" messages={{}}>
+          <CoursesTab
+            coursesDataItems={studioHomeMock.courses}
+            showNewCourseContainer={showNewCourseContainer}
+            onClickNewCourse={onClickNewCourse}
+            isLoading={isLoading}
+            isFailed={isFailed}
+            numPages={numPages}
+            coursesCount={coursesCount}
+            {...overrideProps}
+          />
+        </IntlProvider>
+      </AppProvider>,
+    ),
+    store,
+  };
 };
 
 describe('<CoursesTab />', () => {
@@ -98,7 +102,7 @@ describe('<CoursesTab />', () => {
   });
 
   it('should render CollapsibleStateWithAction when courseCreatorStatus is true', () => {
-    const props = { isShowProcessing: true, isEnabledPagination: false };
+    const props = { isEnabledPagination: false };
     const customStoreData = {
       studioHomeData: {
         inProcessCourseActions: [],
@@ -109,4 +113,17 @@ describe('<CoursesTab />', () => {
     const collapsibleStateWithAction = screen.queryByTestId('collapsible-state-with-action');
     expect(collapsibleStateWithAction).toBeInTheDocument();
   });
+
+  it('should reset filters when in pressed the button to clean them', () => {
+    const props = { isLoading: false, coursesDataItems: [] };
+    const customStoreData = { studioHomeCoursesRequestParams: { isFiltered: true } };
+    const { store } = renderComponent(props, customStoreData);
+    const cleanFiltersButton = screen.queryByTestId('clean-filters');
+    expect(cleanFiltersButton).toBeInTheDocument();
+
+    fireEvent.click(cleanFiltersButton!);
+
+    const state = store.getState();
+    expect(state.studioHome.studioHomeCoursesRequestParams).toStrictEqual(studioHomeCoursesRequestParamsDefault);
+  });
 });

src/studio-home/tabs-section/courses-tab/index.tsx

@@ -89,7 +89,7 @@ const CoursesTab: React.FC<Props> = ({
   };
 
   const handleCleanFilters = () => {
-    dispatch(resetStudioHomeCoursesCustomParams);
+    dispatch(resetStudioHomeCoursesCustomParams());
     dispatch(fetchStudioHomeData(locationValue, false, { page: 1, order: 'display_name' }));
   };
 
@@ -180,7 +180,7 @@ const CoursesTab: React.FC<Props> = ({
             <p data-testid="courses-not-found-alert">
               {intl.formatMessage(messages.coursesTabCourseNotFoundAlertMessage)}
             </p>
-            <Button variant="primary" onClick={handleCleanFilters}>
+            <Button data-testid="clean-filters" variant="primary" onClick={handleCleanFilters}>
               {intl.formatMessage(messages.coursesTabCourseNotFoundAlertCleanFiltersButton)}
             </Button>
           </Alert>