@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/widgets/stores/widget-store.test.ts

@@ -0,0 +1,601 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useWidgetStore } from './widget-store'
+
+describe('WidgetStore', () => {
+  beforeEach(() => {
+    // Reset the store before each test
+    useWidgetStore.setState({
+      widgets: {},
+    })
+  })
+
+  describe('setWidget', () => {
+    it('should add a new widget to the store', () => {
+      const widgetId = 'test-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        title: 'Test Formula',
+        isLoading: false,
+        visible: true,
+        data: {
+          value: 100,
+          prefix: '$',
+        },
+      })
+
+      const widgets = useWidgetStore.getState().widgets
+      expect(widgets[widgetId]).toBeDefined()
+      expect(widgets[widgetId]?.id).toBe(widgetId)
+      expect(widgets[widgetId]?.type).toBe('formula')
+    })
+
+    it('should update an existing widget', () => {
+      const widgetId = 'test-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        title: 'Test Formula',
+        isLoading: false,
+        visible: true,
+        data: {
+          value: 100,
+        },
+      })
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        title: 'Updated Formula',
+        data: {
+          value: 200,
+        },
+      })
+
+      const widgets = useWidgetStore.getState().widgets
+      expect((widgets[widgetId]?.data as { value: number })?.value).toBe(200)
+    })
+
+    it('should handle multiple widgets', () => {
+      useWidgetStore.getState().setWidget('widget-1', {
+        type: 'formula',
+        isLoading: false,
+        visible: true,
+      })
+
+      useWidgetStore.getState().setWidget('widget-2', {
+        type: 'bar',
+        isLoading: false,
+        visible: true,
+      })
+
+      const widgets = useWidgetStore.getState().widgets
+      expect(Object.keys(widgets)).toHaveLength(2)
+      expect(widgets['widget-1']).toBeDefined()
+      expect(widgets['widget-2']).toBeDefined()
+    })
+  })
+
+  describe('removeWidget', () => {
+    it('should remove a widget from the store', () => {
+      const widgetId = 'test-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        isLoading: false,
+        visible: true,
+      })
+
+      expect(useWidgetStore.getState().widgets[widgetId]).toBeDefined()
+
+      useWidgetStore.getState().removeWidget(widgetId)
+      expect(useWidgetStore.getState().widgets[widgetId]).toBeUndefined()
+    })
+
+    it('should handle removing non-existent widget gracefully', () => {
+      useWidgetStore.getState().removeWidget('non-existent')
+      expect(useWidgetStore.getState().widgets).toEqual({})
+    })
+
+    it('should only remove the specified widget', () => {
+      useWidgetStore.getState().setWidget('widget-1', {
+        type: 'formula',
+        isLoading: false,
+        visible: true,
+      })
+
+      useWidgetStore.getState().setWidget('widget-2', {
+        type: 'formula',
+        isLoading: false,
+        visible: true,
+      })
+
+      useWidgetStore.getState().removeWidget('widget-1')
+
+      const widgets = useWidgetStore.getState().widgets
+      expect(widgets['widget-1']).toBeUndefined()
+      expect(widgets['widget-2']).toBeDefined()
+    })
+  })
+
+  describe('clearWidgets', () => {
+    it('should remove all widgets', () => {
+      useWidgetStore.getState().setWidget('widget-1', {
+        type: 'formula',
+        isLoading: false,
+        visible: true,
+      })
+
+      useWidgetStore.getState().setWidget('widget-2', {
+        type: 'bar',
+        isLoading: false,
+        visible: true,
+      })
+
+      expect(Object.keys(useWidgetStore.getState().widgets)).toHaveLength(2)
+
+      useWidgetStore.getState().clearWidgets()
+
+      expect(useWidgetStore.getState().widgets).toEqual({})
+    })
+
+    it('should work on empty store', () => {
+      useWidgetStore.getState().clearWidgets()
+      expect(useWidgetStore.getState().widgets).toEqual({})
+    })
+  })
+
+  describe('getWidget', () => {
+    it('should get a widget by id', () => {
+      const widgetId = 'test-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        title: 'Test Widget',
+        isLoading: false,
+        visible: true,
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget).toBeDefined()
+      expect(widget?.id).toBe(widgetId)
+    })
+
+    it('should return undefined for non-existent widget', () => {
+      const widget = useWidgetStore.getState().getWidget('non-existent')
+      expect(widget).toBeUndefined()
+    })
+  })
+
+  describe('unknown type data handling', () => {
+    it('should handle widget with unknown type and data structure', () => {
+      const widgetId = 'custom-widget'
+
+      // Example: A custom widget type with arbitrary data
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'custom',
+        title: 'Custom Widget',
+        isLoading: false,
+        visible: true,
+        data: {
+          customField: 'value',
+          nestedData: {
+            foo: 'bar',
+            count: 42,
+          },
+        },
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget).toBeDefined()
+      expect(widget?.type).toBe('custom')
+
+      // Type assertion needed when accessing unknown data
+      const customData = widget?.data as {
+        customField: string
+        nestedData: { foo: string; count: number }
+      }
+      expect(customData?.customField).toBe('value')
+      expect(customData?.nestedData?.foo).toBe('bar')
+      expect(customData?.nestedData?.count).toBe(42)
+    })
+
+    it('should handle widget updates with different data structures', () => {
+      const widgetId = 'flexible-widget'
+
+      // Initial data structure
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'dynamic',
+        isLoading: false,
+        visible: true,
+        data: {
+          format: 'json',
+          content: { items: [] },
+        },
+      })
+
+      // Update with different data structure
+      useWidgetStore.getState().setWidget(widgetId, {
+        data: {
+          format: 'text',
+          content: 'Plain text content',
+          metadata: {
+            length: 18,
+          },
+        },
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const widgetData = widget?.data as {
+        format: string
+        content: string
+        metadata: { length: number }
+      }
+
+      expect(widgetData?.format).toBe('text')
+      expect(widgetData?.content).toBe('Plain text content')
+      expect(widgetData?.metadata?.length).toBe(18)
+    })
+
+    it('should handle complex nested unknown data', () => {
+      const widgetId = 'complex-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'analytics',
+        title: 'Analytics Dashboard',
+        isLoading: false,
+        visible: true,
+        data: {
+          metrics: [
+            { name: 'revenue', value: 1000, trend: 'up' },
+            { name: 'users', value: 500, trend: 'down' },
+          ],
+          timeRange: {
+            start: '2025-01-01',
+            end: '2025-01-31',
+          },
+          settings: {
+            displayMode: 'chart',
+            refreshInterval: 5000,
+          },
+        },
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+
+      // Type assertion for complex unknown data
+      const analyticsData = widget?.data as {
+        metrics: { name: string; value: number; trend: string }[]
+        timeRange: { start: string; end: string }
+        settings: { displayMode: string; refreshInterval: number }
+      }
+
+      expect(analyticsData.metrics).toHaveLength(2)
+      expect(analyticsData.metrics[0]?.name).toBe('revenue')
+      expect(analyticsData.metrics[0]?.value).toBe(1000)
+      expect(analyticsData.timeRange.start).toBe('2025-01-01')
+      expect(analyticsData.settings.displayMode).toBe('chart')
+    })
+
+    it('should handle widget with no data', () => {
+      const widgetId = 'no-data-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'placeholder',
+        title: 'Empty Widget',
+        isLoading: false,
+        visible: true,
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.data).toBeUndefined()
+    })
+
+    it('should preserve unknown type through updates', () => {
+      const widgetId = 'type-test-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'special-type-123',
+        isLoading: false,
+        visible: true,
+        data: { initial: true },
+      })
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        title: 'Updated Title',
+        data: { updated: true },
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.type).toBe('special-type-123')
+    })
+  })
+
+  describe('isFetching property', () => {
+    it('should set isFetching on a new widget', () => {
+      const widgetId = 'fetching-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        title: 'Fetching Widget',
+        isLoading: false,
+        isFetching: true,
+        visible: true,
+        data: { value: 100 },
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.isFetching).toBe(true)
+    })
+
+    it('should update isFetching on an existing widget', () => {
+      const widgetId = 'update-fetching-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        isLoading: false,
+        isFetching: false,
+        visible: true,
+      })
+
+      expect(useWidgetStore.getState().getWidget(widgetId)?.isFetching).toBe(
+        false,
+      )
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        isFetching: true,
+      })
+
+      expect(useWidgetStore.getState().getWidget(widgetId)?.isFetching).toBe(
+        true,
+      )
+    })
+
+    it('should handle undefined isFetching (optional property)', () => {
+      const widgetId = 'no-fetching-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        isLoading: false,
+        visible: true,
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.isFetching).toBeUndefined()
+    })
+
+    it('should handle different combinations of isLoading and isFetching', () => {
+      const widgetId = 'state-combination-widget'
+
+      // Both false
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        isLoading: false,
+        isFetching: false,
+        visible: true,
+      })
+
+      let widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.isLoading).toBe(false)
+      expect(widget?.isFetching).toBe(false)
+
+      // Loading true, fetching false
+      useWidgetStore.getState().setWidget(widgetId, {
+        isLoading: true,
+        isFetching: false,
+      })
+
+      widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.isLoading).toBe(true)
+      expect(widget?.isFetching).toBe(false)
+
+      // Loading false, fetching true
+      useWidgetStore.getState().setWidget(widgetId, {
+        isLoading: false,
+        isFetching: true,
+      })
+
+      widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.isLoading).toBe(false)
+      expect(widget?.isFetching).toBe(true)
+
+      // Both true
+      useWidgetStore.getState().setWidget(widgetId, {
+        isLoading: true,
+        isFetching: true,
+      })
+
+      widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.isLoading).toBe(true)
+      expect(widget?.isFetching).toBe(true)
+    })
+
+    it('should toggle isFetching multiple times', () => {
+      const widgetId = 'toggle-fetching-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        isLoading: false,
+        isFetching: false,
+        visible: true,
+      })
+
+      expect(useWidgetStore.getState().getWidget(widgetId)?.isFetching).toBe(
+        false,
+      )
+
+      useWidgetStore.getState().setWidget(widgetId, { isFetching: true })
+      expect(useWidgetStore.getState().getWidget(widgetId)?.isFetching).toBe(
+        true,
+      )
+
+      useWidgetStore.getState().setWidget(widgetId, { isFetching: false })
+      expect(useWidgetStore.getState().getWidget(widgetId)?.isFetching).toBe(
+        false,
+      )
+
+      useWidgetStore.getState().setWidget(widgetId, { isFetching: true })
+      expect(useWidgetStore.getState().getWidget(widgetId)?.isFetching).toBe(
+        true,
+      )
+    })
+
+    it('should preserve isFetching when updating other properties', () => {
+      const widgetId = 'preserve-fetching-widget'
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'formula',
+        title: 'Original Title',
+        isLoading: false,
+        isFetching: true,
+        visible: true,
+        data: { value: 100 },
+      })
+
+      expect(useWidgetStore.getState().getWidget(widgetId)?.isFetching).toBe(
+        true,
+      )
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        title: 'Updated Title',
+        data: { value: 200 },
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.isFetching).toBe(true)
+      expect((widget?.data as { value: number })?.value).toBe(200)
+    })
+  })
+
+  describe('Tool Dependency Management', () => {
+    const widgetId = 'test-widget-deps'
+
+    beforeEach(() => {
+      useWidgetStore.getState().clearWidgets()
+    })
+
+    describe('Pipeline Filtering', () => {
+      it('skips tools disabled by other enabled tools', async () => {
+        const executionOrder: string[] = []
+
+        const toolA: import('./types').ToolRegistration = {
+          id: 'tool-a',
+          order: 10,
+          enabled: true,
+          fn: (data) => {
+            executionOrder.push('tool-a')
+            return data
+          },
+        }
+
+        const toolB: import('./types').ToolRegistration = {
+          id: 'tool-b',
+          order: 20,
+          enabled: true,
+          fn: (data) => {
+            executionOrder.push('tool-b')
+            return data
+          },
+        }
+
+        const toolC: import('./types').ToolRegistration = {
+          id: 'tool-c',
+          order: 30,
+          enabled: true,
+          fn: (data) => {
+            executionOrder.push('tool-c')
+            return data
+          },
+          disables: ['tool-b'],
+        }
+
+        useWidgetStore.getState().registerTool(widgetId, toolA)
+        useWidgetStore.getState().registerTool(widgetId, toolB)
+        useWidgetStore.getState().registerTool(widgetId, toolC)
+
+        await useWidgetStore.getState().executeToolPipeline(widgetId, {})
+
+        // tool-b should be skipped because tool-c disables it
+        expect(executionOrder).toEqual(['tool-a', 'tool-c'])
+        expect(executionOrder).not.toContain('tool-b')
+      })
+
+      it('includes tool when disabling tool is not enabled', async () => {
+        const executionOrder: string[] = []
+
+        const toolA: import('./types').ToolRegistration = {
+          id: 'tool-a',
+          order: 10,
+          enabled: true,
+          fn: (data) => {
+            executionOrder.push('tool-a')
+            return data
+          },
+        }
+
+        const toolB: import('./types').ToolRegistration = {
+          id: 'tool-b',
+          order: 20,
+          enabled: false, // Disabled
+          fn: (data) => {
+            executionOrder.push('tool-b')
+            return data
+          },
+          disables: ['tool-a'],
+        }
+
+        useWidgetStore.getState().registerTool(widgetId, toolA)
+        useWidgetStore.getState().registerTool(widgetId, toolB)
+
+        await useWidgetStore.getState().executeToolPipeline(widgetId, {})
+
+        // tool-a should execute because tool-b is disabled
+        expect(executionOrder).toEqual(['tool-a'])
+      })
+
+      it('handles multiple tools disabling the same target', async () => {
+        const executionOrder: string[] = []
+
+        const toolA: import('./types').ToolRegistration = {
+          id: 'tool-a',
+          order: 10,
+          enabled: true,
+          fn: (data) => {
+            executionOrder.push('tool-a')
+            return data
+          },
+        }
+
+        const toolB: import('./types').ToolRegistration = {
+          id: 'tool-b',
+          order: 20,
+          enabled: true,
+          fn: (data) => {
+            executionOrder.push('tool-b')
+            return data
+          },
+          disables: ['tool-a'],
+        }
+
+        const toolC: import('./types').ToolRegistration = {
+          id: 'tool-c',
+          order: 30,
+          enabled: true,
+          fn: (data) => {
+            executionOrder.push('tool-c')
+            return data
+          },
+          disables: ['tool-a'],
+        }
+
+        useWidgetStore.getState().registerTool(widgetId, toolA)
+        useWidgetStore.getState().registerTool(widgetId, toolB)
+        useWidgetStore.getState().registerTool(widgetId, toolC)
+
+        await useWidgetStore.getState().executeToolPipeline(widgetId, {})
+
+        // tool-a should be skipped (disabled by both tool-b and tool-c)
+        expect(executionOrder).toEqual(['tool-b', 'tool-c'])
+        expect(executionOrder).not.toContain('tool-a')
+      })
+    })
+  })
+})