fix(gatsby-plugin-catch-links): Fall back to default browser link han…

…dling when resources fail to fetch (#13904) Disabling catching of links when resources fail to fetch
gatsbyjs · May 14, 2019 · d4b60f2 · d4b60f2
1 parent 24105ed
commit d4b60f2
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/packages/gatsby-plugin-catch-links/src/__tests__/catch-links.js b/packages/gatsby-plugin-catch-links/src/__tests__/catch-links.js
@@ -286,7 +286,8 @@ describe(`navigation is routed through gatsby if the destination href`, () => {
       view: window,
     })
 
-    hrefHandler.mockImplementation(() => {
+    window.addEventListener(`click`, function onClick() {
+      window.removeEventListener(`click`, onClick)
       expect(hrefHandler).toHaveBeenCalledWith(
         `${sameOriginAndTopPath.pathname}`
       )
@@ -313,7 +314,8 @@ describe(`navigation is routed through gatsby if the destination href`, () => {
       view: window,
     })
 
-    hrefHandler.mockImplementation(() => {
+    window.addEventListener(`click`, function onClick() {
+      window.removeEventListener(`click`, onClick)
       expect(hrefHandler).toHaveBeenCalledWith(
         `${withAnchor.pathname}${withAnchor.hash}`
       )
@@ -340,7 +342,8 @@ describe(`navigation is routed through gatsby if the destination href`, () => {
       view: window,
     })
 
-    hrefHandler.mockImplementation(() => {
+    window.addEventListener(`click`, function onClick() {
+      window.removeEventListener(`click`, onClick)
       expect(hrefHandler).toHaveBeenCalledWith(
         `${withSearch.pathname}${withSearch.search}${withSearch.hash}`
       )
@@ -354,6 +357,50 @@ describe(`navigation is routed through gatsby if the destination href`, () => {
   })
 })
 
+describe(`navigation is routed through browser if resources have failed and the destination href`, () => {
+  // We're going to manually set up the event listener here
+  let hrefHandler
+  let eventDestroyer
+
+  beforeAll(() => {
+    hrefHandler = jest.fn()
+    eventDestroyer = catchLinks.default(window, hrefHandler)
+    global.___failedResources = true
+  })
+
+  afterAll(() => {
+    eventDestroyer()
+    global.___failedResources = false
+  })
+
+  it(`shares the same origin and top path`, done => {
+    const sameOriginAndTopPath = document.createElement(`a`)
+    sameOriginAndTopPath.setAttribute(
+      `href`,
+      `${window.location.href}/someSubPath`
+    )
+    document.body.appendChild(sameOriginAndTopPath)
+
+    // create the click event we'll be using for testing
+    const clickEvent = new MouseEvent(`click`, {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    })
+
+    window.addEventListener(`click`, function onClick() {
+      window.removeEventListener(`click`, onClick)
+      expect(hrefHandler).not.toHaveBeenCalled()
+
+      sameOriginAndTopPath.remove()
+
+      done()
+    })
+
+    sameOriginAndTopPath.dispatchEvent(clickEvent)
+  })
+})
+
 describe(`pathPrefix is handled if catched link to ${pathPrefix}/article navigates to ${pathPrefix}/article`, () => {
   // We're going to manually set up the event listener here
   let hrefHandler

diff --git a/packages/gatsby-plugin-catch-links/src/catch-links.js b/packages/gatsby-plugin-catch-links/src/catch-links.js
@@ -106,6 +106,8 @@ export const hashShouldBeFollowed = (origin, destination) =>
     destination.pathname === origin.pathname)
 
 export const routeThroughBrowserOrApp = hrefHandler => event => {
+  if (window.___failedResources) return true
+
   if (userIsForcingNavigation(event)) return true
 
   if (navigationWasHandledElsewhere(event)) return true