91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import { getIframeBody } from 'cypress/support'
|
|
|
|
describe('General theme settings', () => {
|
|
beforeEach(() => {
|
|
cy.task('seed')
|
|
cy.signOut()
|
|
})
|
|
|
|
it('should reflect changes in real time', () => {
|
|
cy.loadTypebotFixtureInDatabase('typebots/theme/theme.json')
|
|
cy.signIn('test2@gmail.com')
|
|
cy.visit('/typebots/typebot4/theme')
|
|
getIframeBody().findByText('Ready?').should('exist')
|
|
cy.findByRole('button', { name: 'Chat' }).click()
|
|
|
|
// Host bubbles
|
|
cy.findAllByRole('button', { name: 'Pick a color' }).first().click()
|
|
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#2a9d8f')
|
|
cy.findAllByRole('button', { name: 'Pick a color' })
|
|
.eq(1)
|
|
.click({ force: true })
|
|
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#ffffff')
|
|
getIframeBody()
|
|
.findByTestId('host-bubble')
|
|
.should('have.css', 'background-color')
|
|
.should('eq', 'rgb(42, 157, 143)')
|
|
getIframeBody()
|
|
.findByTestId('host-bubble')
|
|
.should('have.css', 'color')
|
|
.should('eq', 'rgb(255, 255, 255)')
|
|
|
|
// Buttons
|
|
cy.findAllByRole('button', { name: 'Pick a color' })
|
|
.eq(4)
|
|
.click({ force: true })
|
|
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#7209b7')
|
|
cy.findAllByRole('button', { name: 'Pick a color' })
|
|
.eq(5)
|
|
.click({ force: true })
|
|
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#e9c46a')
|
|
getIframeBody()
|
|
.findByTestId('button')
|
|
.should('have.css', 'background-color')
|
|
.should('eq', 'rgb(114, 9, 183)')
|
|
getIframeBody()
|
|
.findByTestId('button')
|
|
.should('have.css', 'color')
|
|
.should('eq', 'rgb(233, 196, 106)')
|
|
|
|
// Guest bubbles
|
|
cy.findAllByRole('button', { name: 'Pick a color' })
|
|
.eq(2)
|
|
.click({ force: true })
|
|
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#d8f3dc')
|
|
cy.findAllByRole('button', { name: 'Pick a color' })
|
|
.eq(3)
|
|
.click({ force: true })
|
|
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#264653')
|
|
cy.findAllByRole('button', { name: 'Pick a color' })
|
|
.eq(6)
|
|
.click({ force: true })
|
|
getIframeBody().findByRole('button', { name: 'Go' }).click()
|
|
getIframeBody()
|
|
.findByTestId('guest-bubble')
|
|
.should('have.css', 'background-color')
|
|
.should('eq', 'rgb(216, 243, 220)')
|
|
getIframeBody()
|
|
.findByTestId('guest-bubble')
|
|
.should('have.css', 'color')
|
|
.should('eq', 'rgb(38, 70, 83)')
|
|
|
|
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#ffe8d6')
|
|
cy.findAllByRole('button', { name: 'Pick a color' })
|
|
.eq(7)
|
|
.click({ force: true })
|
|
cy.findByRole('textbox', { name: 'Color value' }).clear().type('#023e8a')
|
|
cy.findAllByRole('button', { name: 'Pick a color' })
|
|
.eq(8)
|
|
.click({ force: true })
|
|
cy.findByRole('textbox', { name: 'Color value' }).clear().type('red')
|
|
getIframeBody()
|
|
.findByTestId('input')
|
|
.should('have.css', 'background-color')
|
|
.should('eq', 'rgb(255, 232, 214)')
|
|
getIframeBody()
|
|
.findByTestId('input')
|
|
.should('have.css', 'color')
|
|
.should('eq', 'rgb(2, 61, 138)')
|
|
})
|
|
})
|