@planningcenter/tapestry-migration-cli 3.1.0-rc.8 → 3.1.0

package/src/components/select/transforms/mergeFieldIntoSelect.test.ts

@@ -0,0 +1,506 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./mergeFieldIntoSelect"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("mergeFieldIntoSelect transform", () => {
+  describe("basic prop merging", () => {
+    it("merges label prop from Field into Select", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Field label="Product"><Select emptyValue="Pick" /></Field>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Product"')
+      expect(result).toContain("<Select")
+    })
+
+    it("renames feedbackText to description on Select", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field feedbackText="Required"><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).not.toContain("feedbackText")
+      expect(result).toContain('description="Required"')
+    })
+
+    it("copies state prop as-is to Select", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field state="error"><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('state="error"')
+    })
+
+    it("copies state expression as-is to Select", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field state={"error"}><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('state={"error"}')
+    })
+
+    it("preserves dynamic label value", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label={labelText}><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("label={labelText}")
+    })
+  })
+
+  describe("unsupported props", () => {
+    it("adds TODO comment for helpContent and removes Field", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field helpContent="Help"><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain(
+        "TODO: tapestry-migration (mergeFieldIntoSelect)"
+      )
+      expect(result).toContain("helpContent")
+      expect(result).toContain("not supported by Select")
+    })
+
+    it("passes through dynamic state value to Select", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field state={fieldState}><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("state={fieldState}")
+    })
+  })
+
+  describe("Field with no props", () => {
+    it("unwraps Field with no props cleanly", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain("<Select")
+      expect(result).not.toContain("TODO")
+    })
+  })
+
+  describe("conflict detection", () => {
+    it("adds warning when Select already has label", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Select label="Other" emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Other"')
+      expect(result).toContain(
+        "TODO: tapestry-migration (mergeFieldIntoSelect)"
+      )
+      expect(result).toContain("already has label")
+    })
+
+    it("adds warning when Select already has description and Field has feedbackText", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field feedbackText="Error"><Select description="Help" emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("already has description")
+    })
+
+    it("adds warning when Select already has state and Field has state", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field state="error"><Select state="success" emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("already has state")
+    })
+  })
+
+  describe("multiple children", () => {
+    it("adds comment to Select and leaves Field when Field has multiple children", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><Select emptyValue="Pick" /><button /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain(
+        "TODO: tapestry-migration (mergeFieldIntoSelect)"
+      )
+      expect(result).toContain("multiple children")
+    })
+  })
+
+  describe("non-Select child", () => {
+    it("returns null when Field contains only a non-Select child", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><textarea /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("import cleanup", () => {
+    it("removes Field from import specifiers when all Fields are converted", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("Field")
+      expect(result).toContain("Select")
+    })
+
+    it("removes entire import declaration when Field was the only specifier", () => {
+      const input = `
+import { Field } from "@planningcenter/tapestry-react"
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("{ Field }")
+    })
+
+    it("keeps Field in import when some Fields cannot be converted", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Field label="Name"><Select emptyValue="Pick" /></Field>
+      <Field><Select emptyValue="Pick" /><button /></Field>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("Field")
+    })
+  })
+
+  describe("full prop set", () => {
+    it("merges label, feedbackText, state='error' and flags helpContent", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Product" feedbackText="Required" state="error" helpContent="Help">
+      <Select emptyValue="Pick" />
+    </Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Product"')
+      expect(result).toContain('description="Required"')
+      expect(result).toContain('state="error"')
+      expect(result).toContain("helpContent")
+      expect(result).toContain("not supported by Select")
+    })
+  })
+
+  describe("key prop handling", () => {
+    it("moves key from Field to Select when Select has no key", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Field key="item-1" label="Name"><Select emptyValue="Pick" /></Field>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('key="item-1"')
+      expect(result).toContain("<Select")
+    })
+
+    it("keeps Select's key when both Field and Select have key", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Field key="field-1" label="Name"><Select key="sel-1" emptyValue="Pick" /></Field>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('key="sel-1"')
+    })
+  })
+
+  describe("spread props on Field", () => {
+    it("bails out with TODO comment when Field has spread props", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field {...fieldProps}><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain(
+        "TODO: tapestry-migration (mergeFieldIntoSelect)"
+      )
+      expect(result).toContain("spread props")
+    })
+
+    it("bails out when Field has spread props mixed with regular props", () => {
+      const input = `
+import { Field, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name" {...fieldProps}><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain("spread props")
+    })
+  })
+
+  describe("not from tapestry-react", () => {
+    it("returns null when Field is not imported from tapestry-react", () => {
+      const input = `
+import { Field } from "some-other-library"
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when Select is not imported from tapestry-react", () => {
+      const input = `
+import { Field } from "@planningcenter/tapestry-react"
+import { Select } from "some-other-library"
+
+function Test() {
+  return (
+    <Field label="Name"><Select emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when neither import exists", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button label="Click" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("aliased imports", () => {
+    it("handles aliased Field import", () => {
+      const input = `
+import { Field as TapField, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TapField label="Name"><Select emptyValue="Pick" /></TapField>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<TapField")
+      expect(result).toContain('label="Name"')
+    })
+
+    it("handles aliased Select import", () => {
+      const input = `
+import { Field, Select as TapSelect } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name"><TapSelect emptyValue="Pick" /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('label="Name"')
+      expect(result).toContain("<TapSelect")
+    })
+  })
+})

package/src/components/select/transforms/mergeFieldIntoSelect.ts

@@ -0,0 +1,7 @@
+import { mergeFieldFactory } from "../../shared/transformFactories/mergeFieldFactory"
+import { transformableSelect } from "../transformableSelect"
+
+export default mergeFieldFactory({
+  condition: transformableSelect,
+  targetComponent: "Select",
+})