create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/locators/create/create-locator-workspace.tsx

@@ -1,10 +1,5 @@
 'use client'
 
-import {
-  getLocatorPickerSessionAction,
-  savePickedLocatorAction,
-  startLocatorPickerSessionAction,
-} from '@/actions/locator-picker/locator-picker-actions'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -15,56 +10,16 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Separator } from '@/components/ui/separator'
 import { Textarea } from '@/components/ui/textarea'
-import { toast } from '@/hooks/use-toast'
-import { inferGroupSuggestion, normalizeRoute, suggestLocatorName } from '@/lib/locator-picker/suggestions'
-import type { LocatorPickerSession } from '@/types/locator-picker'
-import type { Environment, LocatorGroup, Module } from '@prisma/client'
 import { ExternalLink, Loader2, Save, Target } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import { useEffect, useRef, useState } from 'react'
-
-interface CreateLocatorWorkspaceProps {
-  environments: Environment[]
-  locatorGroups: LocatorGroup[]
-  modules: Module[]
-  mode?: 'create' | 'modify'
-  locatorId?: string
-  initialValues?: {
-    locatorName?: string
-    selector?: string
-    resolutionMode?: 'existing' | 'create'
-    existingLocatorGroupId?: string
-    newLocatorGroupName?: string
-    route?: string
-    moduleId?: string
-  }
-}
-
-function statusTone(status: LocatorPickerSession['status']) {
-  switch (status) {
-    case 'picked':
-      return 'default'
-    case 'saving':
-      return 'secondary'
-    case 'closed':
-      return 'outline'
-    case 'error':
-      return 'destructive'
-    case 'ready':
-      return 'secondary'
-    case 'starting':
-    default:
-      return 'secondary'
-  }
-}
-
-function formatStatus(status: LocatorPickerSession['status']) {
-  if (status === 'picked') {
-    return 'Picked'
-  }
-
-  return status.charAt(0).toUpperCase() + status.slice(1)
-}
+import { normalizeRoute } from '@/lib/locator-picker/suggestions'
+import type { CreateLocatorWorkspaceProps } from './create-locator-workspace-helpers'
+import {
+  formatStatus,
+  getLocatorSourceType,
+  getLocatorWorkspaceResolutionMode,
+  statusTone,
+} from './create-locator-workspace-helpers'
+import { useLocatorWorkspace } from './use-locator-workspace'
 
 export default function CreateLocatorWorkspace({
   environments,
@@ -74,207 +29,34 @@ export default function CreateLocatorWorkspace({
   locatorId,
   initialValues,
 }: CreateLocatorWorkspaceProps) {
-  const router = useRouter()
-  const isModifyMode = mode === 'modify'
-  const [sourceType, setSourceType] = useState<'environment' | 'url'>(environments.length > 0 ? 'environment' : 'url')
-  const [environmentId, setEnvironmentId] = useState(environments[0]?.id ?? '')
-  const [url, setUrl] = useState('')
-  const [session, setSession] = useState<LocatorPickerSession | null>(null)
-  const [isStarting, setIsStarting] = useState(false)
-  const [isSaving, setIsSaving] = useState(false)
-  const payloadSignatureRef = useRef('')
-
-  const [locatorName, setLocatorName] = useState(initialValues?.locatorName ?? '')
-  const [selector, setSelector] = useState(initialValues?.selector ?? '')
-  const [resolutionMode, setResolutionMode] = useState<'existing' | 'create'>(initialValues?.resolutionMode ?? 'existing')
-  const [existingLocatorGroupId, setExistingLocatorGroupId] = useState(initialValues?.existingLocatorGroupId ?? '')
-  const [newLocatorGroupName, setNewLocatorGroupName] = useState(initialValues?.newLocatorGroupName ?? '')
-  const [route, setRoute] = useState(normalizeRoute(initialValues?.route ?? '/'))
-  const [moduleId, setModuleId] = useState(initialValues?.moduleId ?? '')
-  const [lastAutoLocatorName, setLastAutoLocatorName] = useState(initialValues?.locatorName ?? '')
-  const [lastAutoSelector, setLastAutoSelector] = useState(initialValues?.selector ?? '')
-  const [lastAutoExistingGroupId, setLastAutoExistingGroupId] = useState(initialValues?.existingLocatorGroupId ?? '')
-  const [lastAutoGroupName, setLastAutoGroupName] = useState(initialValues?.newLocatorGroupName ?? '')
-  const [lastAutoRoute, setLastAutoRoute] = useState(normalizeRoute(initialValues?.route ?? '/'))
-  const [lastAutoModuleId, setLastAutoModuleId] = useState(initialValues?.moduleId ?? '')
-
-  const loadSession = async (sessionId: string, silent = false) => {
-    const response = await getLocatorPickerSessionAction(sessionId)
-    if (response.status === 200) {
-      setSession(response.data as LocatorPickerSession)
-    } else if (!silent) {
-      toast({
-        title: 'Unable to refresh the picker session',
-        description: response.error,
-        variant: 'destructive',
-      })
-    }
-  }
-
-  useEffect(() => {
-    if (!session?.sessionId || session.status === 'closed' || !session.companionPid) {
-      return
-    }
-
-    const intervalId = window.setInterval(() => {
-      void loadSession(session.sessionId, true)
-    }, 1500)
-
-    return () => window.clearInterval(intervalId)
-  }, [session?.companionPid, session?.sessionId, session?.status])
-
-  useEffect(() => {
-    const pickedLocator = session?.pickedLocator
-    if (!pickedLocator) {
-      return
-    }
-
-    const nextPayloadSignature = `${session?.updatedAt}:${pickedLocator.currentUrl}:${pickedLocator.selector}`
-    if (nextPayloadSignature === payloadSignatureRef.current) {
-      return
-    }
-
-    payloadSignatureRef.current = nextPayloadSignature
-    const timeoutId = window.setTimeout(() => {
-      if (selector === '' || selector === lastAutoSelector) {
-        setSelector(pickedLocator.selector)
-        setLastAutoSelector(pickedLocator.selector)
-      }
-
-      const suggestedName = suggestLocatorName(pickedLocator)
-      if (suggestedName && (locatorName === '' || locatorName === lastAutoLocatorName)) {
-        setLocatorName(suggestedName)
-        setLastAutoLocatorName(suggestedName)
-      }
-
-      const suggestion = inferGroupSuggestion(pickedLocator.pathname, pickedLocator.pageTitle, locatorGroups, modules)
-
-      if (route === '/' || route === '' || route === lastAutoRoute) {
-        setRoute(suggestion.route)
-        setLastAutoRoute(suggestion.route)
-      }
-
-      if (suggestion.mode === 'existing') {
-        setResolutionMode(currentMode => (currentMode === 'create' ? 'existing' : currentMode))
-
-        const nextExistingGroupId = suggestion.existingLocatorGroupId ?? ''
-        if (existingLocatorGroupId === '' || existingLocatorGroupId === lastAutoExistingGroupId) {
-          setExistingLocatorGroupId(nextExistingGroupId)
-          setLastAutoExistingGroupId(nextExistingGroupId)
-        }
-      } else {
-        if (
-          resolutionMode === 'create' ||
-          existingLocatorGroupId === '' ||
-          existingLocatorGroupId === lastAutoExistingGroupId
-        ) {
-          setResolutionMode('create')
-        }
-
-        if (newLocatorGroupName === '' || newLocatorGroupName === lastAutoGroupName) {
-          setNewLocatorGroupName(suggestion.suggestedGroupName)
-          setLastAutoGroupName(suggestion.suggestedGroupName)
-        }
-
-        if (moduleId === '' || moduleId === lastAutoModuleId) {
-          const nextModuleId = suggestion.suggestedModuleId ?? ''
-          setModuleId(nextModuleId)
-          setLastAutoModuleId(nextModuleId)
-        }
-      }
-    }, 0)
-
-    return () => window.clearTimeout(timeoutId)
-  }, [
-    existingLocatorGroupId,
-    lastAutoExistingGroupId,
-    lastAutoGroupName,
-    lastAutoLocatorName,
-    lastAutoModuleId,
-    lastAutoRoute,
-    lastAutoSelector,
+  const {
+    isModifyMode,
+    session,
+    state,
+    isStarting,
+    isSaving,
+    setSourceType,
+    setEnvironmentId,
+    setUrl,
+    setLocatorName,
+    setSelector,
+    setResolutionMode,
+    setExistingLocatorGroupId,
+    setNewLocatorGroupName,
+    setRoute,
+    setModuleId,
+    handleStart,
+    handleSave,
+    canLaunch,
+    canSave,
+  } = useLocatorWorkspace({
+    environments,
     locatorGroups,
-    locatorName,
-    moduleId,
     modules,
-    newLocatorGroupName,
-    resolutionMode,
-    route,
-    selector,
-    session,
-  ])
-
-  const handleStart = async () => {
-    setIsStarting(true)
-    const response = await startLocatorPickerSessionAction({
-      environmentId: sourceType === 'environment' ? environmentId : undefined,
-      url: sourceType === 'url' ? url : undefined,
-    })
-    setIsStarting(false)
-
-    if (response.status !== 200 || !response.data) {
-      toast({
-        title: 'Unable to launch Chromium',
-        description: response.error,
-        variant: 'destructive',
-      })
-      return
-    }
-
-    setSession(response.data as LocatorPickerSession)
-    payloadSignatureRef.current = ''
-    setLastAutoLocatorName(locatorName)
-    setLastAutoSelector(selector)
-    setLastAutoExistingGroupId(existingLocatorGroupId)
-    setLastAutoGroupName(newLocatorGroupName)
-    setLastAutoRoute(route)
-    setLastAutoModuleId(moduleId)
-
-    toast({
-      title: 'Chromium launched',
-      description: 'Use the in-browser Appraise picker panel to start picking, click one element, then confirm Use selector.',
-    })
-  }
-
-  const handleSave = async () => {
-    setIsSaving(true)
-
-    const response = await savePickedLocatorAction({
-      locatorId,
-      sessionId: session?.sessionId,
-      locatorName,
-      selector,
-      resolutionMode,
-      existingLocatorGroupId: resolutionMode === 'existing' ? existingLocatorGroupId : undefined,
-      newLocatorGroupName: resolutionMode === 'create' ? newLocatorGroupName : undefined,
-      route: resolutionMode === 'create' ? route : undefined,
-      moduleId: resolutionMode === 'create' ? moduleId : undefined,
-    })
-
-    setIsSaving(false)
-
-    if (response.status === 200) {
-      toast({
-        title: isModifyMode ? 'Locator updated' : 'Locator saved',
-        description: response.message,
-      })
-      router.push('/locators')
-      router.refresh()
-      return
-    }
-
-    toast({
-      title: 'Unable to save locator',
-      description: response.error,
-      variant: 'destructive',
-    })
-  }
-
-  const canSave =
-    locatorName.trim() !== '' &&
-    selector.trim() !== '' &&
-    ((resolutionMode === 'existing' && existingLocatorGroupId !== '') ||
-      (resolutionMode === 'create' && newLocatorGroupName.trim() !== '' && moduleId !== ''))
+    mode,
+    locatorId,
+    initialValues,
+  })
 
   return (
     <div className="space-y-6">
@@ -290,8 +72,8 @@ export default function CreateLocatorWorkspace({
           </CardHeader>
           <CardContent className="space-y-5">
             <RadioGroup
-              value={sourceType}
-              onValueChange={value => setSourceType(value as 'environment' | 'url')}
+              value={state.sourceType}
+              onValueChange={value => setSourceType(getLocatorSourceType(value))}
               className="grid gap-3"
             >
               <label className="flex items-center gap-3 rounded-lg border p-3">
@@ -310,11 +92,11 @@ export default function CreateLocatorWorkspace({
               </label>
             </RadioGroup>
 
-            {sourceType === 'environment' ? (
+            {state.sourceType === 'environment' ? (
               <div className="space-y-2">
-                <Label>Environment</Label>
-                <Select value={environmentId} onValueChange={setEnvironmentId}>
-                  <SelectTrigger>
+                <Label htmlFor="picker-environment">Environment</Label>
+                <Select value={state.environmentId} onValueChange={setEnvironmentId}>
+                  <SelectTrigger id="picker-environment">
                     <SelectValue placeholder="Select an environment" />
                   </SelectTrigger>
                   <SelectContent isEmpty={environments.length === 0}>
@@ -331,7 +113,7 @@ export default function CreateLocatorWorkspace({
                 <Label htmlFor="picker-url">URL</Label>
                 <Input
                   id="picker-url"
-                  value={url}
+                  value={state.url}
                   onChange={event => setUrl(event.target.value)}
                   placeholder="https://example.com/login"
                 />
@@ -341,7 +123,7 @@ export default function CreateLocatorWorkspace({
             <Button
               type="button"
               onClick={handleStart}
-              disabled={isStarting || (sourceType === 'environment' ? environmentId === '' : url.trim() === '')}
+              disabled={isStarting || !canLaunch}
               className="w-full"
             >
               {isStarting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Target className="mr-2 h-4 w-4" />}
@@ -430,7 +212,7 @@ export default function CreateLocatorWorkspace({
                 <Label htmlFor="locator-name">Locator Name</Label>
                 <Input
                   id="locator-name"
-                  value={locatorName}
+                  value={state.locatorName}
                   onChange={event => setLocatorName(event.target.value)}
                   placeholder="Enter locator name"
                 />
@@ -439,8 +221,8 @@ export default function CreateLocatorWorkspace({
               <div className="space-y-2">
                 <Label>Group Resolution</Label>
                 <RadioGroup
-                  value={resolutionMode}
-                  onValueChange={value => setResolutionMode(value as 'existing' | 'create')}
+                  value={state.resolutionMode}
+                  onValueChange={value => setResolutionMode(getLocatorWorkspaceResolutionMode(value))}
                   className="grid gap-3"
                 >
                   <label className="flex items-center gap-3 rounded-lg border p-3">
@@ -465,18 +247,18 @@ export default function CreateLocatorWorkspace({
               <Label htmlFor="locator-selector">Selector</Label>
               <Textarea
                 id="locator-selector"
-                value={selector}
+                value={state.selector}
                 onChange={event => setSelector(event.target.value)}
                 placeholder="Playwright selector or XPath"
                 className="min-h-28"
               />
             </div>
 
-            {resolutionMode === 'existing' ? (
+            {state.resolutionMode === 'existing' ? (
               <div className="space-y-2">
-                <Label>Locator Group</Label>
-                <Select value={existingLocatorGroupId} onValueChange={setExistingLocatorGroupId}>
-                  <SelectTrigger>
+                <Label htmlFor="existing-locator-group">Locator Group</Label>
+                <Select value={state.existingLocatorGroupId} onValueChange={setExistingLocatorGroupId}>
+                  <SelectTrigger id="existing-locator-group">
                     <SelectValue placeholder="Select a locator group" />
                   </SelectTrigger>
                   <SelectContent isEmpty={locatorGroups.length === 0}>
@@ -494,7 +276,7 @@ export default function CreateLocatorWorkspace({
                   <Label htmlFor="new-group-name">Locator Group Name</Label>
                   <Input
                     id="new-group-name"
-                    value={newLocatorGroupName}
+                    value={state.newLocatorGroupName}
                     onChange={event => setNewLocatorGroupName(event.target.value)}
                     placeholder="Enter group name"
                   />
@@ -504,16 +286,16 @@ export default function CreateLocatorWorkspace({
                   <Label htmlFor="new-group-route">Route</Label>
                   <Input
                     id="new-group-route"
-                    value={route}
+                    value={state.route}
                     onChange={event => setRoute(normalizeRoute(event.target.value))}
                     placeholder="/account/settings"
                   />
                 </div>
 
                 <div className="space-y-2">
-                  <Label>Module</Label>
-                  <Select value={moduleId} onValueChange={setModuleId}>
-                    <SelectTrigger>
+                  <Label htmlFor="new-group-module">Module</Label>
+                  <Select value={state.moduleId} onValueChange={setModuleId}>
+                    <SelectTrigger id="new-group-module">
                       <SelectValue placeholder="Select a module" />
                     </SelectTrigger>
                     <SelectContent isEmpty={modules.length === 0}>

package/templates/default/src/app/(base)/locators/create/page.tsx

@@ -3,9 +3,9 @@ import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-grou
 import { getAllModulesAction } from '@/actions/modules/module-actions'
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Environment, LocatorGroup, Module } from '@prisma/client'
 import { Crosshair } from 'lucide-react'
 import type { Metadata } from 'next'
+import { getEnvironmentRows, getLocatorGroupRows, getModuleRows } from './create-locator-workspace-helpers'
 import CreateLocatorWorkspace from './create-locator-workspace'
 
 export const metadata: Metadata = {
@@ -25,6 +25,10 @@ const CreateLocatorPage = async () => {
     return <div>Error: {loadError}</div>
   }
 
+  const environmentRows = getEnvironmentRows(environments)
+  const locatorGroupRows = getLocatorGroupRows(locatorGroups)
+  const moduleRows = getModuleRows(modules)
+
   return (
     <>
       <div className="mb-8">
@@ -40,9 +44,9 @@ const CreateLocatorPage = async () => {
         </HeaderSubtitle>
       </div>
       <CreateLocatorWorkspace
-        environments={environments as Environment[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
-        modules={modules as Module[]}
+        environments={environmentRows}
+        locatorGroups={locatorGroupRows}
+        modules={moduleRows}
       />
     </>
   )

package/templates/default/src/app/(base)/locators/create/use-locator-workspace.ts

@@ -0,0 +1,183 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+import {
+  getLocatorPickerSessionAction,
+  savePickedLocatorAction,
+  startLocatorPickerSessionAction,
+} from '@/actions/locator-picker/locator-picker-actions'
+import { toast } from '@/hooks/use-toast'
+import type { LocatorPickerSession } from '@/types/locator-picker'
+
+import {
+  applyPickedLocatorToWorkspaceState,
+  canLaunchPicker,
+  canSaveLocator,
+  createInitialWorkspaceState,
+  createWorkspaceAutoFillSnapshot,
+  getLocatorPickerSession,
+  getPickerPayloadSignature,
+  type CreateLocatorWorkspaceProps,
+  type GroupResolutionMode,
+  type LocatorSourceType,
+} from './create-locator-workspace-helpers'
+
+export function useLocatorWorkspace({
+  environments,
+  locatorGroups,
+  modules,
+  mode = 'create',
+  locatorId,
+  initialValues,
+}: CreateLocatorWorkspaceProps) {
+  const router = useRouter()
+  const payloadSignatureRef = useRef('')
+  const isModifyMode = mode === 'modify'
+
+  const [state, setState] = useState(() => createInitialWorkspaceState(environments, initialValues))
+  const [session, setSession] = useState<LocatorPickerSession | null>(null)
+  const [isStarting, setIsStarting] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+
+  const loadSession = async (sessionId: string, silent = false) => {
+    const response = await getLocatorPickerSessionAction(sessionId)
+    const nextSession = getLocatorPickerSession(response.data)
+
+    if (response.status === 200 && nextSession) {
+      setSession(nextSession)
+    } else if (!silent) {
+      toast({
+        title: 'Unable to refresh the picker session',
+        description: response.error || 'Failed to refresh the picker session.',
+        variant: 'destructive',
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (!session?.sessionId || session.status === 'closed' || !session.companionPid) {
+      return
+    }
+
+    const intervalId = window.setInterval(() => {
+      void loadSession(session.sessionId, true)
+    }, 1500)
+
+    return () => window.clearInterval(intervalId)
+  }, [session?.companionPid, session?.sessionId, session?.status])
+
+  useEffect(() => {
+    const nextPayloadSignature = getPickerPayloadSignature(session)
+    if (!session?.pickedLocator || nextPayloadSignature === '' || nextPayloadSignature === payloadSignatureRef.current) {
+      return
+    }
+
+    payloadSignatureRef.current = nextPayloadSignature
+
+    const timeoutId = window.setTimeout(() => {
+      setState(currentState => applyPickedLocatorToWorkspaceState(currentState, session, locatorGroups, modules))
+    }, 0)
+
+    return () => window.clearTimeout(timeoutId)
+  }, [locatorGroups, modules, session])
+
+  const handleStart = async () => {
+    setIsStarting(true)
+
+    const response = await startLocatorPickerSessionAction({
+      environmentId: state.sourceType === 'environment' ? state.environmentId : undefined,
+      url: state.sourceType === 'url' ? state.url : undefined,
+    })
+
+    setIsStarting(false)
+
+    const nextSession = getLocatorPickerSession(response.data)
+
+    if (response.status !== 200 || !nextSession) {
+      toast({
+        title: 'Unable to launch Chromium',
+        description: response.error || 'Failed to launch Chromium.',
+        variant: 'destructive',
+      })
+      return
+    }
+
+    setSession(nextSession)
+    payloadSignatureRef.current = ''
+    setState(currentState => ({
+      ...currentState,
+      ...createWorkspaceAutoFillSnapshot(currentState),
+    }))
+
+    toast({
+      title: 'Chromium launched',
+      description: 'Use the in-browser Appraise picker panel to start picking, click one element, then confirm Use selector.',
+    })
+  }
+
+  const handleSave = async () => {
+    setIsSaving(true)
+
+    const response = await savePickedLocatorAction({
+      locatorId,
+      sessionId: session?.sessionId,
+      locatorName: state.locatorName,
+      selector: state.selector,
+      resolutionMode: state.resolutionMode,
+      existingLocatorGroupId: state.resolutionMode === 'existing' ? state.existingLocatorGroupId : undefined,
+      newLocatorGroupName: state.resolutionMode === 'create' ? state.newLocatorGroupName : undefined,
+      route: state.resolutionMode === 'create' ? state.route : undefined,
+      moduleId: state.resolutionMode === 'create' ? state.moduleId : undefined,
+    })
+
+    setIsSaving(false)
+
+    if (response.status === 200) {
+      toast({
+        title: isModifyMode ? 'Locator updated' : 'Locator saved',
+        description: response.message,
+      })
+      router.push('/locators')
+      router.refresh()
+      return
+    }
+
+    toast({
+      title: 'Unable to save locator',
+      description: response.error || 'Failed to save the locator.',
+      variant: 'destructive',
+    })
+  }
+
+  const derivedState = useMemo(
+    () => ({
+      canLaunch: canLaunchPicker(state),
+      canSave: canSaveLocator(state),
+    }),
+    [state],
+  )
+
+  return {
+    isModifyMode,
+    session,
+    state,
+    isStarting,
+    isSaving,
+    setSourceType: (sourceType: LocatorSourceType) => setState(current => ({ ...current, sourceType })),
+    setEnvironmentId: (environmentId: string) => setState(current => ({ ...current, environmentId })),
+    setUrl: (url: string) => setState(current => ({ ...current, url })),
+    setLocatorName: (locatorName: string) => setState(current => ({ ...current, locatorName })),
+    setSelector: (selector: string) => setState(current => ({ ...current, selector })),
+    setResolutionMode: (resolutionMode: GroupResolutionMode) => setState(current => ({ ...current, resolutionMode })),
+    setExistingLocatorGroupId: (existingLocatorGroupId: string) =>
+      setState(current => ({ ...current, existingLocatorGroupId })),
+    setNewLocatorGroupName: (newLocatorGroupName: string) => setState(current => ({ ...current, newLocatorGroupName })),
+    setRoute: (route: string) => setState(current => ({ ...current, route })),
+    setModuleId: (moduleId: string) => setState(current => ({ ...current, moduleId })),
+    handleStart,
+    handleSave,
+    ...derivedState,
+  }
+}

package/templates/default/src/app/(base)/locators/locator-helpers.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+
+import { getLocatorTableRows } from './locator-helpers'
+
+describe('locator helpers', () => {
+  it('keeps locator rows when the list payload only includes locator group name', () => {
+    expect(
+      getLocatorTableRows([
+        {
+          id: 'locator-1',
+          name: 'submitButton',
+          value: '#submit',
+          locatorGroupId: 'group-1',
+          createdAt: new Date('2024-01-01T00:00:00.000Z'),
+          updatedAt: new Date('2024-01-01T00:00:00.000Z'),
+          locatorGroup: {
+            name: 'Checkout',
+          },
+          conflicts: [
+            {
+              id: 'conflict-1',
+            },
+          ],
+        },
+      ]),
+    ).toHaveLength(1)
+  })
+})