CORE-1455: Missing translation for "Content Warning"

src/app/content/components/ContentWarning.spec.tsx

@@ -4,7 +4,15 @@ import type { ComponentType } from 'react';
 import { mockCmsBook } from '../../../test/mocks/osWebLoader';
 import { reactAndFriends, resetModules } from '../../../test/utils';
 import { formatBookData } from '../utils';
+import createIntl from '../../messages/createIntl';
+import { RawIntlProvider } from 'react-intl';
 
+jest.mock('react-intl', () => ({
+  ...jest.requireActual('react-intl'),
+  useIntl: () => ({
+    formatMessage: ({ id }: any) => id,
+  }),
+}));
 
 const dummyBook = {
   ...formatBookData(archiveBook, mockCmsBook),
@@ -32,7 +40,12 @@ describe('ContentWarning', () => {
     });
 
     it('renders warning modal and hides it after clicking', async() => {
-      renderToDom(<ContentWarningDynamic book={dummyBook} />);
+      const intl = await createIntl('en');
+      renderToDom(
+        <RawIntlProvider value={intl}>
+          <ContentWarningDynamic book={dummyBook} />
+        </RawIntlProvider>
+      );
 
       const b = document!.querySelector('button');
 
@@ -66,8 +79,13 @@ describe('ContentWarning', () => {
       (global as any).document = documentBackup;
     });
 
-    it('mounts and unmounts without a dom', () => {
-      const component = renderer.create(<ContentWarningDynamic book={dummyBook} />);
+    it('mounts and unmounts without a dom', async() => {
+      const intl = await createIntl('es');
+      const component = renderer.create(
+        <RawIntlProvider value={intl}>
+          <ContentWarningDynamic book={dummyBook} />
+        </RawIntlProvider>
+      );
       expect(() => component.unmount()).not.toThrow();
     });
   });

src/app/content/components/ContentWarning.tsx

@@ -10,6 +10,7 @@ import { useTrapTabNavigation } from '../../reactUtils';
 import { assertDocument } from '../../utils';
 import { hasOSWebData } from '../guards';
 import { tuple } from '../../utils';
+import { useIntl } from 'react-intl';
 
 const WarningDiv = styled.div`
   display: flex;
@@ -87,14 +88,15 @@ const useDismiss = (book: Book) => {
 
 export default function ContentWarning({ book }: { book: Book }) {
   const [isShown, dismiss] = useDismiss(book);
+  const intl = useIntl();
 
   if (!hasOSWebData(book) || !book.content_warning_text || !isShown) {
     return null;
   }
 
   return (
     <Modal
-      ariaLabel='Content warning'
+      ariaLabel={intl.formatMessage({ id: 'i18n:content-warning:heading:aria-label' })}
       tabIndex='-1'
       scrollLockProps={{
         mediumScreensOnly: false,

src/app/content/components/LoginGate.spec.tsx

@@ -12,11 +12,13 @@ const dummyBook = {
 };
 
 describe('LoginGate', () => {
-  it('renders when not authenticated', () => {
-    const component = renderer.create(<TestContainer>
-      <LoginGate book={dummyBook}>
-      </LoginGate>
-    </TestContainer>);
+  it('renders when not authenticated', async() => {
+    const component = renderer.create(
+      <TestContainer>
+        <LoginGate book={dummyBook}>
+        </LoginGate>
+      </TestContainer>
+    );
 
     expect(component.root.findByType('a').props.href).toBe('/accounts/login?r=/');
   });

src/app/content/components/LoginGate.tsx

@@ -48,6 +48,7 @@ export default function LoginGate({
   book,
   children,
 }: React.PropsWithChildren<{ book: Book }>) {
+
   if (!!useSelector(user) ||
     !hasOSWebData(book) ||
     !book.require_login_message_text) {
@@ -56,7 +57,7 @@ export default function LoginGate({
   return (
     <>
       {children}
-      <Modal heading='Content Warning'>
+      <Modal heading='i18n:content-warning:heading:aria-label'>
         <Centered>
           <Message>
             <span dangerouslySetInnerHTML={{__html: book.require_login_message_text}} />

src/app/content/highlights/components/Highlights.spec.tsx

@@ -509,7 +509,7 @@ describe('VisuallyHiddenLiveRegion', () => {
   };
 
   it('announces the message after a delay when id changes', async() => {
-    const intl = await createIntl('en');
+    const intl = await createIntl('en', { 'test-id': 'Test ID' });
     const component = renderer.create(
       <RawIntlProvider value={intl}>
         <VisuallyHiddenLiveRegion id='test-id' />
@@ -529,15 +529,15 @@ describe('VisuallyHiddenLiveRegion', () => {
         jest.advanceTimersByTime(100);
       });
 
-      expect(getTextContent(liveRegion)).toBe('test-id');
+      expect(getTextContent(liveRegion)).toBe('Test ID');
     } finally {
       consoleErrorSpy.mockRestore();
     }
   });
 
   it('clears the timer on unmount', async() => {
     // @ts-ignore
-    const intl = await createIntl('en');
+    const intl = await createIntl('en', { 'test-id': 'Test ID' });
     const component = renderer.create(
       <RawIntlProvider value={intl}>
         <VisuallyHiddenLiveRegion id='test-id' />

src/app/messages/createIntl.ts

@@ -1,5 +1,5 @@
 import { shouldPolyfill } from '@formatjs/intl-pluralrules/should-polyfill';
-import memoize from 'lodash/fp/memoize';
+import { memoize } from '@openstax/ts-utils';
 import { createIntl, createIntlCache } from 'react-intl';
 import Sentry from '../../helpers/Sentry';
 
@@ -17,7 +17,7 @@ async function polyfill(locale: string) {
   }
 }
 
-export default memoize(async(loc: string) => {
+export default memoize(async(loc: string, testOverrides?: Record<string, string>) => {
   await polyfill(loc);
 
   const cache = createIntlCache();
@@ -34,9 +34,14 @@ export default memoize(async(loc: string) => {
     Sentry.captureException(e);
   }
 
+  const mergedMessages = {
+    ...messages,
+    ...(testOverrides || {}),
+  };
+
   const intl = createIntl({
     locale,
-    messages,
+    messages: mergedMessages,
   }, cache);
 
   return intl;

src/app/messages/en/messages.json

@@ -246,5 +246,6 @@
   "i18n:toolbar:textresizer:button:aria-label": "Change text size",
   "i18n:toolbar:textresizer:button:decrease:aria-label": "Decrease text size",
   "i18n:toolbar:textresizer:button:increase:aria-label": "Increase text size",
-  "i18n:toolbar:textresizer:popup:heading": "Text size"
+  "i18n:toolbar:textresizer:popup:heading": "Text size",
+  "i18n:content-warning:heading:aria-label": "Content Warning"
 }

src/app/messages/es/messages.json

@@ -242,5 +242,6 @@
   "i18n:toolbar:textresizer:button:aria-label": "Cambiar el tamaño del texto",
   "i18n:toolbar:textresizer:button:decrease:aria-label": "Disminuir el tamaño del texto",
   "i18n:toolbar:textresizer:button:increase:aria-label": "Aumentar el tamaño del texto",
-  "i18n:toolbar:textresizer:popup:heading": "Tamaño del texto"
+  "i18n:toolbar:textresizer:popup:heading": "Tamaño del texto",
+  "i18n:content-warning:heading:aria-label": "Advertencia de contenido"
 }

src/app/messages/pl/messages.json

@@ -242,5 +242,6 @@
   "i18n:toolbar:textresizer:button:aria-label": "Zmień rozmiar tekstu",
   "i18n:toolbar:textresizer:button:decrease:aria-label": "Zmniejsz rozmiar tekstu",
   "i18n:toolbar:textresizer:button:increase:aria-label": "Zwiększ rozmiar tekstu",
-  "i18n:toolbar:textresizer:popup:heading": "Rozmiar tekstu"
+  "i18n:toolbar:textresizer:popup:heading": "Rozmiar tekstu",
+  "i18n:content-warning:heading:aria-label": "Ostrzeżenie o treści"
 }