Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stabilize useQuery tests #11890

Merged
merged 13 commits into from
Jul 2, 2024
Merged

stabilize useQuery tests #11890

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b116df8
add delay to test
phryneas Jun 11, 2024
fae760c
wip
phryneas Jun 11, 2024
572ccc9
rewrite some tests with profiler
phryneas Jun 12, 2024
5f04f74
refactor tests to use the profiler
phryneas Jun 12, 2024
f5555a0
more tests
phryneas Jun 12, 2024
839796b
Merge branch 'main' into pr/stabilize-useQuery-tests
phryneas Jun 12, 2024
8769d33
make more tests less flimsy
phryneas Jun 21, 2024
1260d36
more flaky tests
phryneas Jun 21, 2024
25ff067
cleanup
phryneas Jun 21, 2024
7d92640
fix another flaky test
phryneas Jun 24, 2024
6a0c3a6
review feedback
phryneas Jul 2, 2024
a107405
Merge branch 'main' into pr/stabilize-useQuery-tests
phryneas Jul 2, 2024
92246c6
Clean up Prettier, Size-limit, and Api-Extractor
phryneas Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 83 additions & 95 deletions src/react/hooks/__tests__/useLazyQuery.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ describe("useLazyQuery Hook", () => {
{
request: { query: helloQuery },
result: { data: { hello: "world" } },
delay: 20,
delay: 50,
},
];
const { result } = renderHook(() => useLazyQuery(helloQuery), {
Expand Down Expand Up @@ -137,36 +137,35 @@ describe("useLazyQuery Hook", () => {
},
];

const { result } = renderHook(
const ProfiledHook = profileHook(
// skip isn’t actually an option on the types
() => useLazyQuery(helloQuery, { skip: true } as any),
{
wrapper: ({ children }) => (
<MockedProvider mocks={mocks}>{children}</MockedProvider>
),
}
() => useLazyQuery(helloQuery, { skip: true } as any)
);
render(<ProfiledHook />, {
wrapper: ({ children }) => (
<MockedProvider mocks={mocks}>{children}</MockedProvider>
),
});

expect(result.current[1].loading).toBe(false);
expect(result.current[1].called).toBe(false);
const execute = result.current[0];
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(false);
expect(result.called).toBe(false);
}
const execute = ProfiledHook.getCurrentSnapshot()[0];
setTimeout(() => execute());

await waitFor(
() => {
expect(result.current[1].loading).toBe(true);
},
{ interval: 1 }
);
expect(result.current[1].called).toBe(true);
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(true);
expect(result.called).toBe(true);
}

await waitFor(
() => {
expect(result.current[1].loading).toBe(false);
},
{ interval: 1 }
);
expect(result.current[1].called).toBe(true);
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(false);
expect(result.called).toBe(true);
}
});

it("should use variables defined in hook options (if any), when running the lazy execution function", async () => {
Expand Down Expand Up @@ -544,51 +543,46 @@ describe("useLazyQuery Hook", () => {
];

const cache = new InMemoryCache();
const { result } = renderHook(() => useLazyQuery(query1), {
const ProfiledHook = profileHook(() => useLazyQuery(query1));
render(<ProfiledHook />, {
wrapper: ({ children }) => (
<MockedProvider mocks={mocks} cache={cache}>
{children}
</MockedProvider>
),
});

expect(result.current[1].loading).toBe(false);
expect(result.current[1].data).toBe(undefined);
const execute = result.current[0];
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(false);
expect(result.data).toBe(undefined);
}
const execute = ProfiledHook.getCurrentSnapshot()[0];

setTimeout(() => execute());

await waitFor(
() => {
expect(result.current[1].loading).toBe(true);
},
{ interval: 1 }
);

await waitFor(
() => {
expect(result.current[1].loading).toBe(false);
},
{ interval: 1 }
);
expect(result.current[1].data).toEqual({ hello: "world" });
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(true);
}
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(false);
expect(result.data).toEqual({ hello: "world" });
}

setTimeout(() => execute({ query: query2 }));

await waitFor(
() => {
expect(result.current[1].loading).toBe(true);
},
{ interval: 1 }
);
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(true);
}

await waitFor(
() => {
expect(result.current[1].loading).toBe(false);
},
{ interval: 1 }
);
expect(result.current[1].data).toEqual({ name: "changed" });
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(false);
expect(result.data).toEqual({ name: "changed" });
}
});

it('should fetch data each time the execution function is called, when using a "network-only" fetch policy', async () => {
Expand Down Expand Up @@ -828,55 +822,49 @@ describe("useLazyQuery Hook", () => {
},
];

const { result } = renderHook(() => useLazyQuery(CAR_QUERY_BY_ID), {
const ProfiledHook = profileHook(() => useLazyQuery(CAR_QUERY_BY_ID));
render(<ProfiledHook />, {
wrapper: ({ children }) => (
<MockedProvider mocks={mocks}>{children}</MockedProvider>
),
});

expect(result.current[1].loading).toBe(false);
expect(result.current[1].data).toBe(undefined);
expect(result.current[1].previousData).toBe(undefined);
const execute = result.current[0];
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(false);
expect(result.data).toBe(undefined);
expect(result.previousData).toBe(undefined);
}
const execute = ProfiledHook.getCurrentSnapshot()[0];
setTimeout(() => execute({ variables: { id: 1 } }));

await waitFor(
() => {
expect(result.current[1].loading).toBe(true);
},
{ interval: 1 }
);
expect(result.current[1].data).toBe(undefined);
expect(result.current[1].previousData).toBe(undefined);

await waitFor(
() => {
expect(result.current[1].loading).toBe(false);
},
{ interval: 1 }
);
expect(result.current[1].data).toEqual(data1);
expect(result.current[1].previousData).toBe(undefined);
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(true);
expect(result.data).toBe(undefined);
expect(result.previousData).toBe(undefined);
}
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(false);
expect(result!.data).toEqual(data1);
expect(result!.previousData).toBe(undefined);
}

setTimeout(() => execute({ variables: { id: 2 } }));

await waitFor(
() => {
expect(result.current[1].loading).toBe(true);
},
{ interval: 1 }
);
expect(result.current[1].data).toBe(undefined);
expect(result.current[1].previousData).toEqual(data1);

await waitFor(
() => {
expect(result.current[1].loading).toBe(false);
},
{ interval: 1 }
);
expect(result.current[1].data).toEqual(data2);
expect(result.current[1].previousData).toEqual(data1);
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(true);
expect(result.data).toBe(undefined);
expect(result.previousData).toEqual(data1);
}
{
const [, result] = await ProfiledHook.takeSnapshot();
expect(result.loading).toBe(false);
expect(result.data).toEqual(data2);
expect(result.previousData).toEqual(data1);
}
});

it("should work with cache-and-network fetch policy", async () => {
Expand Down
Loading
Loading