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>
   )
 }

apps/builder/cypress/tests/theme/general.ts

@@ -0,0 +1,36 @@
+import { getIframeBody } from 'cypress/support'
+
+describe('General theme settings', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    cy.signOut()
+  })
+
+  it.only('should reflect changes in real time', () => {
+    cy.loadTypebotFixtureInDatabase('typebots/integrations/webhook.json')
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot4/theme')
+    cy.findByRole('button', { name: 'General' }).click()
+
+    // Font
+    cy.findByDisplayValue('Open Sans').clear().type('Roboto')
+    cy.findByRole('menuitem', { name: 'Roboto Slab' }).click()
+    getIframeBody()
+      .findByTestId('container')
+      .should('have.css', 'font-family')
+      .should('eq', '"Roboto Slab"')
+
+    // BG color
+    getIframeBody()
+      .findByTestId('container')
+      .should('have.css', 'background-color')
+      .should('eq', 'rgba(0, 0, 0, 0)')
+    cy.findByDisplayValue('Color').check({ force: true })
+    cy.findByRole('button', { name: 'Pick a color' }).click()
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#2a9d8f')
+    getIframeBody()
+      .findByTestId('container')
+      .should('have.css', 'background-color')
+      .should('eq', 'rgb(42, 157, 143)')
+  })
+})

apps/builder/layouts/theme/ThemeContent.tsx

@@ -3,13 +3,14 @@ import { TypebotViewer } from 'bot-engine'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
-import { SideMenu } from './SideMenu'
+import { SideMenu } from '../../components/theme/SideMenu'
 
 export const ThemeContent = () => {
   const { typebot } = useTypebot()
   const publicTypebot = useMemo(
     () => (typebot ? parseTypebotToPublicTypebot(typebot) : undefined),
-    [typebot]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [typebot?.theme]
   )
   return (
     <Flex h="full" w="full">

apps/builder/pages/typebots/[typebotId]/theme.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/layout'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
-import { ThemeContent } from 'components/theme/ThemeContent'
+import { ThemeContent } from 'layouts/theme/ThemeContent'
 import React from 'react'
 
 const ThemePage = () => (

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -62,6 +62,7 @@ export const TypebotViewer = ({
               // We set this as inline style to avoid color flash for SSR
               backgroundColor: containerBgColor,
             }}
+            data-testid="container"
           >
             <div className="flex w-full h-full justify-center">
               <ConversationContainer

packages/bot-engine/src/services/theme.ts

@@ -19,7 +19,7 @@ export const setCssVariablesValue = (
     background.type === BackgroundType.IMAGE
       ? cssVariableNames.container.bg.image
       : cssVariableNames.container.bg.color,
-    background.content
+    background.type === BackgroundType.NONE ? 'transparent' : background.content
   )
   documentStyle.setProperty(cssVariableNames.container.fontFamily, font)
 }