From 2c7620654606dcd51ecd57840cf78c3b04512d84 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@users.noreply.github.com>
Date: Sat, 23 Oct 2021 18:00:23 -0500
Subject: [PATCH] test: improve observer tests

---
 tests/platform/mutation-observer/index.html       | 15 +++++++++++++++
 .../mutation-observer/mutation-observer.spec.ts   |  4 ++++
 tests/platform/resize-observer/index.html         |  2 +-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/tests/platform/mutation-observer/index.html b/tests/platform/mutation-observer/index.html
index 7048bd63..585a11a3 100644
--- a/tests/platform/mutation-observer/index.html
+++ b/tests/platform/mutation-observer/index.html
@@ -106,21 +106,34 @@ <h1>MutationObserver</h1>
                 targetNode.textContent = '';
               }
             });
+
+            document.body.className = 'completed';
           })();
         </script>
         <script>
           (function () {
+            let step = 0;
+            function nextStep() {
+              step++;
+              const elm = document.getElementById('testMutationObserver');
+              elm.classList.add('step' + step);
+              const testStep = document.getElementById('testStep');
+              testStep.textContent = 'step' + step;
+            }
+
             const targetNode = document.getElementById('target');
             const buttonAttr = document.getElementById('buttonAttr');
 
             buttonAttr.addEventListener('click', () => {
               targetNode.setAttribute('mutate', rand());
+              nextStep();
             });
 
             const buttonChildList = document.getElementById('buttonChildList');
             buttonChildList.addEventListener('click', () => {
               targetNode.textContent = '';
               targetNode.appendChild(document.createTextNode(rand()));
+              nextStep();
             });
 
             function rand() {
@@ -131,6 +144,8 @@ <h1>MutationObserver</h1>
       </li>
     </ul>
 
+    <div id="testStep"></div>
+
     <p><a href="/">All Tests</a></p>
   </body>
 </html>
diff --git a/tests/platform/mutation-observer/mutation-observer.spec.ts b/tests/platform/mutation-observer/mutation-observer.spec.ts
index 046f6592..73435a38 100644
--- a/tests/platform/mutation-observer/mutation-observer.spec.ts
+++ b/tests/platform/mutation-observer/mutation-observer.spec.ts
@@ -3,6 +3,8 @@ import { test, expect } from '@playwright/test';
 test('mutation-observer', async ({ page }) => {
   await page.goto('/platform/mutation-observer/');
 
+  await page.waitForSelector('.completed');
+
   const buttonObserve = page.locator('#buttonObserve');
   const buttonAttr = page.locator('#buttonAttr');
   const buttonChildList = page.locator('#buttonChildList');
@@ -18,9 +20,11 @@ test('mutation-observer', async ({ page }) => {
   await buttonObserve.click();
 
   await buttonAttr.click();
+  await page.waitForSelector('.step1');
   await expect(testMutationObserver).toHaveText('attributes');
 
   await buttonChildList.click();
+  await page.waitForSelector('.step2');
   await expect(testMutationObserver).toHaveText('childList');
 
   await buttonObserve.click();
diff --git a/tests/platform/resize-observer/index.html b/tests/platform/resize-observer/index.html
index 61eba7b3..a27a26d9 100644
--- a/tests/platform/resize-observer/index.html
+++ b/tests/platform/resize-observer/index.html
@@ -121,7 +121,7 @@ <h1>ResizeObserver</h1>
               nextStep();
             });
 
-            document.body.className = 'completed'
+            document.body.className = 'completed';
           })();
         </script>
       </li>