@openedx/frontend-app-learner-dashboard 1.0.0-alpha.5 → 1.0.0-alpha.6

package/src/containers/CourseFilterControls/hooks.test.js

@@ -1,125 +0,0 @@
-import { useToggle } from '@openedx/paragon';
-
-import { MockUseState } from '@src/testUtils';
-
-import track from '@src/tracking';
-import { reduxHooks } from '@src/hooks';
-
-import * as hooks from './hooks';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useAddFilter: jest.fn(),
-    useRemoveFilter: jest.fn(),
-  },
-}));
-
-jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@openedx/paragon'),
-  useToggle: jest.fn().mockImplementation((val) => [
-    val,
-    jest.fn().mockName('useToggle.setTrue'),
-    jest.fn().mockName('useToggle.setFalse'),
-  ]),
-}));
-
-jest.mock('@src/tracking', () => ({
-  filter: {
-    filterClicked: jest.fn(),
-    filterOptionSelected: jest.fn(),
-  },
-}));
-
-const state = new MockUseState(hooks);
-
-describe('CourseFilterControls hooks', () => {
-  let out;
-  const filters = ['a', 'b', 'c'];
-  const setSortBy = jest.fn();
-
-  const removeFilter = jest.fn();
-  const addFilter = jest.fn();
-
-  beforeEach(() => {
-    reduxHooks.useRemoveFilter.mockReturnValue(removeFilter);
-    reduxHooks.useAddFilter.mockReturnValue(addFilter);
-  });
-
-  const toggleOpen = jest.fn();
-  const toggleClose = jest.fn();
-
-  describe('state values', () => {
-    state.testGetter(state.keys.target);
-  });
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('useCourseFilterControlsData', () => {
-    beforeEach(() => {
-      useToggle.mockReturnValueOnce([false, toggleOpen, toggleClose]);
-      state.mock();
-      out = hooks.useCourseFilterControlsData({
-        filters,
-        setSortBy,
-      });
-    });
-    afterEach(state.restore);
-
-    test('default state', () => {
-      expect(out.isOpen).toEqual(false);
-      expect(out.target).toEqual(state.stateVals.target);
-    });
-
-    test('open calls toggleOpen and track.filter.filterClicked', () => {
-      out.open();
-      expect(toggleOpen).toHaveBeenCalled();
-      expect(track.filter.filterClicked).toHaveBeenCalled();
-    });
-
-    test('close calls toggleClose and track.filter.filterOptionSelected', () => {
-      out.close();
-      expect(toggleClose).toHaveBeenCalled();
-      expect(track.filter.filterOptionSelected).toHaveBeenCalledWith(filters);
-    });
-
-    test('isOpen is true when target is set', () => {
-      useToggle.mockReturnValueOnce([true, toggleOpen, toggleClose]);
-      expect(out.target).toEqual(null);
-      state.mockVal(state.keys.target, 'foo');
-      out = hooks.useCourseFilterControlsData({
-        filters,
-        setSortBy,
-      });
-      expect(out.isOpen).toEqual(true);
-      expect(out.target).toEqual('foo');
-    });
-
-    test('handle filter change', () => {
-      const value = 'a';
-      out.handleFilterChange({
-        target: {
-          checked: true,
-          value,
-        },
-      });
-      expect(addFilter).toHaveBeenCalledWith(value);
-      out.handleFilterChange({
-        target: {
-          checked: false,
-          value,
-        },
-      });
-      expect(removeFilter).toHaveBeenCalledWith(value);
-    });
-    test('handle sort change', () => {
-      const value = 'a';
-      out.handleSortChange({
-        target: {
-          value,
-        },
-      });
-      expect(setSortBy).toHaveBeenCalledWith(value);
-    });
-  });
-});

package/src/containers/CourseFilterControls/messages.js

@@ -1,61 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  courseStatus: {
-    id: 'learner-dash.courseListFilters.courseStatus',
-    description: 'course status filter form heading',
-    defaultMessage: 'Course Status',
-  },
-  inProgress: {
-    id: 'learner-dash.courseListFilters.inProgress',
-    description: 'in-progress filter checkbox label for course list filters',
-    defaultMessage: 'In-Progress',
-  },
-  notStarted: {
-    id: 'learner-dash.courseListFilters.notStarted',
-    description: 'Not-Started filter checkbox label for course list filters',
-    defaultMessage: 'Not Started',
-  },
-  done: {
-    id: 'learner-dash.courseListFilters.done',
-    description: 'done filter checkbox label for course list filters',
-    defaultMessage: 'Done',
-  },
-  notEnrolled: {
-    id: 'learner-dash.courseListFilters.notEnrolled',
-    description: 'not-enrolled filter checkbox label for course list filters',
-    defaultMessage: 'Not Enrolled',
-  },
-  upgraded: {
-    id: 'learner-dash.courseListFilters.upgraded',
-    description: 'upgraded filter checkbox label for course list filters',
-    defaultMessage: 'Upgraded',
-  },
-  clearAll: {
-    id: 'learner-dash.courseListFilters.clearAll',
-    description: 'clear all filters button text',
-    defaultMessage: 'Clear all',
-  },
-  sort: {
-    id: 'learner-dash.courseListFilters.sort',
-    description: 'Sort radio form heading',
-    defaultMessage: 'Sort',
-  },
-  sortLastEnrolled: {
-    id: 'learner-dash.courseListFilters.sortLastEnrolled',
-    description: 'Last enrolled sort option text',
-    defaultMessage: 'Last enrolled',
-  },
-  sortTitle: {
-    id: 'learner-dash.courseListFilters.sortTitle',
-    description: 'Title sort option text',
-    defaultMessage: 'Title (A-Z)',
-  },
-  refine: {
-    id: 'learner-dash.courseListFilters.refine',
-    description: 'Filter button container text',
-    defaultMessage: 'Refine',
-  },
-});
-
-export default messages;

package/src/containers/CoursesPanel/CourseList/index.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Pagination } from '@openedx/paragon';
-import {
-  ActiveCourseFilters,
-} from '../../../containers/CourseFilterControls';
-import CourseCard from '../../../containers/CourseCard';
-
-import { useIsCollapsed } from './hooks';
-
-export const CourseList = ({ courseListData }) => {
-  const {
-    filterOptions, setPageNumber, numPages, showFilters, visibleList,
-  } = courseListData;
-  const isCollapsed = useIsCollapsed();
-  return (
-    <>
-      {showFilters && (
-        <div id="course-list-active-filters-container">
-          <ActiveCourseFilters {...filterOptions} />
-        </div>
-      )}
-      <div className="d-flex flex-column flex-grow-1">
-        {visibleList.map(({ cardId }) => (
-          <CourseCard key={cardId} cardId={cardId} />
-        ))}
-        {numPages > 1 && (
-          <Pagination
-            variant={isCollapsed ? 'reduced' : 'secondary'}
-            paginationLabel="Course List"
-            className="mx-auto mb-2"
-            pageCount={numPages}
-            onPageSelect={setPageNumber}
-          />
-        )}
-      </div>
-    </>
-  );
-};
-
-export const courseListDataShape = PropTypes.shape({
-  showFilters: PropTypes.bool.isRequired,
-  visibleList: PropTypes.arrayOf(PropTypes.shape()).isRequired,
-  filterOptions: PropTypes.shape().isRequired,
-  numPages: PropTypes.number.isRequired,
-  setPageNumber: PropTypes.func.isRequired,
-});
-
-CourseList.propTypes = {
-  courseListData: courseListDataShape,
-};
-
-export default CourseList;

package/src/containers/CoursesPanel/CourseList/index.test.jsx

@@ -1,81 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { useIsCollapsed } from './hooks';
-import CourseList from '.';
-
-jest.mock('./hooks', () => ({
-  useIsCollapsed: jest.fn(),
-}));
-
-jest.mock('../../CourseCard', () => jest.fn(() => <div>CourseCard</div>));
-jest.mock('../../CourseFilterControls', () => ({
-  ActiveCourseFilters: jest.fn(() => <div>ActiveCourseFilters</div>),
-}));
-
-describe('CourseList', () => {
-  const defaultCourseListData = {
-    filterOptions: {},
-    numPages: 1,
-    setPageNumber: jest.fn().mockName('setPageNumber'),
-    showFilters: false,
-    visibleList: [],
-  };
-  useIsCollapsed.mockReturnValue(false);
-
-  const renderList = (courseListData = defaultCourseListData) => (
-    render(<CourseList courseListData={courseListData} />)
-  );
-
-  describe('no courses or filters', () => {
-    it('should not render related components', () => {
-      renderList();
-      const filterControls = screen.queryByText('ActiveCourseFilters');
-      const courseCard = screen.queryByText('CourseCard');
-      const prevButton = screen.queryByRole('button', { name: 'Previous' });
-      expect(filterControls).toBeNull();
-      expect(courseCard).toBeNull();
-      expect(prevButton).toBeNull();
-    });
-  });
-  describe('with filters', () => {
-    it('should render filter component', () => {
-      renderList({
-        ...defaultCourseListData,
-        showFilters: true,
-      });
-      const filterControls = screen.getByText('ActiveCourseFilters');
-      expect(filterControls).toBeInTheDocument();
-    });
-  });
-  describe('with multiple courses and pages', () => {
-    it('render Course Cards and pagination', () => {
-      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
-      const numPages = 3;
-      renderList({
-        ...defaultCourseListData,
-        visibleList,
-        numPages,
-      });
-      const courseCards = screen.getAllByText('CourseCard');
-      expect(courseCards.length).toEqual(visibleList.length);
-      const pageButtons = screen.getAllByRole('button', { name: /^Page/i });
-      expect(pageButtons.length).toBe(numPages);
-    });
-  });
-  describe('collapsed with multiple courses and pages', () => {
-    it('should render correct components', () => {
-      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
-      useIsCollapsed.mockReturnValueOnce(true);
-      renderList({
-        ...defaultCourseListData,
-        visibleList,
-        numPages: 3,
-        showFilters: true,
-      });
-      const courseCards = screen.getAllByText('CourseCard');
-      expect(courseCards.length).toEqual(visibleList.length);
-      const reducedPagination = screen.getByRole('button', { name: '1 of 3' });
-      expect(reducedPagination).toBeInTheDocument();
-    });
-  });
-});

package/src/containers/CoursesPanel/NoCoursesView/index.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { useIntl } from '@openedx/frontend-base';
-import { Button, Image } from '@openedx/paragon';
-import { Search } from '@openedx/paragon/icons';
-
-import { baseAppUrl } from '../../../data/services/lms/urls';
-import emptyCourseSVG from '../../../assets/empty-course.svg';
-import { reduxHooks } from '../../../hooks';
-
-import messages from './messages';
-import './index.scss';
-
-export const NoCoursesView = () => {
-  const { formatMessage } = useIntl();
-  const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
-  return (
-    <div
-      id="no-courses-content-view"
-      className="d-flex align-items-center justify-content-center mb-4.5"
-    >
-      <Image src={emptyCourseSVG} alt={formatMessage(messages.bannerAlt)} />
-      <h3 className="h1">
-        {formatMessage(messages.lookingForChallengePrompt)}
-      </h3>
-      <p>
-        {formatMessage(messages.exploreCoursesPrompt)}
-      </p>
-      <Button
-        variant="brand"
-        as="a"
-        href={baseAppUrl(courseSearchUrl)}
-        iconBefore={Search}
-      >
-        {formatMessage(messages.exploreCoursesButton)}
-      </Button>
-    </div>
-  );
-};
-
-export default NoCoursesView;

package/src/containers/CoursesPanel/NoCoursesView/index.test.jsx

@@ -1,38 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { formatMessage } from '@src/testUtils';
-import { baseAppUrl } from '@src/data/services/lms/urls';
-
-import EmptyCourse from '.';
-import messages from './messages';
-
-const courseSearchUrl = '/course-search-url';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl,
-    })),
-  },
-}));
-
-describe('NoCoursesView', () => {
-  it('should display image, heading and button', () => {
-    render(<IntlProvider locale="en"><EmptyCourse /></IntlProvider>);
-    const image = screen.getByRole('img', { alt: formatMessage(messages.bannerAlt) });
-    expect(image).toBeInTheDocument();
-  });
-  it('should display heading and prompt', () => {
-    render(<IntlProvider locale="en"><EmptyCourse /></IntlProvider>);
-    const heading = screen.getByText(formatMessage(messages.lookingForChallengePrompt));
-    const prompt = screen.getByText(formatMessage(messages.exploreCoursesPrompt));
-    expect(heading).toBeInTheDocument();
-    expect(prompt).toBeInTheDocument();
-  });
-  it('should display button', () => {
-    render(<IntlProvider locale="en"><EmptyCourse /></IntlProvider>);
-    const button = screen.getByRole('link', { name: formatMessage(messages.exploreCoursesButton) });
-    expect(button).toBeInTheDocument();
-    expect(button.href).toBe(baseAppUrl(courseSearchUrl));
-  });
-});

package/src/containers/CoursesPanel/NoCoursesView/messages.js

@@ -1,26 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  lookingForChallengePrompt: {
-    id: 'Dashboard.NoCoursesView.lookingForChallengePrompt',
-    defaultMessage: 'Looking for a new challenge?',
-    description: 'Prompt user for new challenge',
-  },
-  exploreCoursesPrompt: {
-    id: 'Dashboard.NoCoursesView.exploreCoursesPrompt',
-    defaultMessage: 'Explore our courses to add them to your dashboard.',
-    description: 'Prompt user to explore more courses',
-  },
-  exploreCoursesButton: {
-    id: 'Dashboard.NoCoursesView.exploreCoursesButton',
-    defaultMessage: 'Explore courses',
-    description: 'Button to explore more courses',
-  },
-  bannerAlt: {
-    id: 'Dashboard.NoCoursesView.bannerAlt',
-    defaultMessage: 'No Courses view banner',
-    description: 'No Courses view basnner',
-  },
-});
-
-export default messages;

package/src/containers/CoursesPanel/hooks.js

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { ListPageSize, SortKeys } from '../../data/constants/app';
-import { reduxHooks } from '../../hooks';
-import { StrictDict } from '../../utils';
-
-import * as module from './hooks';
-
-export const state = StrictDict({
-  sortBy: (val) => React.useState(val), // eslint-disable-line
-});
-
-/**
- * Filters are fetched from the store and used to generate a list of "visible" courses.
- * Other values returned and used for the layout of the CoursesPanel component are:
- * the current page number, the sorting method, and whether or not to enable filters and pagination.
- *
- * @returns data for the CoursesPanel component
- */
-export const useCourseListData = () => {
-  const filters = reduxHooks.useFilters();
-  const removeFilter = reduxHooks.useRemoveFilter();
-  const pageNumber = reduxHooks.usePageNumber();
-  const setPageNumber = reduxHooks.useSetPageNumber();
-
-  const [sortBy, setSortBy] = module.state.sortBy(SortKeys.enrolled);
-
-  const querySearch = new URLSearchParams(window.location.search);
-  const disablePagination = querySearch.get('disable_pagination');
-
-  const { numPages, visibleList } = reduxHooks.useCurrentCourseList({
-    sortBy,
-    filters,
-    pageSize: Number(disablePagination) === 1 ? 0 : ListPageSize,
-  });
-
-  const handleRemoveFilter = (filter) => () => removeFilter(filter);
-
-  return {
-    pageNumber,
-    numPages,
-    setPageNumber,
-    visibleList,
-    filterOptions: {
-      sortBy,
-      setSortBy,
-      filters,
-      handleRemoveFilter,
-    },
-    showFilters: filters.length > 0,
-  };
-};
-
-export default useCourseListData;

package/src/containers/CoursesPanel/hooks.test.js

@@ -1,115 +0,0 @@
-import { MockUseState } from '@src/testUtils';
-import { reduxHooks } from '@src/hooks';
-import { ListPageSize, SortKeys } from '@src/data/constants/app';
-import * as hooks from './hooks';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCurrentCourseList: jest.fn(),
-    usePageNumber: jest.fn(() => 23),
-    useSetPageNumber: jest.fn(),
-    useFilters: jest.fn(),
-    useRemoveFilter: jest.fn(),
-  },
-}));
-
-const mockGet = jest.fn(() => ({}));
-
-global.URLSearchParams = jest.fn().mockImplementation(() => ({
-  get: mockGet,
-}));
-
-const state = new MockUseState(hooks);
-
-const testList = ['a', 'b'];
-const testListData = {
-  numPages: 52,
-  visibleList: testList,
-};
-const testSortBy = 'fake sort option';
-const testFilters = ['some', 'fake', 'filters'];
-
-const setPageNumber = jest.fn(val => ({ setPageNumber: val }));
-reduxHooks.useSetPageNumber.mockReturnValue(setPageNumber);
-
-const removeFilter = jest.fn();
-reduxHooks.useRemoveFilter.mockReturnValue(removeFilter);
-reduxHooks.useFilters.mockReturnValue(['some', 'fake', 'filters']);
-
-describe('CourseList hooks', () => {
-  let out;
-
-  reduxHooks.useCurrentCourseList.mockReturnValue(testListData);
-
-  describe('state values', () => {
-    state.testGetter(state.keys.sortBy);
-    jest.clearAllMocks();
-  });
-
-  describe('useCourseListData', () => {
-    afterEach(state.restore);
-    beforeEach(() => {
-      state.mock();
-      state.mockVal(state.keys.sortBy, testSortBy);
-      out = hooks.useCourseListData();
-    });
-    describe('behavior', () => {
-      it('initializes sort with enrollment date', () => {
-        state.expectInitializedWith(state.keys.sortBy, SortKeys.enrolled);
-      });
-      it('loads current course list with sortBy, filters, and page size', () => {
-        expect(reduxHooks.useCurrentCourseList).toHaveBeenCalledWith({
-          sortBy: testSortBy,
-          filters: testFilters,
-          pageSize: ListPageSize,
-        });
-      });
-      it('loads current course list with page size 0 if/when there is query param disable_pagination=1', () => {
-        state.mock();
-        state.mockVal(state.keys.sortBy, testSortBy);
-        mockGet.mockReturnValueOnce('1');
-        out = hooks.useCourseListData();
-        expect(reduxHooks.useCurrentCourseList).toHaveBeenCalledWith({
-          sortBy: testSortBy,
-          filters: testFilters,
-          pageSize: 0,
-        });
-      });
-    });
-    describe('output', () => {
-      test('pageNumber loads from usePageNumber hook', () => {
-        expect(out.pageNumber).toEqual(reduxHooks.usePageNumber());
-      });
-      test('numPages and visible list load from useCurrentCourseList hook', () => {
-        expect(out.numPages).toEqual(testListData.numPages);
-        expect(out.visibleList).toEqual(testListData.visibleList);
-      });
-      test('showFilters is true iff filters is not empty', () => {
-        expect(out.showFilters).toEqual(true);
-        state.mockVal(state.keys.sortBy, testSortBy);
-        reduxHooks.useFilters.mockReturnValueOnce([]);
-        out = hooks.useCourseListData();
-        // don't show filter when list is empty.
-        expect(out.showFilters).toEqual(false);
-      });
-      describe('filterOptions', () => {
-        test('sortBy and setSortBy are connected to the state value', () => {
-          expect(out.filterOptions.sortBy).toEqual(testSortBy);
-          expect(out.filterOptions.setSortBy).toEqual(state.setState.sortBy);
-        });
-        test('filters passed by useFilters hook', () => {
-          expect(out.filterOptions.filters).toEqual(testFilters);
-        });
-        test('handleRemoveFilter creates callback to call setFilter.remove', () => {
-          const cb = out.filterOptions.handleRemoveFilter(testFilters[0]);
-          expect(removeFilter).not.toHaveBeenCalled();
-          cb();
-          expect(removeFilter).toHaveBeenCalledWith(testFilters[0]);
-        });
-        test('setPageNumber dispatches setPageNumber action with passed value', () => {
-          expect(out.setPageNumber(2)).toEqual(setPageNumber(2));
-        });
-      });
-    });
-  });
-});

package/src/containers/CoursesPanel/index.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { useIntl } from '@openedx/frontend-base';
-
-import { reduxHooks } from '../../hooks';
-import {
-  CourseFilterControls,
-} from '../../containers/CourseFilterControls';
-import CourseListSlot from '../../slots/CourseListSlot';
-import NoCoursesViewSlot from '../../slots/NoCoursesViewSlot';
-
-import { useCourseListData } from './hooks';
-import messages from './messages';
-import './index.scss';
-
-/**
- * Renders the list of CourseCards, as well as the controls (CourseFilterControls) for modifying the list.
- * Also houses the NoCoursesView to display if the user hasn't enrolled in any courses.
- * @returns List of courses as CourseCards or empty state
-*/
-export const CoursesPanel = () => {
-  const { formatMessage } = useIntl();
-  const hasCourses = reduxHooks.useHasCourses();
-  const courseListData = useCourseListData();
-  return (
-    <div className="course-list-container">
-      <div className="course-list-heading-container">
-        <h2 className="course-list-title">{formatMessage(messages.myCourses)}</h2>
-        <div className="course-filter-controls-container">
-          <CourseFilterControls {...courseListData.filterOptions} />
-        </div>
-      </div>
-      {hasCourses ? <CourseListSlot courseListData={courseListData} /> : <NoCoursesViewSlot />}
-    </div>
-  );
-};
-
-CoursesPanel.propTypes = {};
-
-export default CoursesPanel;