add e2e tests

src/components/options/ColorSelector.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useRef, useState } from 'react';
-import { Box, Stack, TextField } from '@mui/material';
+import { Box, Stack, TextField, TextFieldProps } from '@mui/material';
 import PaletteIcon from '@mui/icons-material/Palette';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -7,14 +7,15 @@ import { globalDescriptionFontSize } from '../../config/uiConfig';
 
 interface ColorSelectorProps {
   value: string;
-  onChange: (val: string) => void;
+  onColorChange: (val: string) => void;
   description: string;
 }
 
-const ColorSelector: React.FC<ColorSelectorProps> = ({
+const ColorSelector: React.FC<ColorSelectorProps & TextFieldProps> = ({
   value = '#ffffff',
-  onChange,
-  description
+  onColorChange,
+  description,
+  ...props
 }) => {
   const [color, setColor] = useState<string>(value);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -22,7 +23,7 @@ const ColorSelector: React.FC<ColorSelectorProps> = ({
   const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
     const val = event.target.value;
     setColor(val);
-    onChange(val);
+    onColorChange(val);
   };
 
   return (
@@ -32,6 +33,7 @@ const ColorSelector: React.FC<ColorSelectorProps> = ({
           sx={{ backgroundColor: 'white' }}
           value={color}
           onChange={handleColorChange}
+          {...props}
         />
         <IconButton onClick={() => inputRef.current?.click()}>
           <PaletteIcon />