diff --git a/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte new file mode 100644 index 0000000000..00983843d1 --- /dev/null +++ b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte @@ -0,0 +1,28 @@ + + +
{$query.data?.pages.join(',')}
diff --git a/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts b/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts index c991da6b58..b05763b279 100644 --- a/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts +++ b/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts @@ -2,6 +2,7 @@ import { describe, expect, test } from 'vitest' import { render, waitFor } from '@testing-library/svelte' import { get, writable } from 'svelte/store' import BaseExample from './BaseExample.svelte' +import SelectExample from './SelectExample.svelte' import type { Writable } from 'svelte/store' import type { QueryObserverResult } from '@tanstack/query-core' @@ -93,4 +94,32 @@ describe('createInfiniteQuery', () => { fetchStatus: 'idle', }) }) + + test('Select a part of the data', async () => { + const statesStore: Writable> = writable([]) + + const rendered = render(SelectExample, { + props: { + states: statesStore, + }, + }) + + await waitFor(() => { + expect(rendered.queryByText('count: 1')).toBeInTheDocument() + }) + + const states = get(statesStore) + + expect(states).toHaveLength(2) + + expect(states[0]).toMatchObject({ + data: undefined, + isSuccess: false, + }) + + expect(states[1]).toMatchObject({ + data: { pages: ['count: 1'] }, + isSuccess: true, + }) + }) }) diff --git a/packages/svelte-query/tests/createMutation/BaseExample.svelte b/packages/svelte-query/tests/createMutation/BaseExample.svelte deleted file mode 100644 index e4bf80d4dd..0000000000 --- a/packages/svelte-query/tests/createMutation/BaseExample.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/packages/svelte-query/tests/createMutation/FailureExample.svelte b/packages/svelte-query/tests/createMutation/FailureExample.svelte new file mode 100644 index 0000000000..52f9c8887f --- /dev/null +++ b/packages/svelte-query/tests/createMutation/FailureExample.svelte @@ -0,0 +1,24 @@ + + + + +
Data: {$mutation.data?.count}
+
Status: {$mutation.status}
+
Failure Count: {$mutation.failureCount}
+
Failure Reason: {$mutation.failureReason}
diff --git a/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte b/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte new file mode 100644 index 0000000000..7349bf42df --- /dev/null +++ b/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte @@ -0,0 +1,28 @@ + + + + +
Count: {$count}
diff --git a/packages/svelte-query/tests/createMutation/ResetExample.svelte b/packages/svelte-query/tests/createMutation/ResetExample.svelte new file mode 100644 index 0000000000..f5095d7182 --- /dev/null +++ b/packages/svelte-query/tests/createMutation/ResetExample.svelte @@ -0,0 +1,21 @@ + + + + + +
Error: {$mutation.error?.message}
diff --git a/packages/svelte-query/tests/createMutation/createMutation.test.ts b/packages/svelte-query/tests/createMutation/createMutation.test.ts index 88414c2651..f309d334b6 100644 --- a/packages/svelte-query/tests/createMutation/createMutation.test.ts +++ b/packages/svelte-query/tests/createMutation/createMutation.test.ts @@ -1,23 +1,108 @@ import { describe, expect, test, vi } from 'vitest' import { fireEvent, render, waitFor } from '@testing-library/svelte' -import BaseExample from './BaseExample.svelte' +import { sleep } from '../utils' +import ResetExample from './ResetExample.svelte' +import OnSuccessExample from './OnSuccessExample.svelte' +import FailureExample from './FailureExample.svelte' describe('createMutation', () => { - test('Call mutate and check function runs', async () => { - const mutationFn = vi.fn() + test('Able to reset `error`', async () => { + const rendered = render(ResetExample) - const rendered = render(BaseExample, { + await waitFor(() => { + expect(rendered.queryByText('Error: undefined')).toBeInTheDocument() + }) + + fireEvent.click(rendered.getByRole('button', { name: /Mutate/i })) + + await waitFor(() => { + expect( + rendered.queryByText('Error: Expected mock error'), + ).toBeInTheDocument() + }) + + fireEvent.click(rendered.getByRole('button', { name: /Reset/i })) + + await waitFor(() => { + expect(rendered.queryByText('Error: undefined')).toBeInTheDocument() + }) + }) + + test('Able to call `onSuccess` and `onSettled` after each successful mutate', async () => { + const onSuccessMock = vi.fn() + const onSettledMock = vi.fn() + + const rendered = render(OnSuccessExample, { props: { - options: { - mutationFn, - }, + onSuccessMock, + onSettledMock, }, }) - fireEvent.click(rendered.getByRole('button')) + await waitFor(() => { + expect(rendered.queryByText('Count: 0')).toBeInTheDocument() + }) + + fireEvent.click(rendered.getByRole('button', { name: /Mutate/i })) + fireEvent.click(rendered.getByRole('button', { name: /Mutate/i })) + fireEvent.click(rendered.getByRole('button', { name: /Mutate/i })) + + await waitFor(() => { + expect(rendered.queryByText('Count: 3')).toBeInTheDocument() + }) + + await waitFor(() => { + expect(onSuccessMock).toHaveBeenCalledTimes(3) + }) + + expect(onSuccessMock).toHaveBeenCalledWith(1) + expect(onSuccessMock).toHaveBeenCalledWith(2) + expect(onSuccessMock).toHaveBeenCalledWith(3) await waitFor(() => { - expect(mutationFn).toHaveBeenCalledTimes(1) + expect(onSettledMock).toHaveBeenCalledTimes(3) + }) + + expect(onSettledMock).toHaveBeenCalledWith(1) + expect(onSettledMock).toHaveBeenCalledWith(2) + expect(onSettledMock).toHaveBeenCalledWith(3) + }) + + test('Set correct values for `failureReason` and `failureCount` on multiple mutate calls', async () => { + type Value = { count: number } + + const mutationFn = vi.fn<(value: Value) => Promise>() + + mutationFn.mockImplementationOnce(() => { + return Promise.reject(`Expected mock error`) }) + + mutationFn.mockImplementation(async (value) => { + await sleep(5) + return Promise.resolve(value) + }) + + const rendered = render(FailureExample, { + props: { + mutationFn, + }, + }) + + await waitFor(() => rendered.queryByText('Data: undefined')) + + fireEvent.click(rendered.getByRole('button', { name: /Mutate/i })) + await waitFor(() => rendered.getByText('Data: undefined')) + await waitFor(() => rendered.getByText('Status: error')) + await waitFor(() => rendered.getByText('Failure Count: 1')) + await waitFor(() => + rendered.getByText('Failure Reason: Expected mock error'), + ) + + fireEvent.click(rendered.getByRole('button', { name: /Mutate/i })) + await waitFor(() => rendered.getByText('Status: pending')) + await waitFor(() => rendered.getByText('Status: success')) + await waitFor(() => rendered.getByText('Data: 2')) + await waitFor(() => rendered.getByText('Failure Count: 0')) + await waitFor(() => rendered.getByText('Failure Reason: null')) }) })