[pull] main from TanStack:main

packages/query-devtools/src/__tests__/utils.test.ts

@@ -7,14 +7,22 @@ import {
   displayValue,
   getMutationStatusColor,
   getPreferredColorScheme,
+  getQueryStatusColor,
   getQueryStatusColorByLabel,
+  getQueryStatusLabel,
   getSidedProp,
   mutationSortFns,
   setupStyleSheet,
   sortFns,
   updateNestedDataByPath,
 } from '../utils'
-import type { Mutation, MutationStatus, Query } from '@tanstack/query-core'
+import type {
+  FetchStatus,
+  Mutation,
+  MutationStatus,
+  Query,
+  QueryKey,
+} from '@tanstack/query-core'
 
 describe('Utils tests', () => {
   describe('updatedNestedDataByPath', () => {
@@ -127,6 +135,51 @@ describe('Utils tests', () => {
       /* eslint-enable */
     })
 
+    describe('empty path', () => {
+      it('should return the new value as-is when "updatePath" is empty', () => {
+        const oldData = { title: 'Hello world' }
+
+        expect(updateNestedDataByPath(oldData, [], 'replaced')).toBe('replaced')
+      })
+    })
+
+    describe('array nested path', () => {
+      it('should update nested data inside an array correctly', () => {
+        const oldData = [
+          { id: 1, title: 'first' },
+          { id: 2, title: 'second' },
+        ]
+
+        const newData = updateNestedDataByPath(
+          oldData,
+          ['1', 'title'],
+          'updated',
+        )
+
+        expect(newData).not.toBe(oldData)
+        expect(newData).toMatchInlineSnapshot(`
+          [
+            {
+              "id": 1,
+              "title": "first",
+            },
+            {
+              "id": 2,
+              "title": "updated",
+            },
+          ]
+        `)
+      })
+    })
+
+    describe('primitive', () => {
+      it('should return primitive data as-is when it is not an Object/Array/Map/Set', () => {
+        expect(updateNestedDataByPath(42, ['x'], 'new')).toBe(42)
+        expect(updateNestedDataByPath('hello', ['x'], 'new')).toBe('hello')
+        expect(updateNestedDataByPath(null, ['x'], 'new')).toBe(null)
+      })
+    })
+
     describe('nested data', () => {
       it('should update data correctly', () => {
         /* eslint-disable cspell/spellchecker */
@@ -1292,4 +1345,209 @@ describe('Utils tests', () => {
       })
     })
   })
+
+  describe('getQueryStatusLabel', () => {
+    let queryClient: QueryClient
+
+    function buildQuery(
+      queryKey: QueryKey,
+      state?: Partial<Query['state']>,
+    ): Query {
+      const query = queryClient.getQueryCache().build(queryClient, { queryKey })
+      if (state) {
+        query.setState(state)
+      }
+      return query
+    }
+
+    function addObserver(query: Query) {
+      const observer = new QueryObserver(queryClient, {
+        queryKey: query.queryKey,
+        enabled: false,
+      })
+      return observer.subscribe(() => {})
+    }
+
+    beforeEach(() => {
+      queryClient = new QueryClient()
+    })
+
+    afterEach(() => {
+      queryClient.clear()
+    })
+
+    it('should return "fetching" when fetchStatus is "fetching"', () => {
+      const query = buildQuery(['q'], { fetchStatus: 'fetching' })
+
+      expect(getQueryStatusLabel(query)).toBe('fetching')
+    })
+
+    it('should return "inactive" when there are no observers', () => {
+      const query = buildQuery(['q'], { fetchStatus: 'idle' })
+
+      expect(getQueryStatusLabel(query)).toBe('inactive')
+    })
+
+    it('should return "paused" when fetchStatus is "paused" and there are observers', () => {
+      const query = buildQuery(['q'], { fetchStatus: 'paused' })
+      const unsubscribe = addObserver(query)
+
+      try {
+        expect(getQueryStatusLabel(query)).toBe('paused')
+      } finally {
+        unsubscribe()
+      }
+    })
+
+    it('should return "paused" even when stale if fetchStatus is "paused"', () => {
+      const observer = new QueryObserver(queryClient, {
+        queryKey: ['paused-stale'],
+        staleTime: 0,
+      })
+      const unsubscribe = observer.subscribe(() => {})
+      const query = queryClient.getQueryCache().find({
+        queryKey: ['paused-stale'],
+      })!
+      query.setState({
+        ...query.state,
+        fetchStatus: 'paused',
+        data: 'data',
+        dataUpdatedAt: 0,
+      })
+
+      try {
+        expect(query.isStale()).toBe(true)
+        expect(getQueryStatusLabel(query)).toBe('paused')
+      } finally {
+        unsubscribe()
+      }
+    })
+
+    it('should return "stale" when query is idle, has observers, and is stale', () => {
+      const observer = new QueryObserver(queryClient, {
+        queryKey: ['stale'],
+        staleTime: 0,
+      })
+      const unsubscribe = observer.subscribe(() => {})
+      const query = queryClient.getQueryCache().find({ queryKey: ['stale'] })!
+      query.setState({
+        ...query.state,
+        fetchStatus: 'idle',
+        data: 'data',
+        dataUpdatedAt: 0,
+      })
+
+      try {
+        expect(query.isStale()).toBe(true)
+        expect(getQueryStatusLabel(query)).toBe('stale')
+      } finally {
+        unsubscribe()
+      }
+    })
+
+    it('should return "fresh" when query is idle, has observers, and is not stale', () => {
+      const query = buildQuery(['q'], {
+        fetchStatus: 'idle',
+        data: 'fresh-data',
+        dataUpdatedAt: Date.now(),
+      })
+      const unsubscribe = addObserver(query)
+
+      try {
+        expect(getQueryStatusLabel(query)).toBe('fresh')
+      } finally {
+        unsubscribe()
+      }
+    })
+  })
+
+  describe('getQueryStatusColor', () => {
+    let queryClient: QueryClient
+
+    function makeState(fetchStatus: FetchStatus): Query['state'] {
+      const query = queryClient.getQueryCache().build(queryClient, {
+        queryKey: [fetchStatus],
+      })
+      query.setState({ fetchStatus })
+      return query.state
+    }
+
+    beforeEach(() => {
+      queryClient = new QueryClient()
+    })
+
+    afterEach(() => {
+      queryClient.clear()
+    })
+
+    it('should return "blue" when fetchStatus is "fetching"', () => {
+      expect(
+        getQueryStatusColor({
+          queryState: makeState('fetching'),
+          observerCount: 1,
+          isStale: false,
+        }),
+      ).toBe('blue')
+    })
+
+    it('should return "blue" even when there are no observers if fetchStatus is "fetching"', () => {
+      expect(
+        getQueryStatusColor({
+          queryState: makeState('fetching'),
+          observerCount: 0,
+          isStale: false,
+        }),
+      ).toBe('blue')
+    })
+
+    it('should return "gray" when there are no observers', () => {
+      expect(
+        getQueryStatusColor({
+          queryState: makeState('idle'),
+          observerCount: 0,
+          isStale: false,
+        }),
+      ).toBe('gray')
+    })
+
+    it('should return "purple" when fetchStatus is "paused"', () => {
+      expect(
+        getQueryStatusColor({
+          queryState: makeState('paused'),
+          observerCount: 1,
+          isStale: false,
+        }),
+      ).toBe('purple')
+    })
+
+    it('should return "purple" even when stale if fetchStatus is "paused"', () => {
+      expect(
+        getQueryStatusColor({
+          queryState: makeState('paused'),
+          observerCount: 1,
+          isStale: true,
+        }),
+      ).toBe('purple')
+    })
+
+    it('should return "yellow" when query is stale', () => {
+      expect(
+        getQueryStatusColor({
+          queryState: makeState('idle'),
+          observerCount: 1,
+          isStale: true,
+        }),
+      ).toBe('yellow')
+    })
+
+    it('should return "green" when query is active and not stale', () => {
+      expect(
+        getQueryStatusColor({
+          queryState: makeState('idle'),
+          observerCount: 1,
+          isStale: false,
+        }),
+      ).toBe('green')
+    })
+  })
 })