From 8a4e4d658686f24bd50b561dd755f2a64980593a Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 10 Dec 2023 21:28:25 -0800
Subject: [PATCH] perf: wait for initial load in benchmarks (#390)

---
 test/benchmark/benchmark.js            | 21 +++++----------------
 test/benchmark/change-tab.benchmark.js |  4 ++--
 test/benchmark/search.benchmark.js     |  4 ++--
 test/benchmark/utils.js                | 23 +++++++++++++++++++++++
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/test/benchmark/benchmark.js b/test/benchmark/benchmark.js
index 6d41753..0d73a20 100644
--- a/test/benchmark/benchmark.js
+++ b/test/benchmark/benchmark.js
@@ -1,20 +1,9 @@
-function instrumentPickerLoading () {
-  const observer = new PerformanceObserver(entries => {
-    for (const { name, startTime, duration } of entries.getEntries()) {
-      if (name === 'initialLoad') {
-        // test to make sure the picker loaded with no errors
-        const hasErrors = document.querySelector('emoji-picker') && document.querySelector('emoji-picker')
-          .shadowRoot.querySelector('.message:not(.gone)')
-        if (hasErrors) {
-          console.error('picker is showing an error message')
-        } else {
-          performance.measure('benchmark-total', { start: startTime, duration })
-        }
-      }
-    }
-  })
+import { waitForPickerInitialLoad } from './utils.js'
 
-  observer.observe({ entryTypes: ['measure'] })
+function instrumentPickerLoading () {
+  waitForPickerInitialLoad().then(entry => {
+    performance.measure('benchmark-total', { start: entry.startTime, duration: entry.duration })
+  })
 }
 
 function useFakeEtag () {
diff --git a/test/benchmark/change-tab.benchmark.js b/test/benchmark/change-tab.benchmark.js
index be964ea..9a81206 100644
--- a/test/benchmark/change-tab.benchmark.js
+++ b/test/benchmark/change-tab.benchmark.js
@@ -1,10 +1,10 @@
 import Picker from './picker.js'
-import { waitForElementWithId, postRaf } from './utils.js'
+import { waitForElementWithId, postRaf, waitForPickerInitialLoad } from './utils.js'
 
 const picker = new Picker()
 document.body.appendChild(picker)
 
-await waitForElementWithId(picker.shadowRoot, 'emo-😀')
+await waitForPickerInitialLoad()
 await postRaf()
 const peopleTabButton = picker.shadowRoot.querySelector('[role="tab"][aria-label="People and body"]')
 
diff --git a/test/benchmark/search.benchmark.js b/test/benchmark/search.benchmark.js
index 32c85fa..aa064ea 100644
--- a/test/benchmark/search.benchmark.js
+++ b/test/benchmark/search.benchmark.js
@@ -1,10 +1,10 @@
 import Picker from './picker.js'
-import { waitForElementWithId, postRaf } from './utils.js'
+import { waitForElementWithId, postRaf, waitForPickerInitialLoad } from './utils.js'
 
 const picker = new Picker()
 document.body.appendChild(picker)
 
-await waitForElementWithId(picker.shadowRoot, 'emo-😀')
+await waitForPickerInitialLoad()
 await postRaf()
 const searchBox = picker.shadowRoot.querySelector('[role="combobox"]')
 
diff --git a/test/benchmark/utils.js b/test/benchmark/utils.js
index c0be8fc..0da6e12 100644
--- a/test/benchmark/utils.js
+++ b/test/benchmark/utils.js
@@ -6,3 +6,26 @@ export const waitForElementWithId = async (root, id) => {
     await raf()
   }
 }
+
+export const waitForPickerInitialLoad = () => {
+  return new Promise((resolve, reject) => {
+    const observer = new PerformanceObserver(entries => {
+      for (const entry of entries.getEntries()) {
+        if (entry.name === 'initialLoad') {
+          // test to make sure the picker loaded with no errors
+          const hasErrors = document.querySelector('emoji-picker') && document.querySelector('emoji-picker')
+            .shadowRoot.querySelector('.message:not(.gone)')
+          if (hasErrors) {
+            const err = new Error('picker is showing an error message')
+            console.error(err)
+            reject(err)
+          } else {
+            resolve(entry)
+          }
+          observer.disconnect()
+        }
+      }
+    })
+    observer.observe({ entryTypes: ['measure'] })
+  })
+}