test: add directional border color tests

Add comprehensive test coverage for directional border colors:
- 16 tests for border-{t|r|b|l} with preset colors, opacity, arbitrary values
- 12 tests for border-x and border-y shortcuts
- 7 tests for parseBorder color pattern detection
- 7 integration tests for Babel transformation

Total: 28 new tests across parser and Babel plugin.

Author: mgcrea

src/babel/plugin/visitors/className.test.ts

@@ -1178,3 +1178,135 @@ describe("className visitor - custom color scheme hook", () => {
     expect(output).not.toContain("_twColorScheme = useTheme()");
   });
 });
+
+describe("className visitor - directional border colors", () => {
+  it("should transform directional border colors with preset values", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="border-t-red-500 border-l-blue-500" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have StyleSheet
+    expect(output).toContain("StyleSheet.create");
+
+    // Should generate styles with borderTopColor and borderLeftColor
+    expect(output).toMatch(/borderTopColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+    expect(output).toMatch(/borderLeftColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should combine directional border width and color", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="border-l-2 border-l-red-500" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have both borderLeftWidth and borderLeftColor in the StyleSheet
+    expect(output).toMatch(/borderLeftWidth[:\s]*2/);
+    expect(output).toMatch(/borderLeftColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should support directional border colors with opacity", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="border-t-red-500/50 border-b-blue-500/80" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have 8-digit hex colors with alpha channel
+    expect(output).toMatch(/borderTopColor[:\s]*['"]#[0-9A-F]{8}['"]/i);
+    expect(output).toMatch(/borderBottomColor[:\s]*['"]#[0-9A-F]{8}['"]/i);
+  });
+
+  it("should support directional border colors with arbitrary hex values", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return <View className="border-t-[#ff0000] border-r-[#abc]" />;
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have borderTopColor and borderRightColor
+    expect(output).toMatch(/borderTopColor[:\s]*['"]#[0-9a-fA-F]{6}['"]/);
+    expect(output).toMatch(/borderRightColor[:\s]*['"]#[0-9a-fA-F]{6}['"]/);
+  });
+
+  it("should support all four directional border colors", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return (
+          <View className="border-t-red-500 border-r-blue-500 border-b-green-500 border-l-yellow-500" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have all four directional color properties
+    expect(output).toMatch(/borderTopColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+    expect(output).toMatch(/borderRightColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+    expect(output).toMatch(/borderBottomColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+    expect(output).toMatch(/borderLeftColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+  });
+
+  it("should combine directional widths, colors, and general border color", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component() {
+        return (
+          <View className="border border-gray-300 border-l-4 border-l-blue-500" />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have general border properties
+    expect(output).toMatch(/borderWidth[:\s]*1/);
+    expect(output).toMatch(/borderColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+
+    // Should have directional left border properties
+    expect(output).toMatch(/borderLeftWidth[:\s]*4/);
+    expect(output).toMatch(/borderLeftColor[:\s]*['"]#[0-9A-F]{6}['"]/i);
+  });
+
+  it("should work with dynamic className containing directional border colors", () => {
+    const input = `
+      import { View } from 'react-native';
+      export function Component({ isError }) {
+        return (
+          <View className={\`border-t-2 \${isError ? 'border-t-red-500' : 'border-t-gray-300'}\`} />
+        );
+      }
+    `;
+
+    const output = transform(input, undefined, true);
+
+    // Should have StyleSheet with both color options
+    expect(output).toContain("_border_t_2");
+    expect(output).toContain("_border_t_red_500");
+    expect(output).toContain("_border_t_gray_300");
+
+    // Should have conditional expression with both styles
+    expect(output).toMatch(/isError\s*\?\s*_twStyles\._border_t_red_500/);
+  });
+});

src/parser/borders.test.ts

@@ -327,3 +327,61 @@ describe("parseBorder - comprehensive coverage", () => {
     });
   });
 });
+
+describe("parseBorder - color pattern detection", () => {
+  it("should return null for directional border colors with preset values", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-red-500")).toBeNull();
+    expect(parseBorder("border-r-blue-500")).toBeNull();
+    expect(parseBorder("border-b-green-500")).toBeNull();
+    expect(parseBorder("border-l-yellow-500")).toBeNull();
+  });
+
+  it("should return null for directional border colors with basic values", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-white")).toBeNull();
+    expect(parseBorder("border-r-black")).toBeNull();
+    expect(parseBorder("border-b-transparent")).toBeNull();
+    expect(parseBorder("border-l-white")).toBeNull();
+  });
+
+  it("should return null for directional border colors with arbitrary hex values", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-[#ff0000]")).toBeNull();
+    expect(parseBorder("border-r-[#3B82F6]")).toBeNull();
+    expect(parseBorder("border-b-[#abc]")).toBeNull();
+    expect(parseBorder("border-l-[#00FF00AA]")).toBeNull();
+  });
+
+  it("should return null for directional border colors with opacity", () => {
+    // These should be handled by parseColor
+    expect(parseBorder("border-t-red-500/50")).toBeNull();
+    expect(parseBorder("border-r-blue-500/80")).toBeNull();
+    expect(parseBorder("border-b-[#ff0000]/60")).toBeNull();
+    expect(parseBorder("border-l-black/25")).toBeNull();
+  });
+
+  it("should return null for directional border colors with custom colors", () => {
+    // These should be handled by parseColor (assuming brand-primary is a custom color)
+    expect(parseBorder("border-t-brand-primary")).toBeNull();
+    expect(parseBorder("border-r-accent")).toBeNull();
+    expect(parseBorder("border-b-brand-secondary")).toBeNull();
+    expect(parseBorder("border-l-custom")).toBeNull();
+  });
+
+  it("should still handle directional border widths correctly", () => {
+    // These should NOT be detected as color patterns
+    expect(parseBorder("border-t-2")).toEqual({ borderTopWidth: 2 });
+    expect(parseBorder("border-r-4")).toEqual({ borderRightWidth: 4 });
+    expect(parseBorder("border-b-8")).toEqual({ borderBottomWidth: 8 });
+    expect(parseBorder("border-l-0")).toEqual({ borderLeftWidth: 0 });
+  });
+
+  it("should still handle directional border width arbitrary values", () => {
+    // These should NOT be detected as color patterns
+    expect(parseBorder("border-t-[3px]")).toEqual({ borderTopWidth: 3 });
+    expect(parseBorder("border-r-[5px]")).toEqual({ borderRightWidth: 5 });
+    expect(parseBorder("border-b-[10]")).toEqual({ borderBottomWidth: 10 });
+    expect(parseBorder("border-l-[8px]")).toEqual({ borderLeftWidth: 8 });
+  });
+});