test(react): Profiler component

Author: AbhiPrasad

packages/react/package.json

@@ -21,17 +21,20 @@
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^10.0.4",
     "@types/react": "^16.9.35",
+    "@types/react-test-renderer": "^16.9.2",
     "jest": "^24.7.1",
     "npm-run-all": "^4.1.2",
     "prettier": "^1.17.0",
     "prettier-check": "^2.0.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-test-renderer": "^16.13.1",
     "rimraf": "^2.6.3",
     "rollup": "^1.10.1",
     "rollup-plugin-commonjs": "^9.3.4",

packages/react/src/index.ts

@@ -1 +1,3 @@
-export * from '@sentry/browser';
+import * as Sentry from '@sentry/browser';
+
+export { Sentry };

packages/react/src/profiler.tsx

@@ -39,32 +39,36 @@ const getInitActivity = (componentDisplayName: string, timeout = DEFAULT_DURATIO
 export const withProfiler = <P extends object>(WrappedComponent: React.ComponentType<P>, timeout?: number) => {
   const componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  return class WithProfiler extends React.Component<Omit<P, keyof InjectedProps>>  {
+  return class extends React.Component<Omit<P, keyof InjectedProps>, { activity: number | null }> {
     public static displayName: string = `profiler(${componentDisplayName})`;
 
-    public activity: number | null = getInitActivity(componentDisplayName, timeout);
+    public constructor(props: P) {
+      super(props);
+
+      this.state = {
+        activity: getInitActivity(componentDisplayName, timeout),
+      };
+    }
 
-    // tslint:disable-next-line: completed-docs
     public componentWillUnmount(): void {
       this.finishProfile();
     }
 
     public finishProfile = () => {
-      if(!this.activity) {
+      if (!this.state.activity) {
         return;
       }
 
       const tracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
       if (tracingIntegration !== null) {
         // tslint:disable-next-line:no-unsafe-any
-        (tracingIntegration as any).constructor.popActivity(this.activity);
-        this.activity = null
+        (tracingIntegration as any).constructor.popActivity(this.state.activity);
+        this.setState({ activity: null });
       }
-    }
+    };
 
-    // tslint:disable-next-line: completed-docs
     public render(): React.ReactNode {
-      return <WrappedComponent {...this.props as P} finishProfile={this.finishProfile} />;
+      return <WrappedComponent {...this.props as P} />;
     }
   };
 };

packages/react/test/profiler.test.tsx

@@ -1,15 +1,74 @@
-import { render } from '@testing-library/react';
 import * as React from 'react';
+import { create, ReactTestInstance } from 'react-test-renderer';
 
 import { withProfiler } from '../src/profiler';
 
+const mockPushActivity = jest.fn().mockReturnValue(1);
+const mockPopActivity = jest.fn();
+
+jest.mock('@sentry/browser', () => ({
+  getCurrentHub: () => ({
+    getIntegration: (_: string) => {
+      class MockIntegration {
+        public constructor(name: string) {
+          this.name = name;
+        }
+        public name: string;
+        public setupOnce: () => void = jest.fn();
+        public static pushActivity: () => void = mockPushActivity;
+        public static popActivity: () => void = mockPopActivity;
+      }
+
+      return new MockIntegration('test');
+    },
+  }),
+}));
+
 describe('withProfiler', () => {
-  it("sets displayName properly", () => {
-     // tslint:disable-next-line: variable-name
-     const HelloWorld = () => <h1>Hello World</h1>;
-
-     // tslint:disable-next-line: variable-name
-     const ProfiledComponent = withProfiler(HelloWorld);
-     expect(ProfiledComponent.displayName).toBe("profiler(HelloWorld)")
-  })
+  it('sets displayName properly', () => {
+    const TestComponent = () => <h1>Hello World</h1>;
+
+    const ProfiledComponent = withProfiler(TestComponent);
+    expect(ProfiledComponent.displayName).toBe('profiler(TestComponent)');
+  });
+
+  describe('Tracing Integration', () => {
+    beforeEach(() => {
+      mockPushActivity.mockClear();
+      mockPopActivity.mockClear();
+    });
+
+    it('is called with pushActivity() when mounted', () => {
+      const ProfiledComponent = withProfiler(() => <h1>Hello World</h1>);
+
+      expect(mockPushActivity).toHaveBeenCalledTimes(0);
+      create(<ProfiledComponent />);
+      expect(mockPushActivity).toHaveBeenCalledTimes(1);
+    });
+
+    it('is called with popActivity() when unmounted', () => {
+      const ProfiledComponent = withProfiler(() => <h1>Hello World</h1>);
+
+      expect(mockPopActivity).toHaveBeenCalledTimes(0);
+
+      const profiler = create(<ProfiledComponent />);
+      profiler.unmount();
+
+      expect(mockPopActivity).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls finishProfile() when unmounting', () => {
+      const ProfiledComponent = withProfiler(() => <h1>Hello World</h1>);
+
+      const mockFinishProfile = jest.fn();
+      const profiler = create(<ProfiledComponent />);
+
+      const instance = profiler.getInstance() as ReactTestInstance & { finishProfile(): void };
+      instance.finishProfile = mockFinishProfile;
+
+      expect(mockFinishProfile).toHaveBeenCalledTimes(0);
+      profiler.unmount();
+      expect(mockFinishProfile).toHaveBeenCalledTimes(1);
+    });
+  });
 });

packages/react/tslint.json

@@ -4,6 +4,8 @@
     "no-implicit-dependencies": [
       true,
       "dev"
-    ]
+    ],
+    "variable-name": false,
+    "completed-docs": false
   }
 }

yarn.lock

@@ -1445,6 +1445,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-test-renderer@^16.9.2":
+  version "16.9.2"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.2.tgz#e1c408831e8183e5ad748fdece02214a7c2ab6c5"
+  integrity sha512-4eJr1JFLIAlWhzDkBCkhrOIWOvOxcCAfQh+jiKg7l/nNZcCIL2MHl2dZhogIFKyHzedVWHaVP1Yydq/Ruu4agw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.35":
   version "16.9.35"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.35.tgz#a0830d172e8aadd9bd41709ba2281a3124bbd368"
@@ -1779,11 +1786,32 @@ [email protected]:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
 
-agent-base@4, agent-base@5, agent-base@6, agent-base@^4.3.0, agent-base@~4.2.0:
+agent-base@4, agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
+  dependencies:
+    es6-promisify "^5.0.0"
+
+agent-base@5:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
   integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
 
+agent-base@6:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.0.tgz#5d0101f19bbfaed39980b22ae866de153b93f09a"
+  integrity sha512-j1Q7cSCqN+AwrmDd+pzgqc0/NpC655x2bUf5ZjRIO77DcNBFmh+OgRNzF6OKdCC9RSCb19fGd99+bhXFdkRNqw==
+  dependencies:
+    debug "4"
+
+agent-base@~4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
+  integrity sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==
+  dependencies:
+    es6-promisify "^5.0.0"
+
 agentkeepalive@^3.4.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-3.5.2.tgz#a113924dd3fa24a0bc3b78108c450c2abee00f67"
@@ -4501,6 +4529,18 @@ es-to-primitive@^1.1.1, es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es6-promise@^4.0.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
+es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
+  dependencies:
+    es6-promise "^4.0.3"
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -9288,7 +9328,7 @@ react-dom@^16.0.0:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-react-is@^16.12.0, react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9298,6 +9338,16 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
+react-test-renderer@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.1.tgz#de25ea358d9012606de51e012d9742e7f0deabc1"
+  integrity sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.19.1"
+
 react@^16.0.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"