fix: integrate RTL handling on locale changes (AU-2863)

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(<UnitButton {...mockData} />);
+    const { container } = render(<UnitButton {...mockData} />, { 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(<UnitButton {...mockData} unitId={completedUnit.id} showCompletion={false} />);
+    const { container } = render(
+      <UnitButton {...mockData} unitId={completedUnit.id} showCompletion={false} />,
+      { wrapWithRouter: true },
+    );
     container.querySelectorAll('svg').forEach(icon => {
       expect(icon).not.toHaveClass('fa-check');
     });
   });
 
   it('does not show bookmark', () => {
-    const { queryByTestId } = render(<UnitButton {...mockData} />);
+    const { queryByTestId } = render(<UnitButton {...mockData} />, { wrapWithRouter: true });
     expect(queryByTestId('bookmark-icon')).toBeNull();
   });
 

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(

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