qrcode: wait for metadata & tally to be loaded before returning from scan (#86854)

passerelle/apps/qrcode/static/qrcode/js/qrcode-reader.js

@@ -193,9 +193,9 @@ class QRCodeReader extends window.HTMLElement {
   async #startScan () {
     const codeReader = new window.ZXingBrowser.BrowserQRCodeReader()
     const videoElement = this.querySelector('.qrcode-reader--video')
-    await codeReader.decodeFromVideoDevice(undefined, videoElement, (result) => {
+    await codeReader.decodeFromVideoDevice(undefined, videoElement, async (result) => {
       if (result) {
-        this.#showResult(result.text)
+        await this.#showResult(result.text)
       }
     })
   }
@@ -209,7 +209,7 @@ class QRCodeReader extends window.HTMLElement {
     return !!navigator.mediaDevices
   }
 
-  #showResult (qrCodeContent) {
+  async #showResult (qrCodeContent) {
     this.#popup.classList.remove('error')
     this.#popup.classList.remove('closed')
 
@@ -234,6 +234,7 @@ class QRCodeReader extends window.HTMLElement {
     const data = decodeMimeLike(decoded)
     const certificateUUID = data.uuid
 
+
     delete data.uuid
 
     const validityStart = data.validity_start && new Date(parseFloat(data.validity_start) * 1000)
@@ -283,16 +284,17 @@ class QRCodeReader extends window.HTMLElement {
 
     this.#popupContent.append(dataElement.content)
 
-    if(this.getAttribute('metadata-url')) {
-      this.#showMetadata(metadataItems, certificateUUID)
-    }
-
-    if(this.getAttribute('tally-url')) {
+    await Promise.all([
+      this.#showMetadata(metadataItems, certificateUUID),
       this.#showTally(tallyStatus, certificateUUID)
-    }
+    ])
   }
 
   async #showMetadata(itemsElement, certificateUUID) {
+    if(this.getAttribute('metadata-url') === null) {
+      return
+    }
+
     const spinner = spinnerTemplate.cloneNode(true)
     itemsElement.appendChild(spinner.content)
 
@@ -340,6 +342,9 @@ class QRCodeReader extends window.HTMLElement {
   }
 
   async #showTally(statusElement, certificateUUID) {
+    if(this.getAttribute('tally-url') === null) {
+      return
+    }
     const spinner = spinnerTemplate.cloneNode(true)
     statusElement.appendChild(spinner.content)
 

tests/js/qrcode.test.js

@@ -250,16 +250,13 @@ const qrcodeReaderMetadataTest = qrcodeReaderTest.extend({
       let resolveLoadingEnded = undefined
       const loadingEnded = new Promise((resolve) => resolveLoadingEnded = resolve)
       fetch.mockImplementationOnce(async (url) => {
-        const observer = new MutationObserver((_, observer) => {
-          resolveLoadingEnded()
-          observer.disconnect()
-        })
-        observer.observe(reader.querySelector(".qrcode-reader--metadata-items"), { childList: true })
         return mockFetch(url)
       })
 
       await scan(qrCodeData)
-      await loadingEnded
+
+      // Wait for scan promises to finish
+      await new Promise((resolve) => setTimeout(resolve))
     }
 
     await use(loadMetadata)
@@ -354,18 +351,12 @@ const qrcodeReaderTallyTest = qrcodeReaderTest.extend({
       reader.setAttribute('tally-url', 'https://orson-welles.io')
 
       let resolveLoadingEnded = undefined
-      const loadingEnded = new Promise((resolve) => resolveLoadingEnded = resolve)
       fetch.mockImplementationOnce(async (url, {body}) => {
-        const observer = new MutationObserver((_, observer) => {
-          resolveLoadingEnded()
-          observer.disconnect()
-        })
-        observer.observe(reader.querySelector(".qrcode-reader--tally-status"), { childList: true })
         return mockFetch(url, JSON.parse(body))
       })
 
       await scan(qrCodeData)
-      await loadingEnded
+      await new Promise((resolve) => setTimeout(resolve))
     }
 
     await use(loadTally)