test: support tests that include color information (#20220)

packages/cli/src/ui/components/GeminiRespondingSpinner.tsx

@@ -5,9 +5,7 @@
  */
 
 import type React from 'react';
-import { useState, useEffect, useMemo } from 'react';
 import { Text, useIsScreenReaderEnabled } from 'ink';
-import { CliSpinner } from './CliSpinner.js';
 import type { SpinnerName } from 'cli-spinners';
 import { useStreamingContext } from '../contexts/StreamingContext.js';
 import { StreamingState } from '../types.js';
@@ -16,10 +14,7 @@ import {
   SCREEN_READER_RESPONDING,
 } from '../textConstants.js';
 import { theme } from '../semantic-colors.js';
-import { Colors } from '../colors.js';
-import tinygradient from 'tinygradient';
-
-const COLOR_CYCLE_DURATION_MS = 4000;
+import { GeminiSpinner } from './GeminiSpinner.js';
 
 interface GeminiRespondingSpinnerProps {
   /**
@@ -54,51 +49,3 @@ export const GeminiRespondingSpinner: React.FC<
 
   return null;
 };
-
-interface GeminiSpinnerProps {
-  spinnerType?: SpinnerName;
-  altText?: string;
-}
-
-export const GeminiSpinner: React.FC<GeminiSpinnerProps> = ({
-  spinnerType = 'dots',
-  altText,
-}) => {
-  const isScreenReaderEnabled = useIsScreenReaderEnabled();
-  const [time, setTime] = useState(0);
-
-  const googleGradient = useMemo(() => {
-    const brandColors = [
-      Colors.AccentPurple,
-      Colors.AccentBlue,
-      Colors.AccentCyan,
-      Colors.AccentGreen,
-      Colors.AccentYellow,
-      Colors.AccentRed,
-    ];
-    return tinygradient([...brandColors, brandColors[0]]);
-  }, []);
-
-  useEffect(() => {
-    if (isScreenReaderEnabled) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      setTime((prevTime) => prevTime + 30);
-    }, 30); // ~33fps for smooth color transitions
-
-    return () => clearInterval(interval);
-  }, [isScreenReaderEnabled]);
-
-  const progress = (time % COLOR_CYCLE_DURATION_MS) / COLOR_CYCLE_DURATION_MS;
-  const currentColor = googleGradient.rgbAt(progress).toHexString();
-
-  return isScreenReaderEnabled ? (
-    <Text>{altText}</Text>
-  ) : (
-    <Text color={currentColor}>
-      <CliSpinner type={spinnerType} />
-    </Text>
-  );
-};