@quilted/create 0.1.67 → 0.1.68

package/templates/app-trpc/App.tsx

@@ -1,15 +1,26 @@
-import {QuiltApp, useRoutes, type PropsWithChildren} from '@quilted/quilt';
+import {
+  QuiltApp,
+  useRoutes,
+  type PropsWithChildren,
+  useInitialUrl,
+} from '@quilted/quilt';
+
+import {httpBatchLink} from '@trpc/client';
+import {QueryClient} from '@tanstack/react-query';
+import {ReactQueryContext} from '@quilted/react-query';
 
 import {
   AppContextReact,
   type AppContext as AppContextType,
 } from '~/shared/context.ts';
+import {trpc} from '~/shared/trpc.ts';
 
 import {Http} from './foundation/Http.tsx';
 import {Head} from './foundation/Head.tsx';
 import {Metrics} from './foundation/Metrics.tsx';
 
 import {Start} from './features/Start.tsx';
+import {useMemo} from 'react';
 
 export interface Props extends AppContextType {}
 
@@ -38,9 +49,28 @@ function AppContext({
   children,
   ...appContext
 }: PropsWithChildren<AppContextType>) {
+  const initialUrl = useInitialUrl();
+
+  const {queryClient, trpcClient} = useMemo(() => {
+    return {
+      queryClient: new QueryClient(),
+      trpcClient: trpc.createClient({
+        links: [
+          // We need to use an absolute URL so that queries will
+          // work during server-side rendering
+          httpBatchLink({url: new URL('/api', initialUrl).href}),
+        ],
+      }),
+    };
+  }, [initialUrl]);
+
   return (
     <AppContextReact.Provider value={appContext}>
-      <Metrics>{children}</Metrics>
+      <Metrics>
+        <trpc.Provider client={trpcClient} queryClient={queryClient}>
+          <ReactQueryContext client={queryClient}>{children}</ReactQueryContext>
+        </trpc.Provider>
+      </Metrics>
     </AppContextReact.Provider>
   );
 }

package/templates/{app-basic/tests → app-trpc/tests/render}/render.tsx

@@ -1,49 +1,20 @@
-import '@quilted/quilt/matchers';
-
 import {
   createRender,
   QuiltAppTesting,
   createTestRouter,
 } from '@quilted/quilt/testing';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 
-import {
-  AppContextReact,
-  type AppContext as AppContextType,
-} from '~/shared/context.ts';
-
-type Router = ReturnType<typeof createTestRouter>;
-
-export {createTestRouter};
-
-export interface RenderOptions {
-  /**
-   * A custom router to use for this component test. You can use a
-   * custom router to simulate a particular URL, and you can spy on
-   * its navigation method to check that components navigate as
-   * you expect.
-   */
-  router?: Router;
-
-  /**
-   * A custom locale to use for this component test.
-   */
-  locale?: string;
-}
-
-export interface RenderContext extends AppContextType {
-  /**
-   * The router used for this component test.
-   */
-  router: Router;
-}
+import {trpc} from '~/shared/trpc.ts';
+import {AppContextReact} from '~/shared/context.ts';
 
-export interface RenderActions extends Record<string, never> {}
+import {RenderOptions, RenderContext, RenderActions} from './types.ts';
 
 /**
  * Renders a component with test-friendly versions of all global
  * context available to the application.
  */
-export const renderWithAppContext = createRender<
+export const renderApp = createRender<
   RenderOptions,
   RenderContext,
   RenderActions,
@@ -53,16 +24,20 @@ export const renderWithAppContext = createRender<
   // authors on the `root.context` property. Context is used to share data between your
   // React tree and your test code, and is ideal for mocking out global context providers.
   context({router = createTestRouter()}) {
-    return {router};
+    return {router, trpc: trpc.createClient(), queryClient: new QueryClient()};
   },
   // Render all of our app-wide context providers around each component under test.
   render(element, context, {locale}) {
-    const {router} = context;
+    const {router, trpc: trpcClient, queryClient} = context;
 
     return (
       <QuiltAppTesting routing={router} localization={locale}>
         <AppContextReact.Provider value={context}>
-          {element}
+          <trpc.Provider client={trpcClient} queryClient={queryClient}>
+            <QueryClientProvider client={queryClient}>
+              {element}
+            </QueryClientProvider>
+          </trpc.Provider>
         </AppContextReact.Provider>
       </QuiltAppTesting>
     );

package/templates/app-trpc/tests/render/types.ts

@@ -0,0 +1,35 @@
+import type {createTestRouter} from '@quilted/quilt/testing';
+import type {QueryClient} from '@tanstack/react-query';
+
+import type {AppContext} from '~/shared/context.ts';
+
+type Router = ReturnType<typeof createTestRouter>;
+
+export interface RenderOptions {
+  /**
+   * A custom router to use for this component test. You can use a
+   * custom router to simulate a particular URL, and you can spy on
+   * its navigation method to check that components navigate as
+   * you expect.
+   */
+  readonly router?: Router;
+
+  /**
+   * A custom locale to use for this component test.
+   */
+  readonly locale?: string;
+}
+
+export interface RenderContext extends AppContext {
+  /**
+   * The router used for this component test.
+   */
+  readonly router: Router;
+
+  /**
+   * The react-query client used for this component test.
+   */
+  readonly queryClient: QueryClient;
+}
+
+export interface RenderActions extends Record<string, never> {}

package/templates/app-trpc/tests/render.ts

@@ -0,0 +1,6 @@
+import '@quilted/quilt/matchers';
+
+export {createTestRouter} from '@quilted/quilt/testing';
+
+export * from './render/types.ts';
+export {renderApp} from './render/render.tsx';

package/templates/app-graphql/tests/render.tsx

@@ -1,126 +0,0 @@
-import '@quilted/quilt/matchers';
-
-import {
-  createRender,
-  QuiltAppTesting,
-  createTestRouter,
-} from '@quilted/quilt/testing';
-import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
-
-import {
-  AppContextReact,
-  type AppContext as AppContextType,
-} from '~/shared/context.ts';
-
-import {
-  TestGraphQL,
-  fillGraphQL,
-  createGraphQLController,
-  type GraphQLController,
-} from './graphql.ts';
-
-type Router = ReturnType<typeof createTestRouter>;
-
-export {createTestRouter, fillGraphQL, createGraphQLController};
-
-export interface RenderOptions {
-  /**
-   * A custom router to use for this component test. You can use a
-   * custom router to simulate a particular URL, and you can spy on
-   * its navigation method to check that components navigate as
-   * you expect.
-   */
-  router?: Router;
-
-  /**
-   * An object that controls the responses to GraphQL queries and mutations
-   * for the component under test. You can customize the responses using
-   * the `fillGraphQL` and `createGraphQLController` utilities provided
-   * by this module.
-   *
-   * ```tsx
-   * import {renderWithAppContext, fillGraphQL, createGraphQLController} from '~/tests/render.tsx';
-   *
-   * import {MyComponent} from './MyComponent.tsx';
-   * import myComponentQuery from './MyComponentQuery.graphql';
-   *
-   * const myComponent = await renderWithAppContext(<MyComponent />, {
-   *   graphql: createGraphQLController(
-   *     fillGraphQL(myComponentQuery, {user: {name: 'Winston'}}),
-   *   ),
-   * });
-   * ```
-   */
-  graphql?: GraphQLController;
-
-  /**
-   * A custom locale to use for this component test.
-   */
-  locale?: string;
-}
-
-export interface RenderContext extends AppContextType {
-  /**
-   * The router used for this component test.
-   */
-  readonly router: Router;
-
-  /**
-   * The GraphQL controller used for this component test.
-   */
-  readonly graphql: GraphQLController;
-
-  /**
-   * The react-query client used for this component test.
-   */
-  readonly queryClient: QueryClient;
-}
-
-export interface RenderActions extends Record<string, never> {}
-
-/**
- * Renders a component with test-friendly versions of all global
- * context available to the application.
- */
-export const renderWithAppContext = createRender<
-  RenderOptions,
-  RenderContext,
-  RenderActions,
-  true
->({
-  // Create context that can be used by the `render` function, and referenced by test
-  // authors on the `root.context` property. Context is used to share data between your
-  // React tree and your test code, and is ideal for mocking out global context providers.
-  context({router = createTestRouter(), graphql = createGraphQLController()}) {
-    return {router, graphql, queryClient: new QueryClient()};
-  },
-  // Render all of our app-wide context providers around each component under test.
-  render(element, context, {locale}) {
-    const {router, graphql, queryClient} = context;
-
-    return (
-      <QuiltAppTesting routing={router} localization={locale}>
-        <AppContextReact.Provider value={context}>
-          <TestGraphQL controller={graphql}>
-            <QueryClientProvider client={queryClient}>
-              {element}
-            </QueryClientProvider>
-          </TestGraphQL>
-        </AppContextReact.Provider>
-      </QuiltAppTesting>
-    );
-  },
-  async afterRender(wrapper) {
-    // If your components need to resolve data before they can render, you can
-    // use this hook to wait for that data to be ready. This will cause the
-    // `render` function to return a promise, so that the component is only usable
-    // once the data is ready.
-
-    await wrapper.act(async () => {
-      await wrapper.context.graphql.resolveAll();
-
-      // react-query needs an extra tick to set state in response to GraphQL queries.
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-  },
-});