test: add program visitor test file

Adds comprehensive tests for Program.exit behavior:
- StyleSheet.create injection and placement
- tw/twStyle import removal
- useColorScheme hook injection (dark:/light: modifiers)
- useWindowDimensions hook injection (w-screen/h-screen)
- Combined scenarios with multiple imports and hooks

14 tests covering all Program visitor responsibilities.

Author: mgcrea

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

@@ -0,0 +1,325 @@
+import { describe, expect, it } from "vitest";
+import { transform } from "../../../../test/helpers/babelTransform.js";
+
+describe("program visitor - Program.exit behavior", () => {
+  describe("StyleSheet injection", () => {
+    it("should inject StyleSheet.create when className is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="m-4 p-2 bg-blue-500" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should have StyleSheet import
+      expect(output).toContain("StyleSheet");
+
+      // Should inject StyleSheet.create
+      expect(output).toContain("StyleSheet.create");
+      expect(output).toContain("_twStyles");
+
+      // Should have the styles
+      expect(output).toMatch(/margin:\s*16/);
+      expect(output).toMatch(/padding:\s*8/);
+      expect(output).toMatch(/backgroundColor:/);
+    });
+
+    it("should not inject StyleSheet when no className is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should not add StyleSheet import
+      expect(output).not.toContain("StyleSheet");
+      expect(output).not.toContain("_twStyles");
+    });
+
+    it("should inject styles at top of file after imports", () => {
+      const input = `
+        import React from 'react';
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="m-4" />;
+        }
+
+        function AnotherComponent() {
+          return <View className="p-2" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // StyleSheet.create should come before component definitions
+      const styleSheetIndex = output.indexOf("StyleSheet.create");
+      const firstComponentIndex = output.indexOf("function MyComponent");
+
+      expect(styleSheetIndex).toBeGreaterThan(0);
+      expect(styleSheetIndex).toBeLessThan(firstComponentIndex);
+    });
+  });
+
+  describe("tw import removal", () => {
+    it("should remove tw import when tw tagged template is used", () => {
+      const input = `
+        import { tw } from '@mgcrea/react-native-tailwind';
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          const styles = tw\`m-4 p-2\`;
+          return <View style={styles.style} />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should not have tw import anymore
+      expect(output).not.toMatch(/import.*tw.*from ['"]@mgcrea\/react-native-tailwind['"]/);
+
+      // Should have StyleSheet instead
+      expect(output).toContain("StyleSheet");
+    });
+
+    it("should remove twStyle import when twStyle call is used", () => {
+      const input = `
+        import { twStyle } from '@mgcrea/react-native-tailwind';
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          const styles = twStyle('m-4 p-2');
+          return <View style={styles.style} />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should not have twStyle import anymore
+      expect(output).not.toMatch(/import.*twStyle.*from ['"]@mgcrea\/react-native-tailwind['"]/);
+
+      // Should have StyleSheet instead
+      expect(output).toContain("StyleSheet");
+    });
+  });
+
+  describe("hook injection - color scheme", () => {
+    it("should inject useColorScheme hook when dark: modifier is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="bg-white dark:bg-gray-900" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should import useColorScheme
+      expect(output).toContain("useColorScheme");
+
+      // Should inject hook call
+      expect(output).toContain("_twColorScheme");
+      expect(output).toContain("useColorScheme()");
+
+      // Should use in conditional
+      expect(output).toMatch(/_twColorScheme\s*===\s*['"]dark['"]/);
+    });
+
+    it("should inject useColorScheme hook when light: modifier is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="bg-gray-900 light:bg-white" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should import and inject hook
+      expect(output).toContain("useColorScheme");
+      expect(output).toContain("_twColorScheme");
+
+      // Should use in conditional
+      expect(output).toMatch(/_twColorScheme\s*===\s*['"]light['"]/);
+    });
+
+    it("should inject hook only once for multiple color scheme modifiers", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return (
+            <>
+              <View className="dark:bg-gray-900" />
+              <View className="light:bg-white" />
+              <View className="dark:text-white" />
+            </>
+          );
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Count hook injections (should be exactly 1)
+      const hookMatches = output.match(/_twColorScheme\s*=\s*useColorScheme\(\)/g) ?? [];
+      expect(hookMatches.length).toBe(1);
+    });
+
+    it("should use custom color scheme hook when configured", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="dark:bg-gray-900" />;
+        }
+      `;
+
+      const output = transform(
+        input,
+        {
+          colorScheme: {
+            importFrom: "@react-navigation/native",
+            importName: "useTheme",
+          },
+        },
+        true,
+      );
+
+      // Should import from custom source
+      expect(output).toContain("@react-navigation/native");
+      expect(output).toContain("useTheme");
+
+      // Should use custom hook
+      expect(output).toContain("useTheme()");
+    });
+  });
+
+  describe("hook injection - window dimensions", () => {
+    it("should inject useWindowDimensions hook when w-screen is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="w-screen bg-white" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should import useWindowDimensions
+      expect(output).toContain("useWindowDimensions");
+
+      // Should inject hook call
+      expect(output).toContain("_twDimensions");
+      expect(output).toContain("useWindowDimensions()");
+
+      // Should use in inline style
+      expect(output).toMatch(/width:\s*_twDimensions\.width/);
+    });
+
+    it("should inject useWindowDimensions hook when h-screen is used", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return <View className="h-screen bg-white" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should import and inject hook
+      expect(output).toContain("useWindowDimensions");
+      expect(output).toContain("_twDimensions");
+
+      // Should use in inline style
+      expect(output).toMatch(/height:\s*_twDimensions\.height/);
+    });
+
+    it("should inject hook only once for multiple w-screen/h-screen uses", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return (
+            <>
+              <View className="w-screen" />
+              <View className="h-screen" />
+              <View className="w-screen h-screen" />
+            </>
+          );
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Count hook injections (should be exactly 1)
+      const hookMatches = output.match(/_twDimensions\s*=\s*useWindowDimensions\(\)/g) ?? [];
+      expect(hookMatches.length).toBe(1);
+    });
+  });
+
+  describe("combined scenarios", () => {
+    it("should inject color scheme and platform imports together", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function MyComponent() {
+          return (
+            <View className="ios:p-4 android:p-2 dark:bg-gray-900 light:bg-white" />
+          );
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should have all imports
+      expect(output).toContain("StyleSheet");
+      expect(output).toContain("Platform");
+      expect(output).toContain("useColorScheme");
+
+      // Should have color scheme hook
+      expect(output).toContain("_twColorScheme");
+      expect(output).toContain("useColorScheme()");
+
+      // Should have platform select
+      expect(output).toContain("Platform.select");
+    });
+
+    it("should inject window dimensions and color scheme hooks in separate components", () => {
+      const input = `
+        import { View } from 'react-native';
+
+        function ComponentA() {
+          return <View className="w-screen h-screen" />;
+        }
+
+        function ComponentB() {
+          return <View className="dark:bg-gray-900 light:bg-white" />;
+        }
+      `;
+
+      const output = transform(input, undefined, true);
+
+      // Should have both hooks
+      expect(output).toContain("useColorScheme");
+      expect(output).toContain("useWindowDimensions");
+
+      // Should have both hook calls
+      expect(output).toContain("_twColorScheme");
+      expect(output).toContain("_twDimensions");
+
+      // Should have StyleSheet
+      expect(output).toContain("StyleSheet.create");
+    });
+  });
+});