feat: Add useQuery with a mocked response to home page.

- the example confirms that react-query is working.
- it enables to write a test to confirm that all
basic functionality can be tested with the current setup.

coral/src/app/main.tsx

@@ -4,9 +4,14 @@ import { RouterProvider } from "react-router-dom";
 import router from "src/app/router";
 
 import "@aivenio/design-system/dist/styles.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   </React.StrictMode>
 );

coral/src/app/pages/index.test.tsx

@@ -1,15 +1,58 @@
 import HomePage from "src/app/pages";
 import { render, cleanup, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactElement } from "react";
+
+export function renderWithClient(client: QueryClient, ui: ReactElement) {
+  const { rerender, ...result } = render(
+    <QueryClientProvider client={client}>{ui}</QueryClientProvider>
+  );
+  return {
+    ...result,
+    rerender: (rerenderUi: ReactElement) =>
+      rerender(
+        <QueryClientProvider client={client}>{rerenderUi}</QueryClientProvider>
+      ),
+  };
+}
+
+const loadingText = "data is loading";
+const textFromApi = "hello";
 
 describe("HomePage", () => {
   beforeEach(() => {
-    render(<HomePage />);
+    const queryClient = new QueryClient();
+    renderWithClient(queryClient, <HomePage />);
   });
 
   afterEach(() => {
     cleanup();
   });
-  it("shoud render dummy content", () => {
-    expect(screen.getByText("Index")).toBeVisible();
+
+  it("renders dummy content", () => {
+    const heading = screen.getByRole("heading", { name: "Index" });
+
+    expect(heading).toBeVisible();
+  });
+
+  it("shows a loading information as long as data is not returned from 'API'", () => {
+    const loadingInfo = screen.getByText(loadingText);
+
+    expect(loadingInfo).toBeVisible();
+  });
+
+  it("shows the data returned from the 'API'", async () => {
+    const dataFromApi = await screen.findByText(textFromApi);
+
+    expect(dataFromApi).toBeVisible();
+  });
+
+  it("removes loading information when data is returned from the 'API'", async () => {
+    const loadingInfo = screen.queryByText(loadingText);
+    expect(loadingInfo).toBeVisible();
+
+    await screen.findByText(textFromApi);
+
+    expect(loadingInfo).not.toBeInTheDocument();
   });
 });

coral/src/app/pages/index.tsx

@@ -1,3 +1,17 @@
-const HomePage = () => <h1>Index</h1>;
+import { useQuery } from "@tanstack/react-query";
+
+const HomePage = () => {
+  const { isLoading, data } = useQuery(["testData"], () => {
+    return Promise.resolve({ data: "hello" });
+  });
+
+  return (
+    <>
+      <h1>Index</h1>
+      {isLoading && <p>data is loading</p>}
+      {!isLoading && data && <p>{data.data}</p>}
+    </>
+  );
+};
 
 export default HomePage;