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

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

@@ -1,69 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dashboard snapshots courses loaded, show select session modal snapshot 1`] = `
-<div
-  className="d-flex flex-column p-2 pt-0"
-  id="dashboard-container"
->
-  <h1
-    className="sr-only"
-  >
-    test-page-title
-  </h1>
-  <Fragment>
-    <DashboardModalSlot />
-    <SelectSessionModal />
-  </Fragment>
-  <div
-    data-testid="dashboard-content"
-    id="dashboard-content"
-  >
-    <DashboardLayout>
-      <CoursesPanel />
-    </DashboardLayout>
-  </div>
-</div>
-`;
-
-exports[`Dashboard snapshots courses still loading snapshot 1`] = `
-<div
-  className="d-flex flex-column p-2 pt-0"
-  id="dashboard-container"
->
-  <h1
-    className="sr-only"
-  >
-    test-page-title
-  </h1>
-  <div
-    data-testid="dashboard-content"
-    id="dashboard-content"
-  >
-    <LoadingView />
-  </div>
-</div>
-`;
-
-exports[`Dashboard snapshots there are no courses snapshot 1`] = `
-<div
-  className="d-flex flex-column p-2 pt-0"
-  id="dashboard-container"
->
-  <h1
-    className="sr-only"
-  >
-    test-page-title
-  </h1>
-  <Fragment>
-    <DashboardModalSlot />
-  </Fragment>
-  <div
-    data-testid="dashboard-content"
-    id="dashboard-content"
-  >
-    <DashboardLayout>
-      <CoursesPanel />
-    </DashboardLayout>
-  </div>
-</div>
-`;

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,88 +0,0 @@
-import React from 'react';
-
-import { useIntl } from '@openedx/frontend-base';
-import { useWindowSize, breakpoints } from '@openedx/paragon';
-
-import { apiHooks } from 'hooks';
-import { MockUseState } from 'testUtils';
-
-import appMessages from 'messages';
-import * as hooks from './hooks';
-
-jest.mock('@openedx/paragon', () => ({
-  useWindowSize: jest.fn(),
-  breakpoints: {},
-}));
-
-jest.mock('hooks', () => ({
-  apiHooks: {
-    useInitializeApp: jest.fn(),
-  },
-}));
-
-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('useInitializeDashboard', () => {
-    it('dispatches initialize thunk action on component load', () => {
-      hooks.useInitializeDashboard();
-      const [cb, prereqs] = React.useEffect.mock.calls[0];
-      expect(prereqs).toEqual([]);
-      expect(initializeApp).not.toHaveBeenCalled();
-      cb();
-      expect(initializeApp).toHaveBeenCalledWith();
-    });
-  });
-  describe('useDashboardMessages', () => {
-    it('returns spinner screen reader text', () => {
-      expect(hooks.useDashboardMessages()['learner-dash.loadingSR']).toEqual(
-        formatMessage(appMessages['learner-dash.loadingSR']),
-      );
-    });
-    it('returns page title', () => {
-      expect(hooks.useDashboardMessages()['learner-dash.title']).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.scss

@@ -1,29 +0,0 @@
-@import "@openedx/paragon/scss/core/core";
-
-.course-list-column {
-  padding: 0 map-get($spacers, 4);
-}
-
-.sidebar-column {
-  padding: 0 map-get($spacers, 3) 0 map-get($spacers, 1);
-
-  &.not-collapsed {
-    padding-top: map-get($spacers, 2);
-
-    & >:first-child {
-      margin-top: map-get($spacers, 5\.5);
-    }
-  }
-}
-
-@include media-breakpoint-down(lg) {
-  .sidebar-column {
-    // grid are inheriting dir="ltr" from the body, so we need to override it
-    [dir=ltr] & {
-      padding: 0 map-get($spacers, 3);
-    }
-    [dir=rtl] & {
-      padding: 0 map-get($spacers, 3);
-    }
-  }
-}

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

@@ -1,122 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-
-import SelectSessionModal from 'containers/SelectSessionModal';
-import CoursesPanel from 'containers/CoursesPanel';
-
-import DashboardLayout from './DashboardLayout';
-import LoadingView from './LoadingView';
-import hooks from './hooks';
-import Dashboard from '.';
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useHasCourses: jest.fn(),
-    useShowSelectSessionModal: jest.fn(),
-    useRequestIsPending: jest.fn(),
-  },
-}));
-
-jest.mock('slots/DashboardModalSlot', () => 'DashboardModalSlot');
-jest.mock('containers/CoursesPanel', () => 'CoursesPanel');
-jest.mock('./LoadingView', () => 'LoadingView');
-jest.mock('./DashboardLayout', () => 'DashboardLayout');
-
-jest.mock('./hooks', () => ({
-  useInitializeDashboard: jest.fn(),
-  useDashboardMessages: jest.fn(),
-}));
-
-const pageTitle = 'test-page-title';
-
-describe('Dashboard', () => {
-  beforeEach(() => {
-    hooks.useDashboardMessages.mockReturnValue({ pageTitle });
-  });
-  const createWrapper = ({
-    hasCourses,
-    initIsPending,
-    showSelectSessionModal,
-  }) => {
-    reduxHooks.useHasCourses.mockReturnValueOnce(hasCourses);
-    reduxHooks.useRequestIsPending.mockReturnValueOnce(initIsPending);
-    reduxHooks.useShowSelectSessionModal.mockReturnValueOnce(showSelectSessionModal);
-    return shallow(<Dashboard />);
-  };
-
-  let wrapper;
-  describe('snapshots', () => {
-    const testTitle = () => {
-      test('page title is displayed in sr-only h1 tag', () => {
-        const heading = wrapper.instance.findByType('h1')[0];
-        expect(heading.props.className).toEqual('sr-only');
-        expect(heading.children[0].el).toEqual(pageTitle);
-      });
-    };
-    const testSnapshot = () => {
-      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
-      });
-    };
-    const testContent = (el) => {
-      expect(wrapper.instance.findByTestId('dashboard-content')[0].children[0]).toMatchObject(shallow(el));
-    };
-
-    const renderString = (show) => (show ? 'renders' : 'does not render');
-    const testView = ({
-      props,
-      content: [contentName, contentEl],
-      showSelectSessionModal,
-    }) => {
-      beforeEach(() => { wrapper = createWrapper(props); });
-      testTitle();
-      testSnapshot();
-      it(`renders ${contentName}`, () => {
-        testContent(contentEl);
-      });
-      it(`${renderString(showSelectSessionModal)} select session modal`, () => {
-        expect(wrapper.instance.findByType(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0);
-      });
-    };
-    describe('courses still loading', () => {
-      testView({
-        props: {
-          hasCourses: false,
-          initIsPending: true,
-          showSelectSessionModal: false,
-        },
-        content: ['LoadingView', <LoadingView />],
-        showSelectSessionModal: false,
-      });
-    });
-
-    describe('courses loaded, show select session modal', () => {
-      testView({
-        props: {
-          hasCourses: true,
-          initIsPending: false,
-          showSelectSessionModal: true,
-        },
-        content: ['LoadedView', (
-          <DashboardLayout><CoursesPanel /></DashboardLayout>
-        )],
-        showSelectSessionModal: true,
-      });
-    });
-
-    describe('there are no courses', () => {
-      testView({
-        props: {
-          hasCourses: false,
-          initIsPending: false,
-          showSelectSessionModal: false,
-        },
-        content: ['Dashboard layout with no courses sidebar and content', (
-          <DashboardLayout><CoursesPanel /></DashboardLayout>
-        )],
-        showSelectSessionModal: false,
-      });
-    });
-  });
-});

package/src/containers/EmailSettingsModal/__snapshots__/index.test.jsx.snap

@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EmailSettingsModal render snapshot: emails disabled, show: false 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isOpen={false}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <h4>
-      Receive course emails?
-    </h4>
-    <Form.Switch
-      checked={false}
-      onChange={[MockFunction hooks.onToggle]}
-    >
-      Course emails are off
-    </Form.Switch>
-    <p>
-      Course emails include important information about your course from instructors.
-    </p>
-    <ActionRow>
-      <Button
-        onClick={[MockFunction closeModal]}
-        variant="tertiary"
-      >
-        Never mind
-      </Button>
-      <Button
-        onClick={[MockFunction hooks.save]}
-      >
-        Save settings
-      </Button>
-    </ActionRow>
-  </div>
-</ModalDialog>
-`;
-
-exports[`EmailSettingsModal render snapshot: emails disabled, show: true 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <h4>
-      Receive course emails?
-    </h4>
-    <Form.Switch
-      checked={false}
-      onChange={[MockFunction hooks.onToggle]}
-    >
-      Course emails are off
-    </Form.Switch>
-    <p>
-      Course emails include important information about your course from instructors.
-    </p>
-    <ActionRow>
-      <Button
-        onClick={[MockFunction closeModal]}
-        variant="tertiary"
-      >
-        Never mind
-      </Button>
-      <Button
-        onClick={[MockFunction hooks.save]}
-      >
-        Save settings
-      </Button>
-    </ActionRow>
-  </div>
-</ModalDialog>
-`;
-
-exports[`EmailSettingsModal render snapshot: emails enabled, show: true 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  isOpen={true}
-  onClose={[MockFunction utils.nullMethod]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <h4>
-      Receive course emails?
-    </h4>
-    <Form.Switch
-      checked={true}
-      onChange={[MockFunction hooks.onToggle]}
-    >
-      Course emails are on
-    </Form.Switch>
-    <p>
-      Course emails include important information about your course from instructors.
-    </p>
-    <ActionRow>
-      <Button
-        onClick={[MockFunction closeModal]}
-        variant="tertiary"
-      >
-        Never mind
-      </Button>
-      <Button
-        onClick={[MockFunction hooks.save]}
-      >
-        Save settings
-      </Button>
-    </ActionRow>
-  </div>
-</ModalDialog>
-`;

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 'testUtils';
-import { reduxHooks, apiHooks } from 'hooks';
-
-import * as hooks from './hooks';
-
-jest.mock('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();
-      });
-    });
-  });
-});

package/src/containers/EmailSettingsModal/index.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@openedx/frontend-base';
-import {
-  ActionRow,
-  Button,
-  Form,
-  ModalDialog,
-} from '@openedx/paragon';
-
-import { nullMethod } from '../../utils';
-
-import useEmailData from './hooks';
-import messages from './messages';
-
-export const EmailSettingsModal = ({
-  closeModal,
-  show,
-  cardId,
-}) => {
-  const {
-    isOptedOut,
-    onToggle,
-    save,
-  } = useEmailData({ closeModal, cardId });
-  const { formatMessage } = useIntl();
-
-  return (
-    <ModalDialog
-      isOpen={show}
-      onClose={nullMethod}
-      hasCloseButton={false}
-      title=""
-    >
-      <div className="bg-white p-3 rounded shadow" style={{ textAlign: 'start' }}>
-        <h4>{formatMessage(messages.header)}</h4>
-        <Form.Switch checked={!isOptedOut} onChange={onToggle}>
-          {formatMessage(isOptedOut ? messages.emailsOff : messages.emailsOn)}
-        </Form.Switch>
-        <p>{formatMessage(messages.description)}</p>
-        <ActionRow>
-          <Button variant="tertiary" onClick={closeModal}>
-            {formatMessage(messages.nevermind)}
-          </Button>
-          <Button onClick={save}>{formatMessage(messages.save)}</Button>
-        </ActionRow>
-      </div>
-    </ModalDialog>
-  );
-};
-EmailSettingsModal.propTypes = {
-  cardId: PropTypes.string.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  show: PropTypes.bool.isRequired,
-};
-
-export default EmailSettingsModal;