From 00aa037ba808ecdcbb3406ea7d4a462eceeaa08f Mon Sep 17 00:00:00 2001 From: Jennifer Shehane Date: Sun, 15 Mar 2020 00:21:33 +0630 Subject: [PATCH] Add Cypress.sinon doc (#2608) * Add Cypress.sinon doc * Add more interlinking between docs for utilities + sinon doc. * fix missing url tag * expand the text * explain the links a little Co-authored-by: Gleb Bahmutov --- package-lock.json | 28 +++++----- source/_data/sidebar.yml | 1 + source/api/utilities/$.md | 4 ++ source/api/utilities/_.md | 4 ++ source/api/utilities/blob.md | 4 ++ source/api/utilities/minimatch.md | 4 ++ source/api/utilities/moment.md | 5 ++ source/api/utilities/promise.md | 4 ++ source/api/utilities/sinon.md | 66 +++++++++++++++++++++++ source/guides/references/bundled-tools.md | 2 + themes/cypress/languages/en.yml | 1 + themes/cypress/languages/ja.yml | 1 + themes/cypress/languages/pt-br.yml | 1 + themes/cypress/languages/ru.yml | 1 + themes/cypress/languages/zh-cn.yml | 1 + 15 files changed, 113 insertions(+), 14 deletions(-) create mode 100644 source/api/utilities/sinon.md diff --git a/package-lock.json b/package-lock.json index f619a423e4..7bf2e614b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5700,12 +5700,12 @@ "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "dev": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "is-ci": { @@ -5714,7 +5714,7 @@ "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==", "dev": true, "requires": { - "ci-info": "2.0.0" + "ci-info": "^2.0.0" } }, "log-symbols": { @@ -5723,7 +5723,7 @@ "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==", "dev": true, "requires": { - "chalk": "2.4.2" + "chalk": "^2.4.2" } }, "pump": { @@ -5732,8 +5732,8 @@ "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", "dev": true, "requires": { - "end-of-stream": "1.4.1", - "once": "1.4.0" + "end-of-stream": "^1.1.0", + "once": "^1.3.1" } }, "punycode": { @@ -5754,7 +5754,7 @@ "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "dev": true, "requires": { - "glob": "7.1.6" + "glob": "^7.1.3" } }, "supports-color": { @@ -5763,7 +5763,7 @@ "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", "dev": true, "requires": { - "has-flag": "4.0.0" + "has-flag": "^4.0.0" }, "dependencies": { "has-flag": { @@ -5780,7 +5780,7 @@ "integrity": "sha512-J7Z2K08jbGcdA1kkQpJSqLF6T0tdQqpR2pnSUXsIchbPdTI9v3e85cLW0d6WDhwuAleOV71j2xWs8qMPfK7nKw==", "dev": true, "requires": { - "rimraf": "2.7.1" + "rimraf": "^2.6.3" } }, "url": { @@ -23157,7 +23157,7 @@ "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", "dev": true, "requires": { - "has-flag": "4.0.0" + "has-flag": "^4.0.0" } } } diff --git a/source/_data/sidebar.yml b/source/_data/sidebar.yml index 893ee7b3b7..7a946861a9 100644 --- a/source/_data/sidebar.yml +++ b/source/_data/sidebar.yml @@ -152,6 +152,7 @@ api: minimatch: minimatch.html moment: moment.html promise: promise.html + sinon: sinon.html cypress-api: custom-commands: custom-commands.html cookies: cookies.html diff --git a/source/api/utilities/$.md b/source/api/utilities/$.md index fa3a27ddc3..b2c60ca536 100644 --- a/source/api/utilities/$.md +++ b/source/api/utilities/$.md @@ -78,3 +78,7 @@ cy.$$.each([1, 2, 3], (index, value) => { expect(index).to.eq(value) }) // fails ``` + +# See also + +- {% url 'Bundled Tools' bundled-tools %} \ No newline at end of file diff --git a/source/api/utilities/_.md b/source/api/utilities/_.md index c7b5146d58..2457c2097c 100644 --- a/source/api/utilities/_.md +++ b/source/api/utilities/_.md @@ -55,3 +55,7 @@ cy expect(ids).to.deep.eq([1, 2, 3]) }) ``` + +# See also + +- {% url 'Bundled Tools' bundled-tools %} diff --git a/source/api/utilities/blob.md b/source/api/utilities/blob.md index 4da765df1a..ddc6b123fa 100644 --- a/source/api/utilities/blob.md +++ b/source/api/utilities/blob.md @@ -62,3 +62,7 @@ return Cypress.Blob.imgSrcToDataURL('/assets/img/logo.png').then((dataUrl) => { cy.get('.utility-blob img').click().should('have.attr', 'src', dataUrl) }) ``` + +# See also + +- {% url 'Bundled Tools' bundled-tools %} \ No newline at end of file diff --git a/source/api/utilities/minimatch.md b/source/api/utilities/minimatch.md index 11ab16789e..2df06d4c1d 100644 --- a/source/api/utilities/minimatch.md +++ b/source/api/utilities/minimatch.md @@ -66,3 +66,7 @@ Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/*', { matchBase: false }) ``` + +# See also + +- {% url 'Bundled Tools' bundled-tools %} \ No newline at end of file diff --git a/source/api/utilities/moment.md b/source/api/utilities/moment.md index b1f6618947..4b74140c9a 100644 --- a/source/api/utilities/moment.md +++ b/source/api/utilities/moment.md @@ -36,3 +36,8 @@ const todaysDate = Cypress.moment().format('MMM DD, YYYY') cy.get('span').should('contain', 'Order shipped on: ' + todaysDate) ``` + +# See also + +- {% url 'Bundled Tools' bundled-tools %} +- {% url `cy.clock()` clock %} diff --git a/source/api/utilities/promise.md b/source/api/utilities/promise.md index 61d575d104..3bc5ebfae2 100644 --- a/source/api/utilities/promise.md +++ b/source/api/utilities/promise.md @@ -69,3 +69,7 @@ it('waits for promises to resolve', function () { }) }) ``` + +# See also + +- {% url 'Bundled Tools' bundled-tools %} diff --git a/source/api/utilities/sinon.md b/source/api/utilities/sinon.md new file mode 100644 index 0000000000..d8949086d5 --- /dev/null +++ b/source/api/utilities/sinon.md @@ -0,0 +1,66 @@ +--- +title: Cypress.sinon +--- + +Cypress automatically includes {% url 'Sinon.JS' http://sinonjs.org/ %} and exposes it as `Cypress.sinon`. Because commands {% url `cy.spy` spy %} and {% url `cy.stub` stub %} are already wrapping Sinon methods, the most common use for `Cypress.sinon` is to provide flexible {% url matchers https://sinonjs.org/releases/latest/matchers/ %} when doing assertions. + +# Syntax + +```javascript +Cypress.sinon.match(value) +Cypress.sinon.match. +``` + +## Usage + +**{% fa fa-check-circle green %} Correct Usage** + +```javascript +Cypress.sinon.match.string +``` + +**{% fa fa-exclamation-triangle red %} Incorrect Usage** + +```javascript +cy.sinon.match.string // Errors, cannot be chained off 'cy' +``` + +# Examples + +## `match.string` + +This example comes from the recipe {% url "Root style" https://github.com/cypress-io/cypress-example-recipes#testing-the-dom %}. Imagine an application code where the method `setProperty` is called to change a CSS variable: + +```js +document.querySelector('input[type=color]').addEventListener('change', (e) => { + document.documentElement.style.setProperty('--background-color', e.target.value) +}) +``` + +We can write a test to confirm that the method `setProperty` was called with two strings; we don't care about value of the first string, but we do want to check if it was indeed a string. + +```javascript +cy.document() + .its('documentElement.style') + .then((style) => { + cy.spy(style, 'setProperty').as('setColor') + }) + +cy.get('input[type=color]') + .invoke('val', '#ff0000') + .trigger('change') + +// we don't care about '--background-color' exact +// value but know it should be a string +cy.get('@setColor') + .should('have.been.calledWith', Cypress.sinon.match.string, '#ff0000') +``` + +# See also + +- {% url 'Spies, stubs & clocks' https://example.cypress.io/commands/spies-stubs-clocks %} example page +- {% url 'Sinon matchers' https://sinonjs.org/releases/latest/matchers/ %} documentation page +- {% url 'Bundled Tools' bundled-tools %} +- {% url `cy.spy()` spy %} +- {% url `cy.stub()` stub %} +- {% url "Stubs, Spies, and Clocks" stubs-spies-and-clocks %} guide diff --git a/source/guides/references/bundled-tools.md b/source/guides/references/bundled-tools.md index adc63b23a3..e7739dcddf 100644 --- a/source/guides/references/bundled-tools.md +++ b/source/guides/references/bundled-tools.md @@ -51,6 +51,8 @@ When writing integration tests, you will likely work a lot with the DOM. Cypress When writing unit tests, or even in integration-like tests, you often need to ability to stub and spy methods. Cypress includes two methods, {% url `cy.stub()` stub %} and {% url `cy.spy()` spy %} that return Sinon stubs and spies, respectively. +Cypress also exposes a utility so that `sinon` can be called anywhere inside of your tests using {% url `Cypress.sinon` sinon %}. + {% note info %} {% url "Check out our guide for working with spies, stubs, and clocks." stubs-spies-and-clocks %} {% endnote %} diff --git a/themes/cypress/languages/en.yml b/themes/cypress/languages/en.yml index 26682a51e2..b733bb747b 100644 --- a/themes/cypress/languages/en.yml +++ b/themes/cypress/languages/en.yml @@ -175,6 +175,7 @@ sidebar: moment: moment blob: Blob promise: Promise + sinon: sinon cypress-api: Cypress API config: config env: env diff --git a/themes/cypress/languages/ja.yml b/themes/cypress/languages/ja.yml index 4a0a603f88..3f94903667 100644 --- a/themes/cypress/languages/ja.yml +++ b/themes/cypress/languages/ja.yml @@ -175,6 +175,7 @@ sidebar: moment: moment blob: Blob promise: Promise + sinon: sinon cypress-api: Cypress API config: config env: env diff --git a/themes/cypress/languages/pt-br.yml b/themes/cypress/languages/pt-br.yml index f529d11af2..6eb715b90e 100644 --- a/themes/cypress/languages/pt-br.yml +++ b/themes/cypress/languages/pt-br.yml @@ -175,6 +175,7 @@ sidebar: moment: moment blob: Blob promise: Promise + sinon: sinon cypress-api: Cypress API config: config env: env diff --git a/themes/cypress/languages/ru.yml b/themes/cypress/languages/ru.yml index 09b5862f5a..7b187dcc79 100644 --- a/themes/cypress/languages/ru.yml +++ b/themes/cypress/languages/ru.yml @@ -175,6 +175,7 @@ sidebar: moment: moment blob: Blob promise: Promise + sinon: sinon cypress-api: Cypress API config: config env: env diff --git a/themes/cypress/languages/zh-cn.yml b/themes/cypress/languages/zh-cn.yml index fc548a8f1f..41b8be2059 100644 --- a/themes/cypress/languages/zh-cn.yml +++ b/themes/cypress/languages/zh-cn.yml @@ -177,6 +177,7 @@ sidebar: moment: moment blob: Blob promise: Promise + sinon: sinon cypress-api: Cypress API config: config env: env