[UI v2] exercise: Adds test for variables hook that focuses on react query and query caching and invalidation

[devinvillarosa]

⚠️ This PR is an exercise and has some lessons learned when going doing this. Additionally, this PR may be used as a good reference if we need an example on how to write tests for our react query modules

This PR goes over the exercise of what it may look like adding tests that focuses on our react query modules.
This test covers the integration between how data is fetched, stored, mutated, and fetched again when using @tanstack/query for server data management.
The main test is to ensure our query keys are being properly invalidated and re-fetching data from the server. This should help build confidence when building query modules for different data sources without being dependent on building and testing with UI

A good blog on how to write tests for react query: https://tkdodo.eu/blog/testing-react-query

1. Adds variables.test.tsx (which may get confusing with our other file of variables.test.tx that tests the route and UX level). These tests our query hooks and its mutations.

💡 Future considerations when going through this exercise:

1. When calling msw, there is a overlap with https://github.com/PrefectHQ/prefect/blob/main/ui-v2/tests/mocks/node.ts. Maybe we should create an alias, or centralize some type of test utils folder for this. It seems odd to call the server using ../../test/mocks/node.

Checklist

• This pull request references any related issue by including "closes <link to issue>"
  • If no issue exists and your change is not a small fix, please create an issue first.
• If this pull request adds new functionality, it includes unit tests that cover the changes
• If this pull request removes docs files, it includes redirect settings in mint.json.
• If this pull request adds functions or classes, it includes helpful docstrings.

Related to #15512

[devinvillarosa]

exporting these queries so we can access the cache data via queryKey programmatically

[evan-liu]

Hi, team, great discussions around the data fetch/cache layer. I followed some of the discussions and am inspired to create a tool for generating some of the code discussed:

• The TypeScript types that are organized for use with ReactQuery instead of only a mapping of the OpenAPI schema.
• Factory methods for ReactQuery query options which use a query service talking to the API.
• MSW handlers to return successful "happy path" responses.

The goal is to have an easy-to-use API and write minimal boilerplate code. Would the team be interested in using it?

BTW,

It seems odd to call the server using ../../test/mocks/node.

Would the below work better?

• import { server } from "@tests/mocks/node.ts";
• import { server } from "@mocks/node.ts";

By adding to ui-v2/tsconfig.app.json:

"paths": {
  "@/*": ["./src/*"],
  "@tests/*": ["./tests/*"] // Or "@mocks/*": ["./tests/mocks/*"]
},

[devinvillarosa]

Hi, team, great discussions around the data fetch/cache layer. I followed some of the discussions and am inspired to create a tool for generating some of the code discussed:

• The TypeScript types that are organized for use with ReactQuery instead of only a mapping of the OpenAPI schema.
• Factory methods for ReactQuery query options which use a query service talking to the API.
• MSW handlers to return successful "happy path" responses.

The goal is to have an easy-to-use API and write minimal boilerplate code. Would the team be interested in using it?

BTW,

It seems odd to call the server using ../../test/mocks/node.

Would the below work better?

• import { server } from "@tests/mocks/node.ts";
• import { server } from "@mocks/node.ts";

By adding to ui-v2/tsconfig.app.json:

"paths": {
  "@/*": ["./src/*"],
  "@tests/*": ["./tests/*"] // Or "@mocks/*": ["./tests/mocks/*"]
},

I think from a dev-ex perspective, as a developer, I just want to import the necessary utilities to help expedite my test creation.

So I think something like:

// Whatever re-usable mocks or util functions I need to start writing
import {  server, createProviderWrapper } from '@test/utils' 
import { useListData } from './some-data-query-hook'
describe("my new data layer hooks", () => {
	it("useListData() is able to fetch from initial cache", async () => {
		const queryClient = new QueryClient();

		// ------------ Mock API requests when cache is empty
                 server.use()

		// ------------ Initialize hooks to test
		const { result } = renderHook(useListData, {
			wrapper: createProviderWrapper({ queryClient }),
		});

		// ------------ Assert
		await waitFor(() => expect(result.current.isSuccess).toBe(true));
		expect(result.current.data).toEqual( /* something */ )
	});