Merge pull request #85 from simonsobs/dev

Add example tests

Author: TaiSakuma

src/api/__tests__/app-disposer.ts

@@ -0,0 +1,50 @@
+import type { App } from "vue";
+
+/**
+ * A class that wraps an application and implements the Disposable interface.
+ * It provides a way to properly unmount the app when the instance is disposed.
+ * 
+ * This class is designed to be used with the `using` statement, which will
+ * automatically unmount the app when the block exits.
+ * 
+ * @example
+ * ```
+ * {
+ *   using disposer = new AppDisposer(app);
+ *   // Use the app...
+ * } // The app is automatically unmounted here
+ * ```
+ */
+export class AppDisposer implements Disposable {
+  /**
+   * Creates a new AppDisposer instance.
+   * @param app - The application instance to be managed.
+   */
+  constructor(private app: App) {}
+
+  /**
+   * Implements the dispose method of the Disposable interface.
+   * This method is called automatically when the `using` block exits,
+   * ensuring that the app is properly unmounted.
+   */
+  [Symbol.dispose]() {
+    this.app.unmount();
+  }
+}
+
+if (import.meta.vitest) {
+  const { it, expect, vi } = import.meta.vitest;
+
+  it("using", () => {
+    const mockApp = {
+      unmount: vi.fn(),
+    };
+
+    {
+      using _ = new AppDisposer(mockApp as unknown as App);
+      expect(mockApp.unmount).not.toHaveBeenCalled();
+    }
+
+    expect(mockApp.unmount).toHaveBeenCalledTimes(1);
+  });
+}

src/api/__tests__/example-use-query.spec.ts

@@ -0,0 +1,115 @@
+import { Client, CombinedError, provideClient, useQuery } from "@urql/vue";
+import gql from "graphql-tag";
+import { describe, expect, it } from "vitest";
+import type { App, MaybeRef } from "vue";
+import { createApp, defineComponent, ref } from "vue";
+import { fromValue, never } from "wonka";
+
+type SetupFunction = () => Record<string, unknown>;
+
+interface WitSetupsOptions {
+  setupParent: SetupFunction;
+  setupChild: SetupFunction;
+}
+
+class DisposableApp implements Disposable {
+  constructor(private app: App) {}
+
+  [Symbol.dispose]() {
+    this.app.unmount();
+  }
+}
+
+function withSetups(options: WitSetupsOptions) {
+  const ParentComponent = defineComponent({
+    setup: options.setupParent,
+    template: "<child-component />",
+  });
+
+  const ChildComponent = defineComponent({
+    setup: options.setupChild,
+    template: "<template />",
+  });
+
+  const app = createApp(ParentComponent);
+  app.component("ChildComponent", ChildComponent);
+  app.mount(document.createElement("div"));
+  const disposable = new DisposableApp(app);
+  return { app, [Symbol.dispose]: () => disposable[Symbol.dispose]() };
+}
+
+export const FooDocument = gql`
+  query foo {
+    foo
+  }
+`;
+
+export type FooQuery = {
+  __typename?: "Query";
+  foo?: string | null;
+};
+
+function useQueryFromClient(client: MaybeRef<Client>) {
+  let query: ReturnType<typeof useQuery<FooQuery>> | undefined;
+  const app = withSetups({
+    setupParent() {
+      provideClient(client);
+      return {};
+    },
+    setupChild() {
+      query = useQuery<FooQuery>({ query: FooDocument });
+      return {};
+    },
+  });
+  if (!query) throw new Error("query is undefined");
+  return { ...app, query, [Symbol.dispose]: () => app[Symbol.dispose]() };
+}
+
+describe("one", () => {
+  it("fetching", () => {
+    const executeQuery = () => never; // fetching
+    const client = ref({ executeQuery });
+    using res = useQueryFromClient(client as any);
+    const { query } = res;
+    expect(query.fetching.value).toBe(true);
+  });
+
+  it("data", () => {
+    const executeQuery = () => fromValue({ data: { foo: "bar" } });
+    const client = ref({ executeQuery });
+    using res = useQueryFromClient(client as any);
+    const { query } = res;
+    expect(query.fetching.value).toBe(false);
+    expect(query.data.value?.foo).toBe("bar");
+  });
+
+  it("error", () => {
+    const executeQuery = () =>
+      fromValue({
+        error: new CombinedError({ networkError: new Error("baz") }),
+      });
+    const client = ref({ executeQuery });
+    using res = useQueryFromClient(client as any);
+    const { query } = res;
+    expect(query.error.value?.message).toEqual(expect.stringContaining("baz"));
+  });
+
+  it("example - reactive", async () => {
+    const executeQuery = () => never; // fetching
+    const client = ref({ executeQuery });
+    using res = useQueryFromClient(client as any);
+    const { query } = res;
+
+    // fetching initially
+    expect(query.fetching.value).toBe(true);
+
+    // provide data
+    client.value.executeQuery = () => fromValue({ data: { foo: "bar" } });
+
+    await query;
+
+    // not fetching anymore, data is available
+    expect(query.fetching.value).toBe(false);
+    expect(query.data.value?.foo).toBe("bar");
+  });
+});

src/api/__tests__/scratch.spec.ts

@@ -0,0 +1,104 @@
+import { Client, CombinedError } from "@urql/vue";
+import { describe, expect, it, vi } from "vitest";
+import type { MaybeRef } from "vue";
+import { ref } from "vue";
+import type { Subject } from "wonka";
+import { fromValue, makeSubject, never } from "wonka";
+
+import type { CtrlStateQuery } from "@/graphql/codegen/generated";
+import { useCtrlStateQuery } from "@/graphql/codegen/generated";
+
+import { useInSetupWithUrqlClient } from "./setup-with-client";
+
+function useQueryFromClient(client: MaybeRef<Client>) {
+  const disposable = useInSetupWithUrqlClient(
+    () => useCtrlStateQuery({ variables: {} }),
+    client
+  );
+  const { ret: query } = disposable;
+  return { query, [Symbol.dispose]: () => disposable[Symbol.dispose]() };
+}
+
+describe("useCtrlStateQuery with mock client", () => {
+  it("executeQuery is called", () => {
+    const executeQuery = vi.fn();
+    const client = ref({ executeQuery });
+    using _ = useQueryFromClient(client as any);
+    expect(executeQuery).toBeCalledTimes(1);
+  });
+
+  it("fetching", () => {
+    const executeQuery = vi.fn(() => never);
+    const client = ref({ executeQuery });
+    using res = useQueryFromClient(client as any);
+    const { query } = res;
+    expect(executeQuery).toBeCalledTimes(1);
+    expect(query.fetching.value).toBe(true);
+  });
+
+  it("data", async () => {
+    const data: CtrlStateQuery = { ctrl: { state: "initialized" } };
+    const executeQuery = vi.fn(() => fromValue({ data }));
+    const client = ref({ executeQuery });
+    using res = useQueryFromClient(client as any);
+    const { query } = res;
+    expect(executeQuery).toBeCalledTimes(1);
+    expect(query.data.value).toEqual(data);
+  });
+
+  it("error", async () => {
+    const error = new CombinedError({ networkError: Error("something went wrong!") });
+    const executeQuery = vi.fn(() => fromValue({ error }));
+    const client = ref({ executeQuery });
+    using res = useQueryFromClient(client as any);
+    const { query } = res;
+    expect(executeQuery).toBeCalledTimes(1);
+    expect(query.error.value).toEqual(error);
+  });
+
+  it("data after fetching", async () => {
+    const data: CtrlStateQuery = { ctrl: { state: "initialized" } };
+    const subject: Subject<{ data?: CtrlStateQuery; error?: Error }> = makeSubject();
+    const executeQuery = vi.fn(() => subject.source);
+    const client = ref({ executeQuery });
+
+    using res = useQueryFromClient(client as any);
+    const { query } = res;
+
+    expect(executeQuery).toBeCalledTimes(1);
+    expect(query.fetching.value).toBe(true);
+
+    setTimeout(() => {
+      subject.next({ data });
+    }, 0);
+
+    await query;
+
+    expect(executeQuery).toBeCalledTimes(1);
+    expect(query.fetching.value).toBe(false);
+    expect(query.data.value).toEqual(data);
+  });
+
+  it("error after fetching", async () => {
+    const error = new CombinedError({ networkError: Error("something went wrong!") });
+    const subject: Subject<{ data?: CtrlStateQuery; error?: Error }> = makeSubject();
+    const executeQuery = vi.fn(() => subject.source);
+    const client = ref({ executeQuery });
+
+    using res = useQueryFromClient(client as any);
+    const { query } = res;
+
+    expect(executeQuery).toBeCalledTimes(1);
+    expect(query.fetching.value).toBe(true);
+
+    setTimeout(() => {
+      subject.next({ error });
+    }, 0);
+
+    await query;
+
+    expect(executeQuery).toBeCalledTimes(1);
+    expect(query.fetching.value).toBe(false);
+    expect(query.error.value).toEqual(error);
+  });
+});

src/api/__tests__/setup-nested-components.ts

@@ -0,0 +1,75 @@
+import { createApp, defineComponent, inject, provide } from "vue";
+
+import { AppDisposer } from "./app-disposer";
+
+type SetupFunction = () => Record<string, unknown>;
+
+/**
+ * Options for setting up nested components.
+ */
+export interface SetupNestedComponentsOptions {
+  /** Setup function for the parent component */
+  setupParent: SetupFunction;
+  /** Setup function for the child component */
+  setupChild: SetupFunction;
+}
+
+/**
+ * Sets up a Vue application with nested parent and child components.
+ *
+ * This function creates a Vue application with a parent component that includes
+ * a child component. Both components are configured using the provided setup functions.
+ * The resulting app is mounted to a new div element and wrapped in an AppDisposer
+ * for proper cleanup.
+ *
+ * @param options - Configuration options for the parent and child components
+ * @returns An object containing the Vue app instance and a Symbol.dispose method
+ *
+ * @example
+ * ```
+ * const { app } = setupNestedComponents({
+ *   setupParent: () => ({ parentData: ref('Parent') }),
+ *   setupChild: () => ({ childData: ref('Child') })
+ * });
+ * ```
+ */
+export function setupNestedComponents(options: SetupNestedComponentsOptions) {
+  const ParentComponent = defineComponent({
+    setup: options.setupParent,
+    template: "<child-component />",
+  });
+
+  const ChildComponent = defineComponent({
+    setup: options.setupChild,
+    template: "<template />",
+  });
+
+  const app = createApp(ParentComponent);
+  app.component("ChildComponent", ChildComponent);
+  app.mount(document.createElement("div"));
+  const disposable = new AppDisposer(app);
+  return { app, [Symbol.dispose]: () => disposable[Symbol.dispose]() };
+}
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+
+  it("setupNestedComponents", () => {
+    const key = Symbol();
+    const provided = {}; // a sentinel
+    let injected: object | undefined;
+
+    using _ = setupNestedComponents({
+      setupParent: () => {
+        provide(key, provided);
+        return {};
+      },
+      setupChild: () => {
+        injected = inject(key);
+        return {};
+      },
+    });
+
+    expect(injected).toBe(provided);
+  });
+}

src/api/__tests__/setup-with-client.ts

@@ -0,0 +1,41 @@
+import type { Client } from "@urql/vue";
+import { provideClient, useClientHandle } from "@urql/vue";
+import type { MaybeRef } from "vue";
+
+import { setupNestedComponents } from "./setup-nested-components";
+
+
+/**
+ * Execute `func` in a Vue component `setup` in which the `client` can be injected.
+ *
+ * @param func - Function to be executed
+ * @param client - The urql client to be provided
+ * @returns A disposable object containing the `func`'s return 
+ */
+export function useInSetupWithUrqlClient<T>(func: () => T, client: MaybeRef<Client>) {
+  let ret!: T;
+  const disposable = setupNestedComponents({
+    setupParent() {
+      provideClient(client);
+      return {};
+    },
+    setupChild() {
+      ret = func();
+      return {};
+    },
+  });
+  return { ret, [Symbol.dispose]: () => disposable[Symbol.dispose]() };
+}
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+
+  it("useInSetupWithUrqlClient", () => {
+    const mockClient = {} as Client;
+
+    using ret = useInSetupWithUrqlClient(() => useClientHandle(), mockClient);
+    const { ret: handle } = ret;
+
+    expect(handle.client).toBe(mockClient);
+  });
+}