diff --git a/README.md b/README.md index 7b7f1e85f..f4f32bcf0 100644 --- a/README.md +++ b/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 diff --git a/circle.yml b/circle.yml index 3e934a821..8ae66f14f 100644 --- a/circle.yml +++ b/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 diff --git a/examples/testing-dom__root-style/README.md b/examples/testing-dom__root-style/README.md new file mode 100644 index 000000000..9e649e52a --- /dev/null +++ b/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 `` 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. diff --git a/examples/testing-dom__root-style/app.css b/examples/testing-dom__root-style/app.css new file mode 100644 index 000000000..f972bc3e5 --- /dev/null +++ b/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; +} diff --git a/examples/testing-dom__root-style/app.js b/examples/testing-dom__root-style/app.js new file mode 100644 index 000000000..cfc0453c8 --- /dev/null +++ b/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) +}) diff --git a/examples/testing-dom__root-style/cypress.json b/examples/testing-dom__root-style/cypress.json new file mode 100644 index 000000000..995bdf3c6 --- /dev/null +++ b/examples/testing-dom__root-style/cypress.json @@ -0,0 +1,7 @@ +{ + "fixturesFolder": false, + "supportFile": false, + "pluginsFile": false, + "viewportWidth": 300, + "viewportHeight": 300 +} diff --git a/examples/testing-dom__root-style/cypress/integration/spec.js b/examples/testing-dom__root-style/cypress/integration/spec.js new file mode 100644 index 000000000..86b701719 --- /dev/null +++ b/examples/testing-dom__root-style/cypress/integration/spec.js @@ -0,0 +1,42 @@ +/// +/* 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 + // 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') +}) diff --git a/examples/testing-dom__root-style/images/red.gif b/examples/testing-dom__root-style/images/red.gif new file mode 100644 index 000000000..9bc1b67f6 Binary files /dev/null and b/examples/testing-dom__root-style/images/red.gif differ diff --git a/examples/testing-dom__root-style/index.html b/examples/testing-dom__root-style/index.html new file mode 100644 index 000000000..d89828ca6 --- /dev/null +++ b/examples/testing-dom__root-style/index.html @@ -0,0 +1,11 @@ + + + + + This is the body of the document +
Change color using this color input + +
+ + + diff --git a/examples/testing-dom__root-style/package.json b/examples/testing-dom__root-style/package.json new file mode 100644 index 000000000..dc2cc4f39 --- /dev/null +++ b/examples/testing-dom__root-style/package.json @@ -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" + } +}