@openedx/frontend-app-learner-dashboard 1.0.0-alpha.0

package/src/slots.tsx

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

package/src/test/app.test.jsx

@@ -0,0 +1,255 @@
+/* eslint-disable */
+import React from 'react';
+import * as redux from 'redux';
+import { Provider } from 'react-redux';
+import {
+  render,
+  waitFor,
+} from '@testing-library/react';
+
+import { IntlProvider } from '@openedx/frontend-base';
+
+import { useFormatDate } from 'utils/hooks';
+
+import api from 'data/services/lms/api';
+import * as fakeData from 'data/services/lms/fakeData/courses';
+import { RequestKeys, RequestStates } from 'data/constants/requests';
+import reducers from 'data/redux';
+import { selectors } from 'data/redux';
+import { cardId as genCardId } from 'data/redux/app/reducer';
+
+import messages from 'i18n';
+
+import App from 'App';
+import Inspector from './inspector';
+import appMessages from './messages';
+
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+jest.unmock('@openedx/frontend-base');
+jest.unmock('react');
+jest.unmock('react-redux');
+jest.unmock('reselect');
+jest.unmock('hooks');
+
+jest.mock('slots/WidgetSidebarSlot', () => jest.fn(() => 'widget-sidebar'));
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@edx/frontend-base'),
+  sendTrackEvent: jest.fn(),
+  getAuthenticatedHttpClient: jest.fn(),
+  getLoginRedirectUrl: jest.fn(),
+  useIntl: () => ({
+    formatMessage: jest.requireActual('testUtils').formatMessage,
+    formatDate: (date) => `Date-${date}`,
+  }),
+  logError: jest.fn(),
+}));
+
+jest.mock('utils/hooks', () => {
+  const formatDate = jest.fn(date => `Date-${date}`);
+  return {
+    formatDate,
+    useFormatDate: () => formatDate,
+  };
+});
+
+
+const configureStore = () => redux.createStore(
+  reducers,
+);
+
+let el;
+let store;
+let state;
+let retryLink;
+let inspector;
+
+/**
+ * Simple wrapper for updating the top-level state variable, that also returns the new value
+ * @return {obj} - current redux store state
+ */
+const getState = () => {
+  state = store.getState();
+  return state;
+};
+
+/**
+ * Object to be filled with resolve/reject functions for all controlled network comm channels
+ */
+const resolveFns = {
+};
+/**
+ * Mock the api with jest functions that can be tested against.
+ */
+const mockNetworkError = (reject) => () => reject(new Error({
+  response: { status: ErrorStatuses.badRequest },
+}));
+
+const mockForbiddenError = (reject) => () => reject(new Error({
+  response: { status: ErrorStatuses.forbidden },
+}));
+
+
+const allCourses = [
+  ...fakeData.courseRunData,
+  ...fakeData.entitlementData,
+];
+
+const { compileCourseRunData, compileEntitlementData } = fakeData;
+
+const initCourses = jest.fn(() => []);
+
+let initializeApp;
+
+const mockApi = () => {
+  api.initializeList = jest.fn(() => new Promise(
+    (resolve, reject) => {
+      resolveFns.init = {
+        success: () => {
+          const data = {
+            courses: initCourses(),
+            ...fakeData.globalData,
+          };
+          resolve({ data });
+        },
+      };
+    }));
+};
+
+/**
+ * load and configure the store, render the element, and populate the top-level state object
+ */
+const renderEl = async () => {
+  store = configureStore();
+  el = await render(
+    <IntlProvider locale='en' messages={messages.en}>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </IntlProvider>,
+  );
+  getState();
+};
+
+const waitForEqual = async (valFn, expected, key) => waitFor(() => {
+  expect(valFn(), `${key} is expected to equal ${expected}`).toEqual(expected);
+});
+const waitForRequestStatus = (key, status) => waitForEqual(
+  () => getState().requests[key].status,
+  status,
+  key,
+);
+
+const loadApp = async (courses) => {
+  initCourses.mockReturnValue(courses.map(compileCourseRunData));
+  await renderEl();
+  inspector = new Inspector(el);
+  await waitForRequestStatus(RequestKeys.initialize, RequestStates.pending);
+  resolveFns.init.success();
+  await waitForRequestStatus(RequestKeys.initialize, RequestStates.completed);
+}
+
+const courseNames = [
+  'course-name-1',
+  'course-name-2',
+  'course-name-3',
+];
+
+describe('ESG app integration tests', () => {
+  beforeEach(() => {
+    mockApi();
+  });
+
+  test('initialization', async () => {
+    await loadApp([{ courseName: courseNames[0] }]);
+  });
+
+  describe('course cards', () => {
+    const courseNames = [
+      'course-name-0',
+      'course-name-1',
+      'course-name-2',
+    ];
+    const testCourse = async (index, tests) => {
+      await getState();
+      const cards = inspector.get.courseCards;
+      const card = cards.at(index);
+      const cardId = genCardId(index);
+      const cardDetails = inspector.get.card.details(card);
+      const courseData = selectors.app.courseCard.course(state, cardId);
+      const { courseName } = selectors.app.courseCard.course(state, cardId);
+      inspector.verifyText(inspector.get.card.header(card), courseName);
+      if (tests.length > index) {
+        tests[index]({ cardId, cardDetails });
+      }
+    }
+
+    const loadCourse = async (course) => {
+      await loadApp([course].map(compileCourseRunData));
+      await waitForRequestStatus(RequestKeys.initialize, RequestStates.pending);
+      resolveFns.init.success();
+      await waitForRequestStatus(RequestKeys.initialize, RequestStates.completed);
+    };
+
+    describe('audit courses', () => {
+      test('audit', async () => {
+        const courses = [
+          { courseName: courseNames[0] }, // audit, course run not started
+          {
+            courseName: courseNames[1],
+            enrollment: {
+              coursewareAccess: {
+                isTooEarly: true,
+                hasUnmetPrerequisites: false,
+                isStaff: false,
+              },
+            },
+          }, // audit, course run not started, is too early
+          {
+            courseName: courseNames[2],
+            courseRun: {
+              courseRun: { isStarted: true },
+            },
+            enrollment: {
+              accessExpirationDate: fakeData.pastDate,
+              canUpgrade: false,
+              isAuditAccessExpired: true,
+              hasStarted: true,
+            },
+          }, // audit, course run and learner started, access expired, cannot upgrade
+        ];
+        const formatDate = useFormatDate();
+        await loadApp(courses);
+        await testCourse(0, [
+          ({ cardId, cardDetails }) => {
+            const enrollment = selectors.app.courseCard.enrollment(state, cardId);
+            const courseRun = selectors.app.courseCard.courseRun(state, cardId);
+            const courseProvider = selectors.app.courseCard.courseProvider(state, cardId);
+            const course = selectors.app.courseCard.course(state, cardId);
+            expect(enrollment.isAudit).toEqual(true);
+            expect(courseRun.isStarted).toEqual(false);
+            expect(enrollment.canUpgrade).toEqual(true);
+            [
+              courseProvider.name,
+              course.courseNumber,
+              appMessages.withValues.CourseCardDetails.courseStarts({
+                startDate: formatDate(new Date(courseRun.startDate)),
+              }),
+            ].forEach(value => inspector.verifyTextIncludes(cardDetails, value));
+          },
+        ]);
+        await testCourse(1, [
+          ({ cardId, cardDetails }) => {
+            const enrollment = selectors.app.courseCard.enrollment(state, cardId);
+            const courseRun = selectors.app.courseCard.courseRun(state, cardId);
+            expect(enrollment.isAudit).toEqual(true);
+            expect(courseRun.isStarted).toEqual(false);
+            expect(enrollment.coursewareAccess.isTooEarly).toEqual(true);
+            expect(enrollment.hasAccess).toEqual(false);
+          },
+        ]);
+      });
+    });
+  });
+});

package/src/test/inspector.js

@@ -0,0 +1,50 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { within } from '@testing-library/react';
+
+// import fakeData from 'data/services/lms/fakeData';
+// import { gradingStatusTransform } from 'data/redux/grading/selectors/selected';
+
+// import appMessages from './messages';
+
+/**
+ * App inspector class providing methods to return elements from within
+ * the virtual DOM
+ * @props {Root Node} el - Root app render node.
+ */
+class Inspector {
+  constructor(el) {
+    this.el = el;
+    this.getByRole = this.el.getByRole;
+    this.getByText = this.el.getByText;
+    this.getByLabelText = this.el.getByLabelText;
+    this.findByText = this.el.findByText;
+    this.findByLabelText = this.el.findByLabelText;
+  }
+
+  get get() {
+    return {
+      courseCards: this.el.getAllByTestId('CourseCard'),
+      card: {
+        header: (card) => within(card).getByTestId('CourseCardTitle'),
+        details: (card) => within(card).getByTestId('CourseCardDetails'),
+        // banners: (card) => within(card).getByTestId('CourseCardBanners'),
+        // programsBadge: (card) => within(card).getByTestId('RelatedProgramsBadge'),
+        // actions: (card) => within(card).getByTestId('CourseCardActions'),
+      },
+    };
+  }
+
+  /**
+   * Returns promises for attempting to find elements within the DOM
+   */
+  get find() {
+    return {
+    };
+  }
+
+  verifyText = (el, text) => within(el).getByText(text);
+
+  verifyTextIncludes = (el, text) => within(el).getByText(text, { exact: false });
+}
+
+export default Inspector;

package/src/test/messages.js

@@ -0,0 +1,29 @@
+import CourseCardDetails from 'containers/CourseCard/components/CourseCardDetails/messages';
+
+const mapMessages = (messages) => Object.keys(messages).reduce(
+  (acc, key) => ({ ...acc, [key]: messages[key].defaultMessage }),
+  {},
+);
+
+const mapMessagesWithValues = (messages) => Object.keys(messages).reduce(
+  (acc, key) => ({
+    ...acc,
+    [key]: (values) => {
+      let message = messages[key].defaultMessage;
+      if (values) {
+        Object.keys(values).forEach(valueKey => {
+          message = message.replaceAll(`{${valueKey}}`, values[valueKey]);
+        });
+      }
+      return message;
+    },
+  }),
+  {},
+);
+
+export default {
+  CourseCardDetails: mapMessages(CourseCardDetails),
+  withValues: {
+    CourseCardDetails: mapMessagesWithValues(CourseCardDetails),
+  },
+};

package/src/test/utils.js

@@ -0,0 +1,3 @@
+export const mockSuccess = (returnValFn) => (...args) => Promise.resolve(returnValFn(...args));
+
+export const mockFailure = (returnValFn) => (...args) => Promise.reject(returnValFn(...args));

package/src/testUtils.js

@@ -0,0 +1,211 @@
+import react from 'react';
+
+import { StrictDict } from 'utils';
+
+/**
+ * Mocked formatMessage provided by react-intl
+ */
+export const formatMessage = (msg, values) => {
+  let message = msg.defaultMessage;
+  if (values === undefined) {
+    return message;
+  }
+  // check if value is not a primitive type.
+  if (Object.values(values).filter(value => Object(value) === value).length) {
+    return <format-message-function {...{ message: msg, values }} />;
+  }
+  Object.keys(values).forEach((key) => {
+    message = message.replaceAll(`{${key}}`, values[key]);
+  });
+  return message;
+};
+
+/**
+ * Mock a single component, or a nested component so that its children render nicely
+ * in snapshots.
+ * @param {string} name - parent component name
+ * @param {obj} contents - object of child components with intended component
+ *   render name.
+ * @return {func} - mock component with nested children.
+ *
+ * usage:
+ *   mockNestedComponent('Card', { Body: 'Card.Body', Form: { Control: { Feedback: 'Form.Control.Feedback' }}... });
+ *   mockNestedComponent('IconButton', 'IconButton');
+ */
+export const mockNestedComponent = (name, contents) => {
+  if (typeof contents === 'function') {
+    return contents();
+  }
+  if (typeof contents !== 'object') {
+    return contents;
+  }
+  const fn = () => name;
+  Object.defineProperty(fn, 'name', { value: name });
+  Object.keys(contents).forEach((nestedName) => {
+    const value = contents[nestedName];
+    fn[nestedName] = typeof value !== 'object'
+      ? value
+      : mockNestedComponent(`${name}.${nestedName}`, value);
+  });
+  return fn;
+};
+
+/**
+ * Mock a module of components.  nested components will be rendered nicely in snapshots.
+ * @param {obj} mapping - component module mock config.
+ * @return {obj} - module of flat and nested components that will render nicely in snapshots.
+ * usage:
+ *   mockNestedComponents({
+ *     Card: { Body: 'Card.Body' },
+ *     IconButton: 'IconButton',
+ *   })
+ */
+export const mockNestedComponents = (mapping) => Object.entries(mapping).reduce(
+  (obj, [name, value]) => ({
+    ...obj,
+    [name]: mockNestedComponent(name, value),
+  }),
+  {},
+);
+
+/**
+ * Mock utility for working with useState in a hooks module.
+ * Expects/requires an object containing the state object in order to ensure
+ * the mock behavior works appropriately.
+ *
+ * Expected format:
+ *   hooks = { state: { <key>: (val) => React.createRef(val), ... } }
+ *
+ * Returns a utility for mocking useState and providing access to specific state values
+ * and setState methods, as well as allowing per-test configuration of useState value returns.
+ *
+ * Example usage:
+ *   // hooks.js
+ *   import * as module from './hooks';
+ *   const state = {
+ *     isOpen: (val) => React.useState(val),
+ *     hasDoors: (val) => React.useState(val),
+ *     selected: (val) => React.useState(val),
+ *   };
+ *   ...
+ *   export const exampleHook = () => {
+ *     const [isOpen, setIsOpen] = module.state.isOpen(false);
+ *     if (!isOpen) { return null; }
+ *     return { isOpen, setIsOpen };
+ *   }
+ *   ...
+ *
+ *   // hooks.test.js
+ *   import * as hooks from './hooks';
+ *   const state = new MockUseState(hooks)
+ *   ...
+ *   describe('state hooks', () => {
+ *     state.testGetter(state.keys.isOpen);
+ *     state.testGetter(state.keys.hasDoors);
+ *     state.testGetter(state.keys.selected);
+ *   });
+ *   describe('exampleHook', () => {
+ *     beforeEach(() => { state.mock(); });
+ *     it('returns null if isOpen is default value', () => {
+ *       expect(hooks.exampleHook()).toEqual(null);
+ *     });
+ *     it('returns isOpen and setIsOpen if isOpen is not null', () => {
+ *       state.mockVal(state.keys.isOpen, true);
+ *       expect(hooks.exampleHook()).toEqual({
+ *         isOpen: true,
+ *         setIsOpen: state.setState[state.keys.isOpen],
+ *       });
+ *     });
+ *     afterEach(() => { state.restore(); });
+ *   });
+ *
+ * @param {obj} hooks - hooks module containing a 'state' object
+ */
+export class MockUseState {
+  constructor(hooks) {
+    this.hooks = hooks;
+    this.oldState = null;
+    this.setState = {};
+    this.stateVals = {};
+
+    this.mock = this.mock.bind(this);
+    this.restore = this.restore.bind(this);
+    this.mockVal = this.mockVal.bind(this);
+    this.testGetter = this.testGetter.bind(this);
+  }
+
+  /**
+   * @return {object} - StrictDict of state object keys
+   */
+  get keys() {
+    return StrictDict(Object.keys(this.hooks.state).reduce(
+      (obj, key) => ({ ...obj, [key]: key }),
+      {},
+    ));
+  }
+
+  /**
+   * Replace the hook module's state object with a mocked version, initialized to default values.
+   */
+  mock() {
+    this.oldState = this.hooks.state;
+    Object.keys(this.keys).forEach(key => {
+      this.hooks.state[key] = jest.fn(val => {
+        this.stateVals[key] = val;
+        return [val, this.setState[key]];
+      });
+    });
+    this.setState = Object.keys(this.keys).reduce(
+      (obj, key) => ({
+        ...obj,
+        [key]: jest.fn(val => {
+          this.hooks.state[key] = val;
+        }),
+      }),
+      {},
+    );
+  }
+
+  expectInitializedWith(key, value) {
+    expect(this.hooks.state[key]).toHaveBeenCalledWith(value);
+  }
+
+  expectSetStateCalledWith(key, value) {
+    expect(this.setState[key]).toHaveBeenCalledWith(value);
+  }
+
+  /**
+   * Restore the hook module's state object to the actual code.
+   */
+  restore() {
+    this.hooks.state = this.oldState;
+  }
+
+  /**
+   * Mock the state getter associated with a single key to return a specific value one time.
+   * @param {string} key - state key (from this.keys)
+   * @param {any} val - new value to be returned by the useState call.
+   */
+  mockVal(key, val) {
+    this.hooks.state[key].mockReturnValueOnce([val, this.setState[key]]);
+  }
+
+  testGetter(key) {
+    test(`${key} state getter should return useState passthrough`, () => {
+      const testValue = 'some value';
+      const useState = (val) => ({ useState: val });
+      jest.spyOn(react, 'useState').mockImplementationOnce(useState);
+      expect(this.hooks.state[key](testValue)).toEqual(useState(testValue));
+    });
+  }
+
+  get values() {
+    return StrictDict({ ...this.hooks.state });
+  }
+}
+
+export const mockLocation = (href) => {
+  delete global.window.location;
+  global.window = Object.create(window);
+  global.window.location = { href };
+};

package/src/tracking/constants.js

@@ -0,0 +1,50 @@
+import { StrictDict } from '../utils';
+
+export const categories = StrictDict({
+  dashboard: 'dashboard',
+  userEngagement: 'user-engagement',
+  searchButton: 'search_button',
+  credit: 'credit',
+  filter: 'filter',
+});
+
+export const events = StrictDict({
+  enterCourseClicked: 'enterCourseClicked',
+  courseImageClicked: 'courseImageClicked',
+  courseTitleClicked: 'courseTitleClicked',
+  courseOptionsDropdownClicked: 'courseOptionsDropdownClicked',
+  shareClicked: 'shareClicked',
+  userSettingsChanged: 'userSettingsChanged',
+  newSession: 'newSession',
+  switchSession: 'switchSession',
+  leaveSession: 'leaveSession',
+  unenrollReason: 'unenrollReason',
+  entitlementUnenrollReason: 'entitlementUnenrollReason',
+});
+
+export const eventNames = StrictDict({
+  enterCourseClicked: 'edx.bi.dashboard.enter_course.clicked',
+  courseImageClicked: 'edx.bi.dashboard.course_image.clicked',
+  courseTitleClicked: 'edx.bi.dashboard.course_title.clicked',
+  courseOptionsDropdownClicked: 'edx.bi.dashboard.course_options_dropdown.clicked',
+  shareClicked: 'edx.course.share_clicked',
+  userSettingsChanged: 'edx.user.settings.changed',
+  newSession: 'course-dashboard.new-session',
+  switchSession: 'course-dashboard.switch-session',
+  leaveSession: 'course-dashboard.leave-session',
+  unenrollReason: 'unenrollment_reason.selected',
+  entitlementUnenrollReason: 'entitlement_unenrollment_reason.selected',
+  findCoursesClicked: 'edx.bi.dashboard.find_courses_button.clicked',
+  purchaseCredit: 'edx.bi.credit.clicked_purchase_credit',
+  filterClicked: 'course-dashboard.filter.clicked',
+  filterOptionSelected: 'course-dashboard.filter_option.selected',
+});
+
+export const linkNames = StrictDict({
+  learnerHomeNavExplore: 'learner_home_nav_explore',
+  learnerHomeNavDropdownExplore: 'learner_home_nav_dropdown_explore',
+});
+
+export const appName = 'learner-home';
+
+export default eventNames;

package/src/tracking/index.js

@@ -0,0 +1,17 @@
+import course from './trackers/course';
+import credit from './trackers/credit';
+import engagement from './trackers/engagement';
+import entitlements from './trackers/entitlements';
+import socialShare from './trackers/socialShare';
+import findCourses from './trackers/findCourses';
+import filter from './trackers/filter';
+
+export default {
+  course,
+  credit,
+  engagement,
+  entitlements,
+  socialShare,
+  findCourses,
+  filter,
+};

package/src/tracking/trackers/course.js

@@ -0,0 +1,44 @@
+import { createEventTracker, createLinkTracker } from '../../data/services/segment/utils';
+import { categories, eventNames } from '../constants';
+import * as module from './course';
+
+// Utils/Helpers
+/**
+ * Generate a segement event tracker for a given course event.
+ * @param {string} eventName - segment event name
+ * @param {string} courseId - course run identifier
+ * @param {[object]} options - optional event data
+ */
+export const courseEventTracker = (eventName, courseId, options = {}) => createEventTracker(
+  eventName,
+  { category: categories.dashboard, label: courseId, ...options },
+);
+/**
+ * Generate a hook to allow components to provide a courseId and link href and provide
+ * a link tracker with defined event name and options, over a set of default optiosn.
+ * @param {string} eventName - event name for the click event
+ * @return {callback} - component hook returning a link tracking event callback
+ */
+export const courseLinkTracker = (eventName) => (courseId, href) => (
+  createLinkTracker(module.courseEventTracker(eventName, courseId), href)
+);
+
+// Non-Link events
+export const courseOptionsDropdownClicked = (courseId) => (
+  module.courseEventTracker(eventNames.courseOptionsDropdownClicked, courseId)
+);
+
+// Link events (track and then change page location)
+export const courseImageClicked = (...args) => (
+  module.courseLinkTracker(eventNames.courseImageClicked)(...args));
+export const courseTitleClicked = (...args) => (
+  module.courseLinkTracker(eventNames.courseTitleClicked)(...args));
+export const enterCourseClicked = (...args) => (
+  module.courseLinkTracker(eventNames.enterCourseClicked)(...args));
+
+export default {
+  courseImageClicked,
+  courseOptionsDropdownClicked,
+  courseTitleClicked,
+  enterCourseClicked,
+};