@openedx/frontend-app-learner-dashboard 1.0.0-alpha.5 → 1.0.0-alpha.7

package/src/hooks/api.test.js

@@ -1,268 +0,0 @@
-import React from 'react';
-import { SiteContext } from '@openedx/frontend-base';
-import * as ReactQuery from '@tanstack/react-query';
-import keyStore from '@src/utils/keyStore';
-import { RequestKeys } from '@src/data/constants/requests';
-import api from '@src/data/services/lms/api';
-import { post } from '@src/data/services/lms/utils';
-import * as reduxHooks from '@src/data/redux/hooks';
-import * as apiHooks from './api';
-
-const reduxKeys = keyStore(reduxHooks);
-
-jest.mock('@src/data/services/lms/utils', () => ({
-  post: jest.fn((...args) => ({ post: args })),
-}));
-jest.mock('@src/data/services/lms/api', () => ({
-  initializeList: jest.fn(),
-  updateEntitlementEnrollment: jest.fn(),
-  unenrollFromCourse: jest.fn(),
-  deleteEntitlementEnrollment: jest.fn(),
-  updateEmailSettings: jest.fn(),
-  createCreditRequest: jest.fn(),
-}));
-jest.mock('@src/data/redux/hooks', () => ({
-  useCardCourseRunData: jest.fn(),
-  useCardCreditData: jest.fn(),
-  useCardEntitlementData: jest.fn(),
-  useLoadData: jest.fn(),
-  useMakeNetworkRequest: jest.fn(),
-  useClearRequest: jest.fn(),
-  useEmailConfirmationData: jest.fn(),
-}));
-jest.mock('@tanstack/react-query', () => ({
-  ...jest.requireActual('@tanstack/react-query'),
-  useQuery: jest.fn(),
-  useQueryClient: jest.fn(),
-}));
-jest.mock('@src/data/contexts/GlobalDataContext', () => ({
-  default: {
-    Provider: ({ children }) => children,
-    Consumer: ({ children }) => children({
-      emailConfirmation: { sendEmailUrl: 'test-send-email-url' },
-    }),
-    displayName: 'GlobalDataContext',
-  },
-}));
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useContext: jest.fn(() => {
-    // Return the mocked context value for GlobalDataContext
-    return { emailConfirmation: { sendEmailUrl: 'test-send-email-url' } };
-  }),
-}));
-
-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 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);
-  });
-};
-
-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(() => {
-        // Mock useInitializeApp to return a mock React Query object
-        jest.spyOn(apiHooks, 'useInitializeApp').mockReturnValue({
-          data: null,
-          isLoading: false,
-          isError: false,
-          error: null,
-        });
-        hook = { args: { requestKey: RequestKeys.initialize, onSuccess: loadData } };
-      });
-      testRequestKey(RequestKeys.initialize);
-      it('initializes load data hook', () => {
-        apiHooks.useInitializeApp();
-        // Since useInitializeApp uses React Query, it doesn't directly call useLoadData
-        // in the same way as the other hooks. This test would need to be restructured
-        // for proper React Query testing.
-        expect(reduxHooks.useLoadData).toHaveBeenCalledTimes(0);
-      });
-      it('calls loadData with data on success', () => {
-        hook.args.onSuccess(testString);
-        expect(loadData).toHaveBeenCalledWith(testString);
-      });
-    });
-
-    describe('entitlement enrollment hooks', () => {
-      let mockQueryClient;
-      let invalidateQueries;
-      beforeEach(() => {
-        invalidateQueries = jest.fn();
-        mockQueryClient = { invalidateQueries };
-        // Mock useQueryClient from React Query
-        ReactQuery.useQueryClient.mockReturnValue(mockQueryClient);
-      });
-
-      const testInitialization = () => {
-        it('initializes useQueryClient', () => {
-          expect(ReactQuery.useQueryClient).toHaveBeenCalled();
-        });
-        testInitCardHook(reduxKeys.useCardEntitlementData);
-      };
-
-      const testArgs = (requestKey) => {
-        testRequestKey(requestKey);
-        it('invalidates initialize query on success', () => {
-          hook.args.onSuccess();
-          expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: [RequestKeys.initialize] });
-        });
-      };
-
-      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('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(() => {
-        hook = apiHooks.useSendConfirmEmail();
-        out = hook();
-      });
-      it('uses GlobalDataContext to get emailConfirmation', () => {
-        // The hook should use the mocked context which returns sendEmailUrl
-        expect(out).toEqual(post(sendEmailUrl));
-      });
-      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

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

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

@@ -1,20 +0,0 @@
-import * as utils from './utils';
-
-jest.unmock('./utils');
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useCallback: jest.fn((cb, prereqs) => ({ useCallback: { cb, prereqs } })),
-}));
-
-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

@@ -1,25 +0,0 @@
-// 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/messages.js

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

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

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

@@ -1,84 +0,0 @@
-// 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 (const key of analytics.methods) {
-    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);
-}());

package/src/setupTest.jsx

@@ -1,45 +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('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 })),
-  };
-});

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;