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.
70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
7 years ago
|
/* eslint-env mocha */
|
||
|
|
/* global cy */
|
||
|
|
import hex2rgb from 'hex2rgb'
|
||
|
|
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 = '.colorpicker-container .bg-color'
|
||
|
|
const picker = '.colorpicker-picker'
|
||
|
|
|
||
|
|
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()
|
||
|
|
closePicker()
|
||
|
|
cy.get(picker)
|
||
|
|
.should('not.be.visible')
|
||
|
|
})
|
||
|
|
|
||
|
|
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', hex2rgb(darkRed).rgbString)
|
||
|
|
})
|
||
|
|
|
||
|
|
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(255,0,255,1')
|
||
|
|
cy.get('#container-bg .bg')
|
||
|
|
.should('have.css', 'background-color', 'rgb(255, 0, 255)')
|
||
|
|
})
|
||
|
|
})
|