@friggframework/devtools 2.0.0-next.5 → 2.0.0-next.50

package/management-ui/src/test/components/Welcome.test.jsx

@@ -0,0 +1,378 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import { BrowserRouter } from 'react-router-dom'
+import '@testing-library/jest-dom'
+import Welcome from '../../components/Welcome'
+import { FriggProvider } from '../../hooks/useFrigg'
+
+// Mock the navigation
+const mockNavigate = vi.fn()
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom')
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate
+  }
+})
+
+// Mock the socket hook
+vi.mock('../../hooks/useSocket', () => ({
+  useSocket: () => ({
+    on: vi.fn(),
+    emit: vi.fn()
+  })
+}))
+
+// Mock API
+const mockApi = {
+  get: vi.fn(),
+  post: vi.fn()
+}
+vi.mock('../../services/api', () => ({
+  default: mockApi
+}))
+
+// Test wrapper component
+const TestWrapper = ({ children, friggContextValue }) => {
+  return (
+    <BrowserRouter>
+      <FriggProvider>
+        {children}
+      </FriggProvider>
+    </BrowserRouter>
+  )
+}
+
+describe('Welcome Component - Repository Selection', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockNavigate.mockClear()
+    
+    // Default API responses
+    mockApi.get.mockImplementation((url) => {
+      switch (url) {
+        case '/api/project/repositories':
+          return Promise.resolve({
+            data: {
+              data: {
+                repositories: [],
+                currentRepository: null,
+                isMultiRepo: false
+              }
+            }
+          })
+        case '/api/repository/current':
+          return Promise.resolve({
+            data: { data: { repository: null } }
+          })
+        default:
+          return Promise.resolve({ data: { data: {} } })
+      }
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should show loading screen initially', async () => {
+    render(
+      <TestWrapper>
+        <Welcome />
+      </TestWrapper>
+    )
+
+    // Should show loading animation and messages
+    expect(screen.getByText(/Scanning for local Frigg repositories/)).toBeInTheDocument()
+  })
+
+  it('should show repository selection even for single repository', async () => {
+    // Mock single repository response
+    mockApi.get.mockImplementation((url) => {
+      switch (url) {
+        case '/api/project/repositories':
+          return Promise.resolve({
+            data: {
+              data: {
+                repositories: [{
+                  name: 'test-app',
+                  path: '/path/to/test-app',
+                  framework: 'React'
+                }],
+                currentRepository: null,
+                isMultiRepo: false
+              }
+            }
+          })
+        case '/api/repository/current':
+          return Promise.resolve({
+            data: { data: { repository: null } }
+          })
+        default:
+          return Promise.resolve({ data: { data: {} } })
+      }
+    })
+
+    render(
+      <TestWrapper>
+        <Welcome />
+      </TestWrapper>
+    )
+
+    // Wait for loading to complete
+    await waitFor(() => {
+      expect(screen.getByText('Welcome to Frigg')).toBeInTheDocument()
+    }, { timeout: 5000 })
+
+    // Should show repository selection interface, not auto-navigate
+    expect(screen.getByText('Choose Your Project')).toBeInTheDocument()
+    expect(screen.getByText('Select a Frigg Project')).toBeInTheDocument()
+    
+    // Should NOT navigate to dashboard automatically
+    expect(mockNavigate).not.toHaveBeenCalledWith('/dashboard')
+  })
+
+  it('should show repository selection when multiple repositories are found', async () => {
+    const mockRepositories = [
+      {
+        name: 'frigg-app-1',
+        path: '/path/to/app1',
+        framework: 'React',
+        version: '1.0.0'
+      },
+      {
+        name: 'frigg-app-2', 
+        path: '/path/to/app2',
+        framework: 'Vue',
+        version: '2.0.0'
+      },
+      {
+        name: 'frigg-app-3',
+        path: '/path/to/app3',
+        framework: 'Angular',
+        version: '1.5.0'
+      }
+    ]
+
+    // Mock multi-repository response
+    mockApi.get.mockImplementation((url) => {
+      switch (url) {
+        case '/api/project/repositories':
+          return Promise.resolve({
+            data: {
+              data: {
+                repositories: mockRepositories,
+                currentRepository: {
+                  name: 'Multiple Repositories Available',
+                  isMultiRepo: true,
+                  availableRepos: mockRepositories
+                },
+                isMultiRepo: true
+              }
+            }
+          })
+        case '/api/repository/current':
+          return Promise.resolve({
+            data: { 
+              data: { 
+                repository: {
+                  name: 'Multiple Repositories Available',
+                  isMultiRepo: true,
+                  availableRepos: mockRepositories
+                }
+              }
+            }
+          })
+        default:
+          return Promise.resolve({ data: { data: {} } })
+      }
+    })
+
+    render(
+      <TestWrapper>
+        <Welcome />
+      </TestWrapper>
+    )
+
+    // Wait for loading to complete
+    await waitFor(() => {
+      expect(screen.getByText('Welcome to Frigg Management UI')).toBeInTheDocument()
+    }, { timeout: 3000 })
+
+    // Should show repository selection interface
+    expect(screen.getByText('Select Your Frigg Application')).toBeInTheDocument()
+    
+    // Should show all repositories
+    expect(screen.getByText('frigg-app-1')).toBeInTheDocument()
+    expect(screen.getByText('frigg-app-2')).toBeInTheDocument()
+    expect(screen.getByText('frigg-app-3')).toBeInTheDocument()
+    
+    // Should show paths
+    expect(screen.getByText('/path/to/app1')).toBeInTheDocument()
+    expect(screen.getByText('/path/to/app2')).toBeInTheDocument() 
+    expect(screen.getByText('/path/to/app3')).toBeInTheDocument()
+
+    // Should NOT navigate to dashboard automatically
+    expect(mockNavigate).not.toHaveBeenCalledWith('/dashboard')
+  })
+
+  it('should handle repository selection via dropdown and launch button', async () => {
+    const mockRepositories = [
+      {
+        name: 'frigg-app-1',
+        path: '/path/to/app1',
+        framework: 'React'
+      },
+      {
+        name: 'frigg-app-2',
+        path: '/path/to/app2', 
+        framework: 'Vue'
+      }
+    ]
+
+    // Mock repository response
+    mockApi.get.mockImplementation((url) => {
+      switch (url) {
+        case '/api/project/repositories':
+          return Promise.resolve({
+            data: {
+              data: {
+                repositories: mockRepositories,
+                currentRepository: null,
+                isMultiRepo: false
+              }
+            }
+          })
+        case '/api/repository/current':
+          return Promise.resolve({
+            data: { data: { repository: null } }
+          })
+        default:
+          return Promise.resolve({ data: { data: {} } })
+      }
+    })
+
+    // Mock successful repository switch
+    mockApi.post.mockImplementation((url) => {
+      if (url === '/api/project/switch-repository') {
+        return Promise.resolve({
+          data: {
+            data: {
+              repository: {
+                name: 'frigg-app-1',
+                path: '/path/to/app1'
+              }
+            }
+          }
+        })
+      }
+      return Promise.resolve({ data: { data: {} } })
+    })
+
+    render(
+      <TestWrapper>
+        <Welcome />
+      </TestWrapper>
+    )
+
+    // Wait for loading to complete
+    await waitFor(() => {
+      expect(screen.getByText('Choose Your Project')).toBeInTheDocument()
+    })
+
+    // Click dropdown to open
+    const dropdown = screen.getByText('Select a Frigg Project')
+    fireEvent.click(dropdown)
+
+    // Wait for dropdown options to appear
+    await waitFor(() => {
+      expect(screen.getByText('frigg-app-1')).toBeInTheDocument()
+    })
+
+    // Click on first repository in dropdown
+    const repoOption = screen.getByText('frigg-app-1')
+    fireEvent.click(repoOption)
+
+    // Wait for selection to be made
+    await waitFor(() => {
+      expect(screen.getByText('Launch Project')).toBeInTheDocument()
+    })
+
+    // Click launch button
+    const launchButton = screen.getByText('Launch Project')
+    fireEvent.click(launchButton)
+
+    // Should call switch repository API
+    await waitFor(() => {
+      expect(mockApi.post).toHaveBeenCalledWith('/api/project/switch-repository', {
+        repositoryPath: '/path/to/app1'
+      })
+    })
+
+    // Should navigate to dashboard after selection
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/dashboard')
+    }, { timeout: 2000 })
+  })
+
+  it('should show create new app option when no repositories found', async () => {
+    // Mock empty repository response
+    mockApi.get.mockImplementation((url) => {
+      switch (url) {
+        case '/api/project/repositories':
+          return Promise.resolve({
+            data: {
+              data: {
+                repositories: [],
+                currentRepository: null,
+                isMultiRepo: false
+              }
+            }
+          })
+        case '/api/repository/current':
+          return Promise.resolve({
+            data: { data: { repository: null } }
+          })
+        default:
+          return Promise.resolve({ data: { data: {} } })
+      }
+    })
+
+    render(
+      <TestWrapper>
+        <Welcome />
+      </TestWrapper>
+    )
+
+    // Wait for loading to complete
+    await waitFor(() => {
+      expect(screen.getByText('Welcome to Frigg')).toBeInTheDocument()
+    })
+
+    // Should show no repositories message
+    expect(screen.getByText('No Frigg Projects Found')).toBeInTheDocument()
+    
+    // Should show create new button
+    expect(screen.getByText('Create Your First Frigg Application')).toBeInTheDocument()
+  })
+
+  it('should show loading steps with proper timing', async () => {
+    render(
+      <TestWrapper>
+        <Welcome />
+      </TestWrapper>
+    )
+
+    // Should start with first loading message
+    expect(screen.getByText('Scanning for local Frigg repositories...')).toBeInTheDocument()
+
+    // Wait for additional messages to appear
+    await waitFor(() => {
+      expect(screen.getByText('Checking installed integrations...')).toBeInTheDocument()
+    }, { timeout: 1000 })
+
+    await waitFor(() => {
+      expect(screen.getByText('Pinging npm for up-to-date API modules...')).toBeInTheDocument()
+    }, { timeout: 2000 })
+  })
+})

package/management-ui/src/test/mocks/server.js

@@ -0,0 +1,178 @@
+import { setupServer } from 'msw/node'
+import { http, HttpResponse } from 'msw'
+
+// Mock API responses
+export const handlers = [
+  // Health check
+  http.get('/health', () => {
+    return HttpResponse.json({
+      status: 'healthy',
+      timestamp: new Date().toISOString(),
+      uptime: 123.45,
+      version: '1.0.0'
+    })
+  }),
+
+  // Repository endpoints
+  http.get('/api/repository/current', () => {
+    return HttpResponse.json({
+      data: {
+        repository: {
+          name: 'test-repo',
+          path: '/test/path',
+          framework: 'React',
+          hasBackend: true,
+          version: '1.0.0'
+        }
+      }
+    })
+  }),
+
+  http.get('/api/project/repositories', () => {
+    return HttpResponse.json({
+      data: {
+        repositories: [
+          {
+            name: 'test-repo-1',
+            path: '/test/path/1',
+            framework: 'React',
+            hasBackend: true,
+            detectionReasons: ['frigg dependencies']
+          },
+          {
+            name: 'test-repo-2', 
+            path: '/test/path/2',
+            framework: 'Vue',
+            hasBackend: false,
+            detectionReasons: ['frigg config file']
+          }
+        ]
+      }
+    })
+  }),
+
+  http.post('/api/project/switch-repository', () => {
+    return HttpResponse.json({
+      data: {
+        repository: {
+          name: 'switched-repo',
+          path: '/switched/path'
+        }
+      }
+    })
+  }),
+
+  // Project status
+  http.get('/api/project/status', () => {
+    return HttpResponse.json({
+      data: {
+        status: 'running'
+      }
+    })
+  }),
+
+  // Integrations
+  http.get('/api/integrations', () => {
+    return HttpResponse.json({
+      data: {
+        integrations: [
+          {
+            name: 'slack',
+            version: '1.0.0',
+            installed: true,
+            configured: true
+          },
+          {
+            name: 'github',
+            version: '2.0.0', 
+            installed: false,
+            configured: false
+          }
+        ]
+      }
+    })
+  }),
+
+  // Environment
+  http.get('/api/environment', () => {
+    return HttpResponse.json({
+      data: {
+        variables: {
+          NODE_ENV: 'test',
+          DATABASE_URL: 'test://localhost:27017/test'
+        }
+      }
+    })
+  }),
+
+  // Users
+  http.get('/api/users', () => {
+    return HttpResponse.json({
+      data: {
+        users: [
+          {
+            id: '1',
+            email: 'test@example.com',
+            name: 'Test User',
+            createdAt: '2023-01-01T00:00:00Z'
+          }
+        ]
+      }
+    })
+  }),
+
+  // Connections
+  http.get('/api/connections', () => {
+    return HttpResponse.json({
+      data: {
+        connections: [
+          {
+            id: '1',
+            type: 'slack',
+            name: 'Test Slack',
+            status: 'active',
+            lastUsed: '2023-01-01T00:00:00Z'
+          }
+        ]
+      }
+    })
+  }),
+
+  // Logs
+  http.get('/api/project/logs', () => {
+    return HttpResponse.json({
+      data: {
+        logs: [
+          {
+            timestamp: '2023-01-01T00:00:00Z',
+            level: 'info',
+            message: 'Test log message',
+            source: 'test'
+          }
+        ]
+      }
+    })
+  }),
+
+  // Metrics
+  http.get('/api/project/metrics', () => {
+    return HttpResponse.json({
+      data: {
+        cpu: 45.2,
+        memory: 67.8,
+        requests: 1234,
+        errors: 5
+      }
+    })
+  }),
+
+  // IDE integration
+  http.post('/api/open-in-ide', () => {
+    return HttpResponse.json({
+      success: true,
+      method: 'vscode'
+    })
+  }),
+]
+
+export const server = setupServer(...handlers)

package/management-ui/src/test/setup.js

@@ -0,0 +1,61 @@
+import '@testing-library/jest-dom'
+import { beforeAll, afterEach, afterAll, vi } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import { server } from './mocks/server'
+
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Mock IntersectionObserver
+global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+}
+global.localStorage = localStorageMock
+
+// Mock socket.io-client
+vi.mock('socket.io-client', () => ({
+  io: vi.fn(() => ({
+    on: vi.fn(),
+    off: vi.fn(),
+    emit: vi.fn(),
+    connect: vi.fn(),
+    disconnect: vi.fn(),
+  })),
+}))
+
+// Setup MSW
+beforeAll(() => server.listen())
+afterEach(() => {
+  server.resetHandlers()
+  cleanup()
+})
+afterAll(() => server.close())