chore(theme): ✅ Add general theme settings tests

apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundTypeRadioButtons.tsx

@@ -17,7 +17,7 @@ export const BackgroundTypeRadioButtons = ({
   backgroundType,
   onBackgroundTypeChange,
 }: Props) => {
-  const options = ['Color', 'Image', 'None']
+  const options = ['Color', 'None']
 
   const { getRootProps, getRadioProps } = useRadioGroup({
     name: 'background-type',

apps/builder/components/theme/GeneralContent/ColorPicker.tsx

@@ -42,7 +42,7 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
     <Popover variant="picker">
       <PopoverTrigger>
         <Button
-          aria-label={color}
+          aria-label={'Pick a color'}
           background={color}
           height="22px"
           width="22px"
@@ -85,7 +85,8 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
           <Input
             borderRadius={3}
             marginTop={3}
-            placeholder="red.100"
+            placeholder="#2a9d8f"
+            aria-label="Color value"
             size="sm"
             value={color}
             onChange={(e) => {

apps/builder/components/theme/GeneralContent/FontSelector/FontSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Text, Flex } from '@chakra-ui/react'
+import { Text, HStack } from '@chakra-ui/react'
 import { SearchableDropdown } from '../../../shared/SearchableDropdown'
 
 type FontSelectorProps = {
@@ -34,13 +34,13 @@ export const FontSelector = ({
   }
 
   return (
-    <Flex justify="space-between" align="center">
+    <HStack justify="space-between" align="center">
       <Text>Font</Text>
       <SearchableDropdown
         selectedItem={activeFont}
         items={googleFonts}
         onValueChange={handleFontSelected}
       />
-    </Flex>
+    </HStack>
   )
 }