adding cls to perf relayer

vercel · Feb 12, 2020 · f99901d · f99901d
1 parent 4eb286a
commit f99901d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/packages/next/client/index.js b/packages/next/client/index.js
@@ -164,8 +164,14 @@ export default async ({ webpackHMR: passedWebpackHMR } = {}) => {
   const { page: app, mod } = await pageLoader.loadPageScript('/_app')
   App = app
   if (mod && mod.unstable_onPerformanceData) {
-    onPerfEntry = function({ name, startTime, value, duration }) {
-      mod.unstable_onPerformanceData({ name, startTime, value, duration })
+    onPerfEntry = function({ name, startTime, value, duration, entryType }) {
+      mod.unstable_onPerformanceData({
+        name,
+        startTime,
+        value,
+        duration,
+        entryType,
+      })
     }
   }
 

diff --git a/test/integration/relay-analytics/pages/_app.js b/test/integration/relay-analytics/pages/_app.js
@@ -8,5 +8,8 @@ export default class MyApp extends App {}
   Method is experimental and will eventually be handled in a Next.js plugin
 */
 export function unstable_onPerformanceData(data) {
-  localStorage.setItem(data.name, data.value || data.startTime)
+  localStorage.setItem(
+    data.name || data.entryType,
+    data.value !== undefined ? data.value : data.startTime
+  )
 }
diff --git a/test/integration/relay-analytics/test/index.test.js b/test/integration/relay-analytics/test/index.test.js
@@ -30,13 +30,30 @@ describe('Analytics relayer', () => {
     const firstContentfulPaint = parseFloat(
       await browser.eval('localStorage.getItem("first-contentful-paint")')
     )
+    const largestContentfulPaint = parseFloat(
+      await browser.eval('localStorage.getItem("largest-contentful-paint")')
+    )
+    let cls = await browser.eval(
+      'localStorage.getItem("cumulative-layout-shift")'
+    )
     expect(h1Text).toMatch(/Hello!/)
     expect(data).not.toBeNaN()
     expect(data).toBeGreaterThan(0)
     expect(firstPaint).not.toBeNaN()
     expect(firstPaint).toBeGreaterThan(0)
     expect(firstContentfulPaint).not.toBeNaN()
     expect(firstContentfulPaint).toBeGreaterThan(0)
+    expect(largestContentfulPaint).not.toBeNaN()
+    expect(largestContentfulPaint).toBeGreaterThan(0)
+    expect(cls).toBeNull()
+    // Create an artificial layout shift
+    await browser.eval('document.querySelector("h1").style.fontSize = "2px"')
+    await browser.refresh()
+    cls = parseFloat(
+      await browser.eval('localStorage.getItem("cumulative-layout-shift")')
+    )
+    expect(cls).not.toBeNaN()
+    expect(cls).toBeGreaterThan(0)
     await browser.close()
   })
 })