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

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

@@ -1,69 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-
-import { reduxHooks } from '@src/hooks';
-import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
-
-import messages from './messages';
-import PendingContent from './PendingContent';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: { useCardCreditData: jest.fn() },
-}));
-
-const cardId = 'test-card-id';
-const providerName = 'test-credit-provider-name';
-const providerStatusUrl = 'test-credit-provider-status-url';
-reduxHooks.useCardCreditData.mockReturnValue({
-  providerName,
-  providerStatusUrl,
-});
-
-const renderPendingContent = (isMasquerading = false) => render(
-  <IntlProvider messages={{}} locale="en">
-    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
-      <PendingContent cardId={cardId} />
-    </MasqueradeUserContext.Provider>
-  </IntlProvider>,
-);
-describe('PendingContent component', () => {
-  describe('hooks', () => {
-    it('initializes card credit data with cardId', () => {
-      renderPendingContent();
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('behavior', () => {
-    describe('rendered CreditContent component', () => {
-      it('action message is formatted requestCredit message', () => {
-        renderPendingContent();
-        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
-        expect(button).toBeInTheDocument();
-      });
-      it('action href will go to provider status site', () => {
-        renderPendingContent();
-        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
-        expect(button).toHaveAttribute('href', providerStatusUrl);
-      });
-      it('action.disabled is false', () => {
-        renderPendingContent();
-        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
-        expect(button).not.toHaveClass('disabled');
-      });
-      it('message is formatted pending message with provider name', () => {
-        renderPendingContent();
-        const component = screen.getByTestId('credit-msg');
-        expect(component).toBeInTheDocument();
-        expect(component).toHaveTextContent(`${providerName} has received`);
-      });
-      describe('when masqueradeData is true', () => {
-        it('disables the view details button', () => {
-          renderPendingContent(true);
-          const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
-          expect(button).toHaveAttribute('aria-disabled', 'true');
-          expect(button).toHaveClass('disabled');
-        });
-      });
-    });
-  });
-});

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,44 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-
-import { reduxHooks } from '@src/hooks';
-import RejectedContent from './RejectedContent';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-  },
-}));
-
-const cardId = 'test-card-id';
-const credit = {
-  providerStatusUrl: 'test-credit-provider-status-url',
-  providerName: 'test-credit-provider-name',
-};
-reduxHooks.useCardCreditData.mockReturnValue(credit);
-
-const renderRejectedContent = () => render(<IntlProvider><RejectedContent cardId={cardId} /></IntlProvider>);
-
-describe('RejectedContent component', () => {
-  describe('hooks', () => {
-    it('initializes credit data with cardId', () => {
-      renderRejectedContent();
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
-    describe('rendered CreditContent component', () => {
-      it('no action is passed', () => {
-        renderRejectedContent();
-        const action = screen.queryByTestId('action-row-btn');
-        expect(action).not.toBeInTheDocument();
-      });
-      it('message is formatted rejected message', () => {
-        renderRejectedContent();
-        const message = screen.getByTestId('credit-msg');
-        expect(message).toBeInTheDocument();
-        expect(message).toHaveTextContent(`${credit.providerName} did not approve your request for course credit.`);
-      });
-    });
-  });
-});

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,70 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import CreditContent from './CreditContent';
-
-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 };
-
-const renderCreditContent = (data) => render(
-  <CreditContent {...data} />,
-);
-
-describe('CreditContent component', () => {
-  describe('render', () => {
-    describe('with action', () => {
-      it('loads href and message into action row button', () => {
-        renderCreditContent(props);
-        const button = screen.getByRole('link', { name: action.message });
-        expect(button).toBeInTheDocument();
-        expect(button).toHaveAttribute('href', action.href);
-        expect(button).not.toHaveAttribute('disabled');
-      });
-      it('loads message into credit-msg div', () => {
-        renderCreditContent(props);
-        const creditMsg = screen.getByTestId('credit-msg');
-        expect(creditMsg).toBeInTheDocument();
-        expect(creditMsg.innerHTML).toEqual(message);
-      });
-      it('loads CreditRequestForm with passed requestData', () => {
-        const { container } = renderCreditContent(props);
-        const creditForm = container.querySelector('form');
-        expect(creditForm).toBeInTheDocument();
-        expect(creditForm).toHaveAttribute('action', requestData.url);
-      });
-      it('disables action button when action.disabled is true', () => {
-        renderCreditContent({ ...props, action: { ...action, disabled: true } });
-        const button = screen.getByRole('link', { name: action.message });
-        expect(button).toBeInTheDocument();
-        expect(button).toHaveClass('disabled');
-        expect(button).toHaveAttribute('aria-disabled', 'true');
-      });
-    });
-    describe('without action', () => {
-      it('loads message into credit-msg div', () => {
-        renderCreditContent({ message, requestData });
-        const creditMsg = screen.getByTestId('credit-msg');
-        expect(creditMsg).toBeInTheDocument();
-        expect(creditMsg.innerHTML).toEqual(message);
-      });
-      it('loads CreditRequestForm with passed requestData', () => {
-        const { container } = renderCreditContent({ message, requestData });
-        const creditForm = container.querySelector('form');
-        expect(creditForm).toBeInTheDocument();
-        expect(creditForm).toHaveAttribute('action', requestData.url);
-      });
-      it('does not render action row button', () => {
-        renderCreditContent({ message, requestData });
-        const button = screen.queryByRole('link', { name: action.message });
-        expect(button).not.toBeInTheDocument();
-      });
-    });
-  });
-});

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,51 +0,0 @@
-import React from 'react';
-
-import useCreditRequestFormData from './hooks';
-
-const requestData = 'test-request-data';
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useRef: jest.fn((val) => ({ current: val, useRef: true })),
-  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
-}));
-
-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,66 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { keyStore } from '@src/utils';
-
-import useCreditRequestFormData from './hooks';
-import CreditRequestForm from '.';
-
-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',
-  },
-};
-
-const paramKeys = keyStore(requestData.parameters);
-
-useCreditRequestFormData.mockReturnValue({ ref });
-
-const renderForm = (data) => render(<CreditRequestForm requestData={data} />);
-describe('CreditRequestForm component', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  describe('hooks', () => {
-    it('initializes ref from hook with requestData', () => {
-      renderForm(requestData);
-      expect(useCreditRequestFormData).toHaveBeenCalledWith(requestData);
-    });
-  });
-  describe('render output', () => {
-    describe('null requestData', () => {
-      it('returns null', () => {
-        const { container } = renderForm(null);
-        expect(container.firstChild).toBeNull();
-      });
-    });
-    describe('valid requestData', () => {
-      it('loads Form with requestData url', () => {
-        const { container } = renderForm(requestData);
-        const creditForm = container.querySelector('form');
-        expect(creditForm).toBeInTheDocument();
-        expect(creditForm).toHaveAttribute('action', requestData.url);
-      });
-      it('loads a textarea form control for each requestData parameter', () => {
-        const { container } = renderForm(requestData);
-        const controls = container.querySelectorAll('textarea');
-        expect(controls.length).toEqual(Object.keys(requestData.parameters).length);
-        expect(controls[0]).toHaveAttribute('name', paramKeys.key1);
-        expect(controls[0]).toHaveValue(requestData.parameters.key1);
-        expect(controls[1]).toHaveAttribute('name', paramKeys.key2);
-        expect(controls[1]).toHaveValue(requestData.parameters.key2);
-        expect(controls[2]).toHaveAttribute('name', paramKeys.key3);
-        expect(controls[2]).toHaveValue(requestData.parameters.key3);
-      });
-    });
-  });
-});

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import useCreditRequestFormData from './hooks';
-import CreditRequestForm from '.';
-
-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,44 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { reduxHooks } from '@src/hooks';
-import { IntlProvider } from '@openedx/frontend-base';
-
-import ProviderLink from './ProviderLink';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-  },
-}));
-
-const cardId = 'test-card-id';
-const credit = {
-  providerStatusUrl: 'test-credit-provider-status-url',
-  providerName: 'test-credit-provider-name',
-};
-
-const renderProviderLink = () => render(
-  <IntlProvider locale="en"><ProviderLink cardId={cardId} /></IntlProvider>,
-);
-
-describe('ProviderLink component', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    reduxHooks.useCardCreditData.mockReturnValue(credit);
-    renderProviderLink();
-  });
-  describe('hooks', () => {
-    it('initializes credit hook with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
-    it('passes credit.providerStatusUrl to the hyperlink href', () => {
-      const providerLink = screen.getByRole('link', { href: credit.providerStatusUrl });
-      expect(providerLink).toBeInTheDocument();
-    });
-    it('passes providerName for the link message', () => {
-      const providerLink = screen.getByRole('link', { href: credit.providerStatusUrl });
-      expect(providerLink).toHaveTextContent(credit.providerName);
-    });
-  });
-});

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

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

@@ -1,56 +0,0 @@
-import { MockUseState } from '@src/testUtils';
-import { apiHooks } from '@src/hooks';
-import * as hooks from './hooks';
-
-jest.mock('@src/hooks', () => ({
-  apiHooks: {
-    useCreateCreditRequest: jest.fn(),
-  },
-}));
-
-const state = new MockUseState(hooks);
-
-const cardId = 'test-card-id';
-const requestData = { data: 'request data' };
-const creditRequest = jest.fn().mockReturnValue(Promise.resolve(requestData));
-apiHooks.useCreateCreditRequest.mockReturnValue(creditRequest);
-const event = { preventDefault: jest.fn() };
-
-let out;
-describe('Credit Banner view hooks', () => {
-  describe('state', () => {
-    state.testGetter(state.keys.creditRequestData);
-  });
-  describe('useCreditRequestData', () => {
-    beforeEach(() => {
-      state.mock();
-      out = hooks.useCreditRequestData(cardId);
-    });
-    describe('behavior', () => {
-      it('initializes creditRequestData state field with null value', () => {
-        state.expectInitializedWith(state.keys.creditRequestData, null);
-      });
-      it('calls useCreateCreditRequest with passed cardID', () => {
-        expect(apiHooks.useCreateCreditRequest).toHaveBeenCalledWith(cardId);
-      });
-    });
-    describe('output', () => {
-      it('returns requestData state value', () => {
-        state.mockVal(state.keys.creditRequestData, requestData);
-        out = hooks.useCreditRequestData(cardId);
-        expect(out.requestData).toEqual(requestData);
-      });
-      describe('createCreditRequest', () => {
-        it('returns an event handler that prevents default click behavior', () => {
-          out.createCreditRequest(event);
-          expect(event.preventDefault).toHaveBeenCalled();
-        });
-        it('calls api.createCreditRequest and sets requestData with the response', async () => {
-          await out.createCreditRequest(event);
-          expect(creditRequest).toHaveBeenCalledWith();
-          expect(state.setState.creditRequestData).toHaveBeenCalledWith(requestData.data);
-        });
-      });
-    });
-  });
-});