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

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

@@ -0,0 +1,521 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./mapChildrenToOptions"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("mapChildrenToOptions transform", () => {
+  describe("basic .map() conversion", () => {
+    it("should convert .map() with Select.Option to options prop", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id}>
+          {item.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={items.map(")
+      expect(result).toContain("label: item.name")
+      expect(result).toContain("value: item.id")
+      expect(result).not.toContain("Select.Option")
+      expect(result).not.toContain("</Select>")
+    })
+
+    it("should preserve data-* attributes on options", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id} data-id={item.id}>
+          {item.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('"data-id": item.id')
+      expect(result).toContain("label: item.name")
+      expect(result).toContain("value: item.id")
+    })
+
+    it("should handle nested property access in children", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {futureSteps.map(step => (
+        <Select.Option key={step.id} value={step.id}>
+          {step.attributes.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={futureSteps.map(")
+      expect(result).toContain("label: step.attributes.name")
+      expect(result).toContain("value: step.id")
+    })
+
+    it("should handle string literal value", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id}>
+          {item.label}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={items.map(")
+      expect(result).toContain("label: item.label")
+      expect(result).toContain("value: item.id")
+    })
+
+    it("should handle disabled prop on Option", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id} disabled={item.isDisabled}>
+          {item.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={items.map(")
+      expect(result).toContain("disabled: item.isDisabled")
+    })
+
+    it("should handle boolean shorthand disabled", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id} disabled>
+          {item.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("disabled: true")
+    })
+
+    it("should make Select self-closing after removing children", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id}>
+          {item.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("</Select>")
+      expect(result).toContain("/>")
+    })
+
+    it("should preserve existing props on Select", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one" disabled onChange={handler}>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id}>
+          {item.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('emptyValue="Pick one"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={handler}")
+      expect(result).toContain("options={items.map(")
+    })
+  })
+
+  describe("callback variations", () => {
+    it("should handle arrow function with block body", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => {
+        return (
+          <Select.Option key={item.id} value={item.id}>
+            {item.name}
+          </Select.Option>
+        )
+      })}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={items.map(")
+      expect(result).toContain("label: item.name")
+      expect(result).toContain("value: item.id")
+    })
+
+    it("should handle destructured callback parameter", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(({ id, name }) => (
+        <Select.Option key={id} value={id}>
+          {name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={items.map(")
+      expect(result).toContain("label: name")
+      expect(result).toContain("value: id")
+    })
+  })
+
+  describe("complex JSX children (ReactNode labels)", () => {
+    it("should convert .map() with JSX children to options with label as ReactNode", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {availableConnections.map((connection, idx) => {
+        return (
+          <Select.Option key={idx} value={connection}>
+            <StackView axis="horizontal" alignment="center" spacing={1}>
+              <Logo name={connection} size="18px" markOnly theme="color" />
+              <Text lineHeight={null}>{capitalize(connection)}</Text>
+            </StackView>
+          </Select.Option>
+        )
+      })}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={availableConnections.map(")
+      expect(result).toContain("label: <StackView")
+      expect(result).toContain("value: connection")
+      expect(result).toContain('textValue: ""')
+      expect(result).toContain("TODO: tapestry-migration (textValue)")
+      expect(result).toContain("complex")
+      expect(result).not.toContain("Select.Option")
+      expect(result).not.toContain("</Select>")
+    })
+
+    it("should add complex prop for JSX label options", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id}>
+          <div className="option"><img src={item.avatar} /> {item.name}</div>
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("complex")
+      expect(result).toContain('textValue: ""')
+      expect(result).toContain("options={items.map(")
+    })
+
+    it("should not duplicate complex prop if already present", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select complex>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id}>
+          <span><img src={item.icon} /> {item.label}</span>
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      const complexMatches = result.match(/\bcomplex\b/g)
+      expect(complexMatches).toHaveLength(1)
+    })
+
+    it("should handle multiple JSX children with fragment wrapper", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id}>
+          <img src={item.avatar} />
+          <span>{item.name}</span>
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={items.map(")
+      expect(result).toContain("value: item.id")
+      expect(result).toContain("complex")
+      expect(result).toContain('textValue: ""')
+    })
+
+    it("should not add textValue for simple expression labels", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <Select.Option key={item.id} value={item.id}>
+          {item.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("textValue")
+      expect(result).not.toContain("complex")
+    })
+  })
+
+  describe("edge cases / no-op", () => {
+    it("should not transform Select without children", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select options={items} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform other components", () => {
+      const input = `
+import { Dropdown } from "other-library"
+
+function Test() {
+  return (
+    <Dropdown>
+      {items.map(item => (
+        <Dropdown.Option key={item.id} value={item.id}>
+          {item.name}
+        </Dropdown.Option>
+      ))}
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform if .map() returns non-Select.Option", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <option key={item.id} value={item.id}>
+          {item.name}
+        </option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform if children have multiple expressions", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {group1.map(item => (
+        <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
+      ))}
+      {group2.map(item => (
+        <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform static Select.Option children (handled by childrenToOptions)", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      <Select.Option value="a">A</Select.Option>
+      <Select.Option value="b">B</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform Select.Option with no value prop", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select>
+      {items.map(item => (
+        <Select.Option key={item.id}>
+          {item.name}
+        </Select.Option>
+      ))}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should handle aliased Select import", () => {
+      const input = `
+import { Select as TapestrySelect } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TapestrySelect>
+      {items.map(item => (
+        <TapestrySelect.Option key={item.id} value={item.id}>
+          {item.name}
+        </TapestrySelect.Option>
+      ))}
+    </TapestrySelect>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={items.map(")
+      expect(result).toContain("label: item.name")
+      expect(result).toContain("value: item.id")
+    })
+  })
+})