test: unit test for courses tab component

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

@@ -107,7 +107,7 @@ const CoursesTab = ({
         description={(
           <Row className="m-0 align-items-center">
             <Icon src={Error} className="text-danger-500 mr-1" />
-            <span>{intl.formatMessage(messages.courseTabErrorMessage)}</span>
+            <span data-testid="error-failed-message">{intl.formatMessage(messages.courseTabErrorMessage)}</span>
           </Row>
         )}
       />
@@ -184,7 +184,7 @@ const CoursesTab = ({
             <Alert.Heading>
               {intl.formatMessage(messages.coursesTabCourseNotFoundAlertTitle)}
             </Alert.Heading>
-            <p>
+            <p data-testid="courses-not-found-alert">
               {intl.formatMessage(messages.coursesTabCourseNotFoundAlertMessage)}
             </p>
             <Button variant="primary" onClick={handleCleanFilters}>

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../../store';
+import { studioHomeMock } from '../../__mocks__';
+import { initialState } from '../../factories/mockApiResponses';
+
+import CoursesTab from '.';
+
+const mockDispatch = jest.fn();
+
+const onClickNewCourse = jest.fn();
+const isShowProcessing = false;
+const isLoading = false;
+const isFailed = false;
+const numPages = 1;
+const coursesCount = studioHomeMock.courses.length;
+const isEnabledPagination = true;
+const showNewCourseContainer = true;
+
+const renderComponent = (overrideProps = {}, studioHomeState = {}) => {
+  // Generate a custom initial state based on studioHomeCoursesRequestParams
+  const customInitialState = {
+    ...initialState,
+    studioHome: {
+      ...initialState.studioHome,
+      ...studioHomeState,
+    },
+  };
+
+  // Initialize the store with the custom initial state
+  const store = initializeStore(customInitialState);
+
+  return render(
+    <AppProvider store={store}>
+      <IntlProvider locale="en" messages={{}}>
+        <CoursesTab
+          dispatch={mockDispatch}
+          coursesDataItems={studioHomeMock.courses}
+          showNewCourseContainer={showNewCourseContainer}
+          onClickNewCourse={onClickNewCourse}
+          isShowProcessing={isShowProcessing}
+          isLoading={isLoading}
+          isFailed={isFailed}
+          numPages={numPages}
+          coursesCount={coursesCount}
+          isEnabledPagination={isEnabledPagination}
+          {...overrideProps}
+        />
+      </IntlProvider>
+    </AppProvider>,
+  );
+};
+
+describe('<CoursesTab />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+  });
+
+  it('should render correctly', async () => {
+    renderComponent();
+    const coursesPaginationInfo = screen.getByTestId('pagination-info');
+    const coursesTypesMenu = screen.getByTestId('dropdown-toggle-course-type-menu');
+    const coursesOrderMenu = screen.getByTestId('dropdown-toggle-courses-order-menu');
+    const coursesFilterSearchInput = screen.getByTestId('input-filter-courses-search');
+    expect(coursesPaginationInfo).toBeInTheDocument();
+    expect(coursesTypesMenu).toBeInTheDocument();
+    expect(coursesOrderMenu).toBeInTheDocument();
+    expect(coursesFilterSearchInput).toBeInTheDocument();
+  });
+
+  it('should not render pagination and filter elements when isEnabledPagination is false', () => {
+    renderComponent({ isEnabledPagination: false });
+    const coursesPaginationInfo = screen.queryByTestId('pagination-info');
+    const coursesTypesMenu = screen.queryByTestId('dropdown-toggle-course-type-menu');
+    const coursesOrderMenu = screen.queryByTestId('dropdown-toggle-courses-order-menu');
+    const coursesFilterSearchInput = screen.queryByTestId('input-filter-courses-search');
+    expect(coursesPaginationInfo).not.toBeInTheDocument();
+    expect(coursesTypesMenu).not.toBeInTheDocument();
+    expect(coursesOrderMenu).not.toBeInTheDocument();
+    expect(coursesFilterSearchInput).not.toBeInTheDocument();
+  });
+
+  it('should render loading spinner when isLoading is true and isFiltered is false', () => {
+    const props = { isLoading: true, coursesDataItems: [] };
+    const customStoreData = { studioHomeCoursesRequestParams: { currentPage: 1, isFiltered: true } };
+    renderComponent(props, customStoreData);
+    const loadingSpinner = screen.getByRole('status');
+    expect(loadingSpinner).toBeInTheDocument();
+  });
+
+  it('should render an error message when something went wrong', () => {
+    const props = { isFailed: true };
+    const customStoreData = { studioHomeCoursesRequestParams: { currentPage: 1, isFiltered: false } };
+    renderComponent(props, customStoreData);
+    screen.debug();
+    const alertErrorFailed = screen.queryByTestId('error-failed-message');
+    expect(alertErrorFailed).toBeInTheDocument();
+  });
+
+  it('should render an alert message when there is not courses found', () => {
+    const props = { isLoading: false, coursesDataItems: [] };
+    const customStoreData = { studioHomeCoursesRequestParams: { currentPage: 1, isFiltered: true } };
+    renderComponent(props, customStoreData);
+    screen.debug();
+    const alertCoursesNotFound = screen.queryByTestId('courses-not-found-alert');
+    expect(alertCoursesNotFound).toBeInTheDocument();
+  });
+});