fix: tests fixed after design tokens support change

.github/workflows/ci.yml

@@ -33,9 +33,6 @@ jobs:
     - name: Test
       run: npm run test
 
-    - name: Build
-      run: npm run build
-
     - name: Run Coverage
       uses: codecov/codecov-action@v5
       with:

jest.config.js

@@ -14,6 +14,7 @@ module.exports = createConfig('test', {
     'src/__mocks__',
   ],
   moduleNameMapper: {
+    // Asset mocks
     '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
   },

package.json

@@ -68,7 +68,7 @@
     "redux-mock-store": "^1.5.4"
   },
   "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.7",
+    "@openedx/frontend-base": "^1.0.0-alpha.11",
     "@openedx/paragon": "^23",
     "@tanstack/react-query": "^5",
     "@types/react": "^18",

src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx

@@ -1,18 +1,18 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { reduxHooks } from 'hooks';
-import track from 'tracking';
+import { IntlProvider } from '@openedx/frontend-base';
+import { reduxHooks } from '@src/hooks';
+import track from '@src/tracking';
 import useActionDisabledState from '../hooks';
 import BeginCourseButton from './BeginCourseButton';
 
-jest.mock('tracking', () => ({
+jest.mock('@src/tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(),
     useCardExecEdTrackingParam: jest.fn(),

src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx

@@ -1,19 +1,19 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { reduxHooks } from 'hooks';
-import track from 'tracking';
+import { reduxHooks } from '@src/hooks';
+import track from '@src/tracking';
 import useActionDisabledState from '../hooks';
 import ResumeButton from './ResumeButton';
 
-jest.mock('tracking', () => ({
+jest.mock('@src/tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(),
     useCardExecEdTrackingParam: jest.fn(),

src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx

@@ -1,13 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { reduxHooks } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 import useActionDisabledState from '../hooks';
 
 import SelectSessionButton from './SelectSessionButton';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useUpdateSelectSessionModalCallback: jest.fn(),
   },

src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx

@@ -1,19 +1,19 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import track from 'tracking';
-import { reduxHooks } from 'hooks';
+import track from '@src/tracking';
+import { reduxHooks } from '@src/hooks';
 import useActionDisabledState from '../hooks';
 import ViewCourseButton from './ViewCourseButton';
 
-jest.mock('tracking', () => ({
+jest.mock('@src/tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
     useTrackCourseEvent: jest.fn(),

src/containers/CourseCard/components/CourseCardActions/index.test.jsx

@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react';
-import { reduxHooks } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 
 import CourseCardActions from '.';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(),
     useCardEnrollmentData: jest.fn(),
@@ -12,7 +12,7 @@ jest.mock('hooks', () => ({
   },
 }));
 
-jest.mock('slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));
+jest.mock('../../../../slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));
 jest.mock('./SelectSessionButton', () => jest.fn(() => <div>SelectSessionButton</div>));
 jest.mock('./ViewCourseButton', () => jest.fn(() => <div>ViewCourseButton</div>));
 jest.mock('./BeginCourseButton', () => jest.fn(() => <div>BeginCourseButton</div>));

src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx

@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { reduxHooks } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 import CertificateBanner from './CertificateBanner';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   utilHooks: {
     useFormatDate: jest.fn(() => date => date),
   },

src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx

@@ -1,13 +1,13 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { reduxHooks } from 'hooks';
-import { formatMessage } from 'testUtils';
+import { reduxHooks } from '@src/hooks';
+import { formatMessage } from '@src/testUtils';
 import { CourseBanner } from './CourseBanner';
 
 import messages from './messages';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   utilHooks: {
     useFormatDate: () => date => date,
   },

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

@@ -1,5 +1,5 @@
-import { keyStore } from 'utils';
-import { reduxHooks } from 'hooks';
+import { keyStore } from '@src/utils';
+import { reduxHooks } from '@src/hooks';
 
 import ApprovedContent from './views/ApprovedContent';
 import EligibleContent from './views/EligibleContent';
@@ -9,7 +9,7 @@ import RejectedContent from './views/RejectedContent';
 
 import * as hooks from './hooks';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCreditData: jest.fn(),
     usePlatformSettingsData: jest.fn(),

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx

@@ -1,5 +1,5 @@
 import { screen, render } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 import hooks from './hooks';
 import { CreditBanner } from '.';
 

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-
+import { useContext } from 'react';
 import { useIntl } from '@openedx/frontend-base';
 
 import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx

@@ -1,14 +1,14 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { formatMessage } from 'testUtils';
-import { reduxHooks } from 'hooks';
+import { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
+import { reduxHooks } from '@src/hooks';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 import messages from './messages';
 import ApprovedContent from './ApprovedContent';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCreditData: jest.fn(),
-    useMasqueradeData: jest.fn(),
   },
 }));
 
@@ -18,20 +18,27 @@ const credit = {
   providerName: 'test-credit-provider-name',
 };
 reduxHooks.useCardCreditData.mockReturnValue(credit);
-reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
+
+const renderWithMasquerading = (isMasquerading = false) => render(
+  <IntlProvider locale="en">
+    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
+      <ApprovedContent cardId={cardId} />
+    </MasqueradeUserContext.Provider>
+  </IntlProvider>
+);
 
 describe('ApprovedContent component', () => {
   describe('hooks', () => {
     it('initializes credit data with cardId', () => {
-      render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+      renderWithMasquerading();
       expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('render', () => {
     describe('rendered CreditContent component', () => {
       beforeEach(() => {
         jest.clearAllMocks();
-        render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+        renderWithMasquerading();
       });
       it('action.message is formatted viewCredit message', () => {
         const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
@@ -56,8 +63,7 @@ describe('ApprovedContent component', () => {
     });
     describe('when masquerading', () => {
       beforeEach(() => {
-        reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: true });
-        render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+        renderWithMasquerading(true);
       });
 
       it('disables the action button', () => {

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.test.jsx

@@ -1,21 +1,21 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { reduxHooks } from 'hooks';
-import track from 'tracking';
+import { reduxHooks } from '@src/hooks';
+import track from '@src/tracking';
 
 import messages from './messages';
 import EligibleContent from './EligibleContent';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCreditData: jest.fn(),
     useCardCourseRunData: jest.fn(),
   },
 }));
 
-jest.mock('tracking', () => ({
+jest.mock('@src/tracking', () => ({
   credit: {
     purchase: jest.fn(),
   },

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-
+import { useContext } from 'react';
 import { useIntl } from '@openedx/frontend-base';
 
 import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx

@@ -1,8 +1,9 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 import userEvent from '@testing-library/user-event';
 
-import { reduxHooks } from 'hooks';
+import { reduxHooks } from '@src/hooks';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 import messages from './messages';
 import hooks from './hooks';
 import MustRequestContent from './MustRequestContent';
@@ -11,9 +12,8 @@ jest.mock('./hooks', () => ({
   useCreditRequestData: jest.fn(),
 }));
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
-    useMasqueradeData: jest.fn(),
     useCardCreditData: jest.fn(),
   },
 }));
@@ -31,9 +31,11 @@ const providerName = 'test-credit-provider-name';
 const providerStatusUrl = 'test-credit-provider-status-url';
 const createCreditRequest = jest.fn().mockName('createCreditRequest');
 
-const renderMustRequestContent = () => render(
+const renderMustRequestContent = (isMasquerading = false) => render(
   <IntlProvider locale="en" messages={messages}>
-    <MustRequestContent cardId={cardId} />
+    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
+      <MustRequestContent cardId={cardId} />
+    </MasqueradeUserContext.Provider>
   </IntlProvider>,
 );
 
@@ -44,7 +46,6 @@ describe('MustRequestContent component', () => {
       requestData,
       createCreditRequest,
     });
-    reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
     reduxHooks.useCardCreditData.mockReturnValue({
       providerName,
       providerStatusUrl,
@@ -90,14 +91,13 @@ describe('MustRequestContent component', () => {
 
     describe('when masquerading', () => {
       beforeEach(() => {
-        reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: true });
-        renderMustRequestContent();
+        renderMustRequestContent(true);
       });
 
       it('disables the request credit button', () => {
         const button = screen.getByRole('button', { name: /request credit/i });
-        expect(button).toHaveClass('disabled');
         expect(button).toHaveAttribute('aria-disabled', 'true');
+        expect(button).toHaveClass('disabled');
       });
     });
   });

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

@@ -1,6 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-
+import { useContext } from 'react';
 import { useIntl } from '@openedx/frontend-base';
 
 import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';