Testing for LCP values

instana · Apr 30, 2024 · f50ba07 · f50ba07
1 parent 0eb24a8
commit f50ba07
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 28 deletions.
diff --git a/lib/webVitals.js b/lib/webVitals.js
@@ -1,16 +1,14 @@
 // @flow
 
 // $FlowFixMe Flow doesn't find the file. Let's ignore this for now.
-import {onCLS} from 'web-vitals';
+import {onLCP} from 'web-vitals';
 import type {PageLoadBeacon} from './types';
 import {pageLoadStartTimestamp} from './timings';
 import {reportCustomEvent} from './customEvents';
 import vars from './vars';
 
 interface Metric {
   name: 'CLS' | 'FID' | 'LCP';
-  // name: 'CLS';
-
   value: number;
   id?: string;
 }
@@ -32,26 +30,26 @@ function reportExtraMetrics(metric: Metric) {
 }
 
 export function addWebVitals(beacon: PageLoadBeacon) {
-  // if (onLCP) {
-  //   onLCP(onMetric, true);
-  // }
+  if (onLCP) {
+    onLCP(onMetric, true);
+  }
   // if (onFID) {
   //   onFID(onMetric, true);
   // }
   // if (onINP) {
   //   onINP(onMetric, true);
   // }
-  if (onCLS) {
-    onCLS(onMetricWithoutRounding, true);
-  }
-
-  // function onMetric(metric: Metric) {
-  //   beacon['t_' + metric.name.toLocaleLowerCase()] = Math.round(metric.value);
-  //   reportExtraMetrics(metric);
+  // if (onCLS) {
+  //   onCLS(onMetricWithoutRounding, true);
   // }
 
-  function onMetricWithoutRounding(metric: Metric) {
-    beacon['t_' + metric.name.toLocaleLowerCase()] = metric.value;
+  function onMetric(metric: Metric) {
+    beacon['t_' + metric.name.toLocaleLowerCase()] = Math.round(metric.value);
     reportExtraMetrics(metric);
   }
+
+  // function onMetricWithoutRounding(metric: Metric) {
+  //   beacon['t_' + metric.name.toLocaleLowerCase()] = metric.value;
+  //   reportExtraMetrics(metric);
+  // }
 }
diff --git a/protractor.saucelabs.config.js b/protractor.saucelabs.config.js
@@ -34,7 +34,7 @@ function newSaucelabsCapability(browserName, version, platform) {
     browserName,
     version,
     platform,
-    name: 'Testing for only CLS values',
+    name: 'Testing for only LCP values',
     'tunnel-identifier': 'github-action-tunnel',
     build: process.env.GITHUB_RUN_NUMBER
   };

diff --git a/test/e2e/12_webvitalsAsCustomEvent/webvitalsAsCustomEvent.spec.js b/test/e2e/12_webvitalsAsCustomEvent/webvitalsAsCustomEvent.spec.js
@@ -38,11 +38,20 @@ describe('12_webvitalsAsCustomEvent', () => {
             cexpect(beacon.ty).to.equal('pl');
           });
 
+          expectOneMatching(beacons, beacon => {
+            cexpect(beacon.ty).to.equal('cus');
+            cexpect(beacon.ts).to.be.a('string');
+            cexpect(parseFloat(beacon.d)).to.be.above(3000);
+            cexpect(beacon.n).to.equal('instana-webvitals-LCP');
+            cexpect(beacon.l).to.be.a('string');
+            cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
+            cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
+          });
+
           // expectOneMatching(beacons, beacon => {
           //   cexpect(beacon.ty).to.equal('cus');
           //   cexpect(beacon.ts).to.be.a('string');
-          //   cexpect(parseFloat(beacon.d)).to.be.above(3000);
-          //   cexpect(beacon.n).to.equal('instana-webvitals-LCP');
+          //   cexpect(beacon.n).to.equal('instana-webvitals-FID');
           //   cexpect(beacon.l).to.be.a('string');
           //   cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
           //   cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
@@ -51,21 +60,12 @@ describe('12_webvitalsAsCustomEvent', () => {
           // expectOneMatching(beacons, beacon => {
           //   cexpect(beacon.ty).to.equal('cus');
           //   cexpect(beacon.ts).to.be.a('string');
-          //   cexpect(beacon.n).to.equal('instana-webvitals-FID');
+          //   cexpect(beacon.n).to.equal('instana-webvitals-CLS');
           //   cexpect(beacon.l).to.be.a('string');
           //   cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
           //   cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
           // });
 
-          expectOneMatching(beacons, beacon => {
-            cexpect(beacon.ty).to.equal('cus');
-            cexpect(beacon.ts).to.be.a('string');
-            cexpect(beacon.n).to.equal('instana-webvitals-CLS');
-            cexpect(beacon.l).to.be.a('string');
-            cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
-            cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
-          });
-
           // expectOneMatching(beacons, beacon => {
           //   cexpect(beacon.ty).to.equal('cus');
           //   cexpect(beacon.ts).to.be.a('string');