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

package/src/containers/CoursesPanel/index.test.jsx

@@ -1,92 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { MemoryRouter } from 'react-router-dom';
-import { FilterKeys } from '@src/data/constants/app';
-import { reduxHooks } from '@src/hooks';
-
-import messagesNoCourses from '@src/containers/CoursesPanel/NoCoursesView/messages';
-import { useCourseListData } from './hooks';
-import CoursesPanel from '.';
-import messages from './messages';
-
-const courseSearchUrl = '/course-search-url';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useHasCourses: jest.fn(),
-    usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl,
-    })),
-  },
-}));
-
-jest.mock('./hooks', () => ({
-  useCourseListData: jest.fn(),
-}));
-
-jest.mock('@src/containers/CourseCard', () => jest.fn(() => <div>CourseCard</div>));
-jest.mock('@src/containers/CourseFilterControls', () => ({
-  ActiveCourseFilters: jest.fn(() => <div>ActiveCourseFilters</div>),
-  CourseFilterControls: jest.fn(() => <div>CourseFilterControls</div>),
-}));
-
-const filters = Object.values(FilterKeys);
-
-reduxHooks.useHasCourses.mockReturnValue(true);
-
-describe('CoursesPanel', () => {
-  const defaultCourseListData = {
-    filterOptions: { filters, handleRemoveFilter: jest.fn() },
-    numPages: 1,
-    setPageNumber: jest.fn().mockName('setPageNumber'),
-    showFilters: false,
-    visibleList: [],
-  };
-
-  const createWrapper = (courseListData) => {
-    useCourseListData.mockReturnValue({
-      ...defaultCourseListData,
-      ...courseListData,
-    });
-    return render(
-      <MemoryRouter>
-        <IntlProvider locale="en">
-          <CoursesPanel />
-        </IntlProvider>
-      </MemoryRouter>
-    );
-  };
-
-  describe('no courses', () => {
-    it('should render no courses view slot', () => {
-      reduxHooks.useHasCourses.mockReturnValue(false);
-      createWrapper();
-      const imgNoCourses = screen.getByRole('img', { name: messagesNoCourses.bannerAlt.defaultMessage });
-      expect(imgNoCourses).toBeInTheDocument();
-      const courseCard = screen.queryByText('CourseCard');
-      expect(courseCard).toBeNull();
-    });
-  });
-  describe('with courses', () => {
-    it('should render courselist', () => {
-      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
-      reduxHooks.useHasCourses.mockReturnValue(true);
-      createWrapper({ visibleList });
-      const courseCards = screen.getAllByText('CourseCard');
-      expect(courseCards.length).toEqual(visibleList.length);
-    });
-    it('displays course filter controls', () => {
-      reduxHooks.useHasCourses.mockReturnValue(true);
-      createWrapper();
-      expect(screen.getByText('CourseFilterControls')).toBeInTheDocument();
-    });
-
-    it('displays course list slot when courses exist', () => {
-      reduxHooks.useHasCourses.mockReturnValue(true);
-      const visibleList = [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }];
-      createWrapper({ visibleList });
-      const heading = screen.getByText(messages.myCourses.defaultMessage);
-      expect(heading).toBeInTheDocument();
-    });
-  });
-});

package/src/containers/CoursesPanel/messages.js

@@ -1,11 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  myCourses: {
-    id: 'dashboard.mycourses',
-    defaultMessage: 'My Courses',
-    description: 'Course list heading',
-  },
-});
-
-export default messages;

package/src/containers/Dashboard/DashboardLayout.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Container, Col, Row } from '@openedx/paragon';
-
-import WidgetSidebarSlot from '../../slots/WidgetSidebarSlot';
-
-import hooks from './hooks';
-
-export const columnConfig = {
-  courseList: {
-    withSidebar: {
-      lg: { span: 12, offset: 0 },
-      xl: { span: 8, offset: 0 },
-    },
-    noSidebar: {
-      lg: { span: 12, offset: 0 },
-      xl: { span: 12, offset: 0 },
-    },
-  },
-  sidebar: {
-    lg: { span: 12, offset: 0 },
-    xl: { span: 4, offset: 0 },
-  },
-};
-
-export const DashboardLayout = ({ children }) => {
-  const {
-    isCollapsed,
-    sidebarShowing,
-  } = hooks.useDashboardLayoutData();
-
-  const courseListColumnProps = sidebarShowing
-    ? columnConfig.courseList.withSidebar
-    : columnConfig.courseList.noSidebar;
-
-  return (
-    <Container fluid size="xl">
-      <Row>
-        <Col {...courseListColumnProps} className="course-list-column">
-          {children}
-        </Col>
-        <Col {...columnConfig.sidebar} className={['sidebar-column', !isCollapsed && 'not-collapsed']}>
-          <WidgetSidebarSlot />
-        </Col>
-      </Row>
-    </Container>
-  );
-};
-DashboardLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default DashboardLayout;

package/src/containers/Dashboard/DashboardLayout.test.jsx

@@ -1,106 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { MemoryRouter } from 'react-router-dom';
-import hooks from './hooks';
-import DashboardLayout from './DashboardLayout';
-
-jest.mock('./hooks', () => ({
-  useDashboardLayoutData: jest.fn(),
-}));
-
-const hookProps = {
-  isCollapsed: true,
-  sidebarShowing: false,
-  setSidebarShowing: jest.fn().mockName('hooks.setSidebarShowing'),
-};
-hooks.useDashboardLayoutData.mockReturnValue(hookProps);
-
-const children = <div>test children</div>;
-
-describe('DashboardLayout', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    render(
-      <MemoryRouter>
-        <IntlProvider locale="en">
-          <DashboardLayout>{children}</DashboardLayout>
-        </IntlProvider>
-      </MemoryRouter>
-    );
-  });
-
-  const testColumns = () => {
-    it('loads courseList and sidebar column layout with corresponding children', () => {
-      const courseChildren = screen.getByText('test children');
-      const courseListCol = courseChildren.parentElement;
-      const sidebarCol = courseListCol.nextSibling;
-      expect(courseListCol).toHaveClass('course-list-column');
-      expect(sidebarCol).toHaveClass('sidebar-column');
-    });
-    it('displays children in first column', () => {
-      const courseChildren = screen.getByText('test children');
-      const courseListCol = courseChildren.parentElement;
-      expect(courseChildren).toBeInTheDocument();
-      expect(courseListCol).toHaveClass('course-list-column');
-    });
-    it('displays WidgetSidebarSlot in second column', () => {
-      const courseListCol = screen.getByText('test children').parentElement;
-      const sidebarCol = courseListCol.nextSibling;
-      expect(sidebarCol).toHaveClass('sidebar-column');
-      expect(sidebarCol.children[0]).toHaveAttribute('id', 'looking-for-challenge-widget');
-    });
-  };
-  const testSidebarLayout = ({ isCollapsed }) => {
-    it('displays withSidebar width for course list column', () => {
-      const courseListCol = screen.getByText('test children').parentElement;
-      expect(courseListCol).toHaveClass('col-xl-8');
-      const sidebarCol = courseListCol.nextSibling;
-      expect(sidebarCol).toHaveClass('sidebar-column', !isCollapsed && 'not-collapsed');
-    });
-  };
-  const testNoSidebarLayout = ({ isCollapsed }) => {
-    it('displays noSidebar width for course list column', () => {
-      const courseListCol = screen.getByText('test children').parentElement;
-      expect(courseListCol).toHaveClass('col-xl-12');
-      const sidebarCol = courseListCol.nextSibling;
-      expect(sidebarCol).toHaveClass('sidebar-column', !isCollapsed && 'not-collapsed');
-    });
-  };
-  describe('collapsed', () => {
-    describe('sidebar showing', () => {
-      beforeEach(() => {
-        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, sidebarShowing: true });
-      });
-      testColumns();
-      testSidebarLayout({ isCollapsed: true });
-    });
-    describe('sidebar not showing', () => {
-      beforeEach(() => {
-        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps });
-      });
-      testColumns();
-      testNoSidebarLayout({ isCollapsed: true });
-    });
-  });
-
-  describe('not collapsed', () => {
-    describe('sidebar showing', () => {
-      beforeEach(() => {
-        hooks.useDashboardLayoutData.mockReturnValueOnce({
-          ...hookProps,
-          isCollapsed: false,
-          sidebarShowing: true,
-        });
-      });
-      testColumns();
-      testSidebarLayout({ isCollapsed: false });
-    });
-    describe('sidebar not showing', () => {
-      beforeEach(() => {
-        hooks.useDashboardLayoutData.mockReturnValueOnce({ ...hookProps, isCollapsed: false });
-      });
-      testColumns();
-      testNoSidebarLayout({ isCollapsed: false });
-    });
-  });
-});

package/src/containers/Dashboard/LoadingView.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Spinner } from '@openedx/paragon';
-
-import hooks from './hooks';
-
-export const LoadingView = () => {
-  const { spinnerScreenReaderText } = hooks.useDashboardMessages();
-
-  return (
-    <div className="course-list-loading">
-      <Spinner
-        animation="border"
-        className="mie-3"
-        screenReaderText={spinnerScreenReaderText}
-      />
-    </div>
-  );
-};
-
-export default LoadingView;

package/src/containers/Dashboard/LoadingView.test.jsx

@@ -1,18 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import hooks from './hooks';
-import LoadingView from './LoadingView';
-
-jest.mock('./hooks', () => ({
-  useDashboardMessages: jest.fn(),
-}));
-
-const spinnerScreenReaderText = 'test-sr-text';
-describe('LoadingView', () => {
-  it('renders spinner component with associated screen reader text', () => {
-    hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText });
-    render(<LoadingView />);
-    const loader = screen.getByRole('status');
-    expect(loader.children[0].innerHTML).toBe(spinnerScreenReaderText);
-  });
-});

package/src/containers/Dashboard/hooks.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { useWindowSize, breakpoints } from '@openedx/paragon';
-import { useIntl } from '@openedx/frontend-base';
-import { StrictDict } from '../../utils';
-import appMessages from '../../messages';
-import * as module from './hooks';
-
-export const state = StrictDict({
-  sidebarShowing: (val) => React.useState(val), // eslint-disable-line
-});
-
-export const useDashboardMessages = () => {
-  const { formatMessage } = useIntl();
-  return {
-    spinnerScreenReaderText: formatMessage(appMessages['learner-dash.loadingSR']),
-    pageTitle: formatMessage(appMessages['learner-dash.title']),
-  };
-};
-
-export const useDashboardLayoutData = () => {
-  const { width } = useWindowSize();
-
-  const [sidebarShowing, setSidebarShowing] = module.state.sidebarShowing(true);
-  return {
-    isDashboardCollapsed: width < breakpoints.large.maxWidth,
-    sidebarShowing,
-    setSidebarShowing,
-  };
-};
-
-export default {
-  useDashboardLayoutData,
-  useDashboardMessages,
-};

package/src/containers/Dashboard/hooks.test.js

@@ -1,90 +0,0 @@
-import { useIntl } from '@openedx/frontend-base';
-import { useWindowSize, breakpoints } from '@openedx/paragon';
-import { apiHooks } from '@src/hooks';
-import { MockUseState } from '@src/testUtils';
-
-import appMessages from '@src/messages';
-import * as hooks from './hooks';
-
-jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@openedx/paragon'),
-  useWindowSize: jest.fn(),
-  breakpoints: {},
-}));
-
-jest.mock('@openedx/frontend-base', () => {
-  const { formatMessage } = jest.requireActual('@src/testUtils');
-  return {
-    ...jest.requireActual('@openedx/frontend-base',),
-    useIntl: () => ({
-      formatMessage,
-    }),
-  };
-});
-
-jest.mock('@src/hooks', () => ({
-  apiHooks: {
-    useInitializeApp: jest.fn(),
-  },
-}));
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
-}));
-const state = new MockUseState(hooks);
-
-const initializeApp = jest.fn();
-apiHooks.useInitializeApp.mockReturnValue(initializeApp);
-useWindowSize.mockReturnValue({ width: 20 });
-breakpoints.large = { maxWidth: 30 };
-describe('CourseCard hooks', () => {
-  const { formatMessage } = useIntl();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('state fields', () => {
-    state.testGetter(state.keys.sidebarShowing);
-  });
-
-  describe('useDashboardLayoutData', () => {
-    beforeEach(() => {
-      state.mock();
-    });
-    describe('behavior', () => {
-      it('initializes sidebarShowing to default true value', () => {
-        hooks.useDashboardLayoutData();
-        state.expectInitializedWith(state.keys.sidebarShowing, true);
-      });
-    });
-    describe('output', () => {
-      describe('isDashboardCollapsed', () => {
-        it('returns true iff windowSize width is below the xl breakpoint', () => {
-          expect(hooks.useDashboardLayoutData().isDashboardCollapsed).toEqual(true);
-          useWindowSize.mockReturnValueOnce({ width: 40 });
-          expect(hooks.useDashboardLayoutData().isDashboardCollapsed).toEqual(false);
-        });
-      });
-      it('forwards sidebarShowing and setSidebarShowing from state hook', () => {
-        const hook = hooks.useDashboardLayoutData();
-        const { sidebarShowing, setSidebarShowing } = hook;
-        expect(sidebarShowing).toEqual(state.stateVals.sidebarShowing);
-        expect(setSidebarShowing).toEqual(state.setState.sidebarShowing);
-      });
-    });
-  });
-  describe('useDashboardMessages', () => {
-    it('returns spinner screen reader text', () => {
-      expect(hooks.useDashboardMessages().spinnerScreenReaderText).toEqual(
-        formatMessage(appMessages['learner-dash.loadingSR']),
-      );
-    });
-    it('returns page title', () => {
-      expect(hooks.useDashboardMessages().pageTitle).toEqual(
-        formatMessage(appMessages['learner-dash.title']),
-      );
-    });
-  });
-});

package/src/containers/Dashboard/index.jsx

@@ -1,43 +0,0 @@
-import { apiHooks, reduxHooks } from '../../hooks';
-import SelectSessionModal from '../../containers/SelectSessionModal';
-import CoursesPanel from '../../containers/CoursesPanel';
-import DashboardModalSlot from '../../slots/DashboardModalSlot';
-
-import LoadingView from './LoadingView';
-import DashboardLayout from './DashboardLayout';
-import hooks from './hooks';
-import './index.scss';
-
-export const Dashboard = () => {
-  const { isPending } = apiHooks.useInitializeApp();
-  const { pageTitle } = hooks.useDashboardMessages();
-  const hasCourses = reduxHooks.useHasCourses();
-  const showSelectSessionModal = reduxHooks.useShowSelectSessionModal();
-
-  return (
-    <div id="learnerdashboardroot">
-      <main>
-        <div id="dashboard-container" className="d-flex flex-column p-2 pt-0">
-          <h1 className="sr-only">{pageTitle}</h1>
-          {!isPending && (
-            <>
-              <DashboardModalSlot />
-              {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}
-            </>
-          )}
-          <div id="dashboard-content" data-testid="dashboard-content">
-            {isPending
-              ? (<LoadingView />)
-              : (
-                <DashboardLayout>
-                  <CoursesPanel />
-                </DashboardLayout>
-              )}
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};
-
-export default Dashboard;

package/src/containers/Dashboard/index.test.jsx

@@ -1,81 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-
-import { reduxHooks, apiHooks } from '@src/hooks';
-import hooks from './hooks';
-import Dashboard from './';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useHasCourses: jest.fn(),
-    useShowSelectSessionModal: jest.fn(),
-    useRequestIsPending: jest.fn(),
-  },
-  apiHooks: {
-    useInitializeApp: jest.fn(),
-  },
-}));
-
-jest.mock('./hooks', () => ({
-  useInitializeDashboard: jest.fn(),
-  useDashboardMessages: jest.fn(),
-}));
-
-jest.mock('../../slots/DashboardModalSlot', () => jest.fn(() => <div>DashboardModalSlot</div>));
-jest.mock('@src/containers/CoursesPanel', () => jest.fn(() => <div>CoursesPanel</div>));
-jest.mock('@src/containers/SelectSessionModal', () => jest.fn(() => <div>SelectSessionModal</div>));
-jest.mock('./DashboardLayout', () => jest.fn(() => <div>DashboardLayout</div>));
-jest.mock('./LoadingView', () => jest.fn(() => <div>LoadingView</div>));
-
-const pageTitle = 'test-page-title';
-
-describe('Dashboard', () => {
-  const createWrapper = (props = {}) => {
-    const {
-      hasCourses = true,
-      initIsPending = true,
-      showSelectSessionModal = true,
-    } = props;
-    hooks.useDashboardMessages.mockReturnValue({ pageTitle });
-    apiHooks.useInitializeApp.mockReturnValue({ isPending: initIsPending });
-    reduxHooks.useHasCourses.mockReturnValue(hasCourses);
-    reduxHooks.useRequestIsPending.mockReturnValue(initIsPending);
-    reduxHooks.useShowSelectSessionModal.mockReturnValue(showSelectSessionModal);
-    return render(<IntlProvider locale="en"><Dashboard /></IntlProvider>);
-  };
-
-  describe('render', () => {
-    it('page title is displayed in sr-only h1 tag', () => {
-      createWrapper();
-      const heading = screen.getByText(pageTitle);
-      expect(heading).toHaveClass('sr-only');
-    });
-    describe('initIsPending false', () => {
-      it('should render DashboardModalSlot', () => {
-        createWrapper({ initIsPending: false });
-        const dashboardModalSlot = screen.getByText('DashboardModalSlot');
-        expect(dashboardModalSlot).toBeInTheDocument();
-      });
-      it('should render SelectSessionModal', () => {
-        createWrapper({ initIsPending: false });
-        const selectSessionModal = screen.getByText('SelectSessionModal');
-        expect(selectSessionModal).toBeInTheDocument();
-      });
-    });
-    
-    describe('courses still loading', () => {
-      it('should render LoadingView', () => {
-        createWrapper({ initIsPending: true });
-        const loadingView = screen.getByText('LoadingView');
-        expect(loadingView).toBeInTheDocument();
-      });
-    });
-    describe('courses loaded', () => {
-      it('should show dashboard layout', () => {
-        createWrapper({ initIsPending: false });
-        const dashboardLayout = screen.getByText('DashboardLayout');
-        expect(dashboardLayout).toBeInTheDocument();
-      });
-    });
-  });
-});

package/src/containers/EmailSettingsModal/hooks.js

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { StrictDict } from '../../utils';
-import { reduxHooks, apiHooks } from '../../hooks';
-
-import * as module from './hooks';
-
-export const state = StrictDict({
-  toggle: (val) => React.useState(val), // eslint-disable-line
-});
-
-export const useEmailData = ({
-  closeModal,
-  cardId,
-}) => {
-  const { hasOptedOutOfEmail } = reduxHooks.useCardEnrollmentData(cardId);
-  const [isOptedOut, setIsOptedOut] = module.state.toggle(hasOptedOutOfEmail);
-  const updateEmailSettings = apiHooks.useUpdateEmailSettings(cardId);
-  const onToggle = () => setIsOptedOut(!isOptedOut);
-  const save = () => {
-    updateEmailSettings(!isOptedOut);
-    closeModal();
-  };
-
-  return {
-    onToggle,
-    save,
-    isOptedOut,
-  };
-};
-
-export default useEmailData;

package/src/containers/EmailSettingsModal/hooks.test.js

@@ -1,71 +0,0 @@
-import { MockUseState } from '@src/testUtils';
-import { reduxHooks, apiHooks } from '@src/hooks';
-
-import * as hooks from './hooks';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardEnrollmentData: jest.fn(),
-  },
-  apiHooks: {
-    useUpdateEmailSettings: jest.fn(),
-  },
-}));
-
-const cardId = 'my-test-course-number';
-const closeModal = jest.fn();
-const updateEmailSettings = jest.fn();
-apiHooks.useUpdateEmailSettings.mockReturnValue(updateEmailSettings);
-
-const state = new MockUseState(hooks);
-
-describe('EmailSettingsModal hooks', () => {
-  let out;
-  describe('state values', () => {
-    state.testGetter(state.keys.toggle);
-  });
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  describe('useEmailData', () => {
-    beforeEach(() => {
-      state.mock();
-      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ hasOptedOutOfEmail: true });
-      out = hooks.useEmailData({ closeModal, cardId });
-    });
-    afterEach(state.restore);
-
-    it('loads enrollment data based on course number', () => {
-      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
-    });
-
-    it('initializes toggle value to cardData.hasOptedOutOfEmail', () => {
-      state.expectInitializedWith(state.keys.toggle, true);
-      expect(out.isOptedOut).toEqual(true);
-
-      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ hasOptedOutOfEmail: false });
-      out = hooks.useEmailData({ closeModal, cardId });
-      state.expectInitializedWith(state.keys.toggle, false);
-      expect(out.isOptedOut).toEqual(false);
-    });
-    it('initializes email settings hok with cardId', () => {
-      expect(apiHooks.useUpdateEmailSettings).toHaveBeenCalledWith(cardId);
-    });
-    describe('onToggle - returned callback', () => {
-      it('sets toggle state value to opposite current value', () => {
-        out.onToggle();
-        expect(state.setState.toggle).toHaveBeenCalledWith(!out.isOptedOut);
-      });
-    });
-    describe('save', () => {
-      it('calls updateEmailSettings', () => {
-        out.save();
-        expect(updateEmailSettings).toHaveBeenCalledWith(!out.isOptedOut);
-      });
-      it('calls closeModal', () => {
-        out.save();
-        expect(closeModal).toHaveBeenCalled();
-      });
-    });
-  });
-});