feat(react-intl): added localization keys for all entries (nodejs#2634)

Author: ovflowd

.eslintrc.js

@@ -69,7 +69,14 @@ module.exports = {
       },
     },
     {
-      files: ['test-processor.js', 'test-setup.js', 'test/**'],
+      files: [
+        'test-processor.js',
+        'test-setup.js',
+        'test/**',
+        '**/**.test.js',
+        '**/**.test.ts',
+        '**/**.test.tsx',
+      ],
       extends: ['plugin:testing-library/react'],
       env: {
         jest: true,

test/__fixtures__/hooks.tsx renamed to src/__fixtures__/hooks.tsx

@@ -1,4 +1,4 @@
-import { ContributorApiResponse, Contributor } from '../../src/hooks';
+import { ContributorApiResponse, Contributor } from '../hooks';
 
 export const createRandomContributorApiData = (): ContributorApiResponse => ({
   login: 'login_mock',

test/__fixtures__/mockMDXBodyContent.tsx renamed to src/__fixtures__/mockMDXBodyContent.tsx

@@ -10,7 +10,7 @@ import {
   NodeReleaseData,
   TableOfContents,
   BlogCategoriesList,
-} from '../../src/types';
+} from '../types';
 import mockMDXBodyContent from './mockMDXBodyContent';
 
 export const mockTableOfContents: TableOfContents = {
@@ -168,7 +168,7 @@ export const createBlogData = (): BlogPostsList & BlogCategoriesList => ({
             ],
           },
           fields: {
-            date: 'Mock date',
+            date: '11/11/2022',
             slug: 'Mock blog slug',
             readingTime: {
               text: '1 min read',
@@ -197,7 +197,7 @@ export const createBlogPageData = (): BlogPageData => ({
         },
       ],
     },
-    fields: { slug: 'slug-mock', date: 'date-mock' },
+    fields: { slug: 'slug-mock', date: '11/11/2022' },
   },
   recent: {
     edges: [
@@ -218,7 +218,7 @@ export const createBlogPageData = (): BlogPageData => ({
             ],
           },
           fields: {
-            date: 'date-mock',
+            date: '11/11/2022',
             slug: 'slug-mock',
             readingTime: { text: 'text-mock' },
           },

test/__fixtures__/page.tsx renamed to src/__fixtures__/page.tsx

@@ -106,7 +106,6 @@ exports[`Article component renders correctly 1`] = `
         <span>
           Edit this page on GitHub
         </span>
-         
         <svg
           class="icon"
           fill="currentColor"
@@ -129,7 +128,7 @@ exports[`Article component renders correctly 1`] = `
           href="/learn/test-slug"
           rel="prev"
         >
-          ←   Prev
+          ←  Prev
         </a>
       </li>
       <li>
@@ -138,7 +137,7 @@ exports[`Article component renders correctly 1`] = `
           href="/learn/test-slug"
           rel="next"
         >
-          Next   →
+          Next →
         </a>
       </li>
     </ul>
@@ -324,7 +323,6 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
         <span>
           Edit this page on GitHub
         </span>
-         
         <svg
           class="icon"
           fill="currentColor"
@@ -347,7 +345,7 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
           href="/learn/test-slug"
           rel="prev"
         >
-          ←   Prev
+          ←  Prev
         </a>
       </li>
       <li>
@@ -356,7 +354,7 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
           href="/learn/test-slug"
           rel="next"
         >
-          Next   →
+          Next →
         </a>
       </li>
     </ul>
@@ -477,7 +475,6 @@ exports[`Article component should accept and render child components 1`] = `
         <span>
           Edit this page on GitHub
         </span>
-         
         <svg
           class="icon"
           fill="currentColor"
@@ -500,7 +497,7 @@ exports[`Article component should accept and render child components 1`] = `
           href="/learn/test-slug"
           rel="prev"
         >
-          ←   Prev
+          ←  Prev
         </a>
       </li>
       <li>
@@ -509,7 +506,7 @@ exports[`Article component should accept and render child components 1`] = `
           href="/learn/test-slug"
           rel="next"
         >
-          Next   →
+          Next →
         </a>
       </li>
     </ul>

src/components/Article/__tests__/__snapshots__/article.test.tsx.snap

@@ -1,12 +1,10 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '../../../../test/__mocks__/intersectionObserverMock';
-
 import Article from '..';
 import {
   createLearnPageData,
   createLearnPageContext,
-} from '../../../../test/__fixtures__/page';
+} from '../../../__fixtures__/page';
 
 const getArticleProps = () => {
   const learnPageData = createLearnPageData();

src/components/Article/__tests__/article.test.tsx

@@ -1,12 +1,11 @@
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import React, { Fragment } from 'react';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 import { BlogMetaData } from '../../types';
 import { getTerminatingString } from '../../util/getTerminatingString';
 import './BlogCard.scss';
 
-interface Props {
-  data: BlogMetaData;
-}
+type Props = { data: BlogMetaData } & WrappedComponentProps;
 
 const getBlogCategoryUrl = (category: string): string => `/blog/${category}/`;
 
@@ -17,6 +16,7 @@ const BlogCard = ({
       frontmatter: { blogAuthors, title, category },
     },
   },
+  intl,
 }: Props): JSX.Element => (
   <div className="blog-card">
     <div className="title">
@@ -33,16 +33,20 @@ const BlogCard = ({
     <div className="content">
       <h4>{date}</h4>
       <p>
-        by{' '}
+        {intl.formatMessage({ id: 'blog.authors.list.title.by' })}{' '}
         {blogAuthors?.map((author, i) => (
           <Fragment key={author.name}>
             <span>{author.name}</span>
-            {getTerminatingString(i, blogAuthors.length)}
+            {getTerminatingString(
+              i,
+              blogAuthors.length,
+              ` ${intl.formatMessage({ id: 'blog.authors.list.title.and' })} `
+            )}
           </Fragment>
         ))}
       </p>
     </div>
   </div>
 );
 
-export default BlogCard;
+export default injectIntl(BlogCard);

src/components/BlogCard/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-
-import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 
 import Codebox from '../index';
 
@@ -35,7 +34,8 @@ describe('Codebox component', (): void => {
 
   it('renders correctly', async () => {
     const textToCopy = <p>text to be copy</p>;
-    const { getByText, findByText } = render(
+
+    render(
       <Codebox>
         {{
           props: {
@@ -48,12 +48,12 @@ describe('Codebox component', (): void => {
 
     navigatorClipboardSpy.mockImplementationOnce(() => Promise.resolve());
 
-    const buttonElement = getByText('copy');
+    const buttonElement = screen.getByText('copy');
     userEvent.click(buttonElement);
 
-    await findByText('copied');
+    await screen.findByText('copied');
 
-    expect(getByText('done')).toBeInTheDocument();
+    expect(screen.getByText('done')).toBeInTheDocument();
     expect(navigatorClipboardSpy).toHaveBeenCalledTimes(1);
     expect(navigatorClipboardSpy).toHaveBeenCalledWith(textToCopy.toString());
   });

src/components/Codebox/__tests__/codebox.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render } from '@testing-library/react';
 import DownloadAdditional from '..';
 
 describe('DownloadAdditional component', (): void => {
@@ -40,6 +40,7 @@ describe('DownloadAdditional component', (): void => {
       />
     );
 
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const downloadItem = container.querySelector(
       '.download-additional__item'
     ) as Element;
@@ -59,6 +60,7 @@ describe('DownloadAdditional component', (): void => {
       />
     );
 
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const downloadItem = container.querySelector(
       '.download-additional__item'
     ) as Element;

src/components/DownloadAdditional/__tests__/download-additional.test.tsx

@@ -1,4 +1,5 @@
 import React, { useState, FC } from 'react';
+import { FormattedMessage } from 'react-intl';
 import DownloadToggle from '../DownloadToggle';
 import { NodeReleaseLTSNPMVersion } from '../../types';
 import { getDownloadableItemsList, Downloadable } from './downloadItems';
@@ -16,7 +17,7 @@ const DownloadButton: FC<DownloadButtonProps> = ({
   className,
   link,
   label,
-}: DownloadButtonProps) => (
+}) => (
   <a className={className} href={link}>
     <i className="material-icons">get_app</i>
     {label}
@@ -33,7 +34,7 @@ const DownloadableItem: FC<DownloadableItemProps> = ({
   item,
   isExpanded,
   setExpandedItem,
-}: DownloadableItemProps) => {
+}) => {
   const onClick = (): void =>
     isExpanded ? setExpandedItem('') : setExpandedItem(item.name);
   const classes = `${CLASS_NAME}__item`.concat(
@@ -84,12 +85,14 @@ const DownloadAdditional: FC<DownloadAdditionalProps> = ({
   line,
   selectedTypeRelease,
   handleTypeReleaseToggle,
-}: DownloadAdditionalProps): JSX.Element => {
+}) => {
   const [expandedItem, setExpandedItem] = useState('');
   return (
     <div className={CLASS_NAME}>
       <div className={`${CLASS_NAME}__header`}>
-        <h3 className={`${CLASS_NAME}__title`}>Additional Downloads</h3>
+        <h3 className={`${CLASS_NAME}__title`}>
+          <FormattedMessage id="components.downloadAdditional.title" />
+        </h3>
         <DownloadToggle
           selected={selectedTypeRelease}
           handleClick={handleTypeReleaseToggle}

src/components/DownloadAdditional/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 import DownloadCards from '..';
 import { UserOS } from '../../../util/detectOS';
@@ -12,9 +12,9 @@ describe('DownloadCards component', (): void => {
   });
 
   it('check click handler on DownloadCards component', async () => {
-    const { getAllByRole } = render(<DownloadCards userOS={UserOS.MAC} />);
+    render(<DownloadCards userOS={UserOS.MAC} />);
 
-    const listElement = getAllByRole('tab');
+    const listElement = screen.getAllByRole('tab');
 
     expect(listElement[0]).toHaveClass('download-card');
 
@@ -24,12 +24,10 @@ describe('DownloadCards component', (): void => {
   });
 
   it('check left and right arrow click handler on DownloadCards component', (): void => {
-    const { getByRole, getAllByRole } = render(
-      <DownloadCards userOS={UserOS.MAC} />
-    );
+    render(<DownloadCards userOS={UserOS.MAC} />);
 
-    const tabListElement = getByRole('tablist');
-    const listElement = getAllByRole('tab');
+    const tabListElement = screen.getByRole('tablist');
+    const listElement = screen.getAllByRole('tab');
 
     expect(listElement[0]).toHaveClass('download-card');
 

src/components/DownloadCards/__tests__/download-cards.test.tsx

@@ -7,16 +7,15 @@ exports[`DownloadHeader component renders correctly 1`] = `
   >
     <div>
       HOME /
+       
       <span
         class="download-page__navigation--active"
       >
-         downloads
+        downloads
       </span>
     </div>
     <div>
-      CURRENT
-       VERSION 
-      v14.11.0
+      CURRENT VERSION v14.11.0
     </div>
   </div>
   <div
@@ -30,9 +29,7 @@ exports[`DownloadHeader component renders correctly 1`] = `
     <div
       class="download-page__navigation--npm"
     >
-      (includes npm 
-      6.14.8
-      )
+      (includes npm 6.14.8)
     </div>
   </div>
 </div>