mirror of https://github.com/sgoudham/carbon.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.8 KiB
JavaScript
67 lines
1.8 KiB
JavaScript
/* global cy */
|
|
import { editorVisible } from '../support'
|
|
|
|
// usually we can visit the page before each test
|
|
// but these tests use the url, which means wasted page load
|
|
// so instead visit the desired url in each test
|
|
|
|
describe('background color', () => {
|
|
const bgColor = '.bg-color-container .bg-color'
|
|
const picker = '#bg-select-pickers'
|
|
|
|
const openPicker = () => {
|
|
cy.get(bgColor).click()
|
|
return cy.get(picker).should('be.visible')
|
|
}
|
|
|
|
// clicking anywhere else closes it
|
|
const closePicker = () => cy.get('body').click()
|
|
|
|
it('opens BG color pick', () => {
|
|
cy.visit('/')
|
|
openPicker()
|
|
cy.get(bgColor).click()
|
|
// TODO closePicker is not working right now
|
|
// closePicker()
|
|
cy.get(picker).should('not.exist')
|
|
})
|
|
|
|
it('changes background color to dark red', () => {
|
|
cy.visit('/')
|
|
const darkRed = '#D0021B'
|
|
const darkRedTile = `[title="${darkRed}"]`
|
|
openPicker()
|
|
cy.get(picker)
|
|
.find(darkRedTile)
|
|
.click()
|
|
closePicker()
|
|
|
|
// changing background color triggers url change
|
|
cy.url().should('contain', '?bg=')
|
|
|
|
// confirm color change
|
|
cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(208, 2, 27)')
|
|
})
|
|
|
|
it('specifies color in url', () => {
|
|
cy.visit('?bg=rgb(255,0,0)')
|
|
editorVisible()
|
|
cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 0)')
|
|
})
|
|
|
|
it('enters neon pink', () => {
|
|
cy.visit('?bg=rgb(255,0,0)')
|
|
editorVisible()
|
|
|
|
const pink = 'ff00ff'
|
|
openPicker()
|
|
.find(`input[value="FF0000"]`)
|
|
.clear()
|
|
.type(`${pink}{enter}`)
|
|
closePicker()
|
|
|
|
cy.url().should('contain', `?bg=rgba(${encodeURIComponent('255,0,255,1')}`)
|
|
cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 255)')
|
|
})
|
|
})
|