Tests: Resolve flaky rendering test (#833)

Introduce a beat-long delay to reduce test flakiness from a race condition between the initial `page.click` and the subsequent `page.evaluate` calls. For an example of the flakiness, this message was copied from a [CI failure on #430][]: ``` 1) [chrome] › rendering_tests.ts:68:1 › test reloads when tracked elements change due to failed form submission page.evaluate: Execution context was destroyed, most likely because of a navigation 88 | await page.click("#tracked-asset-change-form button") 89 | > 90 | const reason = await page.evaluate(() => localStorage.getItem("reason")) | ^ 91 | const unloaded = await page.evaluate(() => localStorage.getItem("unloaded")) 92 | 93 | assert.equal(pathname(page.url()), "/src/tests/fixtures/rendering.html") ``` Another occurrence can be cited from a [CI failure on #800][]: ``` 1) [chrome] › rendering_tests.ts:77:1 › test reloads when tracked elements change due to failed form submission page.evaluate: Execution context was destroyed, most likely because of a navigation 97 | await page.click("#tracked-asset-change-form button") 98 | > 99 | const reason = await page.evaluate(() => localStorage.getItem("reason")) | ^ 100 | const unloaded = await page.evaluate(() => localStorage.getItem("unloaded")) 101 | 102 | assert.equal(pathname(page.url()), "/src/tests/fixtures/rendering.html") ``` Troubleshooting this flakiness, uncovered a `console.error` message from the `rendering.html` test fixture: ``` rendering.html:1 An import map is added after module script load was triggered. ``` To resolve that issue, this commit also re-orders the `<head>` elements so that the `script[type="importmap"]` element is rendered before the `script[type="module"]`. [CI failure on #430]: https://github.com/hotwired/turbo/actions/runs/3797607273/jobs/6458693682#step:11:17 [CI failure on #800]: https://github.com/hotwired/turbo/actions/runs/3526641057/jobs/5914800548#step:11:16
hotwired · Dec 31, 2022 · a89d01e · a89d01e
1 parent 2f0d46f
commit a89d01e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/tests/fixtures/rendering.html b/src/tests/fixtures/rendering.html
@@ -5,6 +5,9 @@
     <title>Turbo</title>
     <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
     <script src="/src/tests/fixtures/test.js"></script>
+    <script type="importmap" nonce="123">
+      { "imports": { "turbo": "/dist/turbo.es2017-umd.js?123"} }
+    </script>
     <script type="module">
       const permanentVideoElementLoaded = new Promise(resolve => {
         addEventListener("DOMContentLoaded", () => {
@@ -21,9 +24,6 @@
         }
       })
     </script>
-    <script type="importmap" nonce="123">
-      { "imports": { "turbo": "/dist/turbo.es2017-umd.js?123"} }
-    </script>
     <style>
       .push-off-screen { margin-top: 1000px; }
     </style>

diff --git a/src/tests/functional/rendering_tests.ts b/src/tests/functional/rendering_tests.ts
@@ -67,6 +67,8 @@ test("test reloads when tracked elements change", async ({ page }) => {
 
 test("test reloads when tracked elements change due to failed form submission", async ({ page }) => {
   await page.click("#tracked-asset-change-form button")
+  await nextBeat()
+
   await page.evaluate(() => {
     window.addEventListener(
       "turbo:reload",