perf: wait for initial load in benchmarks (#390)

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 () {

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"]')
 

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"]')
 

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'] })
+  })
+}