Files
supabase/apps/studio/lib/integration-utils.test.ts
Pamela Chia 38b74af3f1 fix(studio): fall back for framework icons without an asset (#51065)
I made the connected-project framework icons fall back when no shipped
SVG exists for a framework. The three icon sites built
`/img/icons/frameworks/<framework>.svg` straight from the integration's
framework preset, which is an open-ended string. They only fell back
when the value was empty, so any preset without an asset (`express`,
`hono`, `fastapi`, `tanstack-start` and others) showed a broken image
and logged a 404.

**Changed:**
- **Broken framework icons**: `getFrameworkIconUrl` returns the asset
URL only for slugs in a set that mirrors `public/img/icons/frameworks/`.
The integration connection row, the org project linker and the
marketplace project picker now show their existing fallback icon for any
other slug. A test keeps the set equal to the directory listing.
- **Framework type**: I deleted the hand-kept `VercelFramework` union.
It listed exactly the shipped icon slugs, while the API types the field
as `string | null`, and that mismatch is what made the old empty-only
check look safe.

**Note:** I rejected an `onError` fallback because the browser still
sends the 404 request. Adding logos for common presets is left for
design.

## To test

Tested on Vercel preview (staging): no real connection there uses these
presets, so I rewrote the org integrations response in the browser to
give one integration four connections.
- [x] Open an org's Integrations page with connections whose framework
has no shipped icon (`express`, `eve`, `tanstack-start-lovable`). Expect
the fallback badge and no request under
`/dashboard/img/icons/frameworks/` for those slugs. Observed: all three
rows showed the badge and the network log had no request for their SVGs.
- [x] Same page with a `nextjs` connection. Expect its framework logo.
Observed: `nextjs.svg` loaded with a 200.
- [x] Same page with the real, unmodified response (one connection with
`framework: null`). Expect the badge, no frameworks requests, and no new
console errors. Observed: as expected.

## Linear
- fixes GROWTH-1309


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Vercel integration and project views now display framework icons when
available and fall back to the Vercel icon when no matching icon exists.
* Framework metadata now supports values beyond a fixed list, while
unsupported frameworks continue to use the fallback icon.

* **Tests**
* Added coverage for supported and unsupported framework icons,
including base-path handling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-30 12:59:36 +08:00

283 lines
9.2 KiB
TypeScript

import { readdirSync } from 'node:fs'
import { join } from 'node:path'
import { describe, expect, it, vi } from 'vitest'
import {
FRAMEWORK_ICON_SLUGS,
getFrameworkIconUrl,
getInitialMigrationSQLFromGitHubRepo,
getIntegrationConfigurationUrl,
} from './integration-utils'
import type {
GitHubAccount,
Integration,
VercelAccount,
VercelTeamAccount,
} from '@/data/integrations/integrations.types'
import { BASE_PATH } from '@/lib/constants'
vi.mock('@/data/fetchers', () => ({
fetchHandler: vi.fn(),
}))
describe('integration-utils', () => {
describe('getInitialMigrationSQLFromGitHubRepo', () => {
it('should return null when no externalId is provided', async () => {
const result = await getInitialMigrationSQLFromGitHubRepo()
expect(result).toBeNull()
})
it('should fetch and combine migration files correctly', async () => {
const mockGitHubUrl = 'https://github.com/org/repo/tree/main/examples/with-supabase'
const mockSupabaseFiles = [{ name: 'seed.sql', download_url: 'https://github.com/seed.sql' }]
const mockMigrationFiles = [
{ name: '20230101000000_initial.sql', download_url: 'https://github.com/migration1.sql' },
{ name: '20230101000001_second.sql', download_url: 'https://github.com/migration2.sql' },
]
const mockMigrationContent1 = 'CREATE TABLE users (id serial PRIMARY KEY);'
const mockMigrationContent2 = 'CREATE TABLE posts (id serial PRIMARY KEY);'
const mockSeedContent = 'INSERT INTO users (id) VALUES (1);'
// Mock the fetch responses
const { fetchHandler } = await import('@/data/fetchers')
const mockFetchHandler = fetchHandler as unknown as ReturnType<typeof vi.fn>
mockFetchHandler
.mockResolvedValueOnce(
new Response(JSON.stringify(mockSupabaseFiles), {
status: 200,
statusText: 'OK',
headers: { 'Content-Type': 'application/json' },
})
)
.mockResolvedValueOnce(
new Response(JSON.stringify(mockMigrationFiles), {
status: 200,
statusText: 'OK',
headers: { 'Content-Type': 'application/json' },
})
)
.mockResolvedValueOnce(
new Response(mockSeedContent, {
status: 200,
statusText: 'OK',
headers: { 'Content-Type': 'text/plain' },
})
)
.mockResolvedValueOnce(
new Response(mockMigrationContent1, {
status: 200,
statusText: 'OK',
headers: { 'Content-Type': 'text/plain' },
})
)
.mockResolvedValueOnce(
new Response(mockMigrationContent2, {
status: 200,
statusText: 'OK',
headers: { 'Content-Type': 'text/plain' },
})
)
const result = await getInitialMigrationSQLFromGitHubRepo(mockGitHubUrl)
expect(result).toContain(mockMigrationContent1)
expect(result).toContain(mockMigrationContent2)
expect(result).toContain(mockSeedContent)
expect(result).toContain('create schema if not exists supabase_migrations')
expect(result).toContain('create table if not exists supabase_migrations.schema_migrations')
})
it('should handle GitHub API errors gracefully', async () => {
const mockGitHubUrl = 'https://github.com/org/repo/tree/main/examples/with-supabase'
const { fetchHandler } = await import('@/data/fetchers')
const mockFetchHandler = fetchHandler as unknown as ReturnType<typeof vi.fn>
mockFetchHandler
.mockResolvedValueOnce(
new Response(null, {
status: 404,
statusText: 'Not Found',
headers: { 'Content-Type': 'application/json' },
})
)
.mockResolvedValueOnce(
new Response(null, {
status: 404,
statusText: 'Not Found',
headers: { 'Content-Type': 'application/json' },
})
)
const result = await getInitialMigrationSQLFromGitHubRepo(mockGitHubUrl)
expect(result).toBeNull()
})
})
describe('getIntegrationConfigurationUrl', () => {
it('should return correct Vercel configuration URL for personal account', () => {
const vercelIntegration: Integration = {
id: '123',
added_by: {
username: 'testuser',
id: '123',
primary_email: 'test@example.com',
},
inserted_at: '2024-01-01',
updated_at: '2024-01-01',
connections: [],
organization: { slug: 'org' },
integration: { name: 'Vercel' },
metadata: {
account: {
type: 'Personal',
name: 'Test User',
avatar: 'test-avatar',
source: 'marketplace',
owner_id: '123',
} as VercelAccount,
configuration_id: '123',
},
}
const result = getIntegrationConfigurationUrl(vercelIntegration)
expect(result).toBe('https://vercel.com/dashboard/integrations/123')
})
it('should return correct Vercel configuration URL for team account', () => {
const vercelIntegration: Integration = {
id: '123',
added_by: {
username: 'testuser',
id: '123',
primary_email: 'test@example.com',
},
inserted_at: '2024-01-01',
updated_at: '2024-01-01',
connections: [],
organization: { slug: 'org' },
integration: { name: 'Vercel' },
metadata: {
account: {
type: 'Team',
name: 'Test Team',
avatar: 'test-avatar',
source: 'marketplace',
owner_id: '123',
team_id: 'team123',
team_slug: 'my-team',
} as VercelTeamAccount,
configuration_id: '123',
},
}
const result = getIntegrationConfigurationUrl(vercelIntegration)
expect(result).toBe('https://vercel.com/dashboard/my-team/integrations/123')
})
it('should return correct GitHub configuration URL for personal account', () => {
const githubIntegration: Integration = {
id: '456',
added_by: {
username: 'testuser',
id: '123',
primary_email: 'test@example.com',
},
inserted_at: '2024-01-01',
updated_at: '2024-01-01',
connections: [],
organization: { slug: 'org' },
integration: { name: 'GitHub' },
metadata: {
account: {
type: 'User',
name: 'Test User',
avatar: 'test-avatar',
installed_by_user_id: 123,
} as GitHubAccount,
installation_id: 456,
},
}
const result = getIntegrationConfigurationUrl(githubIntegration)
expect(result).toBe('https://github.com/settings/installations/456')
})
it('should return correct GitHub configuration URL for organization', () => {
const githubIntegration: Integration = {
id: '456',
added_by: {
username: 'testuser',
id: '123',
primary_email: 'test@example.com',
},
inserted_at: '2024-01-01',
updated_at: '2024-01-01',
connections: [],
organization: { slug: 'org' },
integration: { name: 'GitHub' },
metadata: {
account: {
type: 'Organization',
name: 'org-name',
avatar: 'test-avatar',
installed_by_user_id: 123,
} as GitHubAccount,
installation_id: 456,
},
}
const result = getIntegrationConfigurationUrl(githubIntegration)
expect(result).toBe('https://github.com/organizations/org-name/settings/installations/456')
})
it('should return empty string for unknown integration', () => {
const unknownIntegration = {
id: '789',
added_by: {
username: 'testuser',
id: '123',
primary_email: 'test@example.com',
},
inserted_at: '2024-01-01',
updated_at: '2024-01-01',
connections: [],
organization: { slug: 'org' },
integration: { name: 'Unknown' as any },
metadata: {
account: {
type: 'User',
name: 'Test User',
avatar: 'test-avatar',
installed_by_user_id: 123,
} as GitHubAccount,
installation_id: 789,
},
} as Integration
const result = getIntegrationConfigurationUrl(unknownIntegration)
expect(result).toBe('')
})
})
describe('getFrameworkIconUrl', () => {
it('returns undefined for missing or unshipped frameworks and a URL for shipped ones', () => {
expect(getFrameworkIconUrl('not-a-framework')).toBeUndefined()
expect(getFrameworkIconUrl(null)).toBeUndefined()
expect(getFrameworkIconUrl(undefined)).toBeUndefined()
expect(getFrameworkIconUrl('')).toBeUndefined()
expect(getFrameworkIconUrl('nextjs')).toBe(`${BASE_PATH}/img/icons/frameworks/nextjs.svg`)
})
it('stays in sync with public/img/icons/frameworks/*.svg', () => {
const slugsOnDisk = readdirSync(join(__dirname, '../public/img/icons/frameworks'))
.filter((file) => file.endsWith('.svg'))
.map((file) => file.replace(/\.svg$/, ''))
.sort()
expect([...FRAMEWORK_ICON_SLUGS].sort()).toEqual(slugsOnDisk)
})
})
})