diff --git a/package.json b/package.json index c0ac0a03177..eee6c950d23 100644 --- a/package.json +++ b/package.json @@ -247,7 +247,7 @@ "universal-cookie-express": "4.0.3", "url": "0.11.4", "uuid": "11.1.0", - "web-vitals": "3.5.2", + "web-vitals": "5.1.0", "webpack-isomorphic-tools": "4.0.0" }, "devDependencies": { diff --git a/src/amo/tracking.js b/src/amo/tracking.js index a3b1ee107d9..b762219b17d 100644 --- a/src/amo/tracking.js +++ b/src/amo/tracking.js @@ -3,7 +3,7 @@ import { oneLine } from 'common-tags'; import config from 'config'; import invariant from 'invariant'; -import { getCLS, getFID, getLCP } from 'web-vitals'; +import { onCLS, onINP, onLCP } from 'web-vitals'; import { ADDON_TYPE_DICT, @@ -81,9 +81,9 @@ export function isDoNotTrackEnabled({ type TrackingParams = { _config: typeof config, _isDoNotTrackEnabled: typeof isDoNotTrackEnabled, - _getCLS: typeof getCLS, - _getFID: typeof getFID, - _getLCP: typeof getLCP, + _onCLS: typeof onCLS, + _onINP: typeof onINP, + _onLCP: typeof onLCP, }; const makeTrackingEventData = ({ @@ -118,9 +118,9 @@ export class Tracking { constructor({ _config = config, _isDoNotTrackEnabled = isDoNotTrackEnabled, - _getCLS = getCLS, - _getFID = getFID, - _getLCP = getLCP, + _onCLS = onCLS, + _onINP = onINP, + _onLCP = onLCP, }: TrackingParams = {}) { if (typeof window === 'undefined') { return; @@ -179,9 +179,9 @@ export class Tracking { // $FlowFixMe: Deal with method-unbinding error. const sendWebVitalStats = this.sendWebVitalStats.bind(this); - _getCLS(sendWebVitalStats); - _getFID(sendWebVitalStats); - _getLCP(sendWebVitalStats); + _onCLS(sendWebVitalStats); + _onINP(sendWebVitalStats); + _onLCP(sendWebVitalStats); } // GA4 setup diff --git a/tests/setup.js b/tests/setup.js index b3c21d31121..e4b945cc046 100644 --- a/tests/setup.js +++ b/tests/setup.js @@ -72,6 +72,11 @@ global.fetch = (input) => { ); }; +// See: https://github.com/jsdom/jsdom/issues/3309 +if (global.window && !global.window.performance.getEntriesByType) { + global.window.performance.getEntriesByType = jest.fn().mockReturnValue([]); +} + expect.extend(matchers); afterEach(() => { diff --git a/tests/unit/amo/test_tracking.js b/tests/unit/amo/test_tracking.js index 020d40caaac..dbd9242144e 100644 --- a/tests/unit/amo/test_tracking.js +++ b/tests/unit/amo/test_tracking.js @@ -214,41 +214,41 @@ describe(__filename, () => { }); it('should not send the web vitals when trackingSendWebVitals is false', () => { - const _getCLS = jest.fn(); - const _getFID = jest.fn(); - const _getLCP = jest.fn(); + const _onCLS = jest.fn(); + const _onINP = jest.fn(); + const _onLCP = jest.fn(); createTracking({ configOverrides: { trackingSendWebVitals: false }, paramOverrides: { - _getCLS, - _getFID, - _getLCP, + _onCLS, + _onINP, + _onLCP, }, }); - expect(_getCLS).not.toHaveBeenCalled(); - expect(_getFID).not.toHaveBeenCalled(); - expect(_getLCP).not.toHaveBeenCalled(); + expect(_onCLS).not.toHaveBeenCalled(); + expect(_onINP).not.toHaveBeenCalled(); + expect(_onLCP).not.toHaveBeenCalled(); }); it('should send the web vitals when trackingSendWebVitals is true', () => { - const _getCLS = jest.fn(); - const _getFID = jest.fn(); - const _getLCP = jest.fn(); + const _onCLS = jest.fn(); + const _onINP = jest.fn(); + const _onLCP = jest.fn(); createTracking({ configOverrides: { trackingSendWebVitals: true }, paramOverrides: { - _getCLS, - _getFID, - _getLCP, + _onCLS, + _onINP, + _onLCP, }, }); - expect(_getCLS).toHaveBeenCalledTimes(1); - expect(_getFID).toHaveBeenCalledTimes(1); - expect(_getLCP).toHaveBeenCalledTimes(1); + expect(_onCLS).toHaveBeenCalledTimes(1); + expect(_onINP).toHaveBeenCalledTimes(1); + expect(_onLCP).toHaveBeenCalledTimes(1); }); describe('sendEvent', () => { diff --git a/yarn.lock b/yarn.lock index af9696c0331..71689ef8ccd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11322,10 +11322,10 @@ web-streams-polyfill@^3.0.3: resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6" integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q== -web-vitals@3.5.2: - version "3.5.2" - resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-3.5.2.tgz#5bb58461bbc173c3f00c2ddff8bfe6e680999ca9" - integrity sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg== +web-vitals@5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-5.1.0.tgz#2f117e92c8c4eeb107cb163cbb482ac20d685ebd" + integrity sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg== webidl-conversions@^3.0.0: version "3.0.1"