Adding stimulus breaks a test...why?

[tpaulshippy]

Can someone help me understand why adding this block above the </head> tag of src/tests/fixtures/loading.html breaks a test?

    <script type="module">
      import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
    </script>

Test that breaks:

yarn test:browser -g "reloading a frame reloads the content"

The same line exists in src/tests/fixtures/page_refresh.html so I'm not sure why it works there but not in loading.html

[4lllex]

There is a bit of a race condition at readEventLogs:

turbo/src/tests/functional/loading_tests.js

Lines 15 to 18 in 3163a06

	test.beforeEach(async ({ page }) => {
	await page.goto("/src/tests/fixtures/loading.html")
	await readEventLogs(page)
	})

With some logging:

diff --git a/src/tests/fixtures/test.js b/src/tests/fixtures/test.js
index 0501e2e..b3fdc5b 100644
--- a/src/tests/fixtures/test.js
+++ b/src/tests/fixtures/test.js
@@ -33,6 +33,7 @@
   }
 
   function eventListener(event) {
+    console.log(event.type)
     const skipped = document.documentElement.getAttribute("data-skip-event-details") || ""
 
     window.eventLogs.push([
diff --git a/src/tests/functional/loading_tests.js b/src/tests/functional/loading_tests.js
index 4390dfd..15ba185 100644
--- a/src/tests/functional/loading_tests.js
+++ b/src/tests/functional/loading_tests.js
@@ -14,6 +14,7 @@ import {
 
 test.beforeEach(async ({ page }) => {
   await page.goto("/src/tests/fixtures/loading.html")
+  await page.evaluate(() => console.log("readevents"))
   await readEventLogs(page)
 })

You can see readEventLogs is happening in the middle of all the turbo frame events. As I understand, this call to readEventLogs is meant to clear window.eventLogs which just keeps track of all the turbo events that happen on the page:

turbo:before-fetch-request
turbo:load
turbo:before-fetch-response
turbo:before-frame-render
readevents
turbo:frame-render        //  only these two events are left in the log
turbo:frame-load          //

when you try to import stimulus:

turbo:before-fetch-request
turbo:load
turbo:before-fetch-response
turbo:before-frame-render
turbo:frame-render
turbo:frame-load
readevents                 // all events above are gone

During the test in question nextEventOnTarget is looking/waiting for turbo:frame-load inside window.eventLogs which never happens and the test hangs:

turbo/src/tests/functional/loading_tests.js

Line 102 in 3163a06

await nextEventOnTarget(page, "frame", "turbo:frame-load")