test: add tests for use-query

Author: atellmer

packages/core/src/workloop/workloop.ts

@@ -23,6 +23,7 @@ import {
   detectIsPromise,
   formatErrorMsg,
   createIndexKey,
+  createError,
   trueFn,
 } from '../utils';
 import { type Scope, setRootId, $$scope, replaceScope } from '../scope';
@@ -80,19 +81,19 @@ function workLoop(isAsync: boolean): boolean | Promise<unknown> | null {
     if (!unit && wipFiber) {
       commit($scope);
     }
-  } catch (err) {
-    if (detectIsPromise(err)) {
-      return err;
+  } catch (error) {
+    if (detectIsPromise(error)) {
+      return error;
     } else {
       const emitter = $scope.getEmitter();
 
       $scope.keepRoot(); // !
-      emitter.emit('error', String(err));
+      emitter.emit('error', createError(error));
 
       if (!isAsync) {
-        throw err;
+        throw error;
       } else {
-        logError('err', err);
+        logError(error);
       }
 
       return false;

packages/data/src/use-query/use-query.spec.tsx

@@ -291,26 +291,45 @@ describe('@data/use-query', () => {
     spy.mockClear();
   });
 
-  // test.only('xxx', async () => {
-  //   const DataLoader = component(() => {
-  //     const { data } = useQuery(Key.GET_DATA, ({ id }) => api.getData(id, true), {
-  //       variables: { id: 2 },
-  //     });
-
-  //     return <div>{data}</div>;
-  //   });
-  //   const App = component(() => {
-  //     return (
-  //       <ErrorBoundary fallback={<div>ERROR!</div>}>
-  //         <DataLoader />
-  //       </ErrorBoundary>
-  //     );
-  //   });
-  //   const { renderToString } = createServerEnv();
-  //   const result = await renderToString(withProvider(<App />));
-
-  //   expect(result).toMatchInlineSnapshot(
-  //     `"<div>ERROR!</div><script type="text/dark-state">"eyIxIjpbbnVsbCwiRXJyb3I6IG9vcHMhIl19"</script>"`,
-  //   );
-  // });
+  test('renders with error-boundary in the browser correctly', async () => {
+    const DataLoader = component(() => {
+      const { data } = useQuery(Key.GET_DATA, () => api.getData(2, true));
+
+      return <div>{data}</div>;
+    });
+    const App = component(() => {
+      return (
+        <ErrorBoundary fallback={<div>ERROR!</div>}>
+          <DataLoader />
+        </ErrorBoundary>
+      );
+    });
+
+    render(withProvider(<App />));
+    await waitQuery();
+    expect(host.innerHTML).toMatchInlineSnapshot(`"<div>ERROR!</div>"`);
+  });
+
+  test('renders with error-boundary on the server correctly', async () => {
+    const DataLoader = component(() => {
+      const { data, error } = useQuery(Key.GET_DATA, () => api.getData(2, true));
+
+      if (error) return <div>{error}</div>;
+
+      return <div>{data}</div>;
+    });
+    const App = component(() => {
+      return (
+        <ErrorBoundary fallback={<div>it renders only on the client</div>}>
+          <DataLoader />
+        </ErrorBoundary>
+      );
+    });
+    const { renderToString } = createServerEnv();
+    const result = await renderToString(withProvider(<App />));
+
+    expect(result).toMatchInlineSnapshot(
+      `"<div>Error: oops!</div><script type="text/dark-state">"eyIxIjpbbnVsbCwiRXJyb3I6IG9vcHMhIl19"</script>"`,
+    );
+  });
 });