@meistrari/tela-build 1.0.2 → 1.1.0

package/components/tela/status/status.vue

@@ -224,7 +224,7 @@ const variantConfig: Record<TelaStatusVariant, StatusConfig> = {
     },
     'failed': {
         label: 'Failed',
-        backgroundColor: 'bg-red-50',
+        backgroundColor: 'bg-red-100',
         textColor: 'text-red-700',
         iconName: 'close',
         iconColor: 'red-500',

package/composables/__tests__/optimistic-async-data.test.ts

@@ -0,0 +1,606 @@
+import { describe, it, expect } from 'vitest'
+import { createApp, nextTick, watch, watchEffect } from 'vue'
+import type { App } from 'vue'
+import { useOptimisticAsyncData } from '../optimistic-async-data'
+
+/**
+ * Helper function to test composables that use provide/inject
+ * Creates a Vue app context for the composable
+ */
+function withSetup<T>(composable: () => T): [T, App] {
+    let result!: T
+    const app = createApp({
+        setup() {
+            result = composable()
+            // Return a render function to suppress warnings
+            return () => {}
+        },
+    })
+    app.mount(document.createElement('div'))
+    return [result, app]
+}
+
+describe('useOptimisticAsyncData', () => {
+    describe('basic functionality', () => {
+        it('should initialize with idle state', () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData({ key: 'test-1' }))
+
+            expect(asyncData.state.value).toBe('idle')
+            expect(asyncData.data.value).toBe(null)
+            expect(asyncData.error.value).toBe(null)
+        })
+
+        it('should generate unique key when not provided', () => {
+            const [asyncData1] = withSetup(() => useOptimisticAsyncData())
+            const [asyncData2] = withSetup(() => useOptimisticAsyncData())
+
+            expect(asyncData1.key).toBeDefined()
+            expect(asyncData2.key).toBeDefined()
+            expect(asyncData1.key).not.toBe(asyncData2.key)
+            expect(asyncData1.key).toMatch(/^async-data-/)
+        })
+
+        it('should use provided custom key', () => {
+            const customKey = 'my-custom-key'
+            const [asyncData] = withSetup(() => useOptimisticAsyncData({ key: customKey }))
+
+            expect(asyncData.key).toBe(customKey)
+        })
+    })
+
+    describe('state transitions - success flow', () => {
+        it('should transition from idle → pending → success', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<string>({ key: 'test-2' }))
+
+            const states: string[] = []
+            watchEffect(() => {
+                states.push(asyncData.state.value)
+            })
+
+            const promise = asyncData.promise(async () => {
+                await new Promise(resolve => setTimeout(resolve, 10))
+                return 'test-data'
+            })()
+
+            await nextTick()
+            await promise
+
+            expect(states).toEqual(['idle', 'pending', 'success'])
+            expect(asyncData.state.value).toBe('success')
+            expect(asyncData.data.value).toBe('test-data')
+            expect(asyncData.error.value).toBe(null)
+        })
+
+        it('should return data on successful promise', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<{ id: number }>({ key: 'test-3' }))
+
+            const result = await asyncData.promise(async () => ({ id: 123 }))()
+
+            expect(result).toEqual({ id: 123 })
+            expect(asyncData.data.value).toEqual({ id: 123 })
+        })
+
+        it('should update data on subsequent successful operations', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<number>({ key: 'test-4' }))
+
+            await asyncData.promise(async () => 1)()
+            expect(asyncData.data.value).toBe(1)
+
+            await asyncData.promise(async () => 2)()
+            expect(asyncData.data.value).toBe(2)
+
+            await asyncData.promise(async () => 3)()
+            expect(asyncData.data.value).toBe(3)
+        })
+
+        it('should pass arguments to the async function correctly', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<string>({ key: 'test-args' }))
+
+            const result = await asyncData.promise(async (a: number, b: string, c: boolean) => {
+                return `${a}-${b}-${c}`
+            })(42, 'hello', true)
+
+            expect(result).toBe('42-hello-true')
+            expect(asyncData.data.value).toBe('42-hello-true')
+            expect(asyncData.state.value).toBe('success')
+        })
+
+        it('should pass object arguments correctly', async () => {
+            interface Input { id: number, name: string }
+            interface Output { processed: boolean, input: Input }
+
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<Output>({ key: 'test-obj-args' }))
+
+            const input: Input = { id: 1, name: 'test' }
+            const result = await asyncData.promise(async (data: Input) => {
+                return { processed: true, input: data }
+            })(input)
+
+            expect(result).toEqual({ processed: true, input: { id: 1, name: 'test' } })
+            expect(asyncData.data.value).toEqual({ processed: true, input: { id: 1, name: 'test' } })
+        })
+    })
+
+    describe('state transitions - error flow', () => {
+        it('should transition from idle → pending → error', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData({ key: 'test-5' }))
+
+            const states: string[] = []
+            watchEffect(() => {
+                states.push(asyncData.state.value)
+            })
+
+            const promise = asyncData.promise(async () => {
+                await new Promise(resolve => setTimeout(resolve, 10))
+                throw new Error('Test error')
+            })()
+
+            await nextTick()
+            await expect(promise).rejects.toThrow('Test error')
+
+            expect(states).toEqual(['idle', 'pending', 'error'])
+            expect(asyncData.state.value).toBe('error')
+            expect(asyncData.error.value).toBeInstanceOf(Error)
+            expect(asyncData.error.value?.message).toBe('Test error')
+        })
+
+        it('should throw error on failed promise', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData({ key: 'test-6' }))
+
+            await expect(asyncData.promise(async () => {
+                throw new Error('Test error')
+            })()).rejects.toThrow('Test error')
+
+            expect(asyncData.state.value).toBe('error')
+            expect(asyncData.error.value).toBeInstanceOf(Error)
+            expect(asyncData.error.value?.message).toBe('Test error')
+        })
+    })
+
+    describe('optimistic updates and rollback', () => {
+        it('should preserve previous data during pending state', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<string>({ key: 'test-9' }))
+
+            // Set initial data
+            await asyncData.promise(async () => 'initial-data')()
+            expect(asyncData.data.value).toBe('initial-data')
+
+            // Start new operation
+            const promise = asyncData.promise(async () => {
+                await new Promise(resolve => setTimeout(resolve, 10))
+                return 'new-data'
+            })()
+
+            // During pending, data should still be available
+            await nextTick()
+            expect(asyncData.state.value).toBe('pending')
+            expect(asyncData.data.value).toBe('initial-data')
+
+            await promise
+            expect(asyncData.data.value).toBe('new-data')
+        })
+
+        it('should rollback to previous data on error', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<string>({ key: 'test-10' }))
+
+            // Set initial data
+            await asyncData.promise(async () => 'initial-data')()
+            expect(asyncData.data.value).toBe('initial-data')
+
+            // Fail operation
+            await expect(asyncData.promise(async () => {
+                throw new Error('Operation failed')
+            })()).rejects.toThrow('Operation failed')
+
+            // Data should be rolled back
+            expect(asyncData.state.value).toBe('error')
+            expect(asyncData.data.value).toBe('initial-data')
+            expect(asyncData.error.value?.message).toBe('Operation failed')
+        })
+
+        it('should rollback to null when no previous data exists', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<string>({ key: 'test-11' }))
+
+            await expect(asyncData.promise(async () => {
+                throw new Error('First operation failed')
+            })()).rejects.toThrow('First operation failed')
+
+            expect(asyncData.state.value).toBe('error')
+            expect(asyncData.data.value).toBe(null)
+            expect(asyncData.error.value).toBeInstanceOf(Error)
+            expect(asyncData.error.value?.message).toBe('First operation failed')
+        })
+
+        it('should handle multiple consecutive errors', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<number>({ key: 'test-12' }))
+
+            // Success
+            await asyncData.promise(async () => 100)()
+            expect(asyncData.data.value).toBe(100)
+
+            // First error - should rollback to 100
+            await expect(asyncData.promise(async () => {
+                throw new Error('Error 1')
+            })()).rejects.toThrow('Error 1')
+
+            expect(asyncData.state.value).toBe('error')
+            expect(asyncData.data.value).toBe(100)
+            expect(asyncData.error.value).toBeInstanceOf(Error)
+            expect(asyncData.error.value?.message).toBe('Error 1')
+
+            // Second error - should still have 100
+            await expect(asyncData.promise(async () => {
+                throw new Error('Error 2')
+            })()).rejects.toThrow('Error 2')
+
+            expect(asyncData.state.value).toBe('error')
+            expect(asyncData.data.value).toBe(100)
+            expect(asyncData.error.value).toBeInstanceOf(Error)
+            expect(asyncData.error.value?.message).toBe('Error 2')
+        })
+    })
+
+    describe('reset', () => {
+        it('should reset the async data state to idle', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<string>({ key: 'test-13' }))
+
+            await asyncData.promise(async () => 'initial-data')()
+            expect(asyncData.data.value).toBe('initial-data')
+            expect(asyncData.state.value).toBe('success')
+            asyncData.reset()
+            expect(asyncData.state.value).toBe('idle')
+            expect(asyncData.data.value).toBe(null)
+            expect(asyncData.error.value).toBe(null)
+        })
+    })
+
+    describe('provide/inject pattern', () => {
+        it('should create independent instances when same key used in same component', async () => {
+            const key = 'shared-key'
+
+            // When multiple instances with same key are created in the same component,
+            // only the first one provides - subsequent ones get their own independent state
+            // This is expected Vue provide/inject behavior within the same component
+            const [result] = withSetup(() => {
+                const instance1 = useOptimisticAsyncData<string>({ key })
+                const instance2 = useOptimisticAsyncData<string>({ key })
+                return { instance1, instance2 }
+            })
+
+            // Update through first instance
+            await result.instance1.promise(async () => 'shared-data')()
+
+            // First instance has data
+            expect(result.instance1.data.value).toBe('shared-data')
+            expect(result.instance1.state.value).toBe('success')
+
+            // Second instance remains independent (expected behavior in same component)
+            expect(result.instance2.state.value).toBe('idle')
+        })
+
+        it('should allow each instance to have independent state', async () => {
+            const key = 'independent-key'
+
+            // Create two separate app instances with the same key
+            const [instance1] = withSetup(() => useOptimisticAsyncData<number>({ key }))
+            const [instance2] = withSetup(() => useOptimisticAsyncData<number>({ key }))
+
+            // Update first instance
+            await instance1.promise(async () => 100)()
+
+            // Update second instance
+            await instance2.promise(async () => 200)()
+
+            // Each instance maintains its own state
+            expect(instance1.data.value).toBe(100)
+            expect(instance2.data.value).toBe(200)
+        })
+
+        it('should maintain separate state for different keys', async () => {
+            // Create instances with different keys in the same app context
+            const [result] = withSetup(() => {
+                const instance1 = useOptimisticAsyncData<string>({ key: 'key-1' })
+                const instance2 = useOptimisticAsyncData<string>({ key: 'key-2' })
+                return { instance1, instance2 }
+            })
+
+            await result.instance1.promise(async () => 'data-1')()
+            await result.instance2.promise(async () => 'data-2')()
+
+            expect(result.instance1.data.value).toBe('data-1')
+            expect(result.instance2.data.value).toBe('data-2')
+        })
+
+        it('should handle errors independently across different keys', async () => {
+            const [result] = withSetup(() => {
+                const instance1 = useOptimisticAsyncData<string>({ key: 'key-error-1' })
+                const instance2 = useOptimisticAsyncData<string>({ key: 'key-error-2' })
+                return { instance1, instance2 }
+            })
+
+            await expect(result.instance1.promise(async () => {
+                throw new Error('Instance1 error')
+            })()).rejects.toThrow('Instance1 error')
+
+            expect(result.instance1.state.value).toBe('error')
+            expect(result.instance1.error.value).toBeInstanceOf(Error)
+            expect(result.instance1.error.value?.message).toBe('Instance1 error')
+            expect(result.instance1.data.value).toBe(null)
+
+            expect(result.instance2.state.value).toBe('idle')
+            expect(result.instance2.error.value).toBe(null)
+            expect(result.instance2.data.value).toBe(null)
+
+            await expect(result.instance2.promise(async () => {
+                throw new Error('Instance2 error')
+            })()).rejects.toThrow('Instance2 error')
+
+            expect(result.instance2.state.value).toBe('error')
+            expect(result.instance2.error.value).toBeInstanceOf(Error)
+            expect(result.instance2.error.value?.message).toBe('Instance2 error')
+            expect(result.instance2.data.value).toBe(null)
+
+            expect(result.instance1.state.value).toBe('error')
+            expect(result.instance1.error.value).toBeInstanceOf(Error)
+            expect(result.instance1.error.value?.message).toBe('Instance1 error')
+            expect(result.instance1.data.value).toBe(null)
+
+            expect(result.instance2.state.value).toBe('error')
+            expect(result.instance2.error.value).toBeInstanceOf(Error)
+            expect(result.instance2.error.value?.message).toBe('Instance2 error')
+            expect(result.instance2.data.value).toBe(null)
+        })
+
+        it('should handle errors independently when created in same component', async () => {
+            const key = 'error-key'
+
+            const [result] = withSetup(() => {
+                const instance1 = useOptimisticAsyncData<string>({ key })
+                const instance2 = useOptimisticAsyncData<string>({ key })
+                return { instance1, instance2 }
+            })
+
+            await expect(result.instance1.promise(async () => {
+                throw new Error('Instance1 error')
+            })()).rejects.toThrow('Instance1 error')
+
+            // First instance has error
+            expect(result.instance1.state.value).toBe('error')
+            expect(result.instance1.error.value?.message).toBe('Instance1 error')
+            expect(result.instance1.data.value).toBe(null)
+
+            // Second instance remains independent
+            expect(result.instance2.state.value).toBe('idle')
+            expect(result.instance2.error.value).toBe(null)
+            expect(result.instance2.data.value).toBe(null)
+        })
+    })
+
+    describe('concurrent operations', () => {
+        it('should handle multiple concurrent promises', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<number>({ key: 'test-concurrent-1' }))
+
+            // Start multiple operations
+            const promise1 = asyncData.promise(async () => {
+                await new Promise(resolve => setTimeout(resolve, 20))
+                return 1
+            })()
+
+            const promise2 = asyncData.promise(async () => {
+                await new Promise(resolve => setTimeout(resolve, 10))
+                return 2
+            })()
+
+            const promise3 = asyncData.promise(async () => {
+                await new Promise(resolve => setTimeout(resolve, 5))
+                return 3
+            })()
+
+            await Promise.all([promise1, promise2, promise3])
+
+            // Last operation wins
+            expect(asyncData.data.value).toBeDefined()
+            expect(asyncData.state.value).toBe('success')
+        })
+
+        it('should maintain state consistency with rapid successive calls', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<number>({ key: 'test-concurrent-2' }))
+
+            // Rapid successive operations
+            await asyncData.promise(async () => 1)()
+            await asyncData.promise(async () => 2)()
+            await asyncData.promise(async () => 3)()
+            await asyncData.promise(async () => 4)()
+            await asyncData.promise(async () => 5)()
+
+            expect(asyncData.data.value).toBe(5)
+            expect(asyncData.state.value).toBe('success')
+        })
+    })
+
+    describe('computed properties reactivity', () => {
+        it('should trigger watchers on state changes', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<string>({ key: 'test-watch-1' }))
+
+            const stateChanges: string[] = []
+            watch(() => asyncData.state.value, (newState) => {
+                stateChanges.push(newState)
+            })
+
+            await asyncData.promise(async () => 'test-data')()
+
+            expect(stateChanges).toContain('pending')
+            expect(stateChanges).toContain('success')
+        })
+
+        it('should trigger watchers on data changes', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<number>({ key: 'test-watch-2' }))
+
+            const dataChanges: (number | null)[] = []
+            watch(() => asyncData.data.value, (newData) => {
+                dataChanges.push(newData)
+            })
+
+            await asyncData.promise(async () => 42)()
+
+            expect(dataChanges).toContain(42)
+        })
+
+        it('should trigger watchers on error changes', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData({ key: 'test-watch-3' }))
+
+            const errorChanges: (Error | null)[] = []
+            watch(() => asyncData.error.value, (newError) => {
+                errorChanges.push(newError)
+            })
+
+            await expect(asyncData.promise(async () => {
+                throw new Error('Watch error')
+            })()).rejects.toThrow('Watch error')
+
+            expect(errorChanges.some(err => err?.message === 'Watch error')).toBe(true)
+            expect(asyncData.error.value).toBeInstanceOf(Error)
+            expect(asyncData.error.value?.message).toBe('Watch error')
+        })
+    })
+
+    describe('edge cases', () => {
+        it('should handle async functions that return undefined', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<undefined>({ key: 'test-edge-1' }))
+
+            const result = await asyncData.promise(async () => undefined)()
+
+            expect(result).toBe(undefined)
+            expect(asyncData.state.value).toBe('success')
+            expect(asyncData.data.value).toBe(undefined)
+        })
+
+        it('should handle async functions that return null', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<null>({ key: 'test-edge-2' }))
+
+            const result = await asyncData.promise(async () => null)()
+
+            expect(result).toBe(null)
+            expect(asyncData.state.value).toBe('success')
+        })
+
+        it('should handle complex nested objects', async () => {
+            interface ComplexData {
+                user: { id: number, name: string }
+                items: Array<{ id: string, value: number }>
+            }
+
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<ComplexData>({ key: 'test-edge-3' }))
+
+            const complexData: ComplexData = {
+                user: { id: 1, name: 'Test User' },
+                items: [
+                    { id: 'a', value: 10 },
+                    { id: 'b', value: 20 },
+                ],
+            }
+
+            await asyncData.promise(async () => complexData)()
+
+            expect(asyncData.data.value).toEqual(complexData)
+            expect(asyncData.data.value?.user.name).toBe('Test User')
+            expect(asyncData.data.value?.items).toHaveLength(2)
+        })
+
+        it('should handle very fast operations', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<string>({ key: 'test-edge-4' }))
+
+            // Operation that completes immediately
+            await asyncData.promise(async () => 'instant')()
+
+            expect(asyncData.state.value).toBe('success')
+            expect(asyncData.data.value).toBe('instant')
+        })
+
+        it('should allow recovery from error state', async () => {
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<string>({ key: 'test-edge-5' }))
+
+            // Initial success
+            await asyncData.promise(async () => 'initial')()
+            expect(asyncData.state.value).toBe('success')
+
+            // Error
+            await expect(asyncData.promise(async () => {
+                throw new Error('Temporary error')
+            })()).rejects.toThrow('Temporary error')
+            expect(asyncData.state.value).toBe('error')
+            expect(asyncData.data.value).toBe('initial')
+            expect(asyncData.error.value).toBeInstanceOf(Error)
+            expect(asyncData.error.value?.message).toBe('Temporary error')
+
+            // Recovery
+            await asyncData.promise(async () => 'recovered')()
+            expect(asyncData.state.value).toBe('success')
+            expect(asyncData.data.value).toBe('recovered')
+            expect(asyncData.error.value).toBe(null)
+        })
+    })
+
+    describe('type safety', () => {
+        it('should maintain type safety for generic data types', async () => {
+            interface User {
+                id: number
+                email: string
+            }
+
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<User>({ key: 'test-types-1' }))
+
+            await asyncData.promise(async () => ({
+                id: 1,
+                email: 'test@example.com',
+            }))()
+
+            // TypeScript should infer the correct type
+            const user = asyncData.data.value
+            if (user) {
+                expect(user.id).toBe(1)
+                expect(user.email).toBe('test@example.com')
+            }
+        })
+
+        it('should handle union types', async () => {
+            type Result = { success: true, data: string } | { success: false, error: string }
+
+            const [asyncData] = withSetup(() => useOptimisticAsyncData<Result>({ key: 'test-types-2' }))
+
+            await asyncData.promise(async () => ({
+                success: true,
+                data: 'test',
+            }))()
+
+            const result = asyncData.data.value
+            expect(result).toBeDefined()
+        })
+    })
+
+    describe('injection key caching', () => {
+        it('should cache injection keys for reuse', async () => {
+            const key = 'cached-key-test'
+
+            // Create multiple instances with same key
+            const [instance1] = withSetup(() => useOptimisticAsyncData({ key }))
+            const [instance2] = withSetup(() => useOptimisticAsyncData({ key }))
+            const [instance3] = withSetup(() => useOptimisticAsyncData({ key }))
+
+            // Each instance can work independently
+            await instance1.promise(async () => 'value-1')()
+            await instance2.promise(async () => 'value-2')()
+            await instance3.promise(async () => 'value-3')()
+
+            // All instances have their own state
+            expect(instance1.data.value).toBe('value-1')
+            expect(instance2.data.value).toBe('value-2')
+            expect(instance3.data.value).toBe('value-3')
+
+            // But they all use the same key
+            expect(instance1.key).toBe(key)
+            expect(instance2.key).toBe(key)
+            expect(instance3.key).toBe(key)
+        })
+    })
+})