fix: update example docs to match tests (#807)

* fix: update example docs to match tests also removes meaningless `end` tests and examples * Remove link to 'end' --------- Co-authored-by: Jennifer Shehane <jennifer@cypress.io>
cypress-io · Mar 28, 2024 · 723fb32 · 723fb32
1 parent 01b61c9
commit 723fb32
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 142 deletions.
diff --git a/app/commands/actions.html b/app/commands/actions.html
diff --git a/app/commands/cookies.html b/app/commands/cookies.html
@@ -188,7 +188,7 @@ <h4 id="clearCookie"><a href="https://on.cypress.io/clearcookie">cy.clearCookie(
 cy.getCookie('token').should('have.property', 'value', '123ABC')
 
 // cy.clearCookies() yields null
-cy.clearCookie('token').should('be.null')
+cy.clearCookie('token')
 
 cy.getCookie('token').should('be.null')</code></pre>
         </div>

diff --git a/app/commands/misc.html b/app/commands/misc.html
@@ -70,45 +70,6 @@ <h1>Misc</h1>
   <div class="container content-container">
     <div id="misc">
       <div class="row">
-
-        <div class="col-xs-7">
-          <h4 id="end"><a href="https://on.cypress.io/end">.end()</a></h4>
-          <p>To end the command chain, use the <a href="https://on.cypress.io/end"><code>.end()</code></a> command.</p>
-          <pre><code class="javascript">// cy.end is useful when you want to end a chain of commands
-// and force Cypress to re-query from the root element
-cy.get('.misc-table').within(() => {
-  // ends the current chain and yields null
-  cy.contains('Cheryl').click().end()
-
-  // queries the entire table again
-  cy.contains('Charles').click()
-})</code></pre>
-        </div>
-        <div class="col-xs-5">
-          <div class="well">
-            <table class="table table-bordered misc-table">
-              <thead>
-                <tr>
-                  <th>Table</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>User: Cheryl</td>
-                </tr>
-                <tr>
-                  <td>User: Charles</td>
-                </tr>
-                <tr>
-                  <td>User: Darryl</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        <div class="col-xs-12"><hr></div>
-
         <div class="col-xs-12">
           <h4 id="exec"><a href="https://on.cypress.io/exec">cy.exec()</a></h4>
           <p>To execute a system command, use the <a href="https://on.cypress.io/exec"><code>cy.exec()</code></a> command.</p>

diff --git a/app/commands/spies-stubs-clocks.html b/app/commands/spies-stubs-clocks.html
@@ -135,6 +135,7 @@ <h4 id="clock"><a href="https://on.cypress.io/clock">cy.clock()</a></h4>
 cy.clock(now)
 cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
 cy.get('#clock-div').click()
+cy.get('#clock-div')
   .should('have.text', '1489449600')</code></pre>
         </div>
         <div class="col-xs-5">
@@ -157,9 +158,11 @@ <h4 id="tick"><a href="https://on.cypress.io/tick">cy.tick()</a></h4>
 cy.clock(now)
 cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
 cy.get('#tick-div').click()
+cy.get('#tick-div')
   .should('have.text', '1489449600')
 cy.tick(10000) // 10 seconds passed
 cy.get('#tick-div').click()
+cy.get('#tick-div')
   .should('have.text', '1489449610')</code></pre>
         </div>
         <div class="col-xs-5">

diff --git a/app/commands/storage.html b/app/commands/storage.html
@@ -74,43 +74,48 @@ <h1>Storage</h1>
         <div class="col-xs-7">
           <h4><a href="https://on.cypress.io/clearlocalstorage">cy.clearLocalStorage()</a></h4>
           <p>To clear all data in localStorage for the current origin, use the <a href="https://on.cypress.io/clearlocalstorage"><code>cy.clearLocalStorage()</code></a> command.</p>
-          <pre><code class="javascript">cy.get('.ls-btn').click().should(() => {
+          <pre><code class="javascript">cy.get('.ls-btn').click()
+cy.get('.ls-btn').should(() => {
   expect(localStorage.getItem('prop1')).to.eq('red')
   expect(localStorage.getItem('prop2')).to.eq('blue')
   expect(localStorage.getItem('prop3')).to.eq('magenta')
 })
 
-// clearLocalStorage() yields the localStorage object
-cy.clearLocalStorage().should((ls) => {
-  expect(ls.getItem('prop1')).to.be.null
-  expect(ls.getItem('prop2')).to.be.null
-  expect(ls.getItem('prop3')).to.be.null
+cy.clearLocalStorage()
+cy.getAllLocalStorage().should(() => {
+  expect(localStorage.getItem('prop1')).to.be.null
+  expect(localStorage.getItem('prop2')).to.be.null
+  expect(localStorage.getItem('prop3')).to.be.null
 })
 
-// Clear key matching string in localStorage
-cy.get('.ls-btn').click().should(() => {
+cy.get('.ls-btn').click()
+cy.get('.ls-btn').should(() => {
   expect(localStorage.getItem('prop1')).to.eq('red')
   expect(localStorage.getItem('prop2')).to.eq('blue')
   expect(localStorage.getItem('prop3')).to.eq('magenta')
 })
 
-cy.clearLocalStorage('prop1').should((ls) => {
-  expect(ls.getItem('prop1')).to.be.null
-  expect(ls.getItem('prop2')).to.eq('blue')
-  expect(ls.getItem('prop3')).to.eq('magenta')
+// Clear key matching string in localStorage
+cy.clearLocalStorage('prop1')
+cy.getAllLocalStorage().should(() => {
+  expect(localStorage.getItem('prop1')).to.be.null
+  expect(localStorage.getItem('prop2')).to.eq('blue')
+  expect(localStorage.getItem('prop3')).to.eq('magenta')
 })
 
-// Clear keys matching regex in localStorage
-cy.get('.ls-btn').click().should(() => {
+cy.get('.ls-btn').click()
+cy.get('.ls-btn').should(() => {
   expect(localStorage.getItem('prop1')).to.eq('red')
   expect(localStorage.getItem('prop2')).to.eq('blue')
   expect(localStorage.getItem('prop3')).to.eq('magenta')
 })
 
-cy.clearLocalStorage(/prop1|2/).should((ls) => {
-  expect(ls.getItem('prop1')).to.be.null
-  expect(ls.getItem('prop2')).to.be.null
-  expect(ls.getItem('prop3')).to.eq('magenta')
+// Clear keys matching regex in localStorage
+cy.clearLocalStorage(/prop1|2/)
+cy.getAllLocalStorage().should(() => {
+  expect(localStorage.getItem('prop1')).to.be.null
+  expect(localStorage.getItem('prop2')).to.be.null
+  expect(localStorage.getItem('prop3')).to.eq('magenta')
 })</code></pre>
         </div>
         <div class="col-xs-5">
@@ -159,10 +164,11 @@ <h4><a href="https://on.cypress.io/clearalllocalstorage">cy.clearAllLocalStorage
           <pre><code class="javascript">cy.get('.ls-btn').click()
 
 // clearAllLocalStorage() yields null
-cy.clearAllLocalStorage().should(() => {
-  expect(sessionStorage.getItem('prop1')).to.be.null
-  expect(sessionStorage.getItem('prop2')).to.be.null
-  expect(sessionStorage.getItem('prop3')).to.be.null
+cy.clearAllLocalStorage()
+cy.getAllLocalStorage().should(() => {
+  expect(localStorage.getItem('prop1')).to.be.null
+  expect(localStorage.getItem('prop2')).to.be.null
+  expect(localStorage.getItem('prop3')).to.be.null
 })</code></pre>
         </div>
         <div class="col-xs-5">
@@ -208,7 +214,8 @@ <h4><a href="https://on.cypress.io/clearallsessionstorage">cy.clearAllSessionSto
           <pre><code class="javascript">cy.get('.ls-btn').click()
 
 // clearAllSessionStorage() yields null
-cy.clearAllSessionStorage().should(() => {
+cy.clearAllSessionStorage()
+cy.getAllSessionStorage().should(() => {
   expect(sessionStorage.getItem('prop4')).to.be.null
   expect(sessionStorage.getItem('prop5')).to.be.null
   expect(sessionStorage.getItem('prop6')).to.be.null

diff --git a/app/index.html b/app/index.html
@@ -176,7 +176,6 @@ <h2>Commands</h2>
           <li>
             <a href="/commands/misc">Misc</a>
             <ul>
-              <li><a href="/commands/misc">end</a></li>
               <li><a href="/commands/misc">exec</a></li>
               <li><a href="/commands/misc">focused</a></li>
               <li><a href="/commands/misc">screenshot</a></li>

diff --git a/app/utilities.html b/app/utilities.html
@@ -88,10 +88,9 @@ <h4 id="$"><a href="https://on.cypress.io/$">Cypress.$</a></h4>
           <p>To call a jQuery method, use the <a href="https://on.cypress.io/$"><code>Cypress.$</code></a> command.</p>
           <pre><code class="javascript">let $li = Cypress.$('.utility-jquery li:first')
 
-cy.wrap($li)
-  .should('not.have.class', 'active')
-  .click()
-  .should('have.class', 'active')</code></pre>
+cy.wrap($li).should('not.have.class', 'active')
+cy.wrap($li).click()
+cy.wrap($li).should('have.class', 'active')</code></pre>
         </div>
         <div class="col-xs-5">
           <div class="well">
@@ -115,21 +114,23 @@ <h4 id="$"><a href="https://on.cypress.io/$">Cypress.$</a></h4>
         <div class="col-xs-7">
           <h4 id="Blob"><a href="https://on.cypress.io/blob">Cypress.Blob</a></h4>
           <p>To work with blobs, convert strings, and other utility functions, use the <a href="https://on.cypress.io/blob"><code>Cypress.Blob</code></a> library.</p>
-          <pre><code class="javascript">cy.get('.utility-blob').then(($div) =>
-// https://github.com/nolanlawson/blob-util#imgSrcToDataURL
-// get the dataUrl string for the javascript-logo
-  Cypress.Blob.imgSrcToDataURL('/assets/img/javascript-logo.png', undefined, 'anonymous')
+          <pre><code class="javascript">cy.get('.utility-blob').then(($div) => {
+  // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
+  // get the dataUrl string for the javascript-logo
+  return Cypress.Blob.imgSrcToDataURL('/assets/img/javascript-logo.png', undefined, 'anonymous')
   .then((dataUrl) => {
     // create an <img> element and set its src to the dataUrl
     let img = Cypress.$('<img />', { src: dataUrl })
+
     // need to explicitly return cy here since we are initially returning
     // the Cypress.Blob.imgSrcToDataURL promise to our test
     // append the image
     $div.append(img)
 
     cy.get('.utility-blob img').click()
-      .should('have.attr', 'src', dataUrl)
-  }))</code></pre>
+    cy.get('.utility-blob img').should('have.attr', 'src', dataUrl)
+  })
+})</code></pre>
         </div>
         <div class="col-xs-5">
           <div class="well">

diff --git a/cypress/e2e/2-advanced-examples/cookies.cy.js b/cypress/e2e/2-advanced-examples/cookies.cy.js
@@ -83,7 +83,6 @@ context('Cookies', () => {
 
     // cy.clearCookies() yields null
     cy.clearCookie('token')
-    cy.getCookie('token').should('be.null')
 
     cy.getCookie('token').should('be.null')
   })

diff --git a/cypress/e2e/2-advanced-examples/misc.cy.js b/cypress/e2e/2-advanced-examples/misc.cy.js
@@ -5,21 +5,6 @@ context('Misc', () => {
     cy.visit('http://localhost:8080/commands/misc')
   })
 
-  it('.end() - end the command chain', () => {
-    // https://on.cypress.io/end
-
-    // cy.end is useful when you want to end a chain of commands
-    // and force Cypress to re-query from the root element
-    cy.get('.misc-table').within(() => {
-      // ends the current chain and yields null
-      cy.contains('Cheryl').click()
-      //.end()
-
-      // queries the entire table again
-      cy.contains('Charles').click()
-    })
-  })
-
   it('cy.exec() - execute a system command', () => {
     // execute a system command.
     // so you can take actions necessary for