@sproutsocial/seeds-react-badge 1.0.6 → 2.0.1

package/codemods/__tests__/badge-1.x-to-2.x.test.ts

@@ -0,0 +1,406 @@
+// @ts-expect-error - jscodeshift/dist/testUtils doesn't have type definitions
+import { defineInlineTest } from "jscodeshift/dist/testUtils";
+
+jest.autoMockOff();
+
+// Import the codemod transformer
+// The codemod uses module.exports because jscodeshift expects CommonJS
+// We use require() because ES module imports don't work well with CommonJS module.exports
+// This is consistent with other codemod tests in the codebase
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const transform = require("../badge-1.x-to-2.x");
+
+describe("badge-1.x-to-2.x codemod", () => {
+  function createTest(
+    testName: string,
+    input: string,
+    output: string,
+    options: Record<string, unknown> = {}
+  ) {
+    return defineInlineTest(
+      transform,
+      { quote: "single", ...options },
+      input,
+      output,
+      testName
+    );
+  }
+
+  describe("Size transformation", () => {
+    createTest(
+      "Replace size='default' with size='large'",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge size='default' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge size='large' />
+      `
+    );
+
+    createTest(
+      "No change for size='small'",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge size='small' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge size='small' />
+      `
+    );
+
+    createTest(
+      "No change for size='large'",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge size='large' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge size='large' />
+      `
+    );
+  });
+
+  describe("Type to badgeColor transformation", () => {
+    createTest(
+      "Replace type='passive' with badgeColor='neutral'",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type='passive' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge badgeColor='neutral' />
+      `
+    );
+
+    createTest(
+      "Replace type='default' with badgeColor='purple'",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type='default' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge badgeColor='purple' />
+      `
+    );
+
+    createTest(
+      "Replace type='primary' with badgeColor='blue'",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type='primary' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge badgeColor='blue' />
+      `
+    );
+
+    createTest(
+      "Replace type='secondary' with badgeColor='yellow'",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type='secondary' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge badgeColor='yellow' />
+      `
+    );
+
+    createTest(
+      "Replace type='secondary' with badgeColor='yellow' when other attributes are present",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type='secondary' position='relative'><Icon size='mini' name='circle-x-solid' /></Badge>
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge position='relative' badgeColor='yellow'><Icon size='mini' name='circle-x-solid' /></Badge>
+      `
+    );
+
+    createTest(
+      "Replace type='approval' with badgeColor='orange'",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type='approval' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge badgeColor='orange' />
+      `
+    );
+
+    createTest(
+      "Replace type='suggestion' with badgeColor='blue'",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type='suggestion' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge badgeColor='blue' />
+      `
+    );
+
+    createTest(
+      "Replace type='common' with badgeColor='aqua' and add TODO",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type='common' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      /* TODO (badge-1.x-to-2.x codemod): type="common" mapped to badgeColor="aqua", but colors.container.background.decorative.aqua does not match original colors.aqua.600. Verify color match. */
+      <Badge badgeColor='aqua' />;
+      `
+    );
+
+    createTest(
+      "Keep existing badgeColor when type is also present",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type='passive' badgeColor='blue' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge badgeColor='blue' />
+      `
+    );
+
+    createTest(
+      "Keep existing badgeColor when type is also present (badgeColor first)",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge badgeColor='blue' type='passive' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge badgeColor='blue' />
+      `
+    );
+  });
+
+  describe("Dynamic type values", () => {
+    createTest(
+      "Add TODO for dynamic type value",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type={getBadgeColor(id)} />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      /* TODO (badge-1.x-to-2.x codemod): Update function/variable to return badgeColor values instead of type values. See type-to-badgeColor mapping: passive→neutral, default→purple, primary→blue, secondary→yellow, approval→orange, suggestion→blue, common→aqua. */
+      <Badge />;
+      `
+    );
+
+    createTest(
+      "Add TODO for variable type",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge type={badgeType} />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      /* TODO (badge-1.x-to-2.x codemod): Update function/variable to return badgeColor values instead of type values. See type-to-badgeColor mapping: passive→neutral, default→purple, primary→blue, secondary→yellow, approval→orange, suggestion→blue, common→aqua. */
+      <Badge />;
+      `
+    );
+
+    createTest(
+      "Add TODO for dynamic type in nested JSX",
+      `
+      import {Badge, Tooltip} from '@sproutsocial/racine';
+      const badgeType = 'secondary';
+      <Tooltip content="test">
+        <Badge type={badgeType} />
+      </Tooltip>
+      `,
+      `
+      import {Badge, Tooltip} from '@sproutsocial/racine';
+      const badgeType = 'secondary';
+      /* TODO (badge-1.x-to-2.x codemod): Update function/variable to return badgeColor values instead of type values. See type-to-badgeColor mapping: passive→neutral, default→purple, primary→blue, secondary→yellow, approval→orange, suggestion→blue, common→aqua. */
+      <Tooltip content="test">
+        <Badge />
+      </Tooltip>;
+      `
+    );
+  });
+
+  describe("Text prop to children", () => {
+    createTest(
+      "Convert text prop string to children",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge text='Label' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge>Label</Badge>
+      `
+    );
+
+    createTest(
+      "Convert text prop variable to children",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge text={labelText} />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge>{labelText}</Badge>
+      `
+    );
+
+    createTest(
+      "Convert text prop JSX to children",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge text={<Icon name='check' />} />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge><Icon name='check' /></Badge>
+      `
+    );
+
+    createTest(
+      "Keep existing children when text prop is present",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge text='Label'>Existing</Badge>
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge>Existing</Badge>
+      `
+    );
+  });
+
+  describe("Tip prop removal", () => {
+    createTest(
+      "Remove tip prop",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge tip='tooltip text' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge />
+      `
+    );
+
+    createTest(
+      "Remove tip prop with variable",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge tip={tooltipText} />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge />
+      `
+    );
+  });
+
+  describe("Combined transformations", () => {
+    createTest(
+      "Transform all deprecated props together",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge size='default' type='passive' text='Label' tip='tooltip' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <Badge size='large' badgeColor='neutral'>Label</Badge>
+      `
+    );
+
+    createTest(
+      "Transform type='secondary' with text prop containing JSX and other attributes",
+      `
+      import {Badge, Icon} from '@sproutsocial/racine';
+      <Badge type='secondary' position='relative' text={<Icon size='mini' name='circle-x-solid' />} />
+      `,
+      `
+      import {Badge, Icon} from '@sproutsocial/racine';
+      <Badge position='relative' badgeColor='yellow'><Icon size='mini' name='circle-x-solid' /></Badge>
+      `
+    );
+
+    createTest(
+      "Transform multiple Badge components",
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <>
+        <Badge type='primary' text='One' />
+        <Badge type='secondary' text='Two' />
+      </>
+      `,
+      `
+      import {Badge} from '@sproutsocial/racine';
+      <>
+        <Badge badgeColor='blue'>One</Badge>
+        <Badge badgeColor='yellow'>Two</Badge>
+      </>
+      `
+    );
+  });
+
+  describe("Import detection", () => {
+    createTest(
+      "No changes if Badge not imported",
+      `
+      <Badge type='passive' />
+      `,
+      `
+      <Badge type='passive' />
+      `
+    );
+
+    createTest(
+      "Handle Badge from seeds-react-badge",
+      `
+      import {Badge} from '@sproutsocial/seeds-react-badge';
+      <Badge type='passive' />
+      `,
+      `
+      import {Badge} from '@sproutsocial/seeds-react-badge';
+      <Badge badgeColor='neutral' />
+      `
+    );
+  });
+
+  describe("Data attribute TODO comments", () => {
+    createTest(
+      "Add TODO for data-qa-badge-type",
+      `
+      import {screen} from '@sproutsocial/test-utils';
+      const badge = screen.queryByDataQaLabel('badge-type');
+      `,
+      `
+      /* TODO (badge-1.x-to-2.x codemod): Data attributes data-qa-badge-type, data-qa-badge-tip, and data-tip have been removed from Badge component. Update test selectors and data attribute references. */
+      import { screen } from '@sproutsocial/test-utils';
+      const badge = screen.queryByDataQaLabel('badge-type');
+      `
+    );
+
+    createTest(
+      "Add TODO for data-qa-badge-tip",
+      `
+      const badge = element.querySelector('[data-qa-badge-tip]');
+      `,
+      `
+      /* TODO (badge-1.x-to-2.x codemod): Data attributes data-qa-badge-type, data-qa-badge-tip, and data-tip have been removed from Badge component. Update test selectors and data attribute references. */
+      const badge = element.querySelector('[data-qa-badge-tip]');
+      `
+    );
+  });
+});