chore(useClickableProps): Codemod for changing dataTestId to data-testid

packages/codemod/transformations/core/v2-to-v3/__tests__/use-clickable-props-hook-migration.test.ts

@@ -0,0 +1,115 @@
+import transform from "../use-clickable-props-hook-migration";
+import { defineInlineTest } from "jscodeshift/src/testUtils";
+
+function prependImport(source: string): string {
+  return `
+    import { useClickableProps } from "monday-ui-react-core";
+    ${source}
+  `;
+}
+
+describe("useClickableProps prop migration", () => {
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`
+      useClickableProps({
+        onClick: onClickCallback,
+        onMouseDown,
+        disabled,
+        id,
+        dataTestId: componentDataTestId,
+        ariaLabel: overrideAriaLabel,
+        ariaHidden: false,
+        ariaHasPopup: false,
+        ariaExpanded: false
+      });
+    `),
+    prependImport(`
+      useClickableProps({
+        onClick: onClickCallback,
+        onMouseDown,
+        disabled,
+        id,
+        "data-testid": componentDataTestId,
+        ariaLabel: overrideAriaLabel,
+        ariaHidden: false,
+        ariaHasPopup: false,
+        ariaExpanded: false
+      });
+    `),
+    "should rename 'dataTestId' to 'data-testid'"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`
+      useClickableProps({
+        dataTestId: componentDataTestId,
+        onClick: onClickCallback
+      });
+    `),
+    prependImport(`
+      useClickableProps({
+        "data-testid": componentDataTestId,
+        onClick: onClickCallback
+      });
+    `),
+    "should rename 'dataTestId' to 'data-testid' when it's the first property"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`
+      useClickableProps({
+        dataTestId: componentDataTestId,
+        onClick: onClickCallback
+      });
+    `),
+    prependImport(`
+      useClickableProps({
+        "data-testid": componentDataTestId,
+        onClick: onClickCallback
+      });
+    `),
+    "should rename 'dataTestId' to 'data-testid' when it's the first property"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    prependImport(`
+      useClickableProps({
+        onClick: onClickCallback
+      });
+    `),
+    prependImport(`
+      useClickableProps({
+        onClick: onClickCallback
+      });
+    `),
+    "should not change anything when 'dataTestId' is not present"
+  );
+
+  defineInlineTest(
+    transform,
+    {},
+    `
+      import { useClickableProps } from "other-library";
+      useClickableProps({
+        dataTestId: componentDataTestId,
+        onClick: onClickCallback
+      });
+    `,
+    `
+      import { useClickableProps } from "other-library";
+      useClickableProps({
+        dataTestId: componentDataTestId,
+        onClick: onClickCallback
+      });
+    `,
+    "should not rename 'dataTestId' to 'data-testid' when not a vibe component"
+  );
+});

packages/codemod/transformations/core/v2-to-v3/use-clickable-props-hook-migration.ts

@@ -0,0 +1,31 @@
+import { getComponentNameOrAliasFromImports, getCoreImportsForFile, wrap } from "../../../src/utils";
+import { TransformationContext } from "../../../types";
+
+/**
+ * 1. Update the 'dataTestId' prop to 'data-testid'
+ */
+function transform({ j, root }: TransformationContext) {
+  const imports = getCoreImportsForFile(root);
+  const hookName = getComponentNameOrAliasFromImports(j, imports, "useClickableProps");
+  if (!hookName) return;
+
+  root
+    .find(j.CallExpression, {
+      callee: {
+        type: "Identifier",
+        name: hookName
+      }
+    })
+    .find(j.ObjectExpression)
+    .find(j.Property, {
+      key: {
+        type: "Identifier",
+        name: "dataTestId"
+      }
+    })
+    .forEach(propPath => {
+      propPath.node.key = j.literal("data-testid");
+    });
+}
+
+export default wrap(transform);

packages/core/docs/vibe-3-changelog.md

@@ -364,7 +364,7 @@ codemod: `color-picker-content-import-migration`
 
 ### useClickableProps
 
-- `dataTestId` -> `data-testid` [codemod]
+- `dataTestId` -> `data-testid` [codemod ✅]
 
 ## monday-ui-style