@openedx/frontend-app-learner-dashboard 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/containers/CoursesPanel/__snapshots__/index.test.jsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CoursesPanel no courses snapshot 1`] = `
-<div
-  className="course-list-container"
->
-  <div
-    className="course-list-heading-container"
-  >
-    <h2
-      className="course-list-title"
-    >
-      My Courses
-    </h2>
-    <div
-      className="course-filter-controls-container"
-    >
-      <CourseFilterControls />
-    </div>
-  </div>
-  <NoCoursesViewSlot />
-</div>
-`;
-
-exports[`CoursesPanel with courses snapshot 1`] = `
-<div
-  className="course-list-container"
->
-  <div
-    className="course-list-heading-container"
-  >
-    <h2
-      className="course-list-title"
-    >
-      My Courses
-    </h2>
-    <div
-      className="course-filter-controls-container"
-    >
-      <CourseFilterControls />
-    </div>
-  </div>
-  <CourseListSlot
-    courseListData={
-      {
-        "filterOptions": {},
-        "numPages": 1,
-        "setPageNumber": [MockFunction setPageNumber],
-        "showFilters": false,
-        "visibleList": [],
-      }
-    }
-  />
-</div>
-`;

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 'testUtils';
-import { reduxHooks } from 'hooks';
-import { ListPageSize, SortKeys } from 'data/constants/app';
-import * as hooks from './hooks';
-
-jest.mock('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;

package/src/containers/CoursesPanel/index.scss

@@ -1,42 +0,0 @@
-@import "@openedx/paragon/scss/core/core";
-
-.course-list-heading-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.course-list-title {
-  font-size: $h2-font-size;
-  margin: map-get($spacers, 3) 0;
-}
-
-.course-list-loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.course-filter-controls-container {
-  text-align: right;
-  align-self: center;
-}
-
-@include media-breakpoint-down(md) {
-  .course-list-heading-container {
-    flex-direction: column-reverse;
-    align-items: flex-start;
-  }
-
-  .course-filter-controls-container {
-    text-align: left;
-    align-self: flex-start;
-  }
-
-  .course-list-title {
-    font-size: $h3-font-size;
-    margin: map-get($spacers, 2) 0;
-  }
-}

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

@@ -1,58 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-import { useCourseListData } from './hooks';
-import CoursesPanel from '.';
-
-jest.mock('hooks', () => ({
-  reduxHooks: { useHasCourses: jest.fn() },
-}));
-
-jest.mock('./hooks', () => ({
-  useCourseListData: jest.fn(),
-}));
-
-jest.mock('containers/CourseCard', () => 'CourseCard');
-jest.mock('containers/CourseFilterControls', () => ({
-  ActiveCourseFilters: 'ActiveCourseFilters',
-  CourseFilterControls: 'CourseFilterControls',
-}));
-jest.mock('@openedx/frontend-plugin-framework', () => ({
-  PluginSlot: 'PluginSlot',
-}));
-jest.mock('./CourseList', () => 'CourseList');
-
-reduxHooks.useHasCourses.mockReturnValue(true);
-
-describe('CoursesPanel', () => {
-  const defaultCourseListData = {
-    filterOptions: {},
-    numPages: 1,
-    setPageNumber: jest.fn().mockName('setPageNumber'),
-    showFilters: false,
-    visibleList: [],
-  };
-
-  const createWrapper = (courseListData) => {
-    useCourseListData.mockReturnValueOnce({
-      ...defaultCourseListData,
-      ...courseListData,
-    });
-    return shallow(<CoursesPanel />);
-  };
-
-  describe('no courses', () => {
-    test('snapshot', () => {
-      reduxHooks.useHasCourses.mockReturnValue(false);
-      const wrapper = createWrapper();
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-  describe('with courses', () => {
-    test('snapshot', () => {
-      reduxHooks.useHasCourses.mockReturnValue(true);
-      const wrapper = createWrapper();
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-});

package/src/containers/CoursesPanel/messages.js

@@ -1,11 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  myCourses: {
-    id: 'dashboard.mycourses',
-    defaultMessage: 'My Courses',
-    description: 'Course list heading',
-  },
-});
-
-export default messages;

package/src/containers/Dashboard/DashboardLayout.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Container, Col, Row } from '@openedx/paragon';
-
-import WidgetSidebarSlot from '../../slots/WidgetSidebarSlot';
-
-import hooks from './hooks';
-
-export const columnConfig = {
-  courseList: {
-    withSidebar: {
-      lg: { span: 12, offset: 0 },
-      xl: { span: 8, offset: 0 },
-    },
-    noSidebar: {
-      lg: { span: 12, offset: 0 },
-      xl: { span: 12, offset: 0 },
-    },
-  },
-  sidebar: {
-    lg: { span: 12, offset: 0 },
-    xl: { span: 4, offset: 0 },
-  },
-};
-
-export const DashboardLayout = ({ children }) => {
-  const {
-    isCollapsed,
-    sidebarShowing,
-  } = hooks.useDashboardLayoutData();
-
-  const courseListColumnProps = sidebarShowing
-    ? columnConfig.courseList.withSidebar
-    : columnConfig.courseList.noSidebar;
-
-  return (
-    <Container fluid size="xl">
-      <Row>
-        <Col {...courseListColumnProps} className="course-list-column">
-          {children}
-        </Col>
-        <Col {...columnConfig.sidebar} className={['sidebar-column', !isCollapsed && 'not-collapsed']}>
-          <WidgetSidebarSlot />
-        </Col>
-      </Row>
-    </Container>
-  );
-};
-DashboardLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default DashboardLayout;

package/src/containers/Dashboard/DashboardLayout.test.jsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { Col, Row } from '@openedx/paragon';
-
-import hooks from './hooks';
-import DashboardLayout, { columnConfig } from './DashboardLayout';
-
-jest.mock('./hooks', () => ({
-  useDashboardLayoutData: jest.fn(),
-}));
-
-const hookProps = {
-  isCollapsed: true,
-  sidebarShowing: false,
-  setSidebarShowing: jest.fn().mockName('hooks.setSidebarShowing'),
-};
-hooks.useDashboardLayoutData.mockReturnValue(hookProps);
-
-const children = 'test-children';
-
-let el;
-describe('DashboardLayout', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    el = shallow(<DashboardLayout>{children}</DashboardLayout>);
-  });
-
-  const testColumns = () => {
-    it('loads courseList and sidebar column layout', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      Object.keys(columnConfig.sidebar).forEach(size => {
-        expect(columns[1].props[size]).toEqual(columnConfig.sidebar[size]);
-      });
-    });
-    it('displays children in first column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns[0].children).not.toHaveLength(0);
-    });
-    it('displays WidgetSidebarSlot in second column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns[1].findByType('WidgetSidebarSlot')).toHaveLength(1);
-    });
-  };
-  const testSidebarLayout = () => {
-    it('displays withSidebar width for course list column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      Object.keys(columnConfig.courseList.withSidebar).forEach(size => {
-        expect(columns[0].props[size]).toEqual(columnConfig.courseList.withSidebar[size]);
-      });
-    });
-  };
-  const testNoSidebarLayout = () => {
-    it('displays noSidebar width for course list column', () => {
-      const columns = el.instance.findByType(Row)[0].findByType(Col);
-      Object.keys(columnConfig.courseList.noSidebar).forEach(size => {
-        expect(columns[0].props[size]).toEqual(columnConfig.courseList.noSidebar[size]);
-      });
-    });
-  };
-  const testSnapshot = () => {
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-  };
-  describe('collapsed', () => {
-    describe('sidebar showing', () => {
-      beforeEach(() => {
-        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, sidebarShowing: true });
-      });
-      testColumns();
-      testSnapshot();
-      testSidebarLayout();
-    });
-    describe('sidebar not showing', () => {
-      testColumns();
-      testSnapshot();
-      testNoSidebarLayout();
-    });
-    it('does not show spacer component above widget sidebar', () => {
-      const columns = el.instance.findByType(Col);
-      expect(columns[1].findByType('h2').length).toEqual(0);
-    });
-  });
-
-  describe('not collapsed', () => {
-    const testWidgetSpacing = () => {
-      it('shows not-collapsed class on widget sidebar', () => {
-        const columns = el.instance.findByType(Col);
-        expect(columns[1].props.className).toContain('not-collapsed');
-      });
-    };
-    describe('sidebar showing', () => {
-      beforeEach(() => {
-        hooks.useDashboardLayoutData.mockReturnValueOnce({
-          ...hookProps,
-          isCollapsed: false,
-          sidebarShowing: true,
-        });
-      });
-      testColumns();
-      testSnapshot();
-      testSidebarLayout();
-      testWidgetSpacing();
-    });
-    describe('sidebar not showing', () => {
-      beforeEach(() => {
-        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, isCollapsed: false });
-      });
-      testColumns();
-      testSnapshot();
-      testNoSidebarLayout();
-      testWidgetSpacing();
-    });
-  });
-});

package/src/containers/Dashboard/LoadingView.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Spinner } from '@openedx/paragon';
-
-import hooks from './hooks';
-
-export const LoadingView = () => {
-  const { spinnerScreenReaderText } = hooks.useDashboardMessages();
-
-  return (
-    <div className="course-list-loading">
-      <Spinner
-        animation="border"
-        className="mie-3"
-        screenReaderText={spinnerScreenReaderText}
-      />
-    </div>
-  );
-};
-
-export default LoadingView;

package/src/containers/Dashboard/LoadingView.test.jsx

@@ -1,23 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-import { Spinner } from '@openedx/paragon';
-
-import hooks from './hooks';
-import LoadingView from './LoadingView';
-
-jest.mock('./hooks', () => ({
-  useDashboardMessages: jest.fn(),
-}));
-
-const spinnerScreenReaderText = 'test-sr-text';
-describe('LoadingView', () => {
-  beforeEach(() => {
-    hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText });
-  });
-  test('snapshot', () => {
-    expect(shallow(<LoadingView />).snapshot).toMatchSnapshot();
-  });
-  it('renders spinner component with associated screen reader text', () => {
-    const wrapper = shallow(<LoadingView />);
-    expect(wrapper.instance.findByType(Spinner)[0].props.screenReaderText).toEqual(spinnerScreenReaderText);
-  });
-});