diff --git a/packages/codemod/transformations/core/v2-to-v3/__tests__/use-clickable-props-hook-migration.test.ts b/packages/codemod/transformations/core/v2-to-v3/__tests__/use-clickable-props-hook-migration.test.ts new file mode 100644 index 0000000000..4fe8418523 --- /dev/null +++ b/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" + ); +}); diff --git a/packages/codemod/transformations/core/v2-to-v3/use-clickable-props-hook-migration.ts b/packages/codemod/transformations/core/v2-to-v3/use-clickable-props-hook-migration.ts new file mode 100644 index 0000000000..76cb99f9a9 --- /dev/null +++ b/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); diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md index df7a71930a..3e300f4873 100644 --- a/packages/core/docs/vibe-3-changelog.md +++ b/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