Use explicit name for Preact fragments (#10049)

app/javascript/article-form/components/ArticleCoverImage.jsx

@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, Fragment } from 'preact';
 import PropTypes from 'prop-types';
 import { generateMainImage } from '../actions';
 import { validateFileInputs } from '../../packs/validateFileInputs';
@@ -75,7 +75,7 @@ export class ArticleCoverImage extends Component {
               <Spinner /> Uploading...
             </span>
           ) : (
-            <>
+            <Fragment>
               <Button variant="outlined" className="mr-2 whitespace-nowrap">
                 <label htmlFor="cover-image-input">{uploadLabel}</label>
                 <input
@@ -95,7 +95,7 @@ export class ArticleCoverImage extends Component {
                   Remove
                 </Button>
               )}
-            </>
+            </Fragment>
           )}
         </div>
         {uploadError && (

app/javascript/leftSidebar/TagsFollowed.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { tagPropTypes } from '../common-prop-types';
 
 export const TagsFollowed = ({ tags = [] }) => {
-  // TODO: Once we're using Preact X >, we can replace the containing <div /> with a Fragment, <></>
+  // TODO: Once we're using Preact X >, we can replace the containing <div /> with a Fragment, <Fragment></Fragment>
   return (
     <div id="followed-tags-wrapper" data-testid="followed-tags">
       {tags.map((tag) => (

app/javascript/modCenter/singleArticle/__tests__/singleArticle.test.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable jest/expect-expect */
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import { axe } from 'jest-axe';
 import { render, getNodeText } from '@testing-library/preact';
 import SingleArticle from '../index';
@@ -19,14 +19,14 @@ const getTestArticle = () => ({
 describe('<SingleArticle />', () => {
   it('should have no a11y violations', async () => {
     const { container } = render(
-      <>
+      <Fragment>
         <SingleArticle {...getTestArticle()} toggleArticle={jest.fn()} />
         {/* Div below needed for this test to pass while preserve FlagUserModal functionality */}
         <div
           data-testid="flag-user-modal-container"
           class="flag-user-modal-container hidden"
         />
-      </>,
+      </Fragment>,
     );
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -34,13 +34,13 @@ describe('<SingleArticle />', () => {
 
   it('renders the article title', () => {
     const { queryByText } = render(
-      <>
+      <Fragment>
         <SingleArticle {...getTestArticle()} toggleArticle={jest.fn()} />
         <div
           data-testid="flag-user-modal"
           class="flag-user-modal-container hidden"
         />
-      </>,
+      </Fragment>,
     );
 
     expect(queryByText(getTestArticle().title)).toBeDefined();
@@ -48,13 +48,13 @@ describe('<SingleArticle />', () => {
 
   it('renders the tags', () => {
     const { queryByText } = render(
-      <>
+      <Fragment>
         <SingleArticle {...getTestArticle()} toggleArticle={jest.fn()} />
         <div
           data-testid="flag-user-modal"
           class="flag-user-modal-container hidden"
         />
-      </>,
+      </Fragment>,
     );
 
     expect(queryByText('discuss')).toBeDefined();
@@ -77,13 +77,13 @@ describe('<SingleArticle />', () => {
       },
     };
     const { container } = render(
-      <>
+      <Fragment>
         <SingleArticle {...article} toggleArticle={jest.fn()} />
         <div
           data-testid="flag-user-modal"
           class="flag-user-modal-container hidden"
         />
-      </>,
+      </Fragment>,
     );
     const text = getNodeText(container.querySelector('.article-title'));
     expect(text).not.toContain('#');
@@ -91,13 +91,13 @@ describe('<SingleArticle />', () => {
 
   it('renders the author name', () => {
     const { container } = render(
-      <>
+      <Fragment>
         <SingleArticle {...getTestArticle()} toggleArticle={jest.fn()} />
         <div
           data-testid="flag-user-modal"
           class="flag-user-modal-container hidden"
         />
-      </>,
+      </Fragment>,
     );
     const text = getNodeText(container.querySelector('.article-author'));
     expect(text).toContain(getTestArticle().user.name);
@@ -105,13 +105,13 @@ describe('<SingleArticle />', () => {
 
   it('renders the hand wave emoji if the author has less than 3 articles ', () => {
     const { container } = render(
-      <>
+      <Fragment>
         <SingleArticle {...getTestArticle()} toggleArticle={jest.fn()} />
         <div
           data-testid="flag-user-modal"
           class="flag-user-modal-container hidden"
         />
-      </>,
+      </Fragment>,
     );
     const text = getNodeText(container.querySelector('.article-author'));
     expect(text).toContain('👋');
@@ -119,13 +119,13 @@ describe('<SingleArticle />', () => {
 
   it('renders the correct formatted published date', () => {
     const { queryByText } = render(
-      <>
+      <Fragment>
         <SingleArticle {...getTestArticle()} toggleArticle={jest.fn()} />
         <div
           data-testid="flag-user-modal"
           class="flag-user-modal-container hidden"
         />
-      </>,
+      </Fragment>,
     );
 
     expect(queryByText('Jun 22')).toBeDefined();
@@ -137,13 +137,13 @@ describe('<SingleArticle />', () => {
     article.publishedAt = publishDate.toISOString();
 
     render(
-      <>
+      <Fragment>
         <SingleArticle {...article} toggleArticle={jest.fn()} />
         <div
           data-testid="flag-user-modal"
           class="flag-user-modal-container hidden"
         />
-      </>,
+      </Fragment>,
     );
 
     const readableTime = publishDate
@@ -161,13 +161,13 @@ describe('<SingleArticle />', () => {
     const toggleArticle = jest.fn();
     const article = getTestArticle();
     const { getByTestId } = render(
-      <>
+      <Fragment>
         <SingleArticle {...article} toggleArticle={toggleArticle} />
         <div
           data-testid="flag-user-modal"
           class="flag-user-modal-container hidden"
         />
-      </>,
+      </Fragment>,
     );
 
     const button = getByTestId(`mod-article-${article.id}`);

app/javascript/modCenter/singleArticle/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { h, Component } from 'preact';
+import { h, Component, Fragment } from 'preact';
 import { createPortal } from 'preact/compat';
 import { toggleFlagUserModal, FlagUserModal } from '../../packs/flagUserModal';
 import { formatDate } from './util';
@@ -49,7 +49,7 @@ export default class SingleArticle extends Component {
     }
 
     return (
-      <>
+      <Fragment>
         {modContainer &&
           createPortal(
             <FlagUserModal moderationUrl={path} authorId={user.id} />,
@@ -81,7 +81,7 @@ export default class SingleArticle extends Component {
             id={`article-iframe-${id}`}
           />
         </button>
-      </>
+      </Fragment>
     );
   }
 }