Merge pull request #1119 from Shopify/add-check-to-performance

♻️ have `withTiming` return early if `performance.timing` does not ex…
Shopify · Oct 16, 2019 · 807204f · 807204f
2 parents ff768a1 + 78e273f
commit 807204f
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 43 deletions.
diff --git a/packages/performance/CHANGELOG.md b/packages/performance/CHANGELOG.md
@@ -7,6 +7,10 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## Unreleased -->
 
+### Fixed
+
+- `Performance` object constructor will now check if `PerformanceTiming` is supported. [[#1119](https://github.com/Shopify/quilt/pull/1119)]
+
 ## [1.2.1] - 2019-10-11
 
 ### Fixed

diff --git a/packages/performance/src/performance.ts b/packages/performance/src/performance.ts
@@ -31,6 +31,7 @@ export class Performance {
   readonly supportsObserver = hasGlobal('PerformanceObserver');
   readonly supportsMarks = hasGlobal('PerformanceMark');
   readonly supportsNavigationEntries = hasGlobal('PerformanceNavigationTiming');
+  readonly supportsTimingEntries = hasGlobal('PerformanceTiming');
   readonly supportsLongtaskEntries = hasGlobal('PerformanceLongTaskTiming');
   readonly supportsResourceEntries = hasGlobal('PerformanceResourceTiming');
   readonly supportsPaintEntries = hasGlobal('PerformancePaintTiming');
@@ -59,7 +60,10 @@ export class Performance {
 
     withNavigation(this.start.bind(this));
 
-    if (!this.supportsDetailedTime || !this.supportsNavigationEntries) {
+    if (
+      this.supportsTimingEntries &&
+      (!this.supportsDetailedTime || !this.supportsNavigationEntries)
+    ) {
       withTiming(
         ({responseStart, domContentLoadedEventStart, loadEventStart}) => {
           // window.performance.timing uses full timestamps, while

diff --git a/packages/react-performance/src/test/LifecycleEventListener.test.tsx b/packages/react-performance/src/test/LifecycleEventListener.test.tsx
@@ -3,13 +3,6 @@ import {mount} from '@shopify/react-testing';
 import {mockPerformance} from './utilities';
 import {LifecycleEventListener, PerformanceContext} from '..';
 
-jest.mock('@shopify/performance', () => {
-  return {
-    ...require.requireActual('@shopify/performance'),
-    Performance: jest.fn(),
-  };
-});
-
 describe('<LifecycleEventListener />', () => {
   it('sets up a event listener on the Performance context object', () => {
     const performance = mockPerformance();

diff --git a/packages/react-performance/src/test/NavigationListener.test.tsx b/packages/react-performance/src/test/NavigationListener.test.tsx
@@ -3,13 +3,6 @@ import {mount} from '@shopify/react-testing';
 import {mockPerformance} from './utilities';
 import {NavigationListener, PerformanceContext} from '..';
 
-jest.mock('@shopify/performance', () => {
-  return {
-    ...require.requireActual('@shopify/performance'),
-    Performance: jest.fn(),
-  };
-});
-
 describe('<NavigationListener />', () => {
   it('sets up a navigation listener on the Performance context object', () => {
     const performance = mockPerformance();

diff --git a/packages/react-performance/src/test/PerformanceMark.test.tsx b/packages/react-performance/src/test/PerformanceMark.test.tsx
@@ -3,13 +3,6 @@ import {mount} from '@shopify/react-testing';
 import {mockPerformance} from './utilities';
 import {PerformanceMark, PerformanceContext} from '..';
 
-jest.mock('@shopify/performance', () => {
-  return {
-    ...require.requireActual('@shopify/performance'),
-    Performance: jest.fn(),
-  };
-});
-
 describe('<PerformanceMark />', () => {
   it('calls performance.mark', () => {
     const performance = mockPerformance({mark: jest.fn()});

diff --git a/packages/react-performance/src/test/PerformanceReport.test.tsx b/packages/react-performance/src/test/PerformanceReport.test.tsx
@@ -7,13 +7,6 @@ import {Method, Header} from '@shopify/network';
 import {mockPerformance, randomConnection} from './utilities';
 import {PerformanceReport, PerformanceContext} from '..';
 
-jest.mock('@shopify/performance', () => {
-  return {
-    ...require.requireActual('@shopify/performance'),
-    Performance: jest.fn(),
-  };
-});
-
 describe('<PerformanceReport />', () => {
   beforeEach(() => {
     timer.mock();

diff --git a/packages/react-performance/src/test/performance-effect.server.test.tsx b/packages/react-performance/src/test/performance-effect.server.test.tsx
@@ -6,13 +6,6 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import {usePerformanceEffect, PerformanceEffectCallback} from '..';
 
-jest.mock('@shopify/performance', () => {
-  return {
-    ...require.requireActual('@shopify/performance'),
-    Performance: jest.fn(),
-  };
-});
-
 describe('usePerformanceEffect', () => {
   function TestComponent({callback}: {callback: PerformanceEffectCallback}) {
     usePerformanceEffect(callback);

diff --git a/packages/react-performance/src/test/performance-effect.test.tsx b/packages/react-performance/src/test/performance-effect.test.tsx
@@ -7,13 +7,6 @@ import {
   PerformanceContext,
 } from '..';
 
-jest.mock('@shopify/performance', () => {
-  return {
-    ...require.requireActual('@shopify/performance'),
-    Performance: jest.fn(),
-  };
-});
-
 describe('usePerformanceEffect', () => {
   function TestComponent({callback}: {callback: PerformanceEffectCallback}) {
     usePerformanceEffect(callback);