fix(gatsby-plugin-google-tagmanager): guard against dataLayer being u…

…ndefined in development (#14437)

* gatsby-plugin-google-tagmanager - Resolve #14424

* test: add some unit tests validating the functionality

packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js

@@ -0,0 +1,72 @@
+const getAPI = setup => {
+  if (setup) {
+    setup()
+  }
+
+  jest.resetModules()
+
+  return require(`../gatsby-browser`)
+}
+
+beforeEach(() => {
+  window.dataLayer = []
+  jest.useFakeTimers()
+  process.env.NODE_ENV = undefined
+})
+
+describe(`onRouteUpdate`, () => {
+  it(`does not register if NODE_ENV is not production`, () => {
+    const { onRouteUpdate } = getAPI(() => {
+      process.env.NODE_ENV = `development`
+    })
+
+    onRouteUpdate({}, {})
+
+    jest.runAllTimers()
+
+    expect(window.dataLayer).toHaveLength(0)
+  })
+
+  it(`registers a route change event`, () => {
+    const { onRouteUpdate } = getAPI(() => {
+      process.env.NODE_ENV = `production`
+    })
+
+    onRouteUpdate({}, {})
+
+    jest.runAllTimers()
+
+    expect(window.dataLayer).toEqual([
+      {
+        event: `gatsby-route-change`,
+      },
+    ])
+  })
+
+  it(`registers if NODE_ENV is production`, () => {
+    const { onRouteUpdate } = getAPI(() => {
+      process.env.NODE_ENV = `production`
+    })
+
+    onRouteUpdate({}, {})
+
+    jest.runAllTimers()
+
+    expect(window.dataLayer).toHaveLength(1)
+  })
+
+  it(`registers if includeInDevelopment is true`, () => {
+    const { onRouteUpdate } = getAPI(() => {})
+
+    onRouteUpdate(
+      {},
+      {
+        includeInDevelopment: true,
+      }
+    )
+
+    jest.runAllTimers()
+
+    expect(window.dataLayer).toHaveLength(1)
+  })
+})

packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js

@@ -1,6 +1,11 @@
-exports.onRouteUpdate = ({ location }) => {
-  // wrap inside a timeout to ensure the title has properly been changed
-  setTimeout(() => {
-    window.dataLayer.push({ event: `gatsby-route-change` })
-  }, 50)
+exports.onRouteUpdate = (_, pluginOptions) => {
+  if (
+    process.env.NODE_ENV === `production` ||
+    pluginOptions.includeInDevelopment
+  ) {
+    // wrap inside a timeout to ensure the title has properly been changed
+    setTimeout(() => {
+      window.dataLayer.push({ event: `gatsby-route-change` })
+    }, 50)
+  }
 }