{"commit":{"subject":"Added profiling chart data tests","authorName":"Brian Vaughn","revision":"b25d996fc4d8d84afe00bbb852f7480ab4725fa6","shortRevision":"b25d996fc4","authorEmail":"bvaughn@fb.com","authoredAt":"2019-05-06T13:37:06-07:00"},"body":"","parents":["d86bc1020ec6122a0a37685f57ab2c7a88be71d8"],"patch":"diff --git a\/src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap b\/src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap\nnew file mode 100644\nindex 0000000000..36e4c8cf90\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap\n@@ -0,0 +1,333 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 0: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 14,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 14,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Memo(Child)\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Memo(Child)\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 0: FlamegraphChartData 1`] = `\n+Object {\n+ \"baseDuration\": 14,\n+ \"depth\": 2,\n+ \"idToDepthMap\": Map {\n+ 2 => 1,\n+ 4 => 2,\n+ 3 => 2,\n+ },\n+ \"maxSelfDuration\": 10,\n+ \"rows\": Array [\n+ Array [\n+ Object {\n+ \"actualDuration\": 14,\n+ \"didRender\": true,\n+ \"id\": 2,\n+ \"label\": \"Parent (10.0ms of 14.0ms)\",\n+ \"name\": \"Parent\",\n+ \"offset\": 0,\n+ \"selfDuration\": 10,\n+ \"treeBaseDuration\": 14,\n+ },\n+ ],\n+ Array [\n+ Object {\n+ \"actualDuration\": 2,\n+ \"didRender\": true,\n+ \"id\": 4,\n+ \"label\": \"Memo(Child) key=\\\\\"second\\\\\" (2.0ms of 2.0ms)\",\n+ \"name\": \"Memo(Child)\",\n+ \"offset\": 12,\n+ \"selfDuration\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ Object {\n+ \"actualDuration\": 2,\n+ \"didRender\": true,\n+ \"id\": 3,\n+ \"label\": \"Memo(Child) key=\\\\\"first\\\\\" (2.0ms of 2.0ms)\",\n+ \"name\": \"Memo(Child)\",\n+ \"offset\": 10,\n+ \"selfDuration\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ ],\n+ ],\n+}\n+`;\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 1: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 14,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 14,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Memo(Child)\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Memo(Child)\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts flamegraph chart should contain valid data: 1: FlamegraphChartData 1`] = `\n+Object {\n+ \"baseDuration\": 14,\n+ \"depth\": 2,\n+ \"idToDepthMap\": Map {\n+ 2 => 1,\n+ 4 => 2,\n+ 3 => 2,\n+ },\n+ \"maxSelfDuration\": 10,\n+ \"rows\": Array [\n+ Array [\n+ Object {\n+ \"actualDuration\": 10,\n+ \"didRender\": true,\n+ \"id\": 2,\n+ \"label\": \"Parent (10.0ms of 10.0ms)\",\n+ \"name\": \"Parent\",\n+ \"offset\": 0,\n+ \"selfDuration\": 10,\n+ \"treeBaseDuration\": 14,\n+ },\n+ ],\n+ Array [\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": false,\n+ \"id\": 4,\n+ \"label\": \"Memo(Child) key=\\\\\"second\\\\\"\",\n+ \"name\": \"Memo(Child)\",\n+ \"offset\": 12,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 2,\n+ },\n+ Object {\n+ \"actualDuration\": 0,\n+ \"didRender\": false,\n+ \"id\": 3,\n+ \"label\": \"Memo(Child) key=\\\\\"first\\\\\"\",\n+ \"name\": \"Memo(Child)\",\n+ \"offset\": 10,\n+ \"selfDuration\": 0,\n+ \"treeBaseDuration\": 2,\n+ },\n+ ],\n+ ],\n+}\n+`;\n+\n+exports[`profiling charts interactions should contain valid data: Interactions 1`] = `\n+Object {\n+ \"lastInteractionTime\": 24,\n+ \"maxCommitDuration\": 14,\n+}\n+`;\n+\n+exports[`profiling charts interactions should contain valid data: Interactions 2`] = `\n+Object {\n+ \"lastInteractionTime\": 24,\n+ \"maxCommitDuration\": 14,\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 14,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 14,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Memo(Child)\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Memo(Child)\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 0: RankedChartData 1`] = `\n+Object {\n+ \"maxValue\": 10,\n+ \"nodes\": Array [\n+ Object {\n+ \"id\": 2,\n+ \"label\": \"Parent (10.0ms)\",\n+ \"name\": \"Parent\",\n+ \"value\": 10,\n+ },\n+ Object {\n+ \"id\": 3,\n+ \"label\": \"Memo(Child) key=\\\\\"first\\\\\" (2.0ms)\",\n+ \"name\": \"Memo(Child)\",\n+ \"value\": 2,\n+ },\n+ Object {\n+ \"id\": 4,\n+ \"label\": \"Memo(Child) key=\\\\\"second\\\\\" (2.0ms)\",\n+ \"name\": \"Memo(Child)\",\n+ \"value\": 2,\n+ },\n+ ],\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 1: CommitTree 1`] = `\n+Object {\n+ \"nodes\": Map {\n+ 1 => Object {\n+ \"children\": Array [\n+ 2,\n+ ],\n+ \"displayName\": null,\n+ \"id\": 1,\n+ \"key\": null,\n+ \"parentID\": 0,\n+ \"treeBaseDuration\": 14,\n+ },\n+ 2 => Object {\n+ \"children\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"displayName\": \"Parent\",\n+ \"id\": 2,\n+ \"key\": null,\n+ \"parentID\": 1,\n+ \"treeBaseDuration\": 14,\n+ },\n+ 3 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Memo(Child)\",\n+ \"id\": 3,\n+ \"key\": \"first\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ 4 => Object {\n+ \"children\": Array [],\n+ \"displayName\": \"Memo(Child)\",\n+ \"id\": 4,\n+ \"key\": \"second\",\n+ \"parentID\": 2,\n+ \"treeBaseDuration\": 2,\n+ },\n+ },\n+ \"rootID\": 1,\n+}\n+`;\n+\n+exports[`profiling charts ranked chart should contain valid data: 1: RankedChartData 1`] = `\n+Object {\n+ \"maxValue\": 10,\n+ \"nodes\": Array [\n+ Object {\n+ \"id\": 2,\n+ \"label\": \"Parent (10.0ms)\",\n+ \"name\": \"Parent\",\n+ \"value\": 10,\n+ },\n+ ],\n+}\n+`;\ndiff --git a\/src\/__tests__\/profiling-test.js b\/src\/__tests__\/profiling-test.js\nindex 6c49272847..39dd595e49 100644\n--- a\/src\/__tests__\/profiling-test.js\n+++ b\/src\/__tests__\/profiling-test.js\n@@ -1,13 +1,11 @@\n \/\/ @flow\n \n-import type React from 'react';\n-import type ReactDOM from 'react-dom';\n import typeof ReactTestRenderer from 'react-test-renderer';\n import type Store from 'src\/devtools\/store';\n \n describe('profiling', () => {\n- let React: React;\n- let ReactDOM: ReactDOM;\n+ let React;\n+ let ReactDOM;\n let Scheduler;\n let SchedulerTracing;\n let TestRenderer: ReactTestRenderer;\ndiff --git a\/src\/__tests__\/profilingCharts-test.js b\/src\/__tests__\/profilingCharts-test.js\nnew file mode 100644\nindex 0000000000..3e2613b5af\n--- \/dev\/null\n+++ b\/src\/__tests__\/profilingCharts-test.js\n@@ -0,0 +1,292 @@\n+\/\/ @flow\n+\n+import typeof TestRendererType from 'react-test-renderer';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('profiling charts', () => {\n+ let React;\n+ let ReactDOM;\n+ let Scheduler;\n+ let SchedulerTracing;\n+ let TestRenderer: TestRendererType;\n+ let store: Store;\n+ let utils;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+ SchedulerTracing = require('scheduler\/tracing');\n+ TestRenderer = utils.requireTestRenderer();\n+ });\n+\n+ describe('flamegraph chart', () => {\n+ it('should contain valid data', async done => {\n+ const Parent = ({ count }) => {\n+ Scheduler.advanceTime(10);\n+ return (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+\n+ \/\/ Memoize children to verify that chart doesn't include in the update.\n+ const Child = React.memo(function Child() {\n+ Scheduler.advanceTime(2);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n+ ReactDOM.render(, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(, container)\n+ )\n+ );\n+ utils.act(() => store.stopProfiling());\n+\n+ let suspenseResolved = false;\n+\n+ function Suspender({ commitIndex, rendererID, rootID }) {\n+ const profilingSummary = store.profilingCache.ProfilingSummary.read({\n+ rendererID,\n+ rootID,\n+ });\n+ const commitDetails = store.profilingCache.CommitDetails.read({\n+ commitIndex,\n+ rendererID,\n+ rootID,\n+ });\n+ suspenseResolved = true;\n+ const commitTree = store.profilingCache.getCommitTree({\n+ commitIndex,\n+ profilingSummary,\n+ });\n+ const chartData = store.profilingCache.getFlamegraphChartData({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ });\n+ expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n+ expect(chartData).toMatchSnapshot(\n+ `${commitIndex}: FlamegraphChartData`\n+ );\n+ return null;\n+ }\n+\n+ const rendererID = utils.getRendererID();\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ suspenseResolved = false;\n+\n+ await utils.actSuspense(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ <\/React.Suspense>\n+ ),\n+ 3\n+ );\n+\n+ expect(suspenseResolved).toBe(true);\n+ }\n+\n+ expect(suspenseResolved).toBe(true);\n+\n+ done();\n+ });\n+ });\n+\n+ describe('ranked chart', () => {\n+ it('should contain valid data', async done => {\n+ const Parent = ({ count }) => {\n+ Scheduler.advanceTime(10);\n+ return (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+\n+ \/\/ Memoize children to verify that chart doesn't include in the update.\n+ const Child = React.memo(function Child() {\n+ Scheduler.advanceTime(2);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n+ ReactDOM.render(, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(, container)\n+ )\n+ );\n+ utils.act(() => store.stopProfiling());\n+\n+ let suspenseResolved = false;\n+\n+ function Suspender({ commitIndex, rendererID, rootID }) {\n+ const profilingSummary = store.profilingCache.ProfilingSummary.read({\n+ rendererID,\n+ rootID,\n+ });\n+ const commitDetails = store.profilingCache.CommitDetails.read({\n+ commitIndex,\n+ rendererID,\n+ rootID,\n+ });\n+ suspenseResolved = true;\n+ const commitTree = store.profilingCache.getCommitTree({\n+ commitIndex,\n+ profilingSummary,\n+ });\n+ const chartData = store.profilingCache.getRankedChartData({\n+ commitDetails,\n+ commitIndex,\n+ commitTree,\n+ });\n+ expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);\n+ expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);\n+ return null;\n+ }\n+\n+ const rendererID = utils.getRendererID();\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ suspenseResolved = false;\n+\n+ await utils.actSuspense(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ <\/React.Suspense>\n+ ),\n+ 3\n+ );\n+\n+ expect(suspenseResolved).toBe(true);\n+ }\n+\n+ done();\n+ });\n+ });\n+\n+ describe('interactions', () => {\n+ it('should contain valid data', async done => {\n+ const Parent = ({ count }) => {\n+ Scheduler.advanceTime(10);\n+ return (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ };\n+\n+ \/\/ Memoize children to verify that chart doesn't include in the update.\n+ const Child = React.memo(function Child() {\n+ Scheduler.advanceTime(2);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() => store.startProfiling());\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>\n+ ReactDOM.render(, container)\n+ )\n+ );\n+ utils.act(() =>\n+ SchedulerTracing.unstable_trace(\n+ 'update',\n+ Scheduler.unstable_now(),\n+ () => ReactDOM.render(, container)\n+ )\n+ );\n+ utils.act(() => store.stopProfiling());\n+\n+ let suspenseResolved = false;\n+\n+ function Suspender({ commitIndex, rendererID, rootID }) {\n+ const profilingSummary = store.profilingCache.ProfilingSummary.read({\n+ rendererID,\n+ rootID,\n+ });\n+ const interactions = store.profilingCache.Interactions.read({\n+ rendererID,\n+ rootID,\n+ });\n+ suspenseResolved = true;\n+ const chartData = store.profilingCache.getInteractionsChartData({\n+ interactions,\n+ profilingSummary,\n+ });\n+ expect(chartData).toMatchSnapshot('Interactions');\n+ return null;\n+ }\n+\n+ const rendererID = utils.getRendererID();\n+ const rootID = store.roots[0];\n+\n+ for (let commitIndex = 0; commitIndex < 2; commitIndex++) {\n+ suspenseResolved = false;\n+\n+ await utils.actSuspense(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ <\/React.Suspense>\n+ ),\n+ 3\n+ );\n+\n+ expect(suspenseResolved).toBe(true);\n+ }\n+\n+ done();\n+ });\n+ });\n+});\ndiff --git a\/src\/__tests__\/utils.js b\/src\/__tests__\/utils.js\nindex 1e3acc55ac..89c7ffd6b1 100644\n--- a\/src\/__tests__\/utils.js\n+++ b\/src\/__tests__\/utils.js\n@@ -12,7 +12,10 @@ export function act(callback: Function): void {\n jest.runAllTimers();\n }\n \n-export async function actSuspense(callback: Function): Promise {\n+export async function actSuspense(\n+ callback: Function,\n+ numTimesToFlush: number = 1\n+): Promise {\n const TestUtils = require('react-dom\/test-utils');\n const Scheduler = require('scheduler');\n \n@@ -24,8 +27,16 @@ export async function actSuspense(callback: Function): Promise {\n jest.runAllTimers();\n });\n \n- \/\/ Re-render after resolved promises\n- Scheduler.flushAll();\n+ \/\/ Run cascading microtasks and flush scheduled React work.\n+ \/\/ Components that suspend multiple times will need to do this once per suspend operation.\n+ \/\/ HACK Ideally the mock scheduler would provide an API to ask if there was outstanding work.\n+ while (--numTimesToFlush >= 0) {\n+ \/\/ $FlowFixMe Flow doens't know about \"await act()\" yet\n+ await TestUtils.act(async () => {\n+ jest.runAllTimers();\n+ Scheduler.flushAll();\n+ });\n+ }\n }\n \n export function beforeEachProfiling(): void {\n","files":[{"path":"src\/__tests__\/__snapshots__\/profilingCharts-test.js.snap","status":"A"},{"path":"src\/__tests__\/profiling-test.js","status":"M"},{"path":"src\/__tests__\/profilingCharts-test.js","status":"A"},{"path":"src\/__tests__\/utils.js","status":"M"}]}

dillon1000/react

Files changed