@openedx/frontend-app-learner-dashboard 1.0.0-alpha.1 → 1.0.0-alpha.11

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

@@ -1,197 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DashboardLayout collapsed sidebar not showing snapshot 1`] = `
-<Container
-  fluid={true}
-  size="xl"
->
-  <Row>
-    <Col
-      className="course-list-column"
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-    >
-      test-children
-    </Col>
-    <Col
-      className={
-        [
-          "sidebar-column",
-          false,
-        ]
-      }
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 4,
-        }
-      }
-    >
-      <WidgetSidebarSlot />
-    </Col>
-  </Row>
-</Container>
-`;
-
-exports[`DashboardLayout collapsed sidebar showing snapshot 1`] = `
-<Container
-  fluid={true}
-  size="xl"
->
-  <Row>
-    <Col
-      className="course-list-column"
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 8,
-        }
-      }
-    >
-      test-children
-    </Col>
-    <Col
-      className={
-        [
-          "sidebar-column",
-          false,
-        ]
-      }
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 4,
-        }
-      }
-    >
-      <WidgetSidebarSlot />
-    </Col>
-  </Row>
-</Container>
-`;
-
-exports[`DashboardLayout not collapsed sidebar not showing snapshot 1`] = `
-<Container
-  fluid={true}
-  size="xl"
->
-  <Row>
-    <Col
-      className="course-list-column"
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-    >
-      test-children
-    </Col>
-    <Col
-      className={
-        [
-          "sidebar-column",
-          "not-collapsed",
-        ]
-      }
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 4,
-        }
-      }
-    >
-      <WidgetSidebarSlot />
-    </Col>
-  </Row>
-</Container>
-`;
-
-exports[`DashboardLayout not collapsed sidebar showing snapshot 1`] = `
-<Container
-  fluid={true}
-  size="xl"
->
-  <Row>
-    <Col
-      className="course-list-column"
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 8,
-        }
-      }
-    >
-      test-children
-    </Col>
-    <Col
-      className={
-        [
-          "sidebar-column",
-          "not-collapsed",
-        ]
-      }
-      lg={
-        {
-          "offset": 0,
-          "span": 12,
-        }
-      }
-      xl={
-        {
-          "offset": 0,
-          "span": 4,
-        }
-      }
-    >
-      <WidgetSidebarSlot />
-    </Col>
-  </Row>
-</Container>
-`;

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

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoadingView snapshot 1`] = `
-<div
-  className="course-list-loading"
->
-  <Spinner
-    animation="border"
-    className="mie-3"
-    screenReaderText="test-sr-text"
-  />
-</div>
-`;

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,
-      });
-    });
-  });
-});