small feat: svg animation for servers, codebuild, codePipleline etc...

packages/frontend/src/components/CodeBuildPanel.test.tsx

@@ -1,19 +1,21 @@
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import {expect, test, vi} from 'vitest'
+import {beforeEach, expect, test, vi} from 'vitest'
 import {parse} from 'yaml'
 import {CodeBuildPanel, DEFAULT_BUILDSPEC} from './CodeBuildPanel'
 import type {CloudResource} from '@/types/resource'
 
-vi.mock('@/api/cloudProxyClient', () => ({
-    getCodeBuild: vi.fn(),
-    listCodeBuilds: vi.fn().mockResolvedValue([]),
-    startCodeBuild: vi.fn(),
-}))
+const api = vi.hoisted(() => ({getCodeBuild: vi.fn(), listCodeBuilds: vi.fn(), startCodeBuild: vi.fn()}))
+vi.mock('@/api/cloudProxyClient', () => api)
 
 const project: CloudResource = {id: 'orders', name: 'orders', cloud: 'aws', service: 'codebuild', type: 'codebuild-project', region: 'us-east-1', createdAt: null, metadata: {sourceType: 'NO_SOURCE', ecrRepository: 'orders'}}
 
+beforeEach(() => {
+    vi.clearAllMocks()
+    api.listCodeBuilds.mockResolvedValue([])
+})
+
 test('shows the corrected CodeDeployToECS artifact guidance and default buildspec', async () => {
     const client = new QueryClient({defaultOptions: {queries: {retry: false}}})
     const user = userEvent.setup()
@@ -26,3 +28,17 @@ test('shows the corrected CodeDeployToECS artifact guidance and default buildspe
     expect(screen.getByRole('textbox', {name: 'Buildspec override'})).toHaveValue(DEFAULT_BUILDSPEC)
     expect(parse(DEFAULT_BUILDSPEC).artifacts.files).toEqual(['imageDetail.json', 'taskdef.json', 'appspec.yaml'])
 })
+
+test('shows the configuration animation while a started build is in progress', async () => {
+    const client = new QueryClient({defaultOptions: {queries: {retry: false}}})
+    const user = userEvent.setup()
+    api.startCodeBuild.mockResolvedValue({id: 'build-1', buildNumber: 1, buildStatus: 'IN_PROGRESS', currentPhase: 'BUILD', phases: []})
+    api.getCodeBuild.mockResolvedValue({id: 'build-1', buildNumber: 1, buildStatus: 'IN_PROGRESS', currentPhase: 'BUILD', phases: []})
+    render(<QueryClientProvider client={client}><CodeBuildPanel resource={project} runtimeReachable/></QueryClientProvider>)
+
+    await user.click(screen.getByRole('button', {name: 'Start build'}))
+    await user.click(screen.getAllByRole('button', {name: 'Start build'})[1])
+
+    expect(await screen.findByRole('status')).toHaveTextContent('Build in progress')
+    expect(screen.getByRole('img', {name: 'Animated binary configuration icon'})).toBeInTheDocument()
+})