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

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

@@ -0,0 +1,184 @@
+import { waitFor } from '@testing-library/react'
+import { setupServer } from 'msw/node'
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest'
+import { dbCacheDbKeys } from '~/userDb/EhDb'
+import { renderApp } from './helpers/renderWithProviders'
+import { createDeferred } from './helpers/testHelpers'
+
+describe('Integration Testing Framework', () => {
+  const server = setupServer()
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  test('user opens site with URL and sees it in the button', async () => {
+    const { ui } = await renderApp({
+      server,
+      initialLink: '/env/dev/app/app1',
+    })
+
+    // Get the jump button state and verify URL
+    const { url } = ui.resourceJump.jump.getState()
+    expect(url).toBe('http://localhost:4000/env/dev/app/app1')
+  })
+
+  test('selecting environment changes URL to /env/dev', async () => {
+    // trpcMsw.bootstrap.query((req, res, ctx) => res.data(JSON.stringify(fullBackend.bootstrap))),
+    // trpcMsw.resourceJumps.query((req, res, ctx) => res.data(JSON.stringify(fullBackend.resourceJumps))),
+
+    const { ui } = await renderApp({
+      server,
+    })
+
+    // Select the dev environment
+    await ui.resourceJump.env.select('dev')
+
+    // Verify URL changed to env-only path
+    expect(ui.getCurrentPath()).toBe('/env/dev')
+  })
+
+  test('selecting environment and app changes URL to /env/dev/app/app1', async () => {
+    const { ui } = await renderApp({
+      server,
+    })
+
+    // Select the dev environment
+    await ui.resourceJump.env.select('dev')
+
+    // Select the app1 resource (using the correct display name)
+    await ui.resourceJump.resource.select('App1')
+
+    // Verify URL changed to env+app path
+    expect(ui.getCurrentPath()).toBe('/env/dev/app/app1')
+  })
+
+  test('navigating to full URL with existing app should stay on full URL', async () => {
+    // renderApp by default waits for full load of the app before returning
+    const { ui } = await renderApp({
+      server,
+      initialLink: '/env/dev/app/app1',
+      throwOnError: false,
+    })
+
+    // Should stay on the full URL, not redirect to env-only
+    expect(ui.getCurrentPath()).toBe('/env/dev/app/app1')
+
+    // Both environment and app should be selected
+    const selectedEnvTitle = ui.resourceJump.env.getSelectedTitle()
+    const selectedAppTitle = ui.resourceJump.resource.getSelectedTitle()
+
+    expect(selectedEnvTitle).toBe('Dev')
+    expect(selectedAppTitle).toBe('App1')
+  })
+
+  test('placeholder text shows URL slugs while data is loading', async () => {
+    const bootstrapDeferred = createDeferred()
+    const resourceJumpsDeferred = createDeferred()
+
+    const { container } = await renderApp({
+      server,
+      initialLink: '/env/develop-5000/app/mycar-case-view',
+      waitForFullLoad: false,
+      throwOnError: false,
+      overrideBackendNetwork: (srv, mswTrpc, backendData) => {
+        srv.use(
+          mswTrpc.bootstrap.query(() =>
+            bootstrapDeferred.defer(backendData.bootstrap),
+          ),
+          mswTrpc.resourceJumps.query(() =>
+            resourceJumpsDeferred.defer(backendData.resourceJumps),
+          ),
+        )
+      },
+    })
+
+    await new Promise((resolve) => setTimeout(resolve, 100))
+    expect(
+      container.querySelector('input[placeholder*="Develop 5000"]'),
+    ).toBeTruthy()
+
+    bootstrapDeferred.resolve()
+    resourceJumpsDeferred.resolve()
+  })
+
+  test('resourceJumps data is cached to IndexedDB after fetch', async () => {
+    const { db } = await renderApp({
+      server,
+    })
+
+    // Query IndexedDB directly to verify data was stored
+    const cachedData = await db.resourceJumps.get(dbCacheDbKeys.ResourceJumps)
+
+    expect(cachedData).toBeDefined()
+    expect(cachedData?.resourceJumps[0]?.slug).toBe('app1')
+  })
+
+  test('app loads from cached resourceJumps when network fails', async () => {
+    const { db: dbFirst } = await renderApp({
+      server,
+    })
+
+    // Verify cache was populated
+    const cachedData = await dbFirst.resourceJumps.get(
+      dbCacheDbKeys.ResourceJumps,
+    )
+    expect(cachedData).toBeDefined()
+
+    // Now simulate network failure
+    server.resetHandlers()
+
+    // Create a new app instance that will try to fetch but should fall back to cache
+    const { ui } = await renderApp({
+      server,
+      initialLink: '/env/dev/app/app1',
+      throwOnError: false, // Allow errors since network will fail
+      overrideBackendNetwork: (srv, mswTrpc, backendData) => {
+        srv.use(
+          mswTrpc.bootstrap.query(() => {
+            return backendData.bootstrap
+          }),
+          mswTrpc.resourceJumps.query(() => {
+            // Simulate network error / gateway timeout
+            throw new Error('Network request failed')
+          }),
+        )
+      },
+    })
+
+    // Verify we can load from cache and the path is correct
+    expect(ui.getCurrentPath()).toBe('/env/dev/app/app1')
+  })
+
+  test('typing into late param updates URL and jump URL', async () => {
+    const { ui, user } = await renderApp({
+      server,
+      initialLink: '/env/dev/app/app1-order/sub/123',
+    })
+
+    // Ensure initial seed is applied before typing
+    await waitFor(() => {
+      expect(ui.getCurrentPath()).toBe('/env/dev/app/app1-order/sub/123')
+    })
+
+    // Find the parameter input by its label via reusable UI helper
+    const paramInput = await ui.resourceJump.parameters.getInput('Order Id')
+
+    // Ensure the input reflects seeded value before typing
+    await waitFor(() => {
+      expect((paramInput as HTMLInputElement).value).toBe('123')
+    })
+
+    // Type one character and commit with Enter
+    await user.type(paramInput, '4')
+    await user.keyboard('{Enter}')
+
+    // Expect URL path to include updated sub value
+    await waitFor(() => {
+      expect(ui.getCurrentPath()).toBe('/env/dev/app/app1-order/sub/1234')
+    })
+
+    // Expect Jump button URL reflects updated sub value
+    expect(ui.resourceJump.jump.getUrl()).toContain('1234')
+  })
+})

package/src/__tests__/integration/setup/svgMock.tsx

@@ -0,0 +1,10 @@
+// Mock SVG component for testing
+
+const SvgMock = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props}>
+    <title>Mock SVG</title>
+  </svg>
+)
+
+export default SvgMock
+export const ReactComponent = SvgMock

package/src/__tests__/integration/setup/testSetup.ts

@@ -0,0 +1,35 @@
+import '@testing-library/jest-dom'
+import 'fake-indexeddb/auto'
+import { vi } from 'vitest'
+
+// Mock window.matchMedia for jsdom
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// vi.mock('*.svg', () => ({
+//   default: 'mocked-svg-url',
+//   ReactComponent: () => 'svg-component'
+// }))
+
+// Mock specific SVG files that might be causing issues
+vi.mock('~/assets/env-hopper-logo.svg?react', () => ({
+  default: 'mocked-logo-url',
+  ReactComponent: () => 'logo-component',
+}))
+
+// Mock SVG with ?react query parameter
+vi.mock('*.svg?react', () => ({
+  default: 'mocked-svg-url',
+  ReactComponent: () => 'svg-component',
+}))

package/src/__tests__/modules/fuzzyMatchLogic/autoCompleteFilter.test.ts

@@ -29,8 +29,8 @@ const randomEnvironmentNames = [
   'uat-temporal',
 ]
 
-describe.skip('env search a bit fuzzy', () => {
-  let db: Array<FuzzySearchInputEntry> = []
+describe('Autocomplete search', () => {
+  let db: Array<FuzzySearchInputEntry & { frequency: number }> = []
 
   function given(strings: Array<string>) {
     db = strings.map((title) => makeInputEntry(title))
@@ -40,7 +40,14 @@ describe.skip('env search a bit fuzzy', () => {
     const index = makeFuzzySearchIndex({
       entries: db,
     })
-    return fuzzySearch(search, { index })
+
+    return fuzzySearch(search, {
+      index,
+      freqGetter: (slug: string) => {
+        const entry = db.find((e) => e.slug === slug)
+        return entry ? entry.frequency : 0
+      },
+    }).map((r) => r.entry.displayName)
   }
 
   it('case 1', () => {
@@ -48,19 +55,37 @@ describe.skip('env search a bit fuzzy', () => {
     expect(searchResults('a')).toEqual(['env-a'])
   })
 
-  it('case 2', () => {
+  it('case 2a', () => {
     given(['x abcdev', 'abc-dev'])
     expect(searchResults('abcdev')).toMatchInlineSnapshot(`
       [
-        "abc-dev",
         "x abcdev",
+        "abc-dev",
+      ]
+    `)
+  })
+
+  it('case 2b', () => {
+    given(['abc-dev'])
+    expect(searchResults('abcdev')).toMatchInlineSnapshot(`
+      [
+        "abc-dev",
+      ]
+    `)
+  })
+
+  it('case 2c', () => {
+    given(['abc-dev'])
+    expect(searchResults('abc-dev')).toMatchInlineSnapshot(`
+      [
+        "abc-dev",
       ]
     `)
   })
 
   it('case 3 - firstLetters', () => {
     given(['x abcdev', 'abcXXX-devXXX'])
-    expect(searchResults('abc-dev')).toEqual(['abcXXX-devXXX', 'x abcdev'])
+    expect(searchResults('abc-dev')).toEqual(['abcXXX-devXXX'])
   })
 
   it('case 4', () => {
@@ -89,21 +114,20 @@ describe.skip('env search a bit fuzzy', () => {
 
   it('case 7', () => {
     given(randomEnvironmentNames)
-    expect(searchResults('B')).toEqual([
-      'BUILD-08',
-      'Backup-21',
-      'Backup-gammae',
-      'BACKUP-TEMPORAL',
-      'Sig-betac',
-      'STAGING-BETAB',
-      'Staging-deployb',
-    ])
+    expect(searchResults('B')).toMatchInlineSnapshot(`
+      [
+        "BACKUP-TEMPORAL",
+        "Backup-21",
+        "Backup-gammae",
+        "BUILD-08",
+        "Sig-betac",
+        "STAGING-BETAB",
+        "Staging-deployb",
+      ]
+    `)
   })
 
-  it('Case insensitive', () => {
-    given(['Abc Review', 'AbcRev'])
-    expect(searchResults('Rev')).toEqual(['AbcRev', 'Abc Review'])
-  })
+  it.todo('Case insensitive')
 
   it('prefix is priority', () => {
     given(['EPIC-ENV-A64', 'A64-ENV-01'])
@@ -111,10 +135,7 @@ describe.skip('env search a bit fuzzy', () => {
   })
 
   // TODO: treat  numeric/letter boundaries with different priorities compared with separators like '-'
-  it.skip('should respect delimiter', () => {
-    given(['g32pe-01', 'g32-dev-01'])
-    expect(searchResults('g32')).toEqual(['g32-dev-01', 'g32pe-01'])
-  })
+  it.todo('should respect delimiter')
 
   it('fuzzy will not match inverted', () => {
     given(['env-33'])
@@ -123,7 +144,13 @@ describe.skip('env search a bit fuzzy', () => {
 
   it('Upper case is a word separator', () => {
     given(['camelCase', 'PascalCase', 'case'])
-    expect(searchResults('case')).toEqual(['case', 'camelCase', 'PascalCase'])
+    expect(searchResults('case')).toMatchInlineSnapshot(`
+      [
+        "case",
+        "camelCase",
+        "PascalCase",
+      ]
+    `)
   })
 
   it('000 Leading zeros can be omitted', () => {
@@ -141,34 +168,26 @@ describe.skip('env search a bit fuzzy', () => {
     expect(searchResults('order #')).toEqual(['b order #'])
   })
 
-  it('favorites, then recent, are priority - case sensitive', () => {
-    given(['a order', 'a order - recent', 'a order - favorite'])
+  it('will respect recent results first', () => {
+    given(['a order', 'a order - [frequency=0.1]', 'a order - [frequency=0.5]'])
     expect(searchResults('a')).toEqual([
-      'a order - favorite',
-      'a order - recent',
+      'a order - [frequency=0.5]',
+      'a order - [frequency=0.1]',
       'a order',
     ])
   })
 
-  it('favorites, then recent, are priority - case insensitive', () => {
-    given(['A order', 'A order - recent', 'A order - favorite'])
-    expect(searchResults('a')).toEqual([
-      'A order - favorite',
-      'A order - recent',
-      'A order',
-    ])
-  })
-
-  it('favorites, then recent, are priority - substring', () => {
-    given(['A order', 'A order - recent', 'A order - favorite'])
-    expect(searchResults('rd')).toEqual([
-      'A order - favorite',
-      'A order - recent',
-      'A order',
-    ])
+  it('will rank prefixed match higher then frequency', () => {
+    given(['ac [frequency=0.1]', 'abc [frequency=0.9]'])
+    expect(searchResults('ac')).toMatchInlineSnapshot(`
+      [
+        "ac [frequency=0.1]",
+        "abc [frequency=0.9]",
+      ]
+    `)
   })
 
-  it('doubl dashes', () => {
+  it('double dashes', () => {
     given(['abc-uat-01'])
     expect(searchResults('abcuat-01')).toEqual(['abc-uat-01'])
   })
@@ -177,9 +196,4 @@ describe.skip('env search a bit fuzzy', () => {
     given(['abc-uat'])
     expect(searchResults('abcuat')).toEqual(['abc-uat'])
   })
-
-  it('does not match substrings', () => {
-    given(['abc'])
-    expect(searchResults('b')).toEqual([])
-  })
 })

package/src/__tests__/modules/fuzzyMatchLogic/testUtils.ts

@@ -1,8 +1,17 @@
 import type { FuzzySearchInputEntry } from '~/modules/fuzzyMatchLogic/types'
 
-export function makeInputEntry(displayName: string): FuzzySearchInputEntry {
+export function makeInputEntry(
+  displayName: string,
+): FuzzySearchInputEntry & { frequency: number } {
+  const match = displayName.match(
+    /\[frequency\s*=\s*([+-]?(?:\d+(?:\.\d+)?|\.\d+))\s*\]/i,
+  )
+  const parsed = match?.[1] ? Number.parseFloat(match[1]) : 0
+  const frequency = Number.isFinite(parsed) ? parsed : 0
+
   return {
     slug: displayName,
     displayName,
+    frequency,
   }
 }

package/src/__tests__/modules/resouceJump/findBestMatchByUrl.test.ts

@@ -1,13 +1,13 @@
 import { objectify } from 'radashi'
 import { describe, expect, it } from 'vitest'
 import type {
-  AvailiabilityMatrixData as AvailabilityMatrixData,
+  AvailabilityMatrixData,
   AvailabilityVariant,
   EhEnvIndexed,
 } from '@env-hopper/backend-core'
 import type { ResourceJumpItem } from '~/modules/resourceJump/types'
-import type { FindBestMatchingResourceJumpParams } from '~/modules/resourceJump/findBestMatchByUrl'
-import { findBestMatchByUrl } from '~/modules/resourceJump/findBestMatchByUrl'
+import type { FindBestMatchingResourceJumpParams } from '~/modules/resourceJump/utils/findBestMatchByUrl'
+import { findBestMatchByUrl } from '~/modules/resourceJump/utils/findBestMatchByUrl'
 
 function makeEnvs(
   envAsCommaSeparated: string | Array<string>,
@@ -23,11 +23,11 @@ function makeEnvs(
 }
 
 function makeResourceJumps(
-  resoucesAsCommaSeparated: string | Array<string>,
+  resourcesAsCommaSeparated: string | Array<string>,
 ): Record<string, ResourceJumpItem> {
-  const resourceArray = Array.isArray(resoucesAsCommaSeparated)
-    ? resoucesAsCommaSeparated
-    : resoucesAsCommaSeparated.split(/\s*,\s*/)
+  const resourceArray = Array.isArray(resourcesAsCommaSeparated)
+    ? resourcesAsCommaSeparated
+    : resourcesAsCommaSeparated.split(/\s*,\s*/)
   return objectify(
     resourceArray,
     (slug) => slug,
@@ -82,24 +82,22 @@ describe('findBestMatchByUrl', () => {
       urlAppSlug: urlAppSlug,
       envs: envs,
       resourceJumps: resourceJumps,
-      getAvailabilityMatrix: async () => await Promise.resolve(matrixData),
+      getAvailabilityMatrix: async () => matrixData,
       getNameMigrations: async (r) => {
         if (r.resourceSlug === 'old-app%2Fhome') {
-          return await Promise.resolve({
+          return {
             type: 'resourceRename',
             oldSlug: r.resourceSlug,
             targetSlug: 'test-app',
-          })
+          }
         }
-        return await Promise.resolve(false)
+        return false
       },
       getEnvHistory: async () =>
-        await Promise.resolve(
-          ['staging-env', 'prod-env', 'test-env'].map((envSlug, index) => ({
-            envSlug,
-            timestamp: 100 - index,
-          })),
-        ),
+        ['staging-env', 'prod-env', 'test-env'].map((envSlug, index) => ({
+          envSlug,
+          timestamp: 100 - index,
+        })),
       ...override,
     })
 

package/src/__tests__/modules/resouceJump/helpers.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+import { mapDisplayedItems } from '../../../modules/resourceJump/utils/helpers.js'
+import type { PluginPageUrlAutocompleteItem } from '~/plugins/builtin/pageUrl/pageUrlTypes.js'
+
+describe('mapDisplayedItems', () => {
+  it('should not mark ungrouped items as children', () => {
+    const items: Array<PluginPageUrlAutocompleteItem> = [
+      {
+        type: 'pageUrl',
+        slug: 'app-a-home',
+        displayName: 'App A',
+        parent: undefined,
+      },
+      {
+        type: 'pageUrl',
+        slug: 'app-b-home',
+        displayName: 'App B',
+        parent: undefined,
+      },
+    ]
+
+    const result = Array.from(mapDisplayedItems(items))
+
+    expect(result).toMatchInlineSnapshot(`
+      [
+        {
+          "isChild": false,
+          "item": {
+            "displayName": "App A",
+            "slug": "app-a-home",
+            "type": "pageUrl",
+          },
+          "itemRenderData": {
+            "displayName": "App A",
+            "isDefaultGroupItem": true,
+            "parentDisplayName": undefined,
+          },
+        },
+        {
+          "isChild": false,
+          "item": {
+            "displayName": "App B",
+            "slug": "app-b-home",
+            "type": "pageUrl",
+          },
+          "itemRenderData": {
+            "displayName": "App B",
+            "isDefaultGroupItem": true,
+            "parentDisplayName": undefined,
+          },
+        },
+      ]
+    `)
+  })
+})

package/src/__tests__/modules/resouceJump/utils/mapToFlagshipResourceJumps.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+import type { ResourceJumpsData } from '@env-hopper/backend-core'
+import {
+  tmResourceJump,
+  tmResourceJumpGroup,
+} from '~/__tests__/util/TestMagazine.js'
+import { mapToFlagshipResourceJumps } from '~/modules/resourceJump/utils/mapToFlagshipResourceJumps'
+
+describe('grouping helpers', () => {
+  it('should be grouped', () => {
+    const input: Pick<ResourceJumpsData, 'resourceJumps' | 'groups'> = {
+      resourceJumps: [
+        tmResourceJump('single'),
+        tmResourceJump('grouped-a'),
+        tmResourceJump('grouped-b'),
+      ],
+      groups: [tmResourceJumpGroup('grouped', ['grouped-a', 'grouped-b'])],
+    }
+
+    const actual = mapToFlagshipResourceJumps(input)
+
+    expect(actual).toMatchInlineSnapshot([
+      {
+        slug: 'grouped',
+        displayName: 'grouped',
+        resourceJumps: [
+          {
+            displayName: 'grouped-a',
+            slug: 'grouped-a',
+            urlTemplate: {
+              default: '',
+            },
+          },
+          {
+            displayName: 'grouped-b',
+            slug: 'grouped-b',
+            urlTemplate: {
+              default: '',
+            },
+          },
+        ],
+      },
+      {
+        displayName: 'single',
+        slug: 'single',
+        resourceJumps: [
+          {
+            displayName: 'single',
+            slug: 'single',
+            urlTemplate: {
+              default: '',
+            },
+          },
+        ],
+      },
+    ])
+  })
+})

package/src/__tests__/util/TestMagazine.ts

@@ -0,0 +1,24 @@
+import type {
+  JumpResourceSlug,
+  ResourceJump,
+  ResourceJumpGroup,
+} from '@env-hopper/backend-core'
+
+export function tmResourceJump(slug: string): ResourceJump {
+  return {
+    slug: slug,
+    displayName: slug,
+    urlTemplate: { default: '' },
+  }
+}
+
+export function tmResourceJumpGroup(
+  slug: string,
+  resourceSlugs: Array<JumpResourceSlug>,
+): ResourceJumpGroup {
+  return {
+    slug: slug,
+    displayName: slug,
+    resourceSlugs: resourceSlugs,
+  }
+}

package/src/api/ApiQueryMagazine.ts

@@ -1,12 +1,12 @@
 import { queryOptions } from '@tanstack/react-query'
 import { indexDataFetcher } from './unsorted/indexDataFetcher'
-import type { IndexDataFetcherParams } from './unsorted/indexDataFetcher'
 import type { BootstrapConfigData } from '@env-hopper/backend-core'
+import type { IndexDataFetcherParams } from './unsorted/indexDataFetcher'
 
 export class ApiQueryMagazine {
   static getConfig(params: IndexDataFetcherParams) {
     const queryFn = indexDataFetcher(params)
-    return queryOptions<BootstrapConfigData, Error>({
+    return queryOptions<BootstrapConfigData | undefined, Error>({
       queryKey: ['config'],
       queryFn,
       staleTime: 0,

package/src/api/data/useQueryBootstrapConfig.ts

@@ -1,17 +1,18 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { ApiQueryMagazine } from '../ApiQueryMagazine'
 import type { QueryKey } from '@tanstack/react-query'
 import { useTRPCClient } from '~/api/infra/trpc'
-import { useDb } from '~/userDb/DbContext'
+import { isDexieError } from '~/util/error-utils'
 
 export const shouldPersist = (key: QueryKey) =>
   Array.isArray(key) && key[0] === 'envs'
 
 export function useQueryBootstrapConfig() {
-  // const trpc = useTRPC();
   const trpcClient = useTRPCClient()
-  const queryClient = useQueryClient()
-  const db = useDb()
 
-  return useQuery(ApiQueryMagazine.getConfig({ trpcClient, queryClient, db }))
+  const result = useQuery(ApiQueryMagazine.getConfig({ trpcClient }))
+  if (isDexieError(result.failureReason)) {
+    throw result.failureReason
+  }
+  return result
 }