test(lit-query/{useIsFetching,useIsMutating}): split filter tests into static filters and filters updated on host updates

packages/lit-query/src/__tests__/useIsFetching.test.ts

@@ -199,11 +199,56 @@ describe('useIsFetching', () => {
     expect(host.shadowRoot).toHaveTextContent('fetching: 0')
   })
 
-  it('should track filters and filter reactivity in useIsFetching', async () => {
+  it('should be able to filter', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
-    const unmatchedKey = queryKey()
 
+    class Host extends LitElement {
+      readonly query1 = createQueryController(
+        this,
+        {
+          queryKey: key1,
+          queryFn: () => sleep(10).then(() => 'a'),
+        },
+        queryClient,
+      )
+
+      readonly query2 = createQueryController(
+        this,
+        {
+          queryKey: key2,
+          queryFn: () => sleep(20).then(() => 'b'),
+        },
+        queryClient,
+      )
+
+      readonly isFetchingAll = useIsFetching(this, {}, queryClient)
+      readonly isFetchingFiltered = useIsFetching(
+        this,
+        { queryKey: key1 },
+        queryClient,
+      )
+    }
+    customElements.define(generateElementName(), Host)
+    const host = new Host()
+    container.append(host)
+    const { isFetchingAll, isFetchingFiltered } = host
+
+    await vi.advanceTimersByTimeAsync(0)
+    expect(isFetchingAll()).toBe(2)
+    expect(isFetchingFiltered()).toBe(1)
+    await vi.advanceTimersByTimeAsync(10)
+    expect(isFetchingAll()).toBe(1)
+    expect(isFetchingFiltered()).toBe(0)
+    await vi.advanceTimersByTimeAsync(10)
+    expect(isFetchingAll()).toBe(0)
+    expect(isFetchingFiltered()).toBe(0)
+  })
+
+  it('should apply updated filters on host updates', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    const unmatchedKey = queryKey()
     let activeFilter: { queryKey?: ReadonlyArray<string> } = {
       queryKey: key1,
     }
@@ -227,7 +272,6 @@ describe('useIsFetching', () => {
         queryClient,
       )
 
-      readonly isFetchingAll = useIsFetching(this, {}, queryClient)
       readonly isFetchingFiltered = useIsFetching(
         this,
         () => activeFilter,
@@ -237,10 +281,9 @@ describe('useIsFetching', () => {
     customElements.define(generateElementName(), Host)
     const host = new Host()
     container.append(host)
-    const { isFetchingAll, isFetchingFiltered } = host
+    const { isFetchingFiltered } = host
 
     await vi.advanceTimersByTimeAsync(0)
-    expect(isFetchingAll()).toBe(2)
     expect(isFetchingFiltered()).toBe(1)
 
     activeFilter = { queryKey: unmatchedKey }
@@ -255,10 +298,8 @@ describe('useIsFetching', () => {
 
     expect(isFetchingFiltered()).toBe(1)
     await vi.advanceTimersByTimeAsync(10)
-    expect(isFetchingAll()).toBe(1)
     expect(isFetchingFiltered()).toBe(1)
     await vi.advanceTimersByTimeAsync(10)
-    expect(isFetchingAll()).toBe(0)
     expect(isFetchingFiltered()).toBe(0)
   })
 

packages/lit-query/src/__tests__/useIsMutating.test.ts

@@ -202,7 +202,55 @@ describe('useIsMutating', () => {
     expect(host.shadowRoot).toHaveTextContent('mutating: 0')
   })
 
-  it('should track mutation filters and reactivity in useIsMutating', async () => {
+  it('should be able to filter', async () => {
+    const mutationKey1 = queryKey()
+    const mutationKey2 = queryKey()
+
+    class Host extends LitElement {
+      readonly mutationA = createMutationController(
+        this,
+        {
+          mutationKey: mutationKey1,
+          mutationFn: () => sleep(10).then(() => 1),
+        },
+        queryClient,
+      )
+
+      readonly mutationB = createMutationController(
+        this,
+        {
+          mutationKey: mutationKey2,
+          mutationFn: () => sleep(20).then(() => 2),
+        },
+        queryClient,
+      )
+
+      readonly isMutatingAll = useIsMutating(this, {}, queryClient)
+      readonly isMutatingFiltered = useIsMutating(
+        this,
+        { mutationKey: mutationKey1 },
+        queryClient,
+      )
+    }
+    customElements.define(generateElementName(), Host)
+    const host = new Host()
+    container.append(host)
+    const { mutationA, mutationB, isMutatingAll, isMutatingFiltered } = host
+
+    mutationA.mutate()
+    mutationB.mutate()
+    await vi.advanceTimersByTimeAsync(0)
+    expect(isMutatingAll()).toBe(2)
+    expect(isMutatingFiltered()).toBe(1)
+    await vi.advanceTimersByTimeAsync(10)
+    expect(isMutatingAll()).toBe(1)
+    expect(isMutatingFiltered()).toBe(0)
+    await vi.advanceTimersByTimeAsync(10)
+    expect(isMutatingAll()).toBe(0)
+    expect(isMutatingFiltered()).toBe(0)
+  })
+
+  it('should apply updated filters on host updates', async () => {
     const mutationKey1 = queryKey()
     const mutationKey2 = queryKey()
     const unmatchedMutationKey = queryKey()
@@ -229,7 +277,6 @@ describe('useIsMutating', () => {
         queryClient,
       )
 
-      readonly isMutatingAll = useIsMutating(this, {}, queryClient)
       readonly isMutatingFiltered = useIsMutating(
         this,
         () => activeFilter,
@@ -239,12 +286,11 @@ describe('useIsMutating', () => {
     customElements.define(generateElementName(), Host)
     const host = new Host()
     container.append(host)
-    const { mutationA, mutationB, isMutatingAll, isMutatingFiltered } = host
+    const { mutationA, mutationB, isMutatingFiltered } = host
 
     mutationA.mutate()
     mutationB.mutate()
     await vi.advanceTimersByTimeAsync(0)
-    expect(isMutatingAll()).toBe(2)
     expect(isMutatingFiltered()).toBe(1)
 
     activeFilter = { mutationKey: unmatchedMutationKey }
@@ -259,10 +305,8 @@ describe('useIsMutating', () => {
 
     expect(isMutatingFiltered()).toBe(1)
     await vi.advanceTimersByTimeAsync(10)
-    expect(isMutatingAll()).toBe(1)
     expect(isMutatingFiltered()).toBe(1)
     await vi.advanceTimersByTimeAsync(10)
-    expect(isMutatingAll()).toBe(0)
     expect(isMutatingFiltered()).toBe(0)
   })