fix(ui): prevent compare with non-existing package (#1207)

Author: MatteoGabriele

app/components/Compare/PackageSelector.vue

@@ -77,9 +77,18 @@ function removePackage(name: string) {
 }
 
 function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter' && inputValue.value.trim()) {
+  const inputValueTrim = inputValue.value.trim()
+  const hasMatchInPackages = filteredResults.value.find(result => {
+    return result.name === inputValueTrim
+  })
+
+  if (e.key === 'Enter' && inputValueTrim) {
     e.preventDefault()
-    addPackage(inputValue.value.trim())
+    if (showNoDependencyOption.value) {
+      addPackage(NO_DEPENDENCY_ID)
+    } else if (hasMatchInPackages) {
+      addPackage(inputValueTrim)
+    }
   }
 }
 

test/nuxt/components/compare/PackageSelector.spec.ts

@@ -140,12 +140,28 @@ describe('PackageSelector', () => {
       })
 
       const input = component.find('input')
-      await input.setValue('my-package')
+      await input.setValue('lodash')
       await input.trigger('keydown', { key: 'Enter' })
 
       const emitted = component.emitted('update:modelValue')
       expect(emitted).toBeTruthy()
-      expect(emitted![0]![0]).toEqual(['my-package'])
+      expect(emitted![0]![0]).toEqual(['lodash'])
+    })
+
+    it('adds "no dep" entry on Enter key', async () => {
+      const component = await mountSuspended(PackageSelector, {
+        props: {
+          modelValue: [],
+        },
+      })
+
+      const input = component.find('input')
+      await input.setValue('no dep')
+      await input.trigger('keydown', { key: 'Enter' })
+
+      const emitted = component.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect(emitted![0]![0]).toEqual(['__no_dependency__'])
     })
 
     it('clears input after adding package', async () => {
@@ -156,7 +172,7 @@ describe('PackageSelector', () => {
       })
 
       const input = component.find('input')
-      await input.setValue('my-package')
+      await input.setValue('lodash')
       await input.trigger('keydown', { key: 'Enter' })
 
       // Input should be cleared