bw-expo-app/components/auth/cookie-test-button.tsx

/**
 * Cookie编码测试组件
 * 在开发环境中测试Cookie编码功能
 */

import React, { useState } from 'react';
import { TouchableOpacity, StyleSheet, Alert, ScrollView, Text, View } from 'react-native';
import { ThemedText } from '@/components/themed-text';
import { runCookieEncodingTests, testRealWorldScenarios } from '../../utils/cookie-encoding-test';

interface CookieTestButtonProps {
  style?: any;
}

export function CookieTestButton({ style }: CookieTestButtonProps) {
  const [isRunning, setIsRunning] = useState(false);
  const [testResults, setTestResults] = useState<string[]>([]);

  const runTests = async () => {
    setIsRunning(true);
    setTestResults([]);

    try {
      // 捕获console.log输出
      const originalLog = console.log;
      const originalWarn = console.warn;
      const originalError = console.error;

      const logs: string[] = [];

      console.log = (...args: any[]) => {
        const message = args.map(arg =>
          typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
        ).join(' ');
        logs.push(message);
        originalLog(...args);
      };

      console.warn = (...args: any[]) => {
        const message = args.map(arg =>
          typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
        ).join(' ');
        logs.push(`⚠️ ${message}`);
        originalWarn(...args);
      };

      console.error = (...args: any[]) => {
        const message = args.map(arg =>
          typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
        ).join(' ');
        logs.push(`❌ ${message}`);
        originalError(...args);
      };

      // 运行测试
      runCookieEncodingTests();
      testRealWorldScenarios();

      // 恢复原始console函数
      console.log = originalLog;
      console.warn = originalWarn;
      console.error = originalError;

      // 显示测试结果
      setTestResults(logs);

      Alert.alert(
        '测试完成',
        'Cookie编码测试已完成，请查看控制台输出或点击"查看结果"查看详细信息。',
        [
          { text: '确定', style: 'default' },
          { text: '查看结果', style: 'default', onPress: () => showDetailedResults() }
        ]
      );

    } catch (error: any) {
      Alert.alert('测试失败', error.message || '测试过程中发生错误');
      setTestResults([`测试失败: ${error.message || error}`]);
    } finally {
      setIsRunning(false);
    }
  };

  const showDetailedResults = () => {
    Alert.alert(
      '测试结果详情',
      testResults.slice(0, 10).join('\n') +
      (testResults.length > 10 ? `\n\n... 还有 ${testResults.length - 10} 条日志` : ''),
      [{ text: '确定', style: 'default' }]
    );
  };

  const clearResults = () => {
    setTestResults([]);
  };

  return (
    <View style={[styles.container, style]}>
      <TouchableOpacity
        style={[styles.button, styles.testButton]}
        onPress={runTests}
        disabled={isRunning}
      >
        <ThemedText style={styles.testButtonText}>
          {isRunning ? '🧪 测试中...' : '🧪 测试Cookie编码'}
        </ThemedText>
      </TouchableOpacity>

      {testResults.length > 0 && (
        <View style={styles.resultsContainer}>
          <View style={styles.resultsHeader}>
            <ThemedText style={styles.resultsTitle}>测试结果</ThemedText>
            <TouchableOpacity
              style={[styles.button, styles.clearButton]}
              onPress={clearResults}
            >
              <ThemedText style={styles.clearButtonText}>清除</ThemedText>
            </TouchableOpacity>
          </View>

          <ScrollView style={styles.resultsScroll} nestedScrollEnabled={true}>
            {testResults.map((result, index) => (
              <Text key={index} style={styles.resultText}>
                {result}
              </Text>
            ))}
          </ScrollView>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: 'rgba(0, 122, 255, 0.05)',
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(0, 122, 255, 0.2)',
  },
  button: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  testButton: {
    backgroundColor: '#007AFF',
    marginBottom: 12,
  },
  testButtonText: {
    color: 'white',
    fontWeight: '600',
    fontSize: 16,
  },
  clearButton: {
    backgroundColor: '#FF3B30',
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  clearButtonText: {
    color: 'white',
    fontWeight: '600',
    fontSize: 14,
  },
  resultsContainer: {
    maxHeight: 300,
  },
  resultsHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  resultsTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#007AFF',
  },
  resultsScroll: {
    maxHeight: 250,
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
    borderRadius: 8,
    padding: 12,
  },
  resultText: {
    fontSize: 12,
    color: '#333',
    marginBottom: 4,
    fontFamily: 'monospace',
  },
});