feat(gatsby-plugin-preload-fonts): Add option to run in CI (#21037)

Co-authored-by: Aaron Ross <superhawk610@gmail.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>

Author: 3 people

packages/gatsby-plugin-preload-fonts/README.md

@@ -54,6 +54,10 @@ npm run preload-fonts -- --no-sandbox
 
 See [Puppeteer](#puppeteer) for more information.
 
+### Using with CI
+
+If you're planning to use this plugin in CI you can set the environment variable `CI=true` (most CI providers like Travis and CircleCI will set this for you). Please note that in this case `font-preload-cache.json` will only get rebuilt when routes change.
+
 ## Explanation of method
 
 A common pattern in modern web development is to link to a remote stylesheet that

packages/gatsby-plugin-preload-fonts/src/__tests__/fetch-routes.test.js

@@ -1,11 +1,14 @@
-const { request } = require(`graphql-request`)
-const createMockLogger = require(`logger-mock`)
-const fetchRoutes = require(`../prepare/fetch-routes`)
-
 jest.mock(`graphql-request`, () => {
   return { request: jest.fn() }
 })
 
+jest.mock(`gatsby-core-utils`)
+
+const { request } = require(`graphql-request`)
+const { isCI, createContentDigest } = require(`gatsby-core-utils`)
+const createMockLogger = require(`logger-mock`)
+const fetchRoutes = require(`../prepare/fetch-routes`)
+
 describe(`fetch-routes`, () => {
   const endpoint = `http://localhost:3000/___graphql`
   let cache
@@ -63,16 +66,28 @@ describe(`fetch-routes`, () => {
         },
       }
     })
-    logger.confirm.mockImplementationOnce(() =>
-      Promise.resolve(false /* don't crawl routes */)
-    )
-    const mockExit = jest
-      .spyOn(process, `exit`)
-      .mockImplementationOnce(() => {})
+    // don't crawl routes
+    logger.confirm.mockImplementationOnce(() => Promise.resolve(false))
+    createContentDigest.mockReturnValueOnce(cache.hash)
+
+    await expect(fetchRoutes({ logger, endpoint, cache })).resolves.toEqual([])
+  })
+
+  it(`doesn't prompt the user when the list of routes has not changed since last run if run in CI`, async () => {
+    expect.assertions(1)
+
+    request.mockImplementationOnce(() => {
+      return {
+        allSitePage: {
+          nodes: [{ path: `/foo` }, { path: `/bar` }, { path: `/baz` }],
+        },
+      }
+    })
 
     cache.hash = `09f5b092fb87d859e0ac53dbae299a9e`
-    await fetchRoutes({ logger, endpoint, cache })
+    createContentDigest.mockReturnValueOnce(cache.hash)
+    isCI.mockReturnValueOnce(true)
 
-    expect(mockExit).toHaveBeenCalledWith(0)
+    await expect(fetchRoutes({ logger, endpoint, cache })).resolves.toEqual([])
   })
 })

packages/gatsby-plugin-preload-fonts/src/prepare/fetch-routes.js

@@ -1,4 +1,4 @@
-import { createContentDigest } from "gatsby-core-utils"
+const { createContentDigest, isCI } = require(`gatsby-core-utils`)
 const { request } = require(`graphql-request`)
 const { formatRelative } = require(`date-fns`)
 const { red, blue, bold, dim } = require(`chalk`)
@@ -36,7 +36,14 @@ ${red(`err`)} could not establish a connection with the dev server
   }
 
   const routesHash = createContentDigest(routes)
+  // We can't detect all new routes so to make sure we are up to date
+  // we ask the user if they wants to recrawl or not.
   if (cache.hash === routesHash) {
+    // In CI we can't ask the user anything so we will bail as if the user said no.
+    if (isCI()) {
+      return []
+    }
+
     const lastRun = formatRelative(new Date(cache.timestamp), new Date())
     const ok = await logger.confirm(`
 
@@ -48,7 +55,9 @@ ${red(`err`)} could not establish a connection with the dev server
          - ${dim(`route hash`)} ${bold(cache.hash)}
 
 `)
-    if (!ok) process.exit(0)
+    if (!ok) {
+      return []
+    }
   }
 
   return routes

packages/gatsby-plugin-preload-fonts/src/prepare/index.js

@@ -37,6 +37,12 @@ export async function main() {
     endpoint: endpoint(GRAPHQL_PATH),
   })
 
+  // When we haven't found any routes we don't do anything
+  // Routes can be empty when we're running in CI or the user didn't want to update
+  if (!routes.length) {
+    return
+  }
+
   const sections = [
     dim(` crawling routes`),
     `:bar`,