Add root style recipe (#437)

* add new CSS variable example

* add new recipe to circle

* fix missing job

* document the spec more

Author: bahmutov

README.md

@@ -28,6 +28,7 @@ Recipe | Description
 [Waiting for static resource](./examples/testing-dom__wait-for-resource) | Shows how to wait for CSS, image, or any other static resource to load
 [CSV load and table test](./examples/testing-dom__csv-table) | Loads CSV file and compares objects against cells in a table
 [Evaluate performance metrics](./examples/testing-dom__performance-metrics) | Utilize Cypress to monitor a website
+[Root style](./examples/testing-dom__root-style) | Trigger input color change that modifies CSS variable
 
 ## Logging in recipes
 

circle.yml

@@ -241,6 +241,8 @@ jobs:
     <<: *defaults
   testing-dom__csv-table:
     <<: *defaults
+  testing-dom__root-style:
+    <<: *defaults
   unit-testing__application-code:
     <<: *defaults
   unit-testing__react:
@@ -420,6 +422,9 @@ all_jobs: &all_jobs
   - testing-dom__performance-metrics:
       requires:
         - build
+  - testing-dom__root-style:
+      requires:
+        - build
   - unit-testing__application-code:
       requires:
         - build
@@ -502,6 +507,7 @@ all_jobs: &all_jobs
         - testing-dom__wait-for-resource
         - testing-dom__csv-table
         - testing-dom__performance-metrics
+        - testing-dom__root-style
         - unit-testing__application-code
         - unit-testing__react
         # "meta" jobs

examples/testing-dom__root-style/README.md

@@ -0,0 +1,7 @@
+# Testing how the app sets the root document style variable
+
+The application in [index.html](index.html) uses `<input type="color">` to set the CSS variable that controls the background style, see [app.css](app.css)
+
+![triggered color change](images/red.gif)
+
+Find tests in [cypress/integration/spec.js](cypress/integration/spec.js) file.

examples/testing-dom__root-style/app.css

@@ -0,0 +1,9 @@
+:root {
+  --main-color: #fff;
+  --background-color: #000;
+}
+body {
+  color: var(--main-color);
+  background-color: var(--background-color);
+  font-size: xx-large;
+}

examples/testing-dom__root-style/app.js

@@ -0,0 +1,6 @@
+/* eslint-env browser */
+/* eslint-disable no-console */
+document.querySelector('input[type=color]').addEventListener('change', (e) => {
+  console.log('setting new background color to: %s', e.target.value)
+  document.documentElement.style.setProperty('--background-color', e.target.value)
+})

examples/testing-dom__root-style/cypress.json

@@ -0,0 +1,7 @@
+{
+  "fixturesFolder": false,
+  "supportFile": false,
+  "pluginsFile": false,
+  "viewportWidth": 300,
+  "viewportHeight": 300
+}

examples/testing-dom__root-style/cypress/integration/spec.js

@@ -0,0 +1,42 @@
+/// <reference types="cypress" />
+/* eslint-disable mocha/no-global-tests */
+it('changes background color', () => {
+  // when the app starts, the background is black
+  cy.visit('index.html')
+  // tip: add additional matchers like "chai-colors"
+  // to express desired colors better
+  // see recipe "Extending Cypress Chai Assertions"
+  cy.get('body').should('have.css', 'background-color', 'rgb(0, 0, 0)')
+
+  // select the new color value in the <input type="color">
+  // element and trigger "change" event
+  cy.get('input[type=color]')
+  .invoke('val', '#ff0000')
+  .trigger('change')
+
+  // check the background color has been changed
+  cy.get('body').should('have.css', 'background-color', 'rgb(255, 0, 0)')
+})
+
+it('can spy on native methods', () => {
+  cy.visit('index.html')
+  cy.get('body').should('have.css', 'background-color', 'rgb(0, 0, 0)')
+
+  // Cypress has direct access to browser APIs
+  // thus we can spy directly on method calls
+  cy.document().its('documentElement.style')
+  .then((style) => cy.spy(style, 'setProperty').as('setColor'))
+
+  cy.get('input[type=color]')
+  .invoke('val', '#ff0000')
+  .trigger('change')
+
+  cy.get('body').should('have.css', 'background-color', 'rgb(255, 0, 0)')
+  // find spy by its alias and confirm it was called as expected
+  cy.get('@setColor').should('have.been.calledWith', '--background-color', '#ff0000')
+
+  // tip: you can use Sinon match placeholders
+  // for example, if you don't care precisely about '--background-color'
+  // value, but know it should be a string, then use
+  cy.get('@setColor').should('have.been.calledWith', Cypress.sinon.match.string, '#ff0000')
+})

examples/testing-dom__root-style/images/red.gif

@@ -0,0 +1,11 @@
+<head>
+  <link rel="stylesheet" type="text/css" href="app.css" />
+</head>
+<body>
+  This is the body of the document
+  <div>Change color using this color input
+    <input type="color">
+  </div>
+  <script src="app.js"></script>
+</body>
+

examples/testing-dom__root-style/index.html

@@ -0,0 +1,10 @@
+{
+  "name": "root-style",
+  "version": "1.0.0",
+  "description": "Tests how the app changes CSS variable using input color element",
+  "scripts": {
+    "cypress:open": "../../node_modules/.bin/cypress open",
+    "cypress:run": "../../node_modules/.bin/cypress run",
+    "test:ci": "npm run cypress:run"
+  }
+}