diff --git a/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx b/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx index 7a1fdd8b87..6c1d945463 100644 --- a/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx +++ b/src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx @@ -42,7 +42,7 @@ describe('Unit Button', () => { }); it('does not show completion for non-completed unit', () => { - const { container } = render(); + const { container } = render(, { wrapWithRouter: true }); container.querySelectorAll('svg').forEach(icon => { expect(icon).not.toHaveClass('fa-check'); }); @@ -56,14 +56,17 @@ describe('Unit Button', () => { }); it('hides completion', () => { - const { container } = render(); + const { container } = render( + , + { wrapWithRouter: true }, + ); container.querySelectorAll('svg').forEach(icon => { expect(icon).not.toHaveClass('fa-check'); }); }); it('does not show bookmark', () => { - const { queryByTestId } = render(); + const { queryByTestId } = render(, { wrapWithRouter: true }); expect(queryByTestId('bookmark-icon')).toBeNull(); }); diff --git a/src/index.jsx b/src/index.jsx index 8e030ad487..aecd837224 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -3,6 +3,7 @@ import { mergeConfig, getConfig, } from '@edx/frontend-platform'; +import { handleRtl, LOCALE_CHANGED } from '@edx/frontend-platform/i18n'; import { AppProvider, ErrorPage, PageWrap } from '@edx/frontend-platform/react'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; @@ -37,7 +38,12 @@ import { DECODE_ROUTES, ROUTES } from './constants'; import PreferencesUnsubscribe from './preferences-unsubscribe'; import PageNotFound from './generic/PageNotFound'; +subscribe(LOCALE_CHANGED, () => { + handleRtl(); +}); + subscribe(APP_READY, () => { + handleRtl(); const root = createRoot(document.getElementById('root')); root.render( @@ -154,6 +160,7 @@ subscribe(APP_READY, () => { }); subscribe(APP_INIT_ERROR, (error) => { + handleRtl(); const root = createRoot(document.getElementById('root')); root.render( diff --git a/src/index.test.jsx b/src/index.test.jsx index 4ff17b46ff..c5d257adc1 100644 --- a/src/index.test.jsx +++ b/src/index.test.jsx @@ -1,6 +1,7 @@ import { APP_INIT_ERROR, APP_READY, subscribe, } from '@edx/frontend-platform'; +import { LOCALE_CHANGED } from '@edx/frontend-platform/i18n'; // Jest needs this for module resolution import * as app from '.'; // eslint-disable-line @typescript-eslint/no-unused-vars @@ -9,6 +10,7 @@ import * as app from '.'; // eslint-disable-line @typescript-eslint/no-unused-va // and can be used by jest.mock (which is also hoisted) var mockRender; // eslint-disable-line no-var var mockCreateRoot; // eslint-disable-line no-var +var mockHandleRtl; // eslint-disable-line no-var jest.mock('react-dom/client', () => { mockRender = jest.fn(); mockCreateRoot = jest.fn(() => ({ @@ -20,6 +22,14 @@ jest.mock('react-dom/client', () => { }); }); +jest.mock('@edx/frontend-platform/i18n', () => { + mockHandleRtl = jest.fn(); + return { + LOCALE_CHANGED: 'LOCALE.CHANGED', + handleRtl: mockHandleRtl, + }; +}); + jest.mock('react', () => ({ ...jest.requireActual('react'), StrictMode: 'React Strict Mode', @@ -54,9 +64,16 @@ jest.mock('./courseware', () => 'Courseware Container'); describe('app registry', () => { let getElement; + const getSubscriptionCallback = (eventKey) => { + const callArgs = subscribe.mock.calls.find(([event]) => event === eventKey); + expect(callArgs).toBeDefined(); + return callArgs[1]; + }; + beforeEach(() => { mockCreateRoot.mockClear(); mockRender.mockClear(); + mockHandleRtl.mockClear(); getElement = window.document.getElementById; window.document.getElementById = jest.fn(id => ({ id })); @@ -65,18 +82,25 @@ describe('app registry', () => { window.document.getElementById = getElement; }); + test('subscribe: LOCALE_CHANGED. invokes handleRtl', () => { + const callback = getSubscriptionCallback(LOCALE_CHANGED); + callback(); + expect(mockHandleRtl).toHaveBeenCalledTimes(1); + }); + test('subscribe: APP_READY. links App to root element', () => { - const callArgs = subscribe.mock.calls[0]; - expect(callArgs[0]).toEqual(APP_READY); - callArgs[1](); + const callback = getSubscriptionCallback(APP_READY); + callback(); + expect(mockHandleRtl).toHaveBeenCalledTimes(1); const [rendered] = mockRender.mock.calls[0]; expect(rendered).toMatchSnapshot(); }); + test('subscribe: APP_INIT_ERROR. snapshot: displays an ErrorPage to root element', () => { - const callArgs = subscribe.mock.calls[1]; - expect(callArgs[0]).toEqual(APP_INIT_ERROR); + const callback = getSubscriptionCallback(APP_INIT_ERROR); const error = { message: 'test-error-message' }; - callArgs[1](error); + callback(error); + expect(mockHandleRtl).toHaveBeenCalledTimes(1); const [rendered] = mockRender.mock.calls[0]; expect(rendered).toMatchSnapshot(); });