[integration] [cypress-gatsby] feat: Add Gatsby API support to our Cypress plugin

examples/gatsbygram/.gitignore

@@ -2,3 +2,4 @@ public
 .cache
 node_modules
 cypress/videos/
+cypress/screenshots/

examples/gatsbygram/cypress/integration/home-page-spec.js

@@ -1,6 +1,8 @@
+/* globals cy */
+
 describe(`The Home Page`, () => {
   it(`successfully loads`, () => {
-    cy.visit(`/`).waitForRouteChange()
+    cy.visit(`/`).waitForAPI(`onRouteUpdate`)
   })
 
   it(`contains the title with an SVG icon and text "Gatsbygram"`, () => {
@@ -11,14 +13,14 @@ describe(`The Home Page`, () => {
   it(`contains a link to about page in nav bar and it works`, () => {
     cy.getTestElement(`about-link`).contains(`About`)
     cy.getTestElement(`about-link`).click()
-    cy.waitForRouteChange()
+    cy.waitForAPI(`onRouteUpdate`)
       .location(`pathname`)
       .should(`equal`, `/about/`)
 
     // go back to home page
     cy.getTestElement(`site-title`).click()
 
-    cy.waitForRouteChange()
+    cy.waitForAPI(`onRouteUpdate`)
       .location(`pathname`)
       .should(`equal`, `/`)
   })
@@ -53,7 +55,7 @@ describe(`The Home Page`, () => {
         .first()
         .click()
 
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .url()
         .should(`contain`, post.id)
 
@@ -67,7 +69,7 @@ describe(`The Home Page`, () => {
       cy.getTestElement(`post-detail-text`).contains(post.username)
       cy.getTestElement(`post-detail-text`).contains(post.text)
       cy.getTestElement(`modal-close`).click()
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .location(`pathname`)
         .should(`equal`, `/`)
     })
@@ -79,28 +81,28 @@ describe(`The Home Page`, () => {
         .first()
         .click()
 
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .url()
         .should(`contain`, post1.id)
 
       // click right arrow icon to go to 2nd post
       cy.getTestElement(`next-post`).click()
 
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .url()
         .should(`contain`, post2.id)
 
       // press left arrow to go back to 1st post
       cy.getTestElement(`previous-post`).click()
 
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .url()
         .should(`contain`, post1.id)
 
       // close the post
       cy.getTestElement(`modal-close`).click()
 
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .location(`pathname`)
         .should(`equal`, `/`)
     })
@@ -114,31 +116,31 @@ describe(`The Home Page`, () => {
         .click()
 
       // wait for page to transition
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .url()
         .should(`contain`, post1.id)
 
       // press right arrow to go to 2nd post
       cy.get(`body`).type(`{rightarrow}`)
 
       // wait for page to transition
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .url()
         .should(`contain`, post2.id)
 
       // press left arrow to go back to 1st post
       cy.get(`body`).type(`{leftarrow}`)
 
       // wait for page to transition
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .url()
         .should(`contain`, post1.id)
 
       // close the post
       cy.getTestElement(`modal-close`).click()
 
       // wait for page to transition
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .location(`pathname`)
         .should(`equal`, `/`)
     })
@@ -152,33 +154,33 @@ describe(`The Home Page`, () => {
         .click()
 
       // wait for page to transition
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .url()
         .should(`contain`, post1.id)
 
       // press right arrow to go to 2nd post
       cy.get(`body`).type(`{rightarrow}`)
 
       // wait for page to transition
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .url()
         .should(`contain`, post2.id)
 
       // reload the page and go back
       cy.reload()
-        .waitForRouteChange()
+        .waitForAPI(`onRouteUpdate`)
         .go(`back`)
 
       // test if the first post exists
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .get(`div[to='/${post1.id}/']`)
         .should(`exist`)
 
       // close the post
       cy.getTestElement(`modal-close`).click()
 
       // wait for page to transition
-      cy.waitForRouteChange()
+      cy.waitForAPI(`onRouteUpdate`)
         .location(`pathname`)
         .should(`equal`, `/`)
     })

examples/gatsbygram/cypress/support/index.js

@@ -14,8 +14,8 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-// TODO: import as "cypress-gatsby/commands" once this is published to NPM
-import "../../../../packages/cypress-gatsby/commands"
+// TODO: import as "cypress-gatsby" once this is published to NPM
+import "../../../../packages/cypress-gatsby"
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

integration-tests/gatsby-image/cypress/integration/fixed.js

@@ -2,7 +2,7 @@ const fixedTestId = `image-fixed`
 
 describe(`fixed`, () => {
   beforeEach(() => {
-    cy.visit(`/fixed`).waitForRouteChange()
+    cy.visit(`/fixed`).waitForAPI(`onRouteUpdate`)
   })
 
   it(`does not render a spacer div`, () => {

integration-tests/gatsby-image/cypress/integration/fluid.js

@@ -2,7 +2,7 @@ const fluidTestId = `image-fluid`
 
 describe(`fluid`, () => {
   beforeEach(() => {
-    cy.visit(`/fluid`).waitForRouteChange()
+    cy.visit(`/fluid`).waitForAPI(`onRouteUpdate`)
   })
 
   it(`renders a spacer div`, () => {

integration-tests/gatsby-image/cypress/integration/image.js

@@ -2,7 +2,7 @@ const fluidTestId = `image-fluid`
 
 describe(`Production gatsby-image`, () => {
   beforeEach(() => {
-    cy.visit(`/fluid`).waitForRouteChange()
+    cy.visit(`/fluid`).waitForAPI(`onRouteUpdate`)
   })
 
   describe(`wrapping elements`, () => {

integration-tests/gatsby-image/cypress/integration/traced.js

@@ -2,7 +2,7 @@ const tracedTestId = `image-traced`
 
 describe(`fixed`, () => {
   beforeEach(() => {
-    cy.visit(`/traced`).waitForRouteChange()
+    cy.visit(`/traced`).waitForAPI(`onRouteUpdate`)
   })
 
   it(`renders a traced svg`, () => {

integration-tests/gatsby-image/cypress/support/index.js

@@ -14,8 +14,8 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-// TODO: import as "cypress-gatsby/commands" once this is published to NPM
-import '../../../../packages/cypress-gatsby/commands'
+// TODO: import as "cypress-gatsby" once this is published to NPM
+import '../../../../packages/cypress-gatsby'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

integration-tests/path-prefix/cypress/integration/navigate.js

@@ -5,7 +5,7 @@ const withTrailingSlash = url => `${url}/`
 
 describe('navigate', () => {
   beforeEach(() => {
-    cy.visit(`/`).waitForRouteChange()
+    cy.visit(`/`).waitForAPI(`onRouteUpdate`)
   })
 
   it(`uses pathPrefix`, () => {

integration-tests/path-prefix/cypress/integration/path-prefix.js

@@ -5,7 +5,7 @@ const withTrailingSlash = url => `${url}/`
 
 describe(`Production pathPrefix`, () => {
   beforeEach(() => {
-    cy.visit(`/`).waitForRouteChange()
+    cy.visit(`/`).waitForAPI(`onRouteUpdate`)
   })
 
   it(`returns 200 on base route`, () => {

integration-tests/path-prefix/cypress/support/index.js

@@ -14,8 +14,8 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-// TODO: import as "cypress-gatsby/commands" once this is published to NPM
-import '../../../../packages/cypress-gatsby/commands'
+// TODO: import as "cypress-gatsby" once this is published to NPM
+import '../../../../packages/cypress-gatsby'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

integration-tests/production-runtime/cypress/integration/production.js

@@ -2,13 +2,13 @@
 
 describe(`Production build tests`, () => {
   it(`should render properly`, () => {
-    cy.visit(`/`).waitForRouteChange()
+    cy.visit(`/`).waitForAPI(`onRouteUpdate`)
   })
 
   it(`should restore scroll position only when going back in history`, () => {
     cy.getTestElement(`long-page`)
       .click()
-      .waitForRouteChange()
+      .waitForAPI(`onRouteUpdate`)
 
     cy.scrollTo(`bottom`)
 
@@ -19,22 +19,22 @@ describe(`Production build tests`, () => {
 
     cy.getTestElement(`below-the-fold`)
       .click()
-      .waitForRouteChange()
+      .waitForAPI(`onRouteUpdate`)
 
     // after going back we expect page will
     // be restore previous scroll position
-    cy.go(`back`).waitForRouteChange()
+    cy.go(`back`).waitForAPI(`onRouteUpdate`)
 
     cy.window().then(win => {
       expect(win.scrollY).not.to.eq(0, 0)
     })
 
-    cy.go(`forward`).waitForRouteChange()
+    cy.go(`forward`).waitForAPI(`onRouteUpdate`)
 
     // after clicking link we expect page will be scrolled to top
     cy.getTestElement(`long-page`)
       .click()
-      .waitForRouteChange()
+      .waitForAPI(`onRouteUpdate`)
 
     cy.window().then(win => {
       expect(win.scrollY).to.eq(0, 0)
@@ -43,19 +43,19 @@ describe(`Production build tests`, () => {
     // reset to index page
     cy.getTestElement(`index-link`)
       .click()
-      .waitForRouteChange()
+      .waitForAPI(`onRouteUpdate`)
   })
 
   it(`should navigate back after a reload`, () => {
     cy.getTestElement(`page2`).click()
 
-    cy.waitForRouteChange()
+    cy.waitForAPI(`onRouteUpdate`)
       .location(`pathname`)
       .should(`equal`, `/page-2/`)
 
     cy.reload().go(`back`)
 
-    cy.waitForRouteChange()
+    cy.waitForAPI(`onRouteUpdate`)
       .getTestElement(`page2`)
       .should(`exist`)
       .location(`pathname`)
@@ -65,7 +65,7 @@ describe(`Production build tests`, () => {
   it(`should show 404 page when visiting non-existent page route`, () => {
     cy.getTestElement(`404`).click()
 
-    cy.waitForRouteChange()
+    cy.waitForAPI(`onRouteUpdate`)
       .location(`pathname`)
       .should(`equal`, `/page-3/`)
       .getTestElement(`404`)

integration-tests/production-runtime/cypress/support/index.js

@@ -14,8 +14,8 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-// TODO: import as "cypress-gatsby/commands" once this is published to NPM
-import "../../../../packages/cypress-gatsby/commands"
+// TODO: import as "cypress-gatsby" once this is published to NPM
+import "../../../../packages/cypress-gatsby"
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

packages/cypress-gatsby/api-handler.js

@@ -0,0 +1,31 @@
+let resolve = null
+let awaitingAPI = null
+
+export function waitForAPI(api) {
+  const promise = new Promise(r => {
+    resolve = r
+  })
+  awaitingAPI = api
+
+  if (this.___resolvedAPIs.includes(api)) {
+    // If the API has been marked as pre-resolved,
+    // resolve immediately and reset the variables.
+    awaitingAPI = null
+    this.___resolvedAPIs = []
+    resolve()
+  }
+  return promise
+}
+
+export default function apiHandler(api) {
+  if (!awaitingAPI) {
+    // If we're not currently waiting for anything,
+    // mark the API as pre-resolved.
+    this.___resolvedAPIs.push(api)
+  } else if (api === awaitingAPI) {
+    // If we've been waiting for something, now it's time to resolve it.
+    awaitingAPI = null
+    this.___resolvedAPIs = []
+    resolve()
+  }
+}