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

package/src/test/app.test.jsx

@@ -1,255 +0,0 @@
-/* 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

@@ -1,50 +0,0 @@
-/* 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

@@ -1,29 +0,0 @@
-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

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

package/src/testUtils.js

@@ -1,211 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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,
-};