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

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.test.jsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { formatMessage } from 'testUtils';
-import { reduxHooks } from 'hooks';
-
-import messages from './messages';
-import PendingContent from './PendingContent';
-
-jest.mock('hooks', () => ({
-  reduxHooks: { useCardCreditData: jest.fn(), useMasqueradeData: jest.fn() },
-}));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
-
-let el;
-let component;
-
-const cardId = 'test-card-id';
-const providerName = 'test-credit-provider-name';
-const providerStatusUrl = 'test-credit-provider-status-url';
-reduxHooks.useCardCreditData.mockReturnValue({
-  providerName,
-  providerStatusUrl,
-});
-reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
-
-const render = () => {
-  el = shallow(<PendingContent cardId={cardId} />);
-};
-describe('PendingContent component', () => {
-  beforeEach(() => {
-    render();
-  });
-  describe('behavior', () => {
-    it('initializes card credit data with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
-    describe('rendered CreditContent component', () => {
-      beforeEach(() => {
-        component = el.instance.findByType('CreditContent');
-      });
-      test('action.href will go to provider status site', () => {
-        expect(component[0].props.action.href).toEqual(providerStatusUrl);
-      });
-      test('action.message is formatted requestCredit message', () => {
-        expect(component[0].props.action.message).toEqual(
-          formatMessage(messages.viewDetails),
-        );
-      });
-      test('action.disabled is false', () => {
-        expect(component[0].props.action.disabled).toEqual(false);
-      });
-      test('message is formatted pending message', () => {
-        expect(component[0].props.message).toEqual(
-          formatMessage(messages.received, { providerName }),
-        );
-      });
-    });
-  });
-});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@openedx/frontend-base';
-
-import { reduxHooks } from '../../../../../../hooks';
-import CreditContent from './components/CreditContent';
-import ProviderLink from './components/ProviderLink';
-import messages from './messages';
-
-export const RejectedContent = ({ cardId }) => {
-  const credit = reduxHooks.useCardCreditData(cardId);
-  const { formatMessage } = useIntl();
-  return (
-    <CreditContent
-      message={formatMessage(messages.rejected, {
-        providerName: credit.providerName,
-        linkToProviderSite: (<ProviderLink cardId={cardId} />),
-      })}
-    />
-  );
-};
-RejectedContent.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default RejectedContent;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.test.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { formatMessage } from 'testUtils';
-import { reduxHooks } from 'hooks';
-import messages from './messages';
-import ProviderLink from './components/ProviderLink';
-import RejectedContent from './RejectedContent';
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-  },
-}));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
-
-const cardId = 'test-card-id';
-const credit = {
-  providerStatusUrl: 'test-credit-provider-status-url',
-  providerName: 'test-credit-provider-name',
-};
-reduxHooks.useCardCreditData.mockReturnValue(credit);
-
-let el;
-let component;
-const render = () => { el = shallow(<RejectedContent cardId={cardId} />); };
-const loadComponent = () => { component = el.instance.findByType('CreditContent'); };
-
-describe('RejectedContent component', () => {
-  beforeEach(render);
-  describe('behavior', () => {
-    it('initializes credit data with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
-    describe('rendered CreditContent component', () => {
-      beforeAll(loadComponent);
-      test('no action is passed', () => {
-        expect(component[0].props.action).toEqual(undefined);
-      });
-      test('message is formatted rejected message', () => {
-        expect(component[0].props.message).toEqual(formatMessage(
-          messages.rejected,
-          {
-            linkToProviderSite: <ProviderLink cardId={cardId} />,
-            providerName: credit.providerName,
-          },
-        ));
-      });
-    });
-  });
-});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { ActionRow, Button } from '@openedx/paragon';
-import CreditRequestForm from './CreditRequestForm';
-
-export const CreditContent = ({ action, message, requestData }) => (
-  <>
-    <div className="message-copy credit-msg" data-testid="credit-msg">
-      {message}
-    </div>
-    {action && (
-      <ActionRow className="mt-4">
-        <Button
-          as="a"
-          disabled={!!action.disabled}
-          // make sure href is not undefined. Paragon won't disable the button if href is undefined.
-          href={action.href || '#'}
-          rel="noopener"
-          target="_blank"
-          variant="outline-primary"
-          className="border-gray-400"
-          onClick={action.onClick}
-          data-testid="action-row-btn"
-        >
-          {action.message}
-        </Button>
-      </ActionRow>
-    )}
-    <CreditRequestForm requestData={requestData} />
-  </>
-);
-CreditContent.defaultProps = {
-  action: null,
-  requestData: null,
-};
-CreditContent.propTypes = {
-  action: PropTypes.shape({
-    href: PropTypes.string,
-    onClick: PropTypes.func,
-    message: PropTypes.string,
-    disabled: PropTypes.bool,
-  }),
-  message: PropTypes.node.isRequired,
-  requestData: PropTypes.shape({
-    url: PropTypes.string,
-    parameters: PropTypes.objectOf(PropTypes.string),
-  }),
-};
-
-export default CreditContent;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.test.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import CreditContent from './CreditContent';
-
-let el;
-const action = {
-  href: 'test-action-href',
-  onClick: jest.fn().mockName('test-action-onClick'),
-  message: 'test-action-message',
-  disabled: false,
-};
-
-const message = 'test-message';
-const requestData = { url: 'test-request-data-url', parameters: { key1: 'val1' } };
-const props = { action, message, requestData };
-
-describe('CreditContent component', () => {
-  describe('render', () => {
-    describe('with action', () => {
-      beforeEach(() => {
-        el = shallow(<CreditContent {...props} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('loads href, onClick, and message into action row button', () => {
-        const buttonEl = el.instance.findByTestId('action-row-btn')[0];
-        expect(buttonEl.props.href).toEqual(action.href);
-        expect(buttonEl.props.onClick).toEqual(action.onClick);
-        expect(buttonEl.props.disabled).toEqual(action.disabled);
-        expect(buttonEl.children[0].el).toEqual(action.message);
-      });
-      it('loads message into credit-msg div', () => {
-        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
-      });
-      it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
-      });
-      test('disables action button when action.disabled is true', () => {
-        el = shallow(<CreditContent {...props} action={{ ...action, disabled: true }} />);
-        expect(el.instance.findByTestId('action-row-btn')[0].props.disabled).toEqual(true);
-      });
-    });
-    describe('without action', () => {
-      test('snapshot', () => {
-        el = shallow(<CreditContent {...{ message, requestData }} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('loads message into credit-msg div', () => {
-        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
-      });
-      it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
-      });
-    });
-  });
-});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/__snapshots__/index.test.jsx.snap

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreditRequestForm component render output valid requestData snapshot 1`] = `
-<Form
-  accept-method="UTF-8"
-  action="test-request-data-url"
-  className="hidden"
-  method="POST"
->
-  <FormControl
-    as="textarea"
-    key="key1"
-    name="key1"
-    value="val1"
-  />
-  <FormControl
-    as="textarea"
-    key="key2"
-    name="key2"
-    value="val2"
-  />
-  <FormControl
-    as="textarea"
-    key="key3"
-    name="key3"
-    value="val3"
-  />
-  <Button
-    type="submit"
-  />
-</Form>
-`;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/hooks.js

@@ -1,13 +0,0 @@
-import React from 'react';
-
-export const useCreditRequestFormData = (requestData) => {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (requestData !== null) {
-      ref.current.click();
-    }
-  }, [requestData]);
-  return { ref };
-};
-
-export default useCreditRequestFormData;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/hooks.test.js

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import useCreditRequestFormData from './hooks';
-
-const requestData = 'test-request-data';
-
-let out;
-const ref = {
-  current: { click: jest.fn() },
-};
-React.useRef.mockReturnValue(ref);
-
-describe('useCreditRequestFormData hook', () => {
-  describe('behavior', () => {
-    beforeEach(() => {
-      jest.clearAllMocks();
-    });
-    it('initializes ref with null', () => {
-      useCreditRequestFormData(requestData);
-      expect(React.useRef).toHaveBeenCalledWith(null);
-    });
-    let cb;
-    let prereqs;
-    it('does not click current ref when request data changes and is null', () => {
-      useCreditRequestFormData(null);
-      ([[cb, prereqs]] = React.useEffect.mock.calls);
-      expect(prereqs).toEqual([null]);
-      cb();
-      expect(ref.current.click).not.toHaveBeenCalled();
-    });
-    it('clicks current ref when request data changes and is not null', () => {
-      useCreditRequestFormData(requestData);
-      ([[cb, prereqs]] = React.useEffect.mock.calls);
-      expect(prereqs).toEqual([requestData]);
-      cb();
-      expect(ref.current.click).toHaveBeenCalled();
-    });
-  });
-  describe('output', () => {
-    it('returns ref for submit button', () => {
-      out = useCreditRequestFormData(requestData);
-      expect(out.ref).toEqual(ref);
-    });
-  });
-});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Button, Form, FormControl } from '@openedx/paragon';
-
-import useCreditRequestFormData from './hooks';
-
-export const CreditRequestForm = ({ requestData }) => {
-  const { ref } = useCreditRequestFormData(requestData);
-  if (requestData === null) {
-    return null;
-  }
-  const { parameters, url } = requestData;
-  return (
-    <Form
-      accept-method="UTF-8"
-      action={url}
-      className="hidden"
-      method="POST"
-    >
-      {Object.keys(parameters).map((key) => (
-        <FormControl
-          as="textarea"
-          key={key}
-          name={key}
-          value={parameters[key]}
-        />
-      ))}
-      <Button type="submit" ref={ref} />
-    </Form>
-  );
-};
-CreditRequestForm.defaultProps = {
-  requestData: null,
-};
-CreditRequestForm.propTypes = {
-  requestData: PropTypes.shape({
-    parameters: PropTypes.objectOf(PropTypes.string),
-    url: PropTypes.string,
-  }),
-};
-
-export default CreditRequestForm;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.test.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { keyStore } from 'utils';
-
-import useCreditRequestFormData from './hooks';
-import CreditRequestForm from '.';
-
-jest.mock('./hooks', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-
-const ref = 'test-ref';
-const requestData = {
-  url: 'test-request-data-url',
-  parameters: {
-    key1: 'val1',
-    key2: 'val2',
-    key3: 'val3',
-  },
-};
-
-const paramKeys = keyStore(requestData.parameters);
-
-useCreditRequestFormData.mockReturnValue({ ref });
-
-let el;
-const shallowRender = (data) => { el = shallow(<CreditRequestForm requestData={data} />); };
-describe('CreditRequestForm component', () => {
-  describe('behavior', () => {
-    it('initializes ref from hook with requestData', () => {
-      shallowRender(requestData);
-      expect(useCreditRequestFormData).toHaveBeenCalledWith(requestData);
-    });
-  });
-  describe('render output', () => {
-    describe('null requestData', () => {
-      it('returns null', () => {
-        shallowRender(null);
-        expect(el.isEmptyRender()).toEqual(true);
-      });
-    });
-    describe('valid requestData', () => {
-      beforeEach(() => {
-        shallowRender(requestData);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('loads Form with requestData url', () => {
-        expect(el.instance.findByType('Form')[0].props.action).toEqual(requestData.url);
-      });
-      it('loads a textarea form control for each requestData parameter', () => {
-        const controls = el.instance.findByType('FormControl');
-        expect(controls[0].props.name).toEqual(paramKeys.key1);
-        expect(controls[0].props.value).toEqual(requestData.parameters.key1);
-        expect(controls[1].props.name).toEqual(paramKeys.key2);
-        expect(controls[1].props.value).toEqual(requestData.parameters.key2);
-        expect(controls[2].props.name).toEqual(paramKeys.key3);
-        expect(controls[2].props.value).toEqual(requestData.parameters.key3);
-      });
-    });
-  });
-});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/ref.test.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import useCreditRequestFormData from './hooks';
-import CreditRequestForm from '.';
-
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
-jest.mock('./hooks', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-
-const ref = { current: { click: jest.fn() }, useRef: jest.fn() };
-const requestData = {
-  url: 'test-request-data-url',
-  parameters: {
-    key1: 'val1',
-    key2: 'val2',
-    key3: 'val3',
-  },
-};
-
-useCreditRequestFormData.mockReturnValue({ ref });
-
-let el;
-describe('CreditRequestForm component ref behavior', () => {
-  it('loads submit button with ref from hook', () => {
-    el = render(<CreditRequestForm requestData={requestData} />);
-    const button = el.getByRole('button');
-    expect(ref.current).toEqual(button);
-  });
-});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.jsx

@@ -1,24 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { reduxHooks } from '../../../../../../../hooks';
-import { Hyperlink } from '@openedx/paragon';
-
-export const ProviderLink = ({ cardId }) => {
-  const credit = reduxHooks.useCardCreditData(cardId);
-  return (
-    <Hyperlink
-      href={credit.providerStatusUrl}
-      rel="noopener"
-      target="_blank"
-    >
-      {credit.providerName}
-    </Hyperlink>
-  );
-};
-ProviderLink.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default ProviderLink;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.test.jsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-
-import ProviderLink from './ProviderLink';
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-  },
-}));
-
-const cardId = 'test-card-id';
-const credit = {
-  providerStatusUrl: 'test-credit-provider-status-url',
-  providerName: 'test-credit-provider-name',
-};
-let el;
-
-describe('ProviderLink component', () => {
-  beforeEach(() => {
-    reduxHooks.useCardCreditData.mockReturnValue(credit);
-    el = shallow(<ProviderLink cardId={cardId} />);
-  });
-  describe('behavior', () => {
-    it('initializes credit hook with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    it('passes credit.providerStatusUrl to the hyperlink href', () => {
-      expect(el.instance.findByType('Hyperlink')[0].props.href).toEqual(credit.providerStatusUrl);
-    });
-    it('passes providerName for the link message', () => {
-      expect(el.instance.findByType('Hyperlink')[0].children[0].el).toEqual(credit.providerName);
-    });
-  });
-});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/__snapshots__/CreditContent.test.jsx.snap

@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreditContent component render with action snapshot 1`] = `
-<Fragment>
-  <div
-    className="message-copy credit-msg"
-    data-testid="credit-msg"
-  >
-    test-message
-  </div>
-  <ActionRow
-    className="mt-4"
-  >
-    <Button
-      as="a"
-      className="border-gray-400"
-      data-testid="action-row-btn"
-      disabled={false}
-      href="test-action-href"
-      onClick={[MockFunction test-action-onClick]}
-      rel="noopener"
-      target="_blank"
-      variant="outline-primary"
-    >
-      test-action-message
-    </Button>
-  </ActionRow>
-  <CreditRequestForm
-    requestData={
-      {
-        "parameters": {
-          "key1": "val1",
-        },
-        "url": "test-request-data-url",
-      }
-    }
-  />
-</Fragment>
-`;
-
-exports[`CreditContent component render without action snapshot 1`] = `
-<Fragment>
-  <div
-    className="message-copy credit-msg"
-    data-testid="credit-msg"
-  >
-    test-message
-  </div>
-  <CreditRequestForm
-    requestData={
-      {
-        "parameters": {
-          "key1": "val1",
-        },
-        "url": "test-request-data-url",
-      }
-    }
-  />
-</Fragment>
-`;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/__snapshots__/ProviderLink.test.jsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProviderLink component render snapshot 1`] = `
-<Hyperlink
-  href="test-credit-provider-status-url"
-  rel="noopener"
-  target="_blank"
->
-  test-credit-provider-name
-</Hyperlink>
-`;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/hooks.js

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { StrictDict } from '../../../../../../utils';
-import { apiHooks } from '../../../../../../hooks';
-
-import * as module from './hooks';
-
-export const state = StrictDict({
-  creditRequestData: (val) => React.useState(val), // eslint-disable-line
-});
-
-export const useCreditRequestData = (cardId) => {
-  const [requestData, setRequestData] = module.state.creditRequestData(null);
-  const createCreditApiRequest = apiHooks.useCreateCreditRequest(cardId);
-  const createCreditRequest = (e) => {
-    e.preventDefault();
-    createCreditApiRequest()
-      .then((request) => {
-        setRequestData(request.data);
-      });
-  };
-  return { requestData, createCreditRequest };
-};
-
-export default {
-  useCreditRequestData,
-};