fix(notification): include displayname wrapper to prevent enzyme sele…

…ctor failure (#8863) * fix(notification): include displayname wrapper to prevent enzyme test selector failure * fix(structuredlist): add displayname wrappers for v11 export switch * feat(project): add custom component creator for next/classic variants Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 16, 2021 · 5f9ae2a · 5f9ae2a
1 parent 57a2307
commit 5f9ae2a
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 120 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4038,11 +4038,26 @@ Map {
     },
     "render": [Function],
   },
-  "ToastNotification" => Object {},
-  "InlineNotification" => Object {},
-  "NotificationActionButton" => Object {},
-  "NotificationButton" => Object {},
-  "NotificationTextDetails" => Object {},
+  "ToastNotification" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "InlineNotification" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "NotificationActionButton" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "NotificationButton" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "NotificationTextDetails" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "NumberInput" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
@@ -4964,12 +4979,30 @@ Map {
       },
     },
   },
-  "StructuredListWrapper" => Object {},
-  "StructuredListHead" => Object {},
-  "StructuredListBody" => Object {},
-  "StructuredListRow" => Object {},
-  "StructuredListInput" => Object {},
-  "StructuredListCell" => Object {},
+  "StructuredListWrapper" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "StructuredListHead" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "StructuredListBody" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "StructuredListRow" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "StructuredListInput" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "StructuredListCell" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "StructuredListSkeleton" => Object {
     "defaultProps": Object {
       "border": false,
@@ -6033,7 +6066,10 @@ Map {
       },
     },
   },
-  "Toggle" => Object {},
+  "Toggle" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "ToggleSmall" => Object {
     "defaultProps": Object {
       "defaultToggled": false,

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2436,7 +2436,7 @@ exports[`DataTable should render 1`] = `
                   }
                 }
               >
-                <ForwardRef(OverflowMenu)
+                <ForwardRef(FeatureToggle(OverflowMenu))
                   ariaLabel="Settings"
                   className="bx--toolbar-action bx--overflow-menu"
                   flipped={true}
@@ -2549,7 +2549,7 @@ exports[`DataTable should render 1`] = `
                       </ClickListener>
                     </OverflowMenu>
                   </ForwardRef(OverflowMenu)>
-                </ForwardRef(OverflowMenu)>
+                </ForwardRef(FeatureToggle(OverflowMenu))>
               </TableToolbarMenu>
               <Button
                 dangerDescription="danger"
@@ -3497,7 +3497,7 @@ exports[`DataTable sticky header should render 1`] = `
                   }
                 }
               >
-                <ForwardRef(OverflowMenu)
+                <ForwardRef(FeatureToggle(OverflowMenu))
                   ariaLabel="Settings"
                   className="bx--toolbar-action bx--overflow-menu"
                   flipped={true}
@@ -3610,7 +3610,7 @@ exports[`DataTable sticky header should render 1`] = `
                       </ClickListener>
                     </OverflowMenu>
                   </ForwardRef(OverflowMenu)>
-                </ForwardRef(OverflowMenu)>
+                </ForwardRef(FeatureToggle(OverflowMenu))>
               </TableToolbarMenu>
               <Button
                 dangerDescription="danger"

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -11,7 +11,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
     }
   }
 >
-  <ForwardRef(OverflowMenu)
+  <ForwardRef(FeatureToggle(OverflowMenu))
     ariaLabel="Add"
     className="custom-class bx--toolbar-action bx--overflow-menu"
     flipped={true}
@@ -121,6 +121,6 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
         </ClickListener>
       </OverflowMenu>
     </ForwardRef(OverflowMenu)>
-  </ForwardRef(OverflowMenu)>
+  </ForwardRef(FeatureToggle(OverflowMenu))>
 </TableToolbarMenu>
 `;
diff --git a/packages/react/src/components/Notification/index.js b/packages/react/src/components/Notification/index.js
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
 import {
   NotificationActionButton as NotificationActionButtonNext,
   NotificationButton as NotificationButtonNext,
@@ -19,44 +18,33 @@ import {
   ToastNotification as ToastNotificationClassic,
   InlineNotification as InlineNotificationClassic,
 } from './Notification';
-import { useFeatureFlag } from '../FeatureFlags';
+import { createComponentToggle } from '../../internal/ComponentToggle';
 
-export function NotificationActionButton(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <NotificationActionButtonNext {...props} />;
-  }
-  return <NotificationActionButtonClassic {...props} />;
-}
+export const NotificationActionButton = createComponentToggle({
+  name: 'NotificationActionButton',
+  next: NotificationActionButtonNext,
+  classic: NotificationActionButtonClassic,
+});
 
-export function NotificationTextDetails(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return null;
-  }
-  return <NotificationTextDetailsClassic {...props} />;
-}
+export const NotificationTextDetails = createComponentToggle({
+  name: 'NotificationTextDetails',
+  classic: NotificationTextDetailsClassic,
+});
 
-export function NotificationButton(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <NotificationButtonNext {...props} />;
-  }
-  return <NotificationButtonClassic {...props} />;
-}
+export const NotificationButton = createComponentToggle({
+  name: 'NotificationButton',
+  next: NotificationButtonNext,
+  classic: NotificationButtonClassic,
+});
 
-export function ToastNotification(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <ToastNotificationNext {...props} />;
-  }
-  return <ToastNotificationClassic {...props} />;
-}
+export const ToastNotification = createComponentToggle({
+  name: 'ToastNotification',
+  next: ToastNotificationNext,
+  classic: ToastNotificationClassic,
+});
 
-export function InlineNotification(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <InlineNotificationNext {...props} />;
-  }
-  return <InlineNotificationClassic {...props} />;
-}
+export const InlineNotification = createComponentToggle({
+  name: 'InlineNotification',
+  next: InlineNotificationNext,
+  classic: InlineNotificationClassic,
+});
diff --git a/packages/react/src/components/OverflowMenu/index.js b/packages/react/src/components/OverflowMenu/index.js
@@ -5,19 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-
 import { default as OverflowMenuNext } from './next/OverflowMenu';
 import { default as OverflowMenuClassic } from './OverflowMenu';
+import { createComponentToggle } from '../../internal/ComponentToggle';
 
-import { useFeatureFlag } from '../FeatureFlags';
-
-const OverflowMenu = React.forwardRef(function OverflowMenu(props, ref) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <OverflowMenuNext {...props} />;
-  }
-  return <OverflowMenuClassic {...props} ref={ref} />;
+const OverflowMenu = createComponentToggle({
+  name: 'OverflowMenu',
+  next: OverflowMenuNext,
+  classic: OverflowMenuClassic,
 });
 
 export default OverflowMenu;
diff --git a/packages/react/src/components/StructuredList/index.js b/packages/react/src/components/StructuredList/index.js
@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
 import {
   StructuredListWrapper as StructuredListWrapperNext,
   StructuredListHead as StructuredListHeadNext,
@@ -21,53 +20,42 @@ import {
   StructuredListRow as StructuredListRowClassic,
   StructuredListCell as StructuredListCellClassic,
 } from './StructuredList';
-import { useFeatureFlag } from '../FeatureFlags';
+import { createComponentToggle } from '../../internal/ComponentToggle';
 
-export function StructuredListWrapper(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <StructuredListWrapperNext {...props} />;
-  }
-  return <StructuredListWrapperClassic {...props} />;
-}
+export const StructuredListWrapper = createComponentToggle({
+  name: 'StructuredListWrapper',
+  next: StructuredListWrapperNext,
+  classic: StructuredListWrapperClassic,
+});
 
-export function StructuredListHead(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <StructuredListHeadNext {...props} />;
-  }
-  return <StructuredListHeadClassic {...props} />;
-}
-export function StructuredListInput(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <StructuredListInputNext {...props} />;
-  }
-  return <StructuredListInputClassic {...props} />;
-}
+export const StructuredListHead = createComponentToggle({
+  name: 'StructuredListHead',
+  next: StructuredListHeadNext,
+  classic: StructuredListHeadClassic,
+});
 
-export function StructuredListBody(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <StructuredListBodyNext {...props} />;
-  }
-  return <StructuredListBodyClassic {...props} />;
-}
+export const StructuredListInput = createComponentToggle({
+  name: 'StructuredListInput',
+  next: StructuredListInputNext,
+  classic: StructuredListInputClassic,
+});
 
-export function StructuredListRow(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <StructuredListRowNext {...props} />;
-  }
-  return <StructuredListRowClassic {...props} />;
-}
+export const StructuredListBody = createComponentToggle({
+  name: 'StructuredListBody',
+  next: StructuredListBodyNext,
+  classic: StructuredListBodyClassic,
+});
 
-export function StructuredListCell(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <StructuredListCellNext {...props} />;
-  }
-  return <StructuredListCellClassic {...props} />;
-}
+export const StructuredListRow = createComponentToggle({
+  name: 'StructuredListRow',
+  next: StructuredListRowNext,
+  classic: StructuredListRowClassic,
+});
+
+export const StructuredListCell = createComponentToggle({
+  name: 'StructuredListCell',
+  next: StructuredListCellNext,
+  classic: StructuredListCellClassic,
+});
 
 export { default as StructuredListSkeleton } from './StructuredList.Skeleton';
diff --git a/packages/react/src/components/Toggle/index.js b/packages/react/src/components/Toggle/index.js
@@ -5,20 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-
 import ToggleNext from './next/Toggle';
 import ToggleClassic from './Toggle';
+import { createComponentToggle } from '../../internal/ComponentToggle';
 
-import { useFeatureFlag } from '../FeatureFlags';
-
-function Toggle(props) {
-  const enabled = useFeatureFlag('enable-v11-release');
-  if (enabled) {
-    return <ToggleNext {...props} />;
-  }
-  return <ToggleClassic {...props} />;
-}
+const Toggle = createComponentToggle({
+  name: 'Toggle',
+  next: ToggleNext,
+  classic: ToggleClassic,
+});
 
 export { default as ToggleSkeleton } from './Toggle.Skeleton';
 export default Toggle;
diff --git a/packages/react/src/internal/ComponentToggle.js b/packages/react/src/internal/ComponentToggle.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { useFeatureFlag } from '../components/FeatureFlags';
+
+export function createComponentToggle(spec) {
+  const { name, flag = 'enable-v11-release', next, classic } = spec;
+
+  function ComponentToggle(props, ref) {
+    const enabled = useFeatureFlag(flag);
+    if (enabled) {
+      if (next) {
+        return React.createElement(next, { ...props, ref: ref });
+      } else {
+        return null;
+      }
+    }
+
+    return React.createElement(classic, { ...props, ref: ref });
+  }
+
+  ComponentToggle.displayName = `FeatureToggle(${name})`;
+
+  return React.forwardRef(ComponentToggle);
+}