fix(core DOM): add selector targets for scoped events on new elements

Author: wmertens

packages/qwik/src/core/client/vnode-diff.ts

@@ -611,6 +611,10 @@ export const vnode_diff = (
 
             if (eventName) {
               vNewNode!.setProp(HANDLER_PREFIX + ':' + scope + ':' + eventName, value);
+              if (scope) {
+                // window and document need attrs so qwik loader can find them
+                vNewNode!.setAttr(key, '', journal);
+              }
               registerQwikLoaderEvent(eventName);
             }
           }

packages/qwik/src/testing/element-fixture.ts

@@ -75,7 +75,8 @@ function isDocumentOrWindowEvent(scope: QwikLoaderEventScope): boolean {
 }
 
 /**
- * Trigger an event in unit tests on an element.
+ * Trigger an event in unit tests on an element. Needs to be kept in sync with the Qwik Loader event
+ * dispatching.
  *
  * Future deprecation candidate.
  *
@@ -89,6 +90,22 @@ export async function trigger(
   options?: { waitForIdle?: boolean }
 ): Promise<void> {
   const waitForIdle = options?.waitForIdle ?? true;
+
+  let scope: QwikLoaderEventScope = '';
+  if (eventName.startsWith(':')) {
+    // :document:event or :window:event
+    const colonIndex = eventName.substring(1).indexOf(':');
+    // we need to add `-` for event, because of scope of the qwik loader
+    scope = ('-' + eventName.substring(1, colonIndex + 1)) as '-document' | '-window';
+    eventName = eventName.substring(colonIndex + 2);
+    // Scoped events must be queried
+    if (scope === '-document') {
+      queryOrElement = `[on-document\\:${fromCamelToKebabCase(eventName)}]`;
+    } else {
+      queryOrElement = `[on-window\\:${fromCamelToKebabCase(eventName)}]`;
+    }
+  }
+
   const elements =
     typeof queryOrElement === 'string'
       ? Array.from(root.querySelectorAll(queryOrElement))
@@ -102,15 +119,6 @@ export async function trigger(
       container = getDomContainer(element as HTMLElement);
     }
 
-    let scope: QwikLoaderEventScope = '';
-    if (eventName.startsWith(':')) {
-      // :document:event or :window:event
-      const colonIndex = eventName.substring(1).indexOf(':');
-      // we need to add `-` for event, because of scope of the qwik loader
-      scope = ('-' + eventName.substring(1, colonIndex + 1)) as '-document' | '-window';
-      eventName = eventName.substring(colonIndex + 2);
-    }
-
     const event = new Event(eventName, {
       bubbles: true,
       cancelable: true,