♻️ have withTiming return early if performance.timing does not ex…

…ist.
Shopify · Oct 15, 2019 · 1550544 · 1550544
1 parent d979960
commit 1550544
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 45 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
+
+- `withTiming` used in `Performance` object constructor will now check if `performance.timing` exist. This is mostly to reduce error encounter during test. [[#1119](https://github.com/Shopify/quilt/pull/1119)]
+
 ## [1.2.1] - 2019-10-11
 
 ### Fixed

diff --git a/packages/performance/src/utilities.ts b/packages/performance/src/utilities.ts
@@ -89,7 +89,11 @@ export function withNavigation(
 export function withTiming(
   handler: (timing: typeof performance.timing) => void,
 ) {
-  if (typeof document === 'undefined' || typeof performance === 'undefined') {
+  if (
+    typeof document === 'undefined' ||
+    typeof performance === 'undefined' ||
+    typeof performance.timing === 'undefined'
+  ) {
     return;
   }
 

diff --git a/packages/react-performance/src/context.ts b/packages/react-performance/src/context.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Performance} from '@shopify/performance';
 
-export const PerformanceContext = React.createContext<Performance | null>(
-  typeof window === 'undefined' ? null : new Performance(),
+export const PerformanceContext = React.createContext<Performance | undefined>(
+  typeof window === 'undefined' ? undefined : new Performance(),
 );
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);