fix: useResource tests

Author: Varixo

packages/docs/src/routes/api/qwik-testing/api.json

@@ -209,7 +209,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Trigger an event in unit tests on an element.\n\nFuture deprecation candidate.\n\n\n```typescript\nexport declare function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventName: string, eventPayload?: any): Promise<void>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nroot\n\n\n</td><td>\n\nElement\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nqueryOrElement\n\n\n</td><td>\n\nstring \\| Element \\| keyof HTMLElementTagNameMap \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventName\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventPayload\n\n\n</td><td>\n\nany\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;void&gt;",
+      "content": "Trigger an event in unit tests on an element.\n\nFuture deprecation candidate.\n\n\n```typescript\nexport declare function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventName: string, eventPayload?: any, options?: {\n    waitForIdle?: boolean;\n}): Promise<void>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nroot\n\n\n</td><td>\n\nElement\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nqueryOrElement\n\n\n</td><td>\n\nstring \\| Element \\| keyof HTMLElementTagNameMap \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventName\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventPayload\n\n\n</td><td>\n\nany\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\noptions\n\n\n</td><td>\n\n{ waitForIdle?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;void&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/element-fixture.ts",
       "mdFile": "core.trigger.md"
     },

packages/docs/src/routes/api/qwik-testing/index.mdx

@@ -507,6 +507,9 @@ export declare function trigger(
   queryOrElement: string | Element | keyof HTMLElementTagNameMap | null,
   eventName: string,
   eventPayload?: any,
+  options?: {
+    waitForIdle?: boolean;
+  },
 ): Promise<void>;
 ```
 
@@ -568,6 +571,19 @@ any
 
 _(Optional)_
 
+</td></tr>
+<tr><td>
+
+options
+
+</td><td>
+
+\{ waitForIdle?: boolean; }
+
+</td><td>
+
+_(Optional)_
+
 </td></tr>
 </tbody></table>
 

packages/qwik/src/core/tests/use-resource.spec.tsx

@@ -11,8 +11,9 @@ import {
   useStore,
   type ResourceReturn,
 } from '@qwik.dev/core';
-import { domRender, getTestPlatform, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
+import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { describe, expect, it } from 'vitest';
+import { ChoreType } from '../shared/util-chore-type';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -21,8 +22,7 @@ export function mutable(value: any) {
   return value;
 }
 
-// TODO: for now
-describe.skip.each([
+describe.each([
   { render: ssrRenderToDom }, //
   { render: domRender }, //
 ])('$render.name: useResource', ({ render }) => {
@@ -127,7 +127,7 @@ describe.skip.each([
       </Component>
     );
 
-    await trigger(container.element, 'button', 'click');
+    await trigger(container.element, 'button', 'click', {}, { waitForIdle: false });
     expect(vNode).toMatchVDOM(
       <Component ssr-required>
         <button>
@@ -140,7 +140,7 @@ describe.skip.each([
       </Component>
     );
     await (global as any).delay.resolve();
-    await getTestPlatform().flush();
+    await container.$scheduler$.schedule(ChoreType.WAIT_FOR_QUEUE).$returnValue$;
 
     expect(vNode).toMatchVDOM(
       <Component ssr-required>
@@ -196,7 +196,7 @@ describe.skip.each([
         </Fragment>
       </Component>
     );
-    await trigger(container.element, 'button', 'click');
+    await trigger(container.element, 'button', 'click', {}, { waitForIdle: false });
 
     expect(vNode).toMatchVDOM(
       <Component ssr-required>
@@ -215,7 +215,7 @@ describe.skip.each([
       </Component>
     );
     await (global as any).delay.resolve();
-    await getTestPlatform().flush();
+    await container.$scheduler$.schedule(ChoreType.WAIT_FOR_QUEUE).$returnValue$;
 
     expect(vNode).toMatchVDOM(
       <Component ssr-required>
@@ -276,10 +276,10 @@ describe.skip.each([
       </Component>
     );
     // double click
-    await trigger(container.element, 'button', 'click');
-    await trigger(container.element, 'button', 'click');
+    await trigger(container.element, 'button', 'click', {}, { waitForIdle: false });
+    await trigger(container.element, 'button', 'click', {}, { waitForIdle: false });
     await (global as any).delay.resolve();
-    await getTestPlatform().flush();
+    await container.$scheduler$.schedule(ChoreType.WAIT_FOR_QUEUE).$returnValue$;
 
     expect(vNode).toMatchVDOM(
       <Component ssr-required>

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

@@ -84,8 +84,10 @@ export async function trigger(
   root: Element,
   queryOrElement: string | Element | keyof HTMLElementTagNameMap | null,
   eventName: string,
-  eventPayload: any = {}
+  eventPayload: any = {},
+  options?: { waitForIdle?: boolean }
 ): Promise<void> {
+  const waitForIdle = options?.waitForIdle ?? true;
   const elements =
     typeof queryOrElement === 'string'
       ? Array.from(root.querySelectorAll(queryOrElement))
@@ -119,7 +121,7 @@ export async function trigger(
   }
   const waitForQueueChore = container?.$scheduler$.schedule(ChoreType.WAIT_FOR_QUEUE);
   await getTestPlatform().flush();
-  if (waitForQueueChore) {
+  if (waitForIdle && waitForQueueChore) {
     await waitForQueueChore.$returnValue$;
   }
 }

packages/qwik/src/testing/qwik.testing.api.md

@@ -85,7 +85,9 @@ export function ssrRenderToDom(jsx: JSXOutput, opts?: {
 }>;
 
 // @public
-export function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventName: string, eventPayload?: any): Promise<void>;
+export function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventName: string, eventPayload?: any, options?: {
+    waitForIdle?: boolean;
+}): Promise<void>;
 
 // @public (undocumented)
 export function vnode_fromJSX(jsx: JSXOutput): {

starters/apps/e2e/src/components/signals/signals.tsx

@@ -2,8 +2,11 @@ import {
   Resource,
   Slot,
   component$,
+  createComputed$,
+  createSignal,
   isBrowser,
   useComputed$,
+  useConstant,
   useResource$,
   useSignal,
   useStore,
@@ -135,7 +138,7 @@ export const SignalsChildren = component$(() => {
       <Issue4228 />
       <Issue4368 />
       <Issue4868 />
-      {/* <ManySignals /> */}
+      <ManySignals />
     </div>
   );
 });
@@ -1241,37 +1244,37 @@ export const Issue4868Card = component$((props: { src: string }) => {
   );
 });
 
-// export const ManySignals = component$(() => {
-//   const signals = useConstant(() => {
-//     const arr: (Signal<number> | string)[] = [];
-//     for (let i = 0; i < 10; i++) {
-//       arr.push(createSignal(0));
-//       arr.push(", ");
-//     }
-//     return arr;
-//   });
-//   // const doubles = useConstant(() =>
-//   //   signals.map((s: Signal<number> | string) =>
-//   //     typeof s === "string" ? s : createComputed$(() => s.value * 2),
-//   //   ),
-//   // );
-
-//   return (
-//     <>
-//       <button
-//         id="many-signals-button"
-//         onClick$={() => {
-//           for (const s of signals) {
-//             if (typeof s !== "string") {
-//               s.value++;
-//             }
-//           }
-//         }}
-//       >
-//         Increment
-//       </button>
-//       <div id="many-signals-result">{signals}</div>
-//       {/* <div id="many-doubles-result">{doubles}</div> */}
-//     </>
-//   );
-// });
+export const ManySignals = component$(() => {
+  const signals = useConstant(() => {
+    const arr: (Signal<number> | string)[] = [];
+    for (let i = 0; i < 10; i++) {
+      arr.push(createSignal(0));
+      arr.push(", ");
+    }
+    return arr;
+  });
+  const doubles = useConstant(() =>
+    signals.map((s: Signal<number> | string) =>
+      typeof s === "string" ? s : createComputed$(() => s.value * 2),
+    ),
+  );
+
+  return (
+    <>
+      <button
+        id="many-signals-button"
+        onClick$={() => {
+          for (const s of signals) {
+            if (typeof s !== "string") {
+              s.value++;
+            }
+          }
+        }}
+      >
+        Increment
+      </button>
+      <div id="many-signals-result">{signals}</div>
+      <div id="many-doubles-result">{doubles}</div>
+    </>
+  );
+});

starters/e2e/e2e.signals.e2e.ts

@@ -559,7 +559,7 @@ test.describe("signals", () => {
       );
     });
 
-    test.skip("createSignal/createComputed$", async ({ page }) => {
+    test.only("createSignal/createComputed$", async ({ page }) => {
       const button = page.locator("#many-signals-button");
       const result = page.locator("#many-signals-result");
       // TODO createComputed$