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

package/src/setupTest.jsx

@@ -1,251 +0,0 @@
-import '@testing-library/jest-dom';
-
-import siteConfig from 'site.config';
-import { addAppConfigs, configureAnalytics, configureAuth, configureLogging, getSiteConfig, mergeSiteConfig, MockAnalyticsService, MockAuthService, MockLoggingService } from '@openedx/frontend-base';
-
-mergeSiteConfig(siteConfig);
-addAppConfigs();
-
-export function initializeMockServices() {
-  const loggingService = configureLogging(MockLoggingService, {
-    config: getSiteConfig(),
-  });
-
-  const authService = configureAuth(MockAuthService, {
-    config: getSiteConfig(),
-    loggingService,
-  });
-
-  const analyticsService = configureAnalytics(MockAnalyticsService, {
-    config: getSiteConfig(),
-    httpClient: authService.getAuthenticatedHttpClient(),
-    loggingService,
-  });
-
-  return { analyticsService, authService, loggingService };
-}
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useRef: jest.fn((val) => ({ current: val, useRef: true })),
-  useCallback: jest.fn((cb, prereqs) => ({ useCallback: { cb, prereqs } })),
-  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
-  useMemo: jest.fn((cb, prereqs) => cb(prereqs)),
-  useContext: jest.fn(context => context),
-  useState: jest.fn(),
-}));
-
-jest.mock('reselect', () => ({
-  createSelector: jest.fn((preSelectors, cb) => ({ preSelectors, cb })),
-}));
-
-// Mock react-redux hooks
-// unmock for integration tests
-jest.mock('react-redux', () => {
-  const dispatch = jest.fn((...args) => ({ dispatch: args })).mockName('react-redux.dispatch');
-  return {
-    connect: (mapStateToProps, mapDispatchToProps) => (component) => ({
-      mapStateToProps,
-      mapDispatchToProps,
-      component,
-    }),
-    useDispatch: jest.fn(() => dispatch),
-    useSelector: jest.fn((selector) => ({ useSelector: selector })),
-  };
-});
-
-jest.mock('moment', () => ({
-  __esModule: true,
-  default: (date) => ({
-    toDate: jest.fn().mockReturnValue(date),
-  }),
-}));
-
-jest.mock('@openedx/frontend-base', () => {
-  const PropTypes = jest.requireActual('prop-types');
-  const { formatMessage } = jest.requireActual('./testUtils');
-  const formatDate = jest.fn(date => new Date(date).toLocaleDateString()).mockName('useIntl.formatDate');
-
-  return {
-    ...jest.requireActual('@openedx/frontend-base'),
-    // React components
-    ErrorPage: () => 'ErrorPage',
-
-    // i18n functionality
-    intlShape: PropTypes.shape({
-      formatMessage: PropTypes.func,
-    }),
-    useIntl: () => ({
-      formatMessage,
-      formatDate,
-    }),
-    defineMessages: m => m,
-    FormattedMessage: () => 'FormattedMessage',
-  };
-});
-
-jest.mock('@openedx/paragon', () => jest.requireActual('testUtils').mockNestedComponents({
-  Alert: {
-    Heading: 'Alert.Heading',
-  },
-  AlertModal: 'AlertModal',
-  MarketingModal: 'MarketingModal',
-  ActionRow: 'ActionRow',
-  Badge: 'Badge',
-  Button: 'Button',
-  Card: {
-    Body: 'Card.Body',
-    Footer: 'Card.Footer',
-    Header: 'Card.Header',
-    ImageCap: 'Card.ImageCap',
-    Section: 'Card.Section',
-  },
-  CardGrid: 'CardGrid',
-  Chip: 'Chip',
-  Col: 'Col',
-  Collapsible: {
-    Advanced: 'Collapsible.Advanced',
-    Body: 'Collapsible.Body',
-    Trigger: 'Collapsible.Trigger',
-    Visible: 'Collapsible.Visible',
-  },
-  Container: 'Container',
-  DataTable: {
-    EmptyTable: 'DataTable.EmptyTable',
-    Table: 'DataTable.Table',
-    TableControlBar: 'DataTable.TableControlBar',
-    TableController: 'DataTable.TableController',
-    TableFooter: 'DataTable.TableFooter',
-  },
-  Dropdown: {
-    Item: 'Dropdown.Item',
-    Menu: 'Dropdown.Menu',
-    Toggle: 'Dropdown.Toggle',
-    Header: 'Dropdown.Header',
-    Divider: 'Dropdown.Divider',
-  },
-  Form: {
-    Checkbox: 'Form.Checkbox',
-    CheckboxSet: 'Form.CheckboxSet',
-    Control: {
-      Feedback: 'Form.Control.Feedback',
-    },
-    Group: 'Form.Group',
-    Label: 'Form.Label',
-    Radio: 'Form.Radio',
-    RadioSet: 'Form.RadioSet',
-    Switch: 'Form.Switch',
-  },
-  FormControl: 'FormControl',
-  FormControlFeedback: 'FormControlFeedback',
-  FormGroup: 'FormGroup',
-  FormLabel: 'FormLabel',
-  FullscreenModal: 'FullscreenModal',
-  Hyperlink: 'Hyperlink',
-  Icon: 'Icon',
-  IconButton: 'IconButton',
-  Image: 'Image',
-  MailtoLink: 'MailtoLink',
-  ModalDialog: {
-    Header: 'ModalDialog.Header',
-    Body: 'ModalDialog.Body',
-    Hero: 'ModalDialog.Hero',
-  },
-  ModalPopup: 'ModalPopup',
-  ModalCloseButton: 'ModalCloseButton',
-  MultiSelectDropdownFilter: 'MultiSelectDropdownFilter',
-  OverlayTrigger: 'OverlayTrigger',
-  Popover: {
-    Content: 'Popover.Content',
-  },
-  Row: 'Row',
-  Sheet: 'Sheet',
-  StatefulButton: 'StatefulButton',
-  TextFilter: 'TextFilter',
-  Truncate: 'Truncate',
-  Skeleton: 'Skeleton',
-  Spinner: 'Spinner',
-  PageBanner: 'PageBanner',
-  Pagination: 'Pagination',
-
-  useWindowSize: () => jest.fn(),
-  useToggle: () => jest.fn().mockImplementation((val) => [
-    val,
-    jest.fn().mockName('useToggle.setTrue'),
-    jest.fn().mockName('useToggle.setFalse'),
-  ]),
-  useCheckboxSetValues: () => jest.fn().mockImplementation((values) => ([values, {
-    add: jest.fn().mockName('useCheckboxSetValues.add'),
-    remove: jest.fn().mockName('useCheckboxSetValues.remove'),
-  }])),
-  breakpoints: () => ({
-    extraSmall: {
-      minWidth: 0,
-      maxWidth: 575,
-    },
-    small: {
-      minWidth: 576,
-      maxWidth: 767,
-    },
-    medium: {
-      minWidth: 768,
-      maxWidth: 991,
-    },
-    large: {
-      minWidth: 992,
-      maxWidth: 1199,
-    },
-    extraLarge: {
-      minWidth: 1200,
-      maxWidth: 100000,
-    },
-  }),
-}));
-
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: 'FontAwesomeIcon',
-}));
-jest.mock('@fortawesome/free-solid-svg-icons', () => ({
-  faUserCircle: jest.fn().mockName('fa-user-circle-icon'),
-}));
-
-jest.mock('@openedx/paragon/icons', () => ({
-  ArrowBack: jest.fn().mockName('icons.ArrowBack'),
-  ArrowDropDown: jest.fn().mockName('icons.ArrowDropDown'),
-  ArrowDropUp: jest.fn().mockName('icons.ArrowDropUp'),
-  Book: jest.fn().mockName('icons.Book'),
-  Cancel: jest.fn().mockName('icons.Cancel'),
-  Close: jest.fn().mockName('icons.Close'),
-  CheckCircle: jest.fn().mockName('icons.CheckCircle'),
-  ChevronLeft: jest.fn().mockName('icons.ChevronLeft'),
-  ChevronRight: jest.fn().mockName('icons.ChevronRight'),
-  Highlight: jest.fn().mockName('icons.Highlight'),
-  Info: jest.fn().mockName('icons.Info'),
-  InfoOutline: jest.fn().mockName('icons.InfoOutline'),
-  Launch: jest.fn().mockName('icons.Launch'),
-  Locked: jest.fn().mockName('icons.Locked'),
-  MoreVert: jest.fn().mockName('icons.MoreVert'),
-  Tune: jest.fn().mockName('icons.Tune'),
-  PersonSearch: jest.fn().mockName('icons.PersonSearch'),
-  Program: jest.fn().mockName('icons.Program'),
-  Search: jest.fn().mockName('icons.Search'),
-}));
-
-jest.mock('data/constants/app', () => ({
-  ...jest.requireActual('data/constants/app'),
-  locationId: 'fake-location-id',
-}));
-
-jest.mock('utils', () => ({
-  ...jest.requireActual('utils'),
-  nullMethod: jest.fn().mockName('utils.nullMethod'),
-}));
-
-jest.mock('utils/hooks', () => {
-  const formatDate = jest.fn(date => new Date(date).toLocaleDateString())
-    .mockName('utils.formatDate');
-  return {
-    formatDate,
-    useFormatDate: () => formatDate,
-  };
-});

package/src/slots/CourseBannerSlot/README.md

@@ -1,44 +0,0 @@
-# Course Banner Slot
-
-### Slot ID: `org.openedx.frontend.slot.learnerDashboard.courseCardBanner.v1`
-
-### Slot Props
-
-* `cardId`
-
-## Description
-
-This slot is used for replacing or adding content for the `CourseBanner` component. This banner is rendered as a child of the `CourseCard`.
-
-The default CourseBanner looks like this when audit access has expired for the course:
-![Screenshot of the default CourseBanner when audit access has expired](./images/course_banner_slot_default.png)
-
-## Example
-
-The following configuration will render a custom implementation of a CourseBanner under every `CourseCard`.
-
-![Screenshot of custom banner added under CourseCard](./images/course_banner_slot_default.png)
-
-```js
-import { WidgetOperationTypes } from '@openedx/frontend-base';
-import { Alert } from '@openedx/paragon';
-
-const myComponent = ({ cardId }) => (
-  <Alert variant="info" className="mb-0">
-    Course banner for course with {cardId}
-  </Alert>
-)
-
-const config = {
-  slots: [
-    {
-      slotId: 'org.openedx.frontend.slot.learnerDashboard.courseCardBanner.v1',
-      id: 'my.widget',
-      op: WidgetOperationTypes.REPLACE,
-      component: myComponent
-    },
-  ]
-}
-
-export default config;
-```

package/src/slots/CourseBannerSlot/index.jsx

@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-import { Slot } from '@openedx/frontend-base';
-import CourseBanner from '../../containers/CourseCard/components/CourseCardBanners/CourseBanner';
-
-const CourseBannerSlot = ({ cardId }) => (
-  <Slot
-    id="org.openedx.frontend.slot.learnerDashboard.courseCardBanner.v1"
-    cardId={cardId}
-  >
-    <CourseBanner cardId={cardId} />
-  </Slot>
-);
-
-CourseBannerSlot.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default CourseBannerSlot;

package/src/slots/CourseCardActionSlot/README.md

@@ -1,53 +0,0 @@
-# Course Card Action Slot
-
-### Slot ID: `org.openedx.frontend.slot.learnerDashboard.courseCardAction.v1`
-
-### Slot Props
-
-* `cardId`
-
-## Description
-
-This slot is used for adding content in the Action buttons section of each Course Card.
-
-## Example
-
-The following configuration will render the `cardId` of the course as `<p>` elements in a `<div>`.
-
-![Screenshot of Content added after the Sequence Container](./images/post_course_card_action.png)
-
-```js
-import { WidgetOperationTypes } from '@openedx/frontend-base';
-import ActionButton from 'containers/CourseCard/components/CourseCardActions/ActionButton';
-
-const myComponent = ({ cardId }) => (
-  <ActionButton variant="outline-primary">
-    📚: {cardId}
-  </ActionButton>
-)
-
-const mySlotId = 'org.openedx.frontend.slot.learnerDashboard.courseCardAction.v1';
-
-const config = {
-  slots: [
-    {
-      slotId: mySlotId,
-      id: 'my.first.widget',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <ActionButton variant="outline-primary">
-          Custom Button
-        </ActionButton>
-      )
-    },
-    {
-      slotId: mySlotId,
-      id: 'my.second.widget',
-      op: WidgetOperationTypes.APPEND,
-      component: myComponent
-    },
-  ]
-}
-
-export default config;
-```

package/src/slots/CourseCardActionSlot/index.jsx

@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-import { Slot } from '@openedx/frontend-base';
-
-const CourseCardActionSlot = ({ cardId }) => (
-  <Slot
-    id="org.openedx.frontend.slot.learnerDashboard.courseCardAction.v1"
-    cardId={cardId}
-  />
-);
-
-CourseCardActionSlot.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default CourseCardActionSlot;

package/src/slots/CourseListSlot/README.md

@@ -1,54 +0,0 @@
-# Course List Slot
-
-### Slot ID: `org.openedx.frontend.slot.learnerDashboard.courseList.v1`
-
-### Slot Props
-
-* `courseListData`
-
-## Description
-
-This slot is used for replacing or adding content around the `CourseList` component. The `CourseListSlot` is only rendered if the learner has enrolled in at least one course.
-
-## Example
-
-The space will show the `CourseList` component by default.
-
-![Screenshot of the CourseListSlot](./images/course_list_slot.png)
-
-Using the following configuration will replace the slot's default content with a list of course titles.
-
-![Screenshot of a custom course list](./images/readme_custom_course_list.png)
-
-```js
-import { WidgetOperationTypes } from '@openedx/frontend-base';
-
-const myComponent = ({ courseListData }) => {
-  // Extract the "visibleList"
-  const courses = courseListData.visibleList;
-
-  // Render a list of course names
-  return (
-    <div>
-      {courses.map(courseData => (
-        <p>
-          {courseData.course.courseName}
-        </p>
-      ))}
-    </div>
-  )
-}
-
-const config = {
-  slots: [
-    {
-      slotId: 'org.openedx.frontend.slot.learnerDashboard.courseList.v1',
-      id: 'my.widget',
-      op: WidgetOperationTypes.REPLACE,
-      component: myComponent
-    },
-  ]
-}
-
-export default config;
-```

package/src/slots/CourseListSlot/index.jsx

@@ -1,17 +0,0 @@
-import { Slot } from '@openedx/frontend-base';
-import { CourseList, courseListDataShape } from '../../containers/CoursesPanel/CourseList';
-
-export const CourseListSlot = ({ courseListData }) => (
-  <Slot
-    id="org.openedx.frontend.slot.learnerDashboard.courseList.v1"
-    courseListData={courseListData}
-  >
-    <CourseList courseListData={courseListData} />
-  </Slot>
-);
-
-CourseListSlot.propTypes = {
-  courseListData: courseListDataShape,
-};
-
-export default CourseListSlot;

package/src/slots/DashboardModalSlot/README.md

@@ -1,30 +0,0 @@
-# Dashboard Modal Slot
-
-### Slot ID: `org.openedx.frontend.slot.learnerDashboard.dashboardModal.v1`
-
-## Description
-
-This slot is used for the modal on a dashboard.  The following configuration will render it.
-
-## Example
-
-Learner dashboard will show modal
-![Screenshot of the dashboard modal](./images/dashboard_modal_slot.png)
-
-```js
-import { WidgetOperationTypes } from '@openedx/frontend-base';
-import { ModalDialog } from '@openedx/paragon';
-
-const config = {
-  slots: [
-    {
-      slotId: 'org.openedx.frontend.slot.learnerDashboard.dashboardModal.v1',
-      id: 'my.widget',
-      op: WidgetOperationTypes.Append,
-      element: (<ModalDialog title="Modal that appears on learner dashboard" />)
-    },
-  ]
-}
-
-export default config;
-```

package/src/slots/DashboardModalSlot/index.jsx

@@ -1,7 +0,0 @@
-import { Slot } from '@openedx/frontend-base';
-
-const DashboardModalSlot = () => (
-  <Slot id="org.openedx.frontend.slot.learnerDashboard.dashboardModal.v1" />
-);
-
-export default DashboardModalSlot;

package/src/slots/NoCoursesViewSlot/README.md

@@ -1,34 +0,0 @@
-# No Courses View Slot
-
-### Slot ID: `org.openedx.frontend.slot.learnerDashboard.noCoursesView.v1`
-
-## Description
-
-This slot is used for replacing or adding content around the `NoCoursesView` component. The `NoCoursesViewSlot` only renders if the learner has not yet enrolled in any courses.
-
-## Example
-
-The space will show the `NoCoursesView` by default.
-
-![Screenshot of the no courses view](./images/no_courses_view_slot.png)
-
-Setting configuration to the following will replace the default experience with a custom call-to-action component.
-
-![Screenshot of a custom no courses view](./images/readme_custom_no_courses_view.png)
-
-```js
-import { WidgetOperationTypes } from '@openedx/frontend-base';
-
-const config = {
-  slots: [
-    {
-      slotId: 'org.openedx.frontend.slot.learnerDashboard.noCoursesView.v1',
-      id: 'my.widget',
-      op: WidgetOperationTypes.APPEND,
-      element: (<h3>Check out our catalog of courses and start learning today!</h3>)
-    },
-  ]
-}
-
-export default config;
-```

package/src/slots/NoCoursesViewSlot/index.jsx

@@ -1,11 +0,0 @@
-import { Slot } from '@openedx/frontend-base';
-
-import NoCoursesView from '../../containers/CoursesPanel/NoCoursesView';
-
-export const NoCoursesViewSlot = () => (
-  <Slot id="org.openedx.frontend.slot.learnerDashboard.noCoursesView.v1">
-    <NoCoursesView />
-  </Slot>
-);
-
-export default NoCoursesViewSlot;

package/src/slots/README.md

@@ -1,8 +0,0 @@
-# `frontend-app-learner-dashboard` Slots
-
-* [`org.openedx.frontend.slot.learnerDashboard.courseCardBanner.v1`](./CourseBannerSlot/)
-* [`org.openedx.frontend.slot.learnerDashboard.courseCardAction.v1`](./CourseCardActionSlot/)
-* [`org.openedx.frontend.slot.learnerDashboard.courseList.v1`](./CourseListSlot/)
-* [`org.openedx.frontend.slot.learnerDashboard.dashboardModal.v1`](./DashboardModalSlot)
-* [`org.openedx.frontend.slot.learnerDashboard.noCoursesView.v1`](./NoCoursesViewSlot/)
-* [`org.openedx.frontend.slot.learnerDashboard.widgetSidebar.v1`](./WidgetSidebarSlot/)

package/src/slots/WidgetSidebarSlot/README.md

@@ -1,51 +0,0 @@
-# Widget Sidebar Slot
-
-### Slot ID: `org.openedx.frontend.slot.learnerDashboard.widgetSidebar.v1`
-
-## Description
-
-This slot is used for adding content to the right-hand sidebar.
-
-## Example
-
-The slot renders the "Looking for a Challenge" widget by default.
-
-![Screenshot of the widget sidebar](./images/widget_sidebar_slot.png)
-
-Setting configuration to the following will replace the default content with a custom sidebar component.
-
-![Screenshot of a custom call-to-action in the sidebar](./images/readme_custom_sidebar.png)
-
-```js
-import { WidgetOperationTypes } from '@openedx/frontend-base';
-
-const myComponent = () => (
-  <div>
-    <h3>
-      Sidebar Menu
-    </h3>
-    <p>
-      sidebar item #1
-    </p>
-    <p>
-      sidebar item #2
-    </p>
-    <p>
-      sidebar item #3
-    </p>
-  </div>
-)
-
-const config = {
-  slots: [
-    {
-      slotId: 'org.openedx.frontend.slot.learnerDashboard.widgetSidebar.v1',
-      id: 'my.widget',
-      op: WidgetOperationTypes.REPLACE,
-      component: myComponent
-    },
-  ]
-}
-
-export default config;
-```

package/src/slots/WidgetSidebarSlot/__snapshots__/index.test.jsx.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`WidgetSidebar snapshots 1`] = `
-<PluginSlot
-  id="org.openedx.frontend.learner_dashboard.widget_sidebar.v1"
-  idAliases={
-    [
-      "widget_sidebar_slot",
-    ]
-  }
->
-  <LookingForChallengeWidget />
-</PluginSlot>
-`;

package/src/slots/WidgetSidebarSlot/index.jsx

@@ -1,10 +0,0 @@
-import { Slot } from '@openedx/frontend-base';
-import LookingForChallengeWidget from '../../widgets/LookingForChallengeWidget';
-
-export const WidgetSidebarSlot = () => (
-  <Slot id="org.openedx.frontend.slot.learnerDashboard.widgetSidebar.v1">
-    <LookingForChallengeWidget />
-  </Slot>
-);
-
-export default WidgetSidebarSlot;

package/src/slots/WidgetSidebarSlot/index.test.jsx

@@ -1,18 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import WidgetSidebarSlot from '.';
-
-jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
-
-jest.mock('@openedx/frontend-plugin-framework', () => ({
-  PluginSlot: 'PluginSlot',
-}));
-
-describe('WidgetSidebar', () => {
-  beforeEach(() => jest.resetAllMocks());
-
-  test('snapshots', () => {
-    const wrapper = shallow(<WidgetSidebarSlot />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-  });
-});

package/src/slots.tsx

@@ -1,9 +0,0 @@
-import { SlotOperation } from '@openedx/frontend-base';
-
-import { learnerDashboardHeaderApp } from './widgets/LearnerDashboardHeader';
-
-const slots: SlotOperation[] = [
-  ...(learnerDashboardHeaderApp.slots as [])
-];
-
-export default slots;