@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha.1

package/src/__tests__/integration/factories/mapper.ts

@@ -0,0 +1,253 @@
+import type {
+  BootstrapConfigData,
+  ResourceJump,
+  ResourceJumpGroup,
+  ResourceJumpsData,
+  TRPCRouter,
+} from '@env-hopper/backend-core'
+import { createTRPCMsw, httpLink } from 'msw-trpc'
+import type { SetupServerApi } from 'msw/node'
+import { createApp } from './app'
+import { createEnv } from './env'
+import type {
+  FeatureAppConfig,
+  FeatureBackendConfig,
+  FeatureEnvConfig,
+} from './types'
+
+type TRPCMswInstance = ReturnType<typeof createTRPCMsw<TRPCRouter>>
+
+// Infer BackendData from the TRPC router type automatically
+// This extracts ALL query output types from the TRPCRouter
+// Filter out router methods (_def, createCaller, etc.) and only keep procedures
+type ProcedureKeys<T> = {
+  [K in keyof T]: T[K] extends { _def: { $types: { output: any } } }
+    ? T[K] extends { _def: { $types: { input: any } } }
+      ? K // It's a procedure
+      : never
+    : never
+}[keyof T]
+
+type BackendData = {
+  [K in ProcedureKeys<TRPCRouter>]: TRPCRouter[K] extends {
+    _def: { $types: { output: infer O } }
+  }
+    ? O
+    : never
+}
+
+/**
+ * Maps feature-driven config to full backend entities
+ */
+export function mapFeatureConfigToBackend(config: FeatureBackendConfig): {
+  bootstrap: BootstrapConfigData
+  resourceJumps: ResourceJumpsData
+  setupNetwork: (server: SetupServerApi) => void
+  overrideBackendNetwork: (
+    fn: (
+      server: SetupServerApi,
+      mswTrpc: TRPCMswInstance,
+      backendData: BackendData,
+    ) => void,
+  ) => void
+} {
+  // Map envs for bootstrap
+  const bootstrapEnvs = Object.fromEntries(
+    config.envs.map((e) => [e.slug, createEnv(e.slug)]),
+  )
+
+  // Map apps for bootstrap
+  const bootstrapApps = Object.fromEntries(
+    config.apps.map((a) => [a.slug, createApp(a.slug)]),
+  )
+
+  // Map envs for resourceJumps (simpler structure)
+  const resourceJumpEnvs = config.envs.map((e) => ({
+    slug: e.slug,
+    displayName: toDisplayName(e.slug),
+    templateParams: { subdomain: e.slug },
+  }))
+
+  // Generate resource jumps with groups
+  const { resourceJumps, groups, lateResolvableParams } =
+    generateResourceJumpsWithGroups(config.apps, config.envs)
+
+  const bootstrap: BootstrapConfigData = {
+    envs: bootstrapEnvs,
+    apps: bootstrapApps,
+    appsMeta: { tags: { descriptions: [] } },
+    contexts: [],
+    defaults: {
+      envSlug: config.envs[0]?.slug || '',
+      resourceJumpSlug: resourceJumps[0]?.slug || '',
+    },
+  }
+
+  let overrideBackendNetworkFn:
+    | ((
+        server: SetupServerApi,
+        mswTrpc: TRPCMswInstance,
+        backendData: BackendData,
+      ) => void)
+    | null = null
+
+  const setupNetwork = (server: SetupServerApi) => {
+    const mswTrpc = createTRPCMsw<TRPCRouter>({
+      links: [
+        httpLink({
+          url: 'http://localhost:9999/trpc',
+          headers() {
+            return {
+              'content-type': 'application/json',
+            }
+          },
+        }),
+      ],
+    })
+
+    // Create BackendData with minimal empty data for unused procedures
+    const backendData: BackendData = {
+      bootstrap,
+      resourceJumps: {
+        resourceJumps,
+        envs: resourceJumpEnvs,
+        lateResolvableParams,
+        groups,
+      },
+      resourceJumpsExtended: {
+        envs: [],
+      },
+      appCatalog: {
+        apps: [],
+        categories: []
+      },
+      // Minimal empty data for other procedures (not used in tests)
+      availabilityMatrix: {
+        envSlugs: [],
+        resourceJumpSlugs: [],
+        availabilityVariants: [],
+        matrix: [],
+      },
+      tryFindRenameRule: false,
+      resourceJumpBySlugAndEnv: {
+        resourceJumps: [],
+        envs: [],
+        lateResolvableParams: [],
+      },
+    }
+
+    // If override is provided, use it; otherwise use default setup
+    if (overrideBackendNetworkFn) {
+      overrideBackendNetworkFn(server, mswTrpc, backendData)
+    } else {
+      server.use(
+        mswTrpc.bootstrap.query(() => {
+          return bootstrap
+        }),
+      )
+      server.use(
+        mswTrpc.resourceJumps.query(() => {
+          return {
+            resourceJumps,
+            envs: resourceJumpEnvs,
+            lateResolvableParams,
+            groups,
+          }
+        }),
+      )
+    }
+  }
+
+  const overrideBackendNetwork = (
+    fn: (
+      server: SetupServerApi,
+      mswTrpc: TRPCMswInstance,
+      backendData: BackendData,
+    ) => void,
+  ) => {
+    overrideBackendNetworkFn = fn
+  }
+
+  return {
+    bootstrap,
+    resourceJumps: {
+      resourceJumps,
+      envs: resourceJumpEnvs,
+      lateResolvableParams,
+      groups,
+    },
+    setupNetwork,
+    overrideBackendNetwork,
+  }
+}
+
+/**
+ * Generate resource jumps with proper grouping for multi-pagers
+ */
+function generateResourceJumpsWithGroups(
+  apps: Array<FeatureAppConfig>,
+  _envs: Array<FeatureEnvConfig>,
+): {
+  resourceJumps: Array<ResourceJump>
+  groups: Array<ResourceJumpGroup>
+  lateResolvableParams: Array<{ slug: string; displayName: string }>
+} {
+  const resourceJumps: Array<ResourceJump> = []
+  const groups: Array<ResourceJumpGroup> = []
+  const lateResolvableParamsMap = new Map<
+    string,
+    { slug: string; displayName: string }
+  >()
+
+  apps.forEach((app) => {
+    if (!app.resourceJumps) return
+
+    const pageCount = app.resourceJumps === '1-pager' ? 1 : 2
+    const pageSlugs: Array<string> = []
+
+    // Generate pages
+    for (let i = 0; i < pageCount; i++) {
+      const isHome = i === 0
+      const slug = isHome ? app.slug : `${app.slug}-order`
+      pageSlugs.push(slug)
+
+      const jump: ResourceJump = {
+        slug,
+        displayName: isHome ? toDisplayName(app.slug) : 'Order Details',
+        urlTemplate: {
+          default: isHome
+            ? `http://localhost:4000/env/{{subdomain}}/app/${app.slug}`
+            : `http://localhost:4000/env/{{subdomain}}/app/${app.slug}/order/{{orderId}}`,
+        },
+      }
+
+      // Add late resolvable param for order page
+      if (!isHome) {
+        const orderIdParam = { slug: 'orderId', displayName: 'Order ID' }
+        lateResolvableParamsMap.set('orderId', orderIdParam)
+        jump.lateResolvableParamSlugs = ['orderId']
+      }
+
+      resourceJumps.push(jump)
+    }
+
+    // Create group if multi-pager
+    if (pageCount > 1) {
+      groups.push({
+        slug: `${app.slug}-group`,
+        displayName: toDisplayName(app.slug),
+        resourceSlugs: pageSlugs, // First is primary, rest are children
+      })
+    }
+  })
+
+  return {
+    resourceJumps,
+    groups,
+    lateResolvableParams: Array.from(lateResolvableParamsMap.values()),
+  }
+}
+
+function toDisplayName(slug: string): string {
+  return slug.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+}

package/src/__tests__/integration/factories/resourceJump.ts

@@ -0,0 +1,15 @@
+import type { ResourceJump } from '@env-hopper/backend-core'
+
+export function createResourceJump(
+  slug: string,
+  overrides?: Partial<ResourceJump>,
+): ResourceJump {
+  return {
+    slug,
+    displayName: slug
+      .replace(/-/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase()),
+    urlTemplate: { default: `https://fake-${slug}.example.com` },
+    ...overrides,
+  }
+}

package/src/__tests__/integration/factories/simpleDSL.ts

@@ -0,0 +1,8 @@
+import { mapFeatureConfigToBackend } from './mapper'
+import type { FeatureBackendConfig } from './types'
+/**
+ * Get full backend data including resourceJumps
+ */
+export function createFullBackend(config: FeatureBackendConfig) {
+  return mapFeatureConfigToBackend(config)
+}

package/src/__tests__/integration/factories/types.ts

@@ -0,0 +1,18 @@
+// Note: no server type needed at config stage; server is provided to setupNetwork
+
+// Feature-driven DSL types - minimal config, mapper generates the rest
+export type ResourceJumpType = '1-pager' | '2-pager'
+
+export interface FeatureEnvConfig {
+  slug: string // e.g., 'dev', 'prod', 'staging'
+}
+
+export interface FeatureAppConfig {
+  slug: string // e.g., 'app1', 'admin'
+  resourceJumps?: ResourceJumpType // Optional: '1-pager' or '2-pager'
+}
+
+export interface FeatureBackendConfig {
+  apps: Array<FeatureAppConfig>
+  envs: Array<FeatureEnvConfig>
+}

package/src/__tests__/integration/helpers/renderWithProviders.tsx

@@ -0,0 +1,182 @@
+import { createMemoryHistory } from '@tanstack/react-router'
+import { render, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { createTRPCClient, httpLink } from '@trpc/client'
+import { vi } from 'vitest'
+import { BackendMagazine } from '../factories/BackendMagazine'
+import { DbMagazine } from '../factories/DbMagazine'
+import { createResourceJumpUI } from './uiHelpers'
+import type { SetupServerApi } from 'msw/node'
+import type { DbMagazineInstance } from '../factories/DbMagazine'
+import type { createFullBackend } from '../factories/simpleDSL'
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import { createQueryClient } from '~/api/infra/createQueryClient'
+import { App } from '~/App'
+import { EhDb } from '~/userDb/EhDb'
+import { createEhRouter } from '~/util/createEhRouter'
+
+type FullBackend = ReturnType<typeof createFullBackend>
+type OverrideBackendNetworkFn = Parameters<
+  FullBackend['overrideBackendNetwork']
+>[0]
+
+interface RenderAppOptions {
+  server: SetupServerApi
+  backend?: ReturnType<typeof createFullBackend>
+  overrideBackendNetwork?: OverrideBackendNetworkFn
+  initialLink?: string
+  httpBehavior?: {
+    errors?: Record<string, Error>
+  }
+  waitForFullLoad?: boolean
+  throwOnError?: boolean
+  dbMagazine?: DbMagazineInstance
+}
+
+export async function renderApp(options: RenderAppOptions): Promise<
+  {
+    user: ReturnType<typeof userEvent.setup>
+    queryClient: ReturnType<typeof createQueryClient>
+    router: ReturnType<typeof createEhRouter>
+    ui: {
+      resourceJump: ReturnType<typeof createResourceJumpUI>
+      getCurrentPath: () => string
+    }
+    db: EhDb
+    container: HTMLElement
+  } & ReturnType<typeof render>
+> {
+  const waitForFullLoad = options.waitForFullLoad ?? true
+  const throwOnError = options.throwOnError ?? true
+
+  // Set up console error/warning spies if throwOnError is enabled
+  let consoleErrorSpy: ReturnType<typeof vi.spyOn> | undefined
+  let consoleWarnSpy: ReturnType<typeof vi.spyOn> | undefined
+  const consoleErrors: Array<string> = []
+  const consoleWarnings: Array<string> = []
+
+  if (throwOnError) {
+    consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation((...args) => {
+        const message = args.join(' ')
+        // Ignore React duplicate key warnings - these are expected in tests
+        if (!message.includes('Encountered two children with the same key')) {
+          consoleErrors.push(message)
+        }
+      })
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation((...args) => {
+      const message = args.join(' ')
+      // Ignore React duplicate key warnings - these are expected in tests
+      if (!message.includes('Encountered two children with the same key')) {
+        consoleWarnings.push(message)
+      }
+    })
+  }
+
+  // Clear IndexedDB to ensure fresh data is loaded
+  const db = new EhDb()
+  const dbMag = options.dbMagazine ?? DbMagazine.default()
+  await dbMag.setup(db)
+  // await db.bootstrap.clear()
+
+  // Resolve backend instance: provided backend factory or default
+  const backendInstance = options.backend ?? BackendMagazine.default()
+  if (options.overrideBackendNetwork) {
+    backendInstance.overrideBackendNetwork(options.overrideBackendNetwork)
+  }
+
+  backendInstance.setupNetwork(options.server)
+
+  const trpcClient = createTRPCClient<TRPCRouter>({
+    links: [httpLink({ url: 'http://localhost:9999/trpc' })],
+    // transformer: { input: superjson, output: superjson },
+  })
+
+  const queryClient = createQueryClient({ trpcClient, db })
+  const user = userEvent.setup()
+
+  // Use memory history for tests to ensure isolation between tests
+  const initialEntries = options.initialLink ? [options.initialLink] : ['/']
+  const history = createMemoryHistory({ initialEntries })
+
+  const router = createEhRouter({
+    history,
+    context: {
+      queryClient,
+      trpcClient,
+      db,
+      plugins: [],
+      boostrapHealth: {
+        bootstrapApiError: undefined,
+      },
+    },
+  })
+
+  const appComponent = (
+    <App
+      router={router}
+      queryClient={queryClient}
+      trpcClient={trpcClient}
+      db={db}
+    />
+  )
+  const result = render(appComponent)
+
+  // Wait for full load if requested
+  if (waitForFullLoad) {
+    await waitFor(
+      () => {
+        // Check that the LoadingScreen with Spinner is no longer visible
+        const spinner = result.container.querySelector(
+          '[role="status"][aria-label="Loading"]',
+        )
+        if (spinner) {
+          throw new Error('Spinner still visible - app still loading')
+        }
+
+        // Also check query states as backup
+        const bootstrapState = queryClient.getQueryState(['config'])
+        const resourceJumpsState = queryClient.getQueryState(['resourceJumps'])
+
+        const bootstrapLoaded =
+          bootstrapState?.status === 'success' &&
+          bootstrapState.fetchStatus === 'idle'
+        const resourceJumpsLoaded =
+          resourceJumpsState?.status === 'success' &&
+          resourceJumpsState.fetchStatus === 'idle'
+
+        if (!bootstrapLoaded || !resourceJumpsLoaded) {
+          throw new Error('Queries not yet loaded')
+        }
+      },
+      { timeout: 10000 },
+    )
+  }
+
+  // Check for console errors/warnings if throwOnError is enabled
+  if (throwOnError) {
+    const allErrors = [...consoleErrors, ...consoleWarnings]
+    if (allErrors.length > 0) {
+      const errorMessage = `Console errors/warnings detected during test:\n${allErrors.join('\n')}`
+      throw new Error(errorMessage)
+    }
+
+    // Restore original console methods
+    consoleErrorSpy?.mockRestore()
+    consoleWarnSpy?.mockRestore()
+  }
+
+  return {
+    ...result,
+    user,
+    queryClient,
+    router,
+    db,
+    ui: {
+      resourceJump: createResourceJumpUI(result, user),
+      getCurrentPath: () => router.state.location.pathname,
+    },
+    container: result.container,
+  }
+}

package/src/__tests__/integration/helpers/testHelpers.ts

@@ -0,0 +1,24 @@
+export interface Deferred {
+  defer: <T>(value: T) => Promise<T>
+  resolve: () => void
+  reject: (error: Error) => void
+}
+
+export function createDeferred(): Deferred {
+  let resolveInternal!: () => void
+  let rejectInternal!: (error: Error) => void
+
+  const promise = new Promise<void>((res, rej) => {
+    resolveInternal = res
+    rejectInternal = rej
+  })
+
+  return {
+    defer: async <T>(value: T): Promise<T> => {
+      await promise
+      return value
+    },
+    resolve: resolveInternal,
+    reject: rejectInternal,
+  }
+}

package/src/__tests__/integration/helpers/uiHelpers.ts

@@ -0,0 +1,166 @@
+import { screen, waitFor } from '@testing-library/react'
+import { expect } from 'vitest'
+import type { RenderResult } from '@testing-library/react'
+import type { UserEvent } from '@testing-library/user-event'
+
+export function createResourceJumpUI(_result: RenderResult, user: UserEvent) {
+  const collectNonEmptyButtonLabels = (root: ParentNode): Array<string> => {
+    const buttons = Array.from(root.querySelectorAll('button'))
+    return buttons
+      .map((b) => (b.textContent || '').trim())
+      .filter((t) => t.length > 0 && t !== 'Empty')
+  }
+
+  // env panel will be resolved by test id at call site
+
+  return {
+    env: {
+      select: async (envSlug: string) => {
+        // Find the environment combobox input
+        const envInput = screen.getByRole('combobox', { name: /environment/i })
+
+        // Click to open the dropdown
+        await user.click(envInput)
+
+        // Wait for dropdown to appear and find the option
+        await waitFor(async () => {
+          try {
+            const option = screen.getByRole('option', {
+              name: new RegExp(envSlug, 'i'),
+            })
+            await user.click(option)
+          } catch {
+            // Get all available options for error message
+            const allOptions = screen.getAllByRole('option')
+            const availableSlugs = allOptions
+              .map((opt) => opt.textContent)
+              .filter(Boolean)
+            throw new Error(
+              `Environment '${envSlug}' not found. Available: ${availableSlugs.join(', ')}`,
+            )
+          }
+        })
+      },
+
+      getSelectedTitle: () => {
+        const envInput = screen.getByRole('combobox', { name: /environment/i })
+        return (
+          envInput.getAttribute('value') || envInput.textContent || undefined
+        )
+      },
+    },
+
+    parameters: {
+      getInput: async (labelText: string) => {
+        return await screen.findByPlaceholderText(new RegExp(labelText, 'i'))
+      },
+    },
+
+    quickBar: {
+      clickFirst: async () => {
+        const section = await screen.findByTestId('quick-jump-section')
+        await waitFor(() => {
+          expect(section.querySelector('button')).not.toBeNull()
+        })
+        const first = section.querySelector('button')
+        if (!first) {
+          throw new Error('No quick bar buttons found')
+        }
+        await user.click(first)
+      },
+      clickApp: async (labelText: string) => {
+        const section = await screen.findByTestId('quick-jump-section')
+        const buttons = Array.from(section.querySelectorAll('button'))
+        const target = buttons.find((btn) =>
+          (btn.textContent || '')
+            .toLowerCase()
+            .includes(labelText.toLowerCase()),
+        )
+        if (!target) {
+          const labels = buttons.map((b) => b.textContent || '').join(', ')
+          throw new Error(
+            `Quick bar app '${labelText}' not found. Available: ${labels}`,
+          )
+        }
+        await user.click(target)
+      },
+    },
+
+    quickSlots: {
+      async getAppSlots(): Promise<Array<string>> {
+        const section = await screen.findByTestId('quick-jump-section')
+        return collectNonEmptyButtonLabels(section)
+      },
+      async getEnvSlots(): Promise<Array<string>> {
+        const envPanel = await screen.findByTestId('env-quick-jump-section')
+        return collectNonEmptyButtonLabels(envPanel)
+      },
+    },
+
+    resource: {
+      select: async (resourceSlug: string) => {
+        // Find the resource combobox input (second combobox)
+        const comboboxes = screen.getAllByRole('combobox')
+        const resourceInput = comboboxes[1] // Assuming resource selector is the second combobox
+
+        if (!resourceInput) {
+          throw new Error('Resource combobox not found')
+        }
+
+        // Click to open the dropdown
+        await user.click(resourceInput)
+
+        // Wait for dropdown to appear and find the option
+        await waitFor(async () => {
+          try {
+            const option = screen.getByRole('option', {
+              name: new RegExp(resourceSlug, 'i'),
+            })
+            await user.click(option)
+          } catch {
+            // Get all available options for error message
+            const allOptions = screen.getAllByRole('option')
+            const availableSlugs = allOptions
+              .map((opt) => opt.textContent)
+              .filter(Boolean)
+            throw new Error(
+              `Resource '${resourceSlug}' not found. Available: ${availableSlugs.join(', ')}`,
+            )
+          }
+        })
+      },
+
+      getSelectedTitle: () => {
+        const comboboxes = screen.getAllByRole('combobox')
+        const resourceInput = comboboxes[1]
+        if (!resourceInput) return undefined
+        return (
+          resourceInput.getAttribute('value') ||
+          resourceInput.textContent ||
+          undefined
+        )
+      },
+    },
+
+    jump: {
+      getState: () => {
+        const jumpButton = screen.queryByTestId('jump-main-button')
+        if (!jumpButton) {
+          return { url: undefined, text: undefined }
+        }
+
+        // Extract URL from href attribute if it's a link
+        const url = jumpButton.getAttribute('href') || undefined
+
+        // Get full text content
+        const text = jumpButton.textContent || undefined
+
+        return { url, text }
+      },
+      getUrl: () => {
+        const jumpButton = screen.queryByTestId('jump-main-button')
+        return jumpButton?.getAttribute('href') || undefined
+      },
+    },
+  }
+}

package/src/__tests__/integration/quickSlots.integration.test.tsx

@@ -0,0 +1,17 @@
+import { setupServer } from 'msw/node'
+import { describe, expect, it } from 'vitest'
+import { renderApp } from './helpers/renderWithProviders'
+
+const server = setupServer()
+
+describe('Quick slots preloaded from DB (simple)', () => {
+  it('renders two prepopulated app slots (column-first grid) and two env slots', async () => {
+    const result = await renderApp({
+      server,
+    })
+
+    // Use UI helper (under resourceJump ui) to verify app jump slots
+    const appSlots = await result.ui.resourceJump.quickSlots.getAppSlots()
+    expect(appSlots).toEqual(['app1', 'app2'])
+  })
+})