diff --git a/apps/studio/components/layouts/AppLayout/ProjectOAuthIntegrationsBanner.test.tsx b/apps/studio/components/layouts/AppLayout/ProjectOAuthIntegrationsBanner.test.tsx
index 7534edbe5ac..9780dc57391 100644
--- a/apps/studio/components/layouts/AppLayout/ProjectOAuthIntegrationsBanner.test.tsx
+++ b/apps/studio/components/layouts/AppLayout/ProjectOAuthIntegrationsBanner.test.tsx
@@ -59,27 +59,6 @@ describe('ProjectOAuthIntegrationsBanner', () => {
)
})
- it('renders a condensed title when multiple apps are authorized', () => {
- mockUseAuthorizedAppsQuery.mockReturnValue({
- data: [
- createAuthorizedApp({ id: '1', app_id: '1', name: 'Lovable' }),
- createAuthorizedApp({ id: '2', app_id: '2', name: 'Bolt' }),
- createAuthorizedApp({ id: '3', app_id: '3', name: 'Replit' }),
- ],
- isError: false,
- })
-
- render()
-
- expect(screen.getByText('This project is connected to Lovable, Bolt, and 1 other app'))
- .toBeInTheDocument()
- expect(
- screen.getByText(
- 'Changes made here may affect how your project works in Lovable, Bolt, and 1 other app.'
- )
- ).toBeInTheDocument()
- })
-
it('does not render on non-project routes', () => {
routerMock.setCurrentUrl('/org/acme/apps')
@@ -92,46 +71,30 @@ describe('ProjectOAuthIntegrationsBanner', () => {
)
})
- it('does not render when there are no authorized apps', () => {
- mockUseAuthorizedAppsQuery.mockReturnValue({
- data: [],
- isError: false,
- })
-
- render()
-
- expect(screen.queryByText(/This project is connected to/)).not.toBeInTheDocument()
- })
-
- it('does not render when app lookup fails', () => {
- mockUseAuthorizedAppsQuery.mockReturnValue({
- data: [createAuthorizedApp({ name: 'Lovable' })],
- isError: true,
- })
-
- render()
-
- expect(screen.queryByText(/This project is connected to/)).not.toBeInTheDocument()
- })
-
- it('does not render when organization context is unavailable', () => {
+ it.each([
+ {
+ label: 'no authorized apps',
+ organization: { slug: 'acme' },
+ query: { data: [], isError: false },
+ },
+ {
+ label: 'authorized apps query fails',
+ organization: { slug: 'acme' },
+ query: { data: [createAuthorizedApp({ name: 'Lovable' })], isError: true },
+ },
+ {
+ label: 'organization context is unavailable',
+ organization: undefined,
+ query: { data: [createAuthorizedApp({ name: 'Lovable' })], isError: false },
+ },
+ ])('does not render when banner is ineligible: $label', ({ organization, query }) => {
mockUseSelectedOrganizationQuery.mockReturnValue({
- data: undefined,
+ data: organization,
})
+ mockUseAuthorizedAppsQuery.mockReturnValue(query)
render()
expect(screen.queryByText(/This project is connected to/)).not.toBeInTheDocument()
})
-
- it('falls back to plug icon when no app icon is provided', () => {
- mockUseAuthorizedAppsQuery.mockReturnValue({
- data: [createAuthorizedApp({ name: 'Lovable', icon: null })],
- isError: false,
- })
-
- const { container } = render()
-
- expect(container.querySelector('div[style*="background-image: none"] svg')).toBeInTheDocument()
- })
})
diff --git a/apps/studio/components/layouts/AppLayout/ProjectOAuthIntegrationsBanner.utils.test.ts b/apps/studio/components/layouts/AppLayout/ProjectOAuthIntegrationsBanner.utils.test.ts
index 05690f83c95..d1b7e09e804 100644
--- a/apps/studio/components/layouts/AppLayout/ProjectOAuthIntegrationsBanner.utils.test.ts
+++ b/apps/studio/components/layouts/AppLayout/ProjectOAuthIntegrationsBanner.utils.test.ts
@@ -20,66 +20,43 @@ const createAuthorizedApp = (overrides: Partial): AuthorizedApp =
})
describe('ProjectOAuthIntegrationsBanner utils', () => {
- describe('isProjectRoute', () => {
- it('returns true for project route template pathnames', () => {
- expect(isProjectRoute({ pathname: '/project/[ref]/database/tables' })).toBe(true)
- })
-
- it('returns true for project URLs from asPath', () => {
- expect(isProjectRoute({ pathname: '/unknown', asPath: '/project/default/functions' })).toBe(
- true
- )
- })
-
- it('returns false for non-project routes', () => {
- expect(isProjectRoute({ pathname: '/org/[slug]/apps', asPath: '/org/default/apps' })).toBe(
- false
- )
- })
+ it('detects project routes from pathname or asPath', () => {
+ expect(isProjectRoute({ pathname: '/project/[ref]/database/tables' })).toBe(true)
+ expect(isProjectRoute({ pathname: '/unknown', asPath: '/project/default/functions' })).toBe(
+ true
+ )
+ expect(isProjectRoute({ pathname: '/org/[slug]/apps', asPath: '/org/default/apps' })).toBe(
+ false
+ )
})
- describe('getAuthorizedAppDisplayData', () => {
- it('returns unique display-safe app names', () => {
- const displayApps = getAuthorizedAppDisplayData([
- createAuthorizedApp({ name: ' Lovable ' }),
- createAuthorizedApp({ name: 'lovable' }),
- createAuthorizedApp({ name: 'Bolt.new' }),
- createAuthorizedApp({ name: ' ' }),
- ])
+ it('returns unique display-safe apps and backfills icons from duplicate entries', () => {
+ const displayApps = getAuthorizedAppDisplayData([
+ createAuthorizedApp({ name: ' Lovable ' }),
+ createAuthorizedApp({ name: 'lovable' }),
+ createAuthorizedApp({ name: 'Bolt.new' }),
+ createAuthorizedApp({ name: ' ' }),
+ createAuthorizedApp({ name: 'Figma', icon: null }),
+ createAuthorizedApp({ name: 'figma', icon: 'https://cdn.example.com/figma.png' }),
+ ])
- expect(displayApps).toEqual([
- { name: 'Lovable', icon: null },
- { name: 'Bolt.new', icon: null },
- ])
- })
-
- it('backfills icon from duplicate entries', () => {
- const displayApps = getAuthorizedAppDisplayData([
- createAuthorizedApp({ name: 'Figma', icon: null }),
- createAuthorizedApp({ name: 'figma', icon: 'https://cdn.example.com/figma.png' }),
- ])
-
- expect(displayApps).toEqual([
- { name: 'Figma', icon: 'https://cdn.example.com/figma.png' },
- ])
- })
+ expect(displayApps).toEqual([
+ { name: 'Lovable', icon: null },
+ { name: 'Bolt.new', icon: null },
+ { name: 'Figma', icon: 'https://cdn.example.com/figma.png' },
+ ])
})
- describe('copy helpers', () => {
- it('renders title for a single app', () => {
- expect(getConnectedAppsTitle(['Lovable'])).toBe('This project is connected to Lovable')
- })
+ it('renders connected app titles for single and multi-app cases', () => {
+ expect(getConnectedAppsTitle(['Lovable'])).toBe('This project is connected to Lovable')
+ expect(getConnectedAppsTitle(['Lovable', 'Bolt', 'Replit'])).toBe(
+ 'This project is connected to Lovable, Bolt, and 1 other app'
+ )
+ })
- it('renders condensed title for multiple apps', () => {
- expect(getConnectedAppsTitle(['Lovable', 'Bolt', 'Replit'])).toBe(
- 'This project is connected to Lovable, Bolt, and 1 other app'
- )
- })
-
- it('renders a matching description', () => {
- expect(getConnectedAppsDescription(['Lovable'])).toBe(
- 'Changes made here may affect how your project works in Lovable.'
- )
- })
+ it('renders a connected app description', () => {
+ expect(getConnectedAppsDescription(['Lovable'])).toBe(
+ 'Changes made here may affect how your project works in Lovable.'
+ )
})
})