Files
supabase/apps/studio/components/interfaces/ConnectSheet/Connect.utils.test.ts
T
Saxon FletcherandJoshen Lim 0d761b0434 Connect sheet final content (#42374)
<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>

This is the third and final PR to complete the new connect sheet. 

First: https://github.com/supabase/supabase/pull/42367

Second: https://github.com/supabase/supabase/pull/42373

This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.

To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct

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

* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs

* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates

* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors

* **Chores**
  * ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-11 22:14:18 +08:00

224 lines
6.1 KiB
TypeScript

import { describe, test, expect } from 'vitest'
import { resolveFrameworkLibraryKey } from './Connect.utils'
describe('Connect.utils:resolveFrameworkLibraryKey', () => {
test('should return null if no framework provided', () => {
const result = resolveFrameworkLibraryKey({
framework: undefined,
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBeNull()
})
test('should return null for empty framework string', () => {
const result = resolveFrameworkLibraryKey({
framework: '',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBeNull()
})
test('should return explicit library if provided', () => {
const result = resolveFrameworkLibraryKey({
framework: 'nextjs',
frameworkVariant: 'app',
library: 'custom-library',
})
expect(result).toBe('custom-library')
})
test('should resolve library for Next.js App Router', () => {
const result = resolveFrameworkLibraryKey({
framework: 'nextjs',
frameworkVariant: 'app',
library: undefined,
})
// Next.js App Router has supabasejs as its library
expect(result).toBe('supabasejs')
})
test('should resolve library for Next.js Pages Router', () => {
const result = resolveFrameworkLibraryKey({
framework: 'nextjs',
frameworkVariant: 'pages',
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should resolve library for React with Vite variant', () => {
const result = resolveFrameworkLibraryKey({
framework: 'react',
frameworkVariant: 'vite',
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should resolve library for React with Create React App variant', () => {
const result = resolveFrameworkLibraryKey({
framework: 'react',
frameworkVariant: 'create-react-app',
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should resolve library for framework without variants (Remix)', () => {
const result = resolveFrameworkLibraryKey({
framework: 'remix',
frameworkVariant: undefined,
library: undefined,
})
// Remix has single child which is supabasejs
expect(result).toBe('supabasejs')
})
test('should resolve library for Flutter', () => {
const result = resolveFrameworkLibraryKey({
framework: 'flutter',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabaseflutter')
})
test('should resolve library for Swift', () => {
const result = resolveFrameworkLibraryKey({
framework: 'swift',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabaseswift')
})
test('should resolve library for Android Kotlin', () => {
const result = resolveFrameworkLibraryKey({
framework: 'androidkotlin',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasekt')
})
test('should resolve library for Flask (Python)', () => {
const result = resolveFrameworkLibraryKey({
framework: 'flask',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasepy')
})
test('should fallback to first variant library when variant not specified for multi-variant framework', () => {
const result = resolveFrameworkLibraryKey({
framework: 'nextjs',
frameworkVariant: undefined,
library: undefined,
})
// Should get library from first variant (app router)
expect(result).toBe('supabasejs')
})
test('should return null for unknown framework', () => {
const result = resolveFrameworkLibraryKey({
framework: 'unknown-framework',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBeNull()
})
test('should handle SvelteKit framework', () => {
const result = resolveFrameworkLibraryKey({
framework: 'sveltekit',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should handle Nuxt framework', () => {
const result = resolveFrameworkLibraryKey({
framework: 'nuxt',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should handle Vue.js framework', () => {
const result = resolveFrameworkLibraryKey({
framework: 'vuejs',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should handle Solid.js framework', () => {
const result = resolveFrameworkLibraryKey({
framework: 'solidjs',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should handle Astro framework', () => {
const result = resolveFrameworkLibraryKey({
framework: 'astro',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should handle Expo React Native', () => {
const result = resolveFrameworkLibraryKey({
framework: 'exporeactnative',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should handle Ionic React', () => {
const result = resolveFrameworkLibraryKey({
framework: 'ionicreact',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should handle Ionic Angular', () => {
const result = resolveFrameworkLibraryKey({
framework: 'ionicangular',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should handle Refine framework', () => {
const result = resolveFrameworkLibraryKey({
framework: 'refine',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
test('should handle TanStack Start framework', () => {
const result = resolveFrameworkLibraryKey({
framework: 'tanstack',
frameworkVariant: undefined,
library: undefined,
})
expect(result).toBe('supabasejs')
})
})