add Cypress integration tests (#162)

* chore: add Cypress background color tests

* add localStorage spec

* add project id for Cypress dashboard

* remove project id from cypress.json
main
Gleb Bahmutov 7 years ago committed by Michael Fix
parent 508afdfbb4
commit 4078735cdc

2
.gitignore vendored

@ -1,3 +1,5 @@
node_modules
.env
.next
cypress/videos
cypress/screenshots

@ -0,0 +1,3 @@
{
"baseUrl": "https://carbon.now.sh/"
}

@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

@ -0,0 +1,69 @@
/* 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)')
})
})

@ -0,0 +1,41 @@
/* eslint-env mocha */
/* 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('localStorage', () => {
const themeDropdown = () =>
cy.get('#toolbar .dropdown-container').first()
const pickTheme = (name = 'Blackboard') =>
themeDropdown()
.click()
.contains(name)
.click()
it('is empty initially', () => {
cy.visit('/')
editorVisible()
cy.window().its('localStorage')
.should('have.length', 0)
})
it('saves on theme change', () => {
cy.visit('/')
editorVisible()
pickTheme('Blackboard')
themeDropdown().contains('Blackboard')
cy.window().its('localStorage.CARBON_STATE')
.then(JSON.parse)
.its('theme').should('equal', 'blackboard')
// visiting page again restores theme from localStorage
cy.visit('/')
themeDropdown().contains('Blackboard')
cy.url().should('contain', 't=blackboard')
})
})

@ -0,0 +1,17 @@
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}

@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

@ -0,0 +1,25 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
/* global cy */
export const editorVisible = () =>
cy.get('#editor').should('be.visible')
// Import commands.js using ES2015 syntax:
// import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')

@ -12,7 +12,9 @@
"lint": "prettier --config .prettierrc *.js {components,handlers,lib,pages}/*.js",
"precommit": "npm run contrib:build && git add README.md && lint-staged",
"contrib:add": "all-contributors add",
"contrib:build": "all-contributors generate"
"contrib:build": "all-contributors generate",
"cy:run": "cypress run",
"cy:open": "cypress open"
},
"dependencies": {
"axios": "^0.17.1",
@ -46,6 +48,8 @@
"devDependencies": {
"all-contributors-cli": "^4.7.0",
"cross-env": "^5.1.1",
"cypress": "^1.4.1",
"hex2rgb": "^2.2.0",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"prettier": "^1.8.1",

Loading…
Cancel
Save