From 4078735cdc24b7cb5c6a72d160f46ea62feed819 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Fri, 19 Jan 2018 21:25:43 -0500 Subject: [PATCH] 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 --- .gitignore | 2 + cypress.json | 3 + cypress/fixtures/example.json | 5 ++ cypress/integration/background-color-spec.js | 69 ++++++++++++++++++++ cypress/integration/localStorage-spec.js | 41 ++++++++++++ cypress/plugins/index.js | 17 +++++ cypress/support/commands.js | 25 +++++++ cypress/support/index.js | 25 +++++++ package.json | 6 +- 9 files changed, 192 insertions(+), 1 deletion(-) create mode 100644 cypress.json create mode 100644 cypress/fixtures/example.json create mode 100644 cypress/integration/background-color-spec.js create mode 100644 cypress/integration/localStorage-spec.js create mode 100644 cypress/plugins/index.js create mode 100644 cypress/support/commands.js create mode 100644 cypress/support/index.js diff --git a/.gitignore b/.gitignore index 72a74ca..d01b47a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ node_modules .env .next +cypress/videos +cypress/screenshots diff --git a/cypress.json b/cypress.json new file mode 100644 index 0000000..20aca23 --- /dev/null +++ b/cypress.json @@ -0,0 +1,3 @@ +{ + "baseUrl": "https://carbon.now.sh/" +} diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 0000000..da18d93 --- /dev/null +++ b/cypress/fixtures/example.json @@ -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" +} \ No newline at end of file diff --git a/cypress/integration/background-color-spec.js b/cypress/integration/background-color-spec.js new file mode 100644 index 0000000..27cea1f --- /dev/null +++ b/cypress/integration/background-color-spec.js @@ -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)') + }) +}) diff --git a/cypress/integration/localStorage-spec.js b/cypress/integration/localStorage-spec.js new file mode 100644 index 0000000..faf77f4 --- /dev/null +++ b/cypress/integration/localStorage-spec.js @@ -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') + }) +}) diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js new file mode 100644 index 0000000..fd170fb --- /dev/null +++ b/cypress/plugins/index.js @@ -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 +} diff --git a/cypress/support/commands.js b/cypress/support/commands.js new file mode 100644 index 0000000..c1f5a77 --- /dev/null +++ b/cypress/support/commands.js @@ -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) => { ... }) diff --git a/cypress/support/index.js b/cypress/support/index.js new file mode 100644 index 0000000..8c29a3d --- /dev/null +++ b/cypress/support/index.js @@ -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') diff --git a/package.json b/package.json index 7282207..7565ae6 100644 --- a/package.json +++ b/package.json @@ -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",