Add a scenario for measuring navigating between components

pranavkm · pranavkm · commit b99e5dd8de02 · 2020-03-05T17:08:03.000-08:00
diff --git a/src/Components/benchmarkapps/Wasm.Performance/TestApp/Pages/OrgChart.razor b/src/Components/benchmarkapps/Wasm.Performance/TestApp/Pages/OrgChart.razor
@@ -17,8 +17,8 @@
 
 @code
 {
-    int depth = 2;
-    int subs = 5;
+    int depth = 1;
+    int subs = 3;
     bool show;
 
     protected override void OnAfterRender(bool firstRender)
@@ -35,4 +35,4 @@
     {
         show = true;
     }
-}
+}
diff --git a/src/Components/benchmarkapps/Wasm.Performance/TestApp/Pages/TimerComponent.razor b/src/Components/benchmarkapps/Wasm.Performance/TestApp/Pages/TimerComponent.razor
@@ -0,0 +1,38 @@
+@page "/timer"
+@inject IJSRuntime JSRuntime
+@using System.Threading
+@implements IDisposable
+
+<h1>Timer component</h1>
+<div style="width: 100px; height: 100px; background-color: rgb(@red, @green, @blue))">
+Hello world
+</div>
+
+@code
+{
+    Random random = new Random();
+    Timer timer;
+    int red = 128;
+    int green = 128;
+    int blue = 128;
+
+    protected override void OnInitialized()
+    {
+        timer = new Timer(UpdateColor, null, 300, 300);
+    }
+
+    void UpdateColor(object state)
+    {
+        InvokeAsync(() =>
+        {
+            red = random.Next(0, 256);
+            green = random.Next(0, 256);
+            blue = random.Next(0, 256);
+            StateHasChanged();
+            BenchmarkEvent.Send(JSRuntime, "Finished updating color");
+
+        });
+    }
+
+    public void Dispose() => timer.Dispose();
+}
diff --git a/src/Components/benchmarkapps/Wasm.Performance/TestApp/Shared/MainLayout.razor b/src/Components/benchmarkapps/Wasm.Performance/TestApp/Shared/MainLayout.razor
@@ -5,9 +5,10 @@
 <a href="">Home</a> |
 <a href="renderlist">RenderList</a> |
 <a href="json">JSON</a> |
-<a href="orgchart">OrgChart</a>
+<a href="orgchart">OrgChart</a> |
+<a href="timer">Timer</a>
 
-<hr/>
+<hr />
 
 <div>
     @Body
diff --git a/src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/benchmarks/index.js b/src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/benchmarks/index.js
@@ -4,6 +4,7 @@ import './appStartup.js';
 import './renderList.js';
 import './jsonHandling.js';
 import './orgChart.js';
+import './navigation.js';
 import { getBlazorDownloadSize } from './blazorDownloadSize.js';
 
 new HtmlUI('E2E Performance', '#display');
diff --git a/src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/benchmarks/lib/minibench/minibench.ui.js b/src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/benchmarks/lib/minibench/minibench.ui.js
@@ -175,7 +175,7 @@ class HtmlUI {
       true
     );
     this.runButton.style.display = areAllIdle ? 'block' : 'none';
-    this.stopButton.style.display = areAllIdle ? 'none' : 'block';;
+    this.stopButton.style.display = areAllIdle ? 'none' : 'block';
   }
 
   get globalRunOptions() {
diff --git a/src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/benchmarks/navigation.js b/src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/benchmarks/navigation.js
@@ -0,0 +1,40 @@
+import { group, benchmark, setup, teardown } from './lib/minibench/minibench.js';
+import { BlazorApp } from './util/BlazorApp.js';
+import { receiveEvent } from './util/BenchmarkEvents.js';
+
+group('Navigation', () => {
+  let app;
+
+  setup(async () => {
+    app = new BlazorApp();
+    await app.start();
+  });
+
+  teardown(() => app.dispose());
+
+  // measures time to navigate between rendered components with different UI, use timers, implement IDisposables etc
+  benchmark('Time to navigate', () =>
+    benchmarkNavigation(app), {
+    descriptor: {
+      name: 'blazorwasm/navigation',
+      description: 'Navigation - Time in ms'
+    }
+  });
+});
+
+async function benchmarkNavigation(app) {
+  const appDocument = app.window.document;
+  app.navigateTo('renderList');
+  let nextCompletion = receiveEvent('Finished rendering list');
+  appDocument.querySelector('#show-list').click();
+  await nextCompletion;
+
+  app.navigateTo('orgChart');
+  nextCompletion = receiveEvent('Finished OrgChart rendering');
+  appDocument.querySelector('#show').click();
+  await nextCompletion;
+
+  nextCompletion = receiveEvent('Finished updating color');
+  app.navigateTo('timer');
+  await nextCompletion;
+}
diff --git a/src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/index.html b/src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/index.html
@@ -7,11 +7,9 @@
     <link href="benchmarks/lib/minibench/style.css" rel="stylesheet" />
 </head>
 <body style="overflow: scroll;">
-    <div class="container" id="display"></div>
-    <p class="container px-3">
+    <div class="container" id="display">
         <a href="blazor-frame.html">View benchmark app ⮕</a>
-    </p>
-
+    </div>
     <script type="module" src="benchmarks/index.js"></script>
 </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -17,8 +17,8 @@`
`17`	`17`
`18`	`18`	`@code`
`19`	`19`	`{`
`20`		`- int depth = 2;`
`21`		`- int subs = 5;`
	`20`	`+ int depth = 1;`
	`21`	`+ int subs = 3;`
`22`	`22`	`bool show;`
`23`	`23`
`24`	`24`	`protected override void OnAfterRender(bool firstRender)`
`@@ -35,4 +35,4 @@`
`35`	`35`	`{`
`36`	`36`	`show = true;`
`37`	`37`	`}`
`38`		`-}`
	`38`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -175,7 +175,7 @@ class HtmlUI {`
`175`	`175`	`true`
`176`	`176`	`);`
`177`	`177`	`this.runButton.style.display = areAllIdle ? 'block' : 'none';`
`178`		`- this.stopButton.style.display = areAllIdle ? 'none' : 'block';;`
	`178`	`+ this.stopButton.style.display = areAllIdle ? 'none' : 'block';`
`179`	`179`	`}`
`180`	`180`
`181`	`181`	`get globalRunOptions() {`