feat(upgrade): codemod, test cases and fixtures updated

carbon-design-system · Aug 26, 2024 · 38e12e1 · 38e12e1
1 parent c6c54b9
commit 38e12e1
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 135 deletions.
diff --git a/packages/react/src/components/FeatureFlags/__tests__/FeatureFlags-test.js b/packages/react/src/components/FeatureFlags/__tests__/FeatureFlags-test.js
@@ -39,46 +39,10 @@ describe('FeatureFlags', () => {
 
     function TestComponent() {
       const featureFlags = useFeatureFlags();
-      const a = useFeatureFlag('a');
-      const b = useFeatureFlag('b');
-
-      checkFlags({
-        a: featureFlags.enabled('a'),
-        b: featureFlags.enabled('b'),
-      });
-
-      checkFlag({
-        a,
-        b,
-      });
-
-      return null;
-    }
-
-    render(
-      <FeatureFlags flags={{ a: true, b: false }}>
-        <TestComponent />
-      </FeatureFlags>
-    );
-
-    expect(checkFlags).toHaveBeenLastCalledWith({
-      a: true,
-      b: false,
-    });
-    expect(checkFlag).toHaveBeenLastCalledWith({
-      a: true,
-      b: false,
-    });
-  });
-
-  it('should provide access to the feature flags for a scope', () => {
-    const checkFlags = jest.fn();
-    const checkFlag = jest.fn();
-
-    function TestComponent() {
-      const featureFlags = useFeatureFlags();
-      const flag1 = useFeatureFlag('enable-v12-overflowmenu');
-      const flag2 = useFeatureFlag('enable-treeview-controllable');
+      const enableV12Overflowmenu = useFeatureFlag('enable-v12-overflowmenu');
+      const enableTreeviewControllable = useFeatureFlag(
+        'enable-treeview-controllable'
+      );
 
       checkFlags({
         enableV12Overflowmenu: featureFlags.enabled('enable-v12-overflowmenu'),
@@ -88,15 +52,15 @@ describe('FeatureFlags', () => {
       });
 
       checkFlag({
-        enableV12Overflowmenu: flag1,
-        enableTreeviewControllable: flag2,
+        enableV12Overflowmenu,
+        enableTreeviewControllable,
       });
 
       return null;
     }
 
     render(
-      <FeatureFlags enableV12Overflowmenu enableTreeviewControllable={false}>
+      <FeatureFlags enableV12Overflowmenu>
         <TestComponent />
       </FeatureFlags>
     );
@@ -117,95 +81,112 @@ describe('FeatureFlags', () => {
 
     function TestComponent() {
       const featureFlags = useFeatureFlags();
-      const a = useFeatureFlag('a');
-      const b = useFeatureFlag('b');
+      const enableV12Overflowmenu = useFeatureFlag('enable-v12-overflowmenu');
+      const enableTreeviewControllable = useFeatureFlag(
+        'enable-treeview-controllable'
+      );
 
       checkFlags({
-        a: featureFlags.enabled('a'),
-        b: featureFlags.enabled('b'),
+        enableV12Overflowmenu: featureFlags.enabled('enable-v12-overflowmenu'),
+        enableTreeviewControllable: featureFlags.enabled(
+          'enable-treeview-controllable'
+        ),
       });
 
       checkFlag({
-        a,
-        b,
+        enableV12Overflowmenu,
+        enableTreeviewControllable,
       });
 
       return null;
     }
 
     const { rerender } = render(
-      <FeatureFlags flags={{ a: true, b: false }}>
+      <FeatureFlags enableV12Overflowmenu>
         <TestComponent />
       </FeatureFlags>
     );
 
     expect(checkFlags).toHaveBeenLastCalledWith({
-      a: true,
-      b: false,
+      enableV12Overflowmenu: true,
+      enableTreeviewControllable: false,
     });
     expect(checkFlag).toHaveBeenLastCalledWith({
-      a: true,
-      b: false,
+      enableV12Overflowmenu: true,
+      enableTreeviewControllable: false,
     });
 
     rerender(
-      <FeatureFlags flags={{ a: false, b: true }}>
+      <FeatureFlags enableTreeviewControllable>
         <TestComponent />
       </FeatureFlags>
     );
 
     expect(checkFlags).toHaveBeenLastCalledWith({
-      a: false,
-      b: true,
+      enableV12Overflowmenu: false,
+      enableTreeviewControllable: true,
     });
     expect(checkFlag).toHaveBeenLastCalledWith({
-      a: false,
-      b: true,
+      enableV12Overflowmenu: false,
+      enableTreeviewControllable: true,
     });
   });
 
-  it('should handle boolean props correctly when no flags object is provided', () => {
-    const checkFlags = jest.fn();
+  it('should merge scopes and overwrite duplicate keys', () => {
     const checkFlag = jest.fn();
 
     function TestComponent() {
-      const featureFlags = useFeatureFlags();
       const enableV12Overflowmenu = useFeatureFlag('enable-v12-overflowmenu');
       const enableTreeviewControllable = useFeatureFlag(
         'enable-treeview-controllable'
       );
 
-      checkFlags({
-        enableV12Overflowmenu: featureFlags.enabled('enable-v12-overflowmenu'),
-        enableTreeviewControllable: featureFlags.enabled(
-          'enable-treeview-controllable'
-        ),
-      });
-
-      checkFlag({
-        enableV12Overflowmenu,
-        enableTreeviewControllable,
-      });
+      checkFlag({ enableV12Overflowmenu, enableTreeviewControllable });
 
       return null;
     }
 
     render(
-      <FeatureFlags enableV12Overflowmenu enableTreeviewControllable={false}>
+      <FeatureFlags enableTreeviewControllable>
         <TestComponent />
       </FeatureFlags>
     );
 
-    expect(checkFlags).toHaveBeenLastCalledWith({
+    expect(checkFlag).toHaveBeenLastCalledWith({
+      enableV12Overflowmenu: false,
+      enableTreeviewControllable: true,
+    });
+
+    render(
+      <FeatureFlags enableTreeviewControllable>
+        <FeatureFlags enableV12Overflowmenu>
+          <TestComponent />
+        </FeatureFlags>
+      </FeatureFlags>
+    );
+
+    expect(checkFlag).toHaveBeenLastCalledWith({
       enableV12Overflowmenu: true,
       enableTreeviewControllable: false,
     });
+
+    render(
+      <FeatureFlags enableTreeviewControllable>
+        <FeatureFlags enableV12Overflowmenu>
+          <FeatureFlags
+            enableTreeviewControllable={false}
+            enableV12Overflowmenu={false}>
+            <TestComponent />
+          </FeatureFlags>
+        </FeatureFlags>
+      </FeatureFlags>
+    );
+
     expect(checkFlag).toHaveBeenLastCalledWith({
-      enableV12Overflowmenu: true,
+      enableV12Overflowmenu: false,
       enableTreeviewControllable: false,
     });
   });
-
   it('should handle boolean props and flags object with no overlapping keys', () => {
     const checkFlags = jest.fn();
     const checkFlag = jest.fn();
@@ -233,11 +214,7 @@ describe('FeatureFlags', () => {
     }
 
     render(
-      <FeatureFlags
-        flags={{
-          'enable-v12-overflowmenu': false,
-        }}
-        enableExperimentalFocusWrapWithoutSentinels>
+      <FeatureFlags enableExperimentalFocusWrapWithoutSentinels>
         <TestComponent />
       </FeatureFlags>
     );
@@ -251,58 +228,45 @@ describe('FeatureFlags', () => {
       enableExperimentalFocusWrapWithoutSentinels: true,
     });
   });
-
-  it('should merge scopes and overwrite duplicate keys', () => {
-    GlobalFeatureFlags.add('global', true);
-
+  it('should handle boolean props correctly when no flags object is provided', () => {
+    const checkFlags = jest.fn();
     const checkFlag = jest.fn();
 
     function TestComponent() {
-      const global = useFeatureFlag('global');
-      const local = useFeatureFlag('local');
+      const featureFlags = useFeatureFlags();
+      const enableV12Overflowmenu = useFeatureFlag('enable-v12-overflowmenu');
+      const enableTreeviewControllable = useFeatureFlag(
+        'enable-treeview-controllable'
+      );
 
-      checkFlag({ global, local });
+      checkFlags({
+        enableV12Overflowmenu: featureFlags.enabled('enable-v12-overflowmenu'),
+        enableTreeviewControllable: featureFlags.enabled(
+          'enable-treeview-controllable'
+        ),
+      });
+
+      checkFlag({
+        enableV12Overflowmenu,
+        enableTreeviewControllable,
+      });
 
       return null;
     }
 
     render(
-      <FeatureFlags flags={{ local: true }}>
+      <FeatureFlags enableV12Overflowmenu enableTreeviewControllable={false}>
         <TestComponent />
       </FeatureFlags>
     );
 
-    expect(checkFlag).toHaveBeenLastCalledWith({
-      global: true,
-      local: true,
-    });
-
-    render(
-      <FeatureFlags flags={{ local: true }}>
-        <FeatureFlags flags={{ global: false }}>
-          <TestComponent />
-        </FeatureFlags>
-      </FeatureFlags>
-    );
-
-    expect(checkFlag).toHaveBeenLastCalledWith({
-      global: false,
-      local: true,
+    expect(checkFlags).toHaveBeenLastCalledWith({
+      enableV12Overflowmenu: true,
+      enableTreeviewControllable: false,
     });
-
-    render(
-      <FeatureFlags flags={{ local: true }}>
-        <FeatureFlags flags={{ global: false }}>
-          <FeatureFlags flags={{ local: false }}>
-            <TestComponent />
-          </FeatureFlags>
-        </FeatureFlags>
-      </FeatureFlags>
-    );
-
     expect(checkFlag).toHaveBeenLastCalledWith({
-      global: false,
-      local: false,
+      enableV12Overflowmenu: true,
+      enableTreeviewControllable: false,
     });
   });
 });
diff --git a/packages/react/src/components/FeatureFlags/index.js b/packages/react/src/components/FeatureFlags/index.js
@@ -43,13 +43,14 @@ function FeatureFlags({
   const [prevParentScope, setPrevParentScope] = useState(parentScope);
 
   const combinedFlags = {
-    'enable-use-controlled-state-with-value': enableUseControlledStateWithValue,
-    'enable-v12-tile-default-icons': enableV12TileDefaultIcons,
-    'enable-v12-tile-radio-icons': enableV12TileRadioIcons,
-    'enable-v12-overflowmenu': enableV12Overflowmenu,
-    'enable-treeview-controllable': enableTreeviewControllable,
+    'enable-use-controlled-state-with-value':
+      enableUseControlledStateWithValue ?? false,
+    'enable-v12-tile-default-icons': enableV12TileDefaultIcons ?? false,
+    'enable-v12-tile-radio-icons': enableV12TileRadioIcons ?? false,
+    'enable-v12-overflowmenu': enableV12Overflowmenu ?? false,
+    'enable-treeview-controllable': enableTreeviewControllable ?? false,
     'enable-experimental-focus-wrap-without-sentinels':
-      enableExperimentalFocusWrapWithoutSentinels,
+      enableExperimentalFocusWrapWithoutSentinels ?? false,
     ...flags,
   };
   const [scope, updateScope] = useState(() => {
@@ -143,7 +144,8 @@ function useChangedValue(value, compare, callback) {
  */
 function useFeatureFlag(flag) {
   const scope = useContext(FeatureFlagContext);
-  return scope.enabled(flag);
+  //updated to return false for undefined flags
+  return scope.enabled(flag) ?? false;
 }
 
 /**

diff --git a/packages/react/src/components/OverflowMenuV2/index.js b/packages/react/src/components/OverflowMenuV2/index.js
@@ -25,10 +25,7 @@ function OverflowMenuV2(props) {
   }
 
   return (
-    <FeatureFlags
-      flags={{
-        'enable-v12-overflowmenu': true,
-      }}>
+    <FeatureFlags enableV12Overflowmenu>
       <OverflowMenu {...props} />
     </FeatureFlags>
   );

diff --git a/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js b/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js
@@ -164,10 +164,7 @@ describe('TileGroup', () => {
     //Feature flag : enable-v12-tile-radio-icons
     it('should keep radio unselected if no `defaultSelected` is provided', () => {
       render(
-        <FeatureFlags
-          flags={{
-            'enable-v12-tile-radio-icons': true,
-          }}>
+        <FeatureFlags enableV12TileRadioIcons>
           <TileGroup legend="TestGroup" name="test">
             <RadioTile id="test-1" value="test-1">
               Option 1

diff --git a/packages/upgrade/transforms/__testfixtures__/featureflag-deprecate-flags-prop.input.js b/packages/upgrade/transforms/__testfixtures__/featureflag-deprecate-flags-prop.input.js
@@ -273,3 +273,6 @@ export const EnableV12TileRadioIcons = () => {
     </FeatureFlags>
   );
 };
+export const Test = () => {
+  return <div className={wrapperClasses}></div>;
+};
diff --git a/packages/upgrade/transforms/__testfixtures__/featureflag-deprecate-flags-prop.output.js b/packages/upgrade/transforms/__testfixtures__/featureflag-deprecate-flags-prop.output.js
@@ -273,3 +273,6 @@ export const EnableV12TileRadioIcons = () => {
     </FeatureFlags>
   );
 };
+export const Test = () => {
+  return <div className={wrapperClasses}></div>;
+};
diff --git a/packages/upgrade/transforms/__tests__/featureflag-deprecate-flags-prop-test.js b/packages/upgrade/transforms/__tests__/featureflag-deprecate-flags-prop-test.js
@@ -9,4 +9,4 @@
 
 const { defineTest } = require('jscodeshift/dist/testUtils');
 
-defineTest(__dirname, 'featureflag-deprecate-flags-prop');
+defineTest(__dirname, 'featureflag-deprecate-flags-prop', { parser: 'tsx' });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,4 +9,4 @@

		const { defineTest } = require('jscodeshift/dist/testUtils');

		defineTest(__dirname, 'featureflag-deprecate-flags-prop');
		defineTest(__dirname, 'featureflag-deprecate-flags-prop', { parser: 'tsx' });