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

package/src/hooks/api.test.js

@@ -0,0 +1,273 @@
+import React from 'react';
+import { SiteContext } from '@openedx/frontend-base';
+import { keyStore } from 'utils';
+import { RequestKeys } from 'data/constants/requests';
+import { post } from 'data/services/lms/utils';
+import api from 'data/services/lms/api';
+
+import * as reduxHooks from 'data/redux/hooks';
+import * as apiHooks from './api';
+
+const reduxKeys = keyStore(reduxHooks);
+
+jest.mock('data/services/lms/utils', () => ({
+  post: jest.fn((...args) => ({ post: args })),
+}));
+jest.mock('data/services/lms/api', () => ({
+  initializeList: jest.fn(),
+  updateEntitlementEnrollment: jest.fn(),
+  unenrollFromCourse: jest.fn(),
+  deleteEntitlementEnrollment: jest.fn(),
+  updateEmailSettings: jest.fn(),
+  createCreditRequest: jest.fn(),
+}));
+jest.mock('data/redux/hooks', () => ({
+  useCardCourseRunData: jest.fn(),
+  useCardCreditData: jest.fn(),
+  useCardEntitlementData: jest.fn(),
+  useLoadData: jest.fn(),
+  useMakeNetworkRequest: jest.fn(),
+  useClearRequest: jest.fn(),
+  useEmailConfirmationData: jest.fn(),
+}));
+
+const moduleKeys = keyStore(apiHooks);
+const testString = 'TEST-string';
+const uuid = 'test-UUID';
+const cardId = 'test-card-id';
+const selection = 'test-selection';
+const courseId = 'test-COURSE-id';
+const isRefundable = 'test-is-refundable';
+const user = 'test-user';
+
+const loadData = jest.fn();
+reduxHooks.useLoadData.mockReturnValue(loadData);
+const clearRequest = jest.fn();
+reduxHooks.useClearRequest.mockReturnValue(clearRequest);
+
+reduxHooks.useCardCourseRunData.mockReturnValue({ courseId });
+reduxHooks.useCardEntitlementData.mockReturnValue({ uuid, isRefundable });
+
+let hook;
+let out;
+
+const testInitCardHook = (hookKey) => {
+  test(`initializes ${hookKey} with cardId`, () => {
+    expect(reduxHooks[hookKey]).toHaveBeenCalledWith(cardId);
+  });
+};
+
+const initializeApp = jest.fn();
+
+describe('api hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useNetworkRequest', () => {
+    const makeNetworkRequest = jest.fn(args => ({ networkRequest: args }));
+    const action = jest.fn((...actionArgs) => ({ action: actionArgs }));
+    const args = { some: 'test', args: 'for you' };
+    it('returns network request based on incoming action', () => {
+      reduxHooks.useMakeNetworkRequest.mockReturnValue(makeNetworkRequest);
+      hook = apiHooks.useNetworkRequest(action, args);
+      expect(hook()).toEqual(makeNetworkRequest({ promise: action(), ...args }));
+    });
+    it('forwards action arguments', () => {
+      reduxHooks.useMakeNetworkRequest.mockReturnValue(makeNetworkRequest);
+      hook = apiHooks.useNetworkRequest(action, args);
+      const actionArgs = [1, 2, 3];
+      expect(hook(...actionArgs)).toEqual(
+        makeNetworkRequest({ promise: action(...actionArgs), ...args }),
+      );
+    });
+  });
+
+  describe('network requests', () => {
+    const mockUseNetworkRequest = jest.fn((action, args) => ({ action, args }));
+    const testRequestKey = (requestKey) => {
+      test('requestKey', () => {
+        expect(hook.args.requestKey).toEqual(requestKey);
+      });
+    };
+
+    beforeEach(() => {
+      jest.spyOn(apiHooks, moduleKeys.useNetworkRequest).mockImplementation(mockUseNetworkRequest);
+    });
+
+    describe('useInitializeApp', () => {
+      beforeEach(() => {
+        hook = apiHooks.useInitializeApp();
+      });
+      it('calls initialize api method', () => {
+        expect(hook.action).toEqual(api.initializeList);
+      });
+      testRequestKey(RequestKeys.initialize);
+      it('initializes load data hook', () => {
+        expect(reduxHooks.useLoadData).toHaveBeenCalledWith();
+      });
+      it('calls loadData with data on success', () => {
+        hook.args.onSuccess({ data: testString });
+        expect(loadData).toHaveBeenCalledWith(testString);
+      });
+    });
+
+    describe('entitlement enrollment hooks', () => {
+      beforeEach(() => {
+        jest.spyOn(apiHooks, moduleKeys.useInitializeApp).mockReturnValue(initializeApp);
+      });
+
+      const testInitialization = () => {
+        it('initializes useInitializeApp', () => {
+          expect(apiHooks.useInitializeApp).toHaveBeenCalledWith();
+        });
+        testInitCardHook(reduxKeys.useCardEntitlementData);
+      };
+
+      const testArgs = (requestKey) => {
+        testRequestKey(requestKey);
+        it('initializes app on success', () => {
+          expect(hook.args.onSuccess).toEqual(initializeApp);
+        });
+      };
+
+      describe('useNewEntitlementEnrollment', () => {
+        beforeEach(() => {
+          hook = apiHooks.useNewEntitlementEnrollment(cardId);
+        });
+        testInitialization();
+        testArgs(RequestKeys.newEntitlementEnrollment);
+        it('calls updateEntitlementEnrollment api method', () => {
+          hook.action(selection);
+          expect(api.updateEntitlementEnrollment)
+            .toHaveBeenCalledWith({ uuid, courseId: selection });
+        });
+      });
+
+      describe('useSwitchEntitlementEnrollment', () => {
+        beforeEach(() => {
+          hook = apiHooks.useSwitchEntitlementEnrollment(cardId);
+        });
+        testInitialization();
+        testArgs(RequestKeys.switchEntitlementSession);
+        it('calls updateEntitlementEnrollment api method', () => {
+          hook.action(selection);
+          expect(api.updateEntitlementEnrollment)
+            .toHaveBeenCalledWith({ uuid, courseId: selection });
+        });
+      });
+
+      describe('useLeaveEntitlementSession', () => {
+        beforeEach(() => {
+          hook = apiHooks.useLeaveEntitlementSession(cardId);
+        });
+        testInitialization();
+        testArgs(RequestKeys.leaveEntitlementSession);
+        it('calls updateEntitlementEnrollment api method', () => {
+          hook.action();
+          expect(api.deleteEntitlementEnrollment)
+            .toHaveBeenCalledWith({ uuid, isRefundable });
+        });
+      });
+    });
+
+    describe('useUnenrollFromCourse', () => {
+      beforeEach(() => {
+        hook = apiHooks.useUnenrollFromCourse(cardId);
+      });
+      testInitCardHook(reduxKeys.useCardCourseRunData);
+      testRequestKey(RequestKeys.unenrollFromCourse);
+      it('calls unenrollFromCourse api method with courseId', () => {
+        hook.action();
+        expect(api.unenrollFromCourse).toHaveBeenCalledWith({ courseId });
+      });
+    });
+
+    describe('useMasqueradeAs', () => {
+      beforeEach(() => {
+        hook = apiHooks.useMasqueradeAs(cardId);
+      });
+      it('initializes load data hook', () => {
+        expect(reduxHooks.useLoadData).toHaveBeenCalledWith();
+      });
+      testRequestKey(RequestKeys.masquerade);
+      it('calls initializeList api method', () => {
+        hook.action(user);
+        expect(api.initializeList).toHaveBeenCalledWith({ user });
+      });
+      it('loads data on success', () => {
+        hook.args.onSuccess({ data: testString });
+        expect(loadData).toHaveBeenCalledWith(testString);
+      });
+    });
+
+    describe('useClearMasquerade', () => {
+      beforeEach(() => {
+        jest.spyOn(apiHooks, moduleKeys.useInitializeApp).mockReturnValue(initializeApp);
+        hook = apiHooks.useClearMasquerade(cardId);
+      });
+      it('initializes clear request redux hook', () => {
+        expect(reduxHooks.useClearRequest).toHaveBeenCalledWith();
+      });
+      it('initializes useInitializeApp hook', () => {
+        expect(apiHooks.useInitializeApp).toHaveBeenCalledWith();
+      });
+      it('clears masquerade state and initializes app on call', () => {
+        hook();
+        expect(clearRequest).toHaveBeenCalledWith(RequestKeys.masquerade);
+        expect(initializeApp).toHaveBeenCalledWith();
+      });
+    });
+
+    describe('useUpdateEmailSettings', () => {
+      const enable = 'test-enable';
+      beforeEach(() => {
+        hook = apiHooks.useUpdateEmailSettings(cardId);
+      });
+      testInitCardHook(reduxKeys.useCardCourseRunData);
+      testRequestKey(RequestKeys.updateEmailSettings);
+      it('calls updateEmailSettings api method on call', () => {
+        hook.action(enable);
+        expect(api.updateEmailSettings).toHaveBeenCalledWith({ courseId, enable });
+      });
+    });
+
+    describe('useSendConfirmEmail', () => {
+      const sendEmailUrl = 'test-send-email-url';
+      beforeEach(() => {
+        reduxHooks.useEmailConfirmationData.mockReturnValue({ sendEmailUrl });
+        hook = apiHooks.useSendConfirmEmail(cardId);
+        out = hook();
+      });
+      it('initializes useEmailConfirmationData hook', () => {
+        expect(reduxHooks.useEmailConfirmationData).toHaveBeenCalledWith();
+      });
+      it('posts to email url on call', () => {
+        expect(out).toEqual(post(sendEmailUrl));
+      });
+    });
+
+    describe('useCreateCreditRequest', () => {
+      const username = 'test-username';
+      const providerId = 'test-provider-id';
+      beforeEach(() => {
+        React.useContext.mockReturnValue({ authenticatedUser: { username } });
+        reduxHooks.useCardCreditData.mockReturnValue({ providerId });
+        hook = apiHooks.useCreateCreditRequest(cardId);
+      });
+      testInitCardHook(reduxKeys.useCardCreditData);
+      testInitCardHook(reduxKeys.useCardCourseRunData);
+      it('initializes username from app context', () => {
+        expect(React.useContext).toHaveBeenCalledWith(SiteContext);
+      });
+      it('calls createCreditRequest api method on call', () => {
+        out = hook();
+        expect(api.createCreditRequest).toHaveBeenCalledWith({
+          providerId,
+          courseId,
+          username,
+        });
+      });
+    });
+  });
+});

package/src/hooks/index.js

@@ -0,0 +1,7 @@
+import * as redux from '../data/redux/hooks';
+import * as api from './api';
+import * as utils from './utils';
+
+export const reduxHooks = redux;
+export const apiHooks = api;
+export const utilHooks = utils;

package/src/hooks/utils.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import dateFormatter from '../utils/dateFormatter';
+
+export const useValueCallback = (cb, prereqs = []) => (
+  React.useCallback(e => cb(e.target.value), prereqs) // eslint-disable-line
+);
+
+export const useFormatDate = () => {
+  const { formatDate } = useIntl();
+  return (date) => dateFormatter(formatDate, date);
+};
+
+export default {
+  useFormatDate,
+  useValueCallback,
+};

package/src/hooks/utils.test.js

@@ -0,0 +1,16 @@
+import * as utils from './utils';
+
+jest.unmock('./utils');
+
+describe('app-level hooks', () => {
+  describe('useValuecallback', () => {
+    it('returns react callback with event target value', () => {
+      const cb = val => ({ cb: val });
+      const prereqs = ['test', 'prereqs'];
+      const value = 'test-value';
+      const out = utils.useValueCallback(cb, prereqs);
+      expect(out.useCallback.cb({ target: { value } })).toEqual({ cb: value });
+      expect(out.useCallback.prereqs).toEqual(prereqs);
+    });
+  });
+});

package/src/i18n/index.js

@@ -0,0 +1,25 @@
+// Placeholder be overridden by `make pull_translations`
+export default {
+  ar: {},
+  'zh-hk': {},
+  'zh-cn': {},
+  uk: {},
+  'tr-tr': {},
+  th: {},
+  te: {},
+  ru: {},
+  'pt-pt': {},
+  'pt-br': {},
+  'it-it': {},
+  id: {},
+  hi: {},
+  he: {},
+  'fr-ca': {},
+  fa: {},
+  'es-es': {},
+  'es-419': {},
+  el: {},
+  'de-de': {},
+  da: {},
+  bo: {},
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as learnerDashboardApp } from './app';
+export { default as learnerDashboardRoutes } from './routes';
+export { default as learnerDashboardMessages } from './i18n';

package/src/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  'learner-dash.loadingSR': {
+    id: 'learner-dash.loadingSR',
+    description: 'Page loading screen-reader text',
+    defaultMessage: 'Loading...',
+  },
+  'learner-dash.title': {
+    id: 'learner-dash.title',
+    description: 'Page title: Learner Home',
+    defaultMessage: 'Learner Home',
+  },
+});
+
+export default messages;

package/src/providers.ts

@@ -0,0 +1,11 @@
+import { AppProvider } from '@openedx/frontend-base';
+
+import GlobalDataProvider from './data/contexts/GlobalDataProvider';
+import MasqueradeUserProvider from './data/contexts/MasqueradeUserProvider';
+
+const providers: AppProvider[] = [
+  GlobalDataProvider,
+  MasqueradeUserProvider,
+];
+
+export default providers;

package/src/routes.jsx

@@ -0,0 +1,14 @@
+import Main from './Main';
+
+const routes = [
+  {
+    id: 'org.openedx.frontend.route.learnerDashboard.main',
+    path: '/',
+    handle: {
+      role: 'org.openedx.frontend.role.dashboard'
+    },
+    Component: Main
+  }
+];
+
+export default routes;

package/src/segment.js

@@ -0,0 +1,85 @@
+// The code in this file is from Segment's website:
+// https://segment.com/docs/sources/website/analytics.js/quickstart/
+import { configuration } from './config';
+
+(function () {
+  // Create a queue, but don't obliterate an existing one!
+  const analytics = window.analytics = window.analytics || [];
+
+  // If the real analytics.js is already on the page return.
+  if (analytics.initialize) return;
+
+  // If the snippet was invoked already show an error.
+  if (analytics.invoked) {
+    if (window.console && console.error) {
+      console.error('Segment snippet included twice.');
+    }
+    return;
+  }
+
+  // Invoked flag, to make sure the snippet
+  // is never invoked twice.
+  analytics.invoked = true;
+
+  // A list of the methods in Analytics.js to stub.
+  analytics.methods = [
+    'trackSubmit',
+    'trackClick',
+    'trackLink',
+    'trackForm',
+    'pageview',
+    'identify',
+    'reset',
+    'group',
+    'track',
+    'ready',
+    'alias',
+    'debug',
+    'page',
+    'once',
+    'off',
+    'on',
+  ];
+
+  // Define a factory to create stubs. These are placeholders
+  // for methods in Analytics.js so that you never have to wait
+  // for it to load to actually record data. The `method` is
+  // stored as the first argument, so we can replay the data.
+  analytics.factory = function (method) {
+    return function () {
+      const args = Array.prototype.slice.call(arguments);
+      args.unshift(method);
+      analytics.push(args);
+      return analytics;
+    };
+  };
+
+  // For each of our methods, generate a queueing stub.
+  for (let i = 0; i < analytics.methods.length; i++) {
+    const key = analytics.methods[i];
+    analytics[key] = analytics.factory(key);
+  }
+
+  // Define a method to load Analytics.js from our CDN,
+  // and that will be sure to only ever load it once.
+  analytics.load = function (key, options) {
+    // Create an async script element based on your key.
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.src = `https://cdn.segment.com/analytics.js/v1/${
+      key}/analytics.min.js`;
+
+    // Insert our script next to the first script element.
+    const first = document.getElementsByTagName('script')[0];
+    first.parentNode.insertBefore(script, first);
+    analytics._loadOptions = options;
+  };
+
+  // Add a version to keep track of what's in the wild.
+  analytics.SNIPPET_VERSION = '4.1.0';
+
+  // Load Analytics.js with your key, which will automatically
+  // load the tools you've enabled for your account. Boosh!
+  analytics.load(configuration.SEGMENT_KEY);
+}());