fix(testing): clean up fragment wrappers (#892)

src/components/authentication/authentication.js

@@ -18,7 +18,7 @@ import { translate } from '../i18n/i18n';
  * @param {object} props
  * @param {string} props.appName
  * @param {Function} props.authorizeUser
- * @param {Node} props.children
+ * @param {React.ReactNode} props.children
  * @param {Function} props.hideGlobalFilter
  * @param {Function} props.initializeChrome
  * @param {boolean} props.isDisabled
@@ -28,7 +28,7 @@ import { translate } from '../i18n/i18n';
  * @param {Function} props.t
  * @param {Function} props.useDispatch
  * @param {Function} props.useHistory
- * @returns {Node}
+ * @returns {React.ReactNode}
  */
 const Authentication = ({
   appName,
@@ -72,7 +72,7 @@ const Authentication = ({
   }
 
   if (isAuthorized) {
-    return <React.Fragment>{children}</React.Fragment>;
+    return children;
   }
 
   if (pending) {
@@ -97,7 +97,7 @@ const Authentication = ({
  * Prop types.
  *
  * @type {{authorizeUser: Function, onNavigation: Function, useHistory: Function, setAppName: Function,
- *     t: Function, children: Node, appName: string, initializeChrome: Function, session: object,
+ *     t: Function, children: React.ReactNode, appName: string, initializeChrome: Function, session: object,
  *     useDispatch: Function, isDisabled: boolean, hideGlobalFilter: Function}}
  */
 Authentication.propTypes = {

src/components/i18n/i18n.js

@@ -13,7 +13,7 @@ import { helpers } from '../../common/helpers';
  * @param {string|Array} translateKey A key reference, or an array of a primary key with fallback keys.
  * @param {string|object|Array} values A default string if the key can't be found. An object with i18next settings. Or an array of objects (key/value) pairs used to replace string tokes. i.e. "[{ hello: 'world' }]"
  * @param {Array} components An array of HTML/React nodes used to replace string tokens. i.e. "[<span />, <React.Fragment />]"
- * @returns {string|Node}
+ * @returns {string|React.ReactNode}
  */
 const translate = (translateKey, values = null, components) => {
   const updatedValues = values;
@@ -47,8 +47,8 @@ const translate = (translateKey, values = null, components) => {
 /**
  * Apply string replacements against a component, HOC.
  *
- * @param {Node} Component
- * @returns {Node}
+ * @param {React.ReactNode} Component
+ * @returns {React.ReactNode}
  */
 const translateComponent = Component => {
   const withTranslation = ({ ...props }) => (
@@ -67,11 +67,11 @@ const translateComponent = Component => {
  * Load I18n.
  *
  * @param {object} props
- * @param {Node} props.children
+ * @param {React.ReactNode} props.children
  * @param {string} props.fallbackLng
  * @param {string} props.loadPath
  * @param {string} props.locale
- * @returns {Node}
+ * @returns {React.ReactNode}
  */
 const I18n = ({ children, fallbackLng, loadPath, locale }) => {
   const [initialized, setInitialized] = useState(false);
@@ -117,13 +117,13 @@ const I18n = ({ children, fallbackLng, loadPath, locale }) => {
     }
   }, [initialized, locale]);
 
-  return (initialized && <React.Fragment>{children}</React.Fragment>) || <React.Fragment />;
+  return (initialized && children) || <React.Fragment />;
 };
 
 /**
  * Prop types.
  *
- * @type {{loadPath: string, children: Node, locale: string, fallbackLng: string}}
+ * @type {{loadPath: string, children: React.ReactNode, locale: string, fallbackLng: string}}
  */
 I18n.propTypes = {
   children: PropTypes.node.isRequired,

src/components/inventoryTabs/__tests__/__snapshots__/inventoryTab.test.js.snap

@@ -13,9 +13,7 @@ Array [
 `;
 
 exports[`InventoryTab Component should output a non-connected component: non-connected 1`] = `
-<Fragment>
-  <div>
-    lorem ipsum
-  </div>
-</Fragment>
+<div>
+  lorem ipsum
+</div>
 `;

src/components/inventoryTabs/inventoryTab.js

@@ -6,17 +6,17 @@ import PropTypes from 'prop-types';
  *
  * @param {object} props
  * @param {boolean} props.active
- * @param {Node} props.children
+ * @param {React.ReactNode} props.children
  * @param {string} props.title
- * @returns {Node}
+ * @returns {React.ReactNode}
  */
 // eslint-disable-next-line no-unused-vars
-const InventoryTab = ({ active, children, title }) => <React.Fragment>{children}</React.Fragment>;
+const InventoryTab = ({ active, children, title }) => children;
 
 /**
  * Prop types.
  *
- * @type {{children: Node, className: string}}
+ * @type {{children: React.ReactNode, className: string}}
  */
 InventoryTab.propTypes = {
   children: PropTypes.node.isRequired,

src/config/__tests__/__snapshots__/product.rhosak.test.js.snap

@@ -80,16 +80,14 @@ exports[`Product RHOSAK config should apply an instances inventory configuration
 Object {
   "cells": Array [
     Object {
-      "title": <React.Fragment>
-        <Button
-          component="a"
-          href="/insights/inventory/XXXX-XXXX-XXXXX-XXXXX/"
-          isInline={true}
-          variant="link"
-        >
-          lorem ipsum
-        </Button>
-      </React.Fragment>,
+      "title": <Button
+        component="a"
+        href="/insights/inventory/XXXX-XXXX-XXXXX-XXXXX/"
+        isInline={true}
+        variant="link"
+      >
+        lorem ipsum
+      </Button>,
     },
     Object {
       "title": "t(curiosity-inventory.measurement, {\\"context\\":\\"Transfer-gibibytes\\",\\"total\\":\\"0.00035\\"})",

src/config/product.rhosak.js

@@ -134,7 +134,7 @@ const config = {
           );
         }
 
-        return <React.Fragment>{updatedDisplayName}</React.Fragment>;
+        return updatedDisplayName;
       },
       isSortable: true
     },