Merge pull request #2334 from Shopify/fix-tests-autocomplete

Fix tests in AutocompletePrompt.test.tsx
Shopify · Jul 3, 2023 · 3ce92a2 · 3ce92a2
2 parents 925dc48 + 451394e
commit 3ce92a2
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/packages/app/src/cli/prompts/generate/extension.test.ts b/packages/app/src/cli/prompts/generate/extension.test.ts
@@ -6,7 +6,7 @@ import {ExtensionFlavorValue} from '../../services/generate/extension.js'
 import themeExtension from '../../models/templates/theme-specifications/theme.js'
 import {describe, expect, vi, beforeEach, test} from 'vitest'
 import {isShopify, isUnitTest} from '@shopify/cli-kit/node/context/local'
-import {renderSelectPrompt, renderTextPrompt} from '@shopify/cli-kit/node/ui'
+import {renderAutocompletePrompt, renderSelectPrompt, renderTextPrompt} from '@shopify/cli-kit/node/ui'
 
 vi.mock('@shopify/cli-kit/node/context/local')
 vi.mock('@shopify/cli-kit/node/ui')
@@ -42,14 +42,14 @@ describe('extension prompt', async () => {
     const extensionTemplate = findExtensionTemplate('ui_extension', allUITemplates)
 
     // Given
-    vi.mocked(renderSelectPrompt).mockResolvedValueOnce(answers.extensionType)
+    vi.mocked(renderAutocompletePrompt).mockResolvedValueOnce(answers.extensionType)
     vi.mocked(renderTextPrompt).mockResolvedValue(answers.name)
 
     // When
     const got = await generateExtensionPrompts(options)
 
     // Then
-    expect(renderSelectPrompt).toHaveBeenCalledWith(extensionTypeQuestion)
+    expect(renderAutocompletePrompt).toHaveBeenCalledWith(extensionTypeQuestion)
     expect(renderTextPrompt).toHaveBeenCalledWith(extensionNameQuestion)
     expect(got).toEqual({
       extensionTemplate,
@@ -70,13 +70,13 @@ describe('extension prompt', async () => {
     const extensionTemplate = findExtensionTemplate('ui_extension', allUITemplates)
 
     // Given
-    vi.mocked(renderSelectPrompt).mockResolvedValueOnce(answers.extensionType)
+    vi.mocked(renderAutocompletePrompt).mockResolvedValueOnce(answers.extensionType)
 
     // When
     const got = await generateExtensionPrompts(options)
 
     // Then
-    expect(renderSelectPrompt).toHaveBeenCalledWith(extensionTypeQuestion)
+    expect(renderAutocompletePrompt).toHaveBeenCalledWith(extensionTypeQuestion)
     expect(got).toEqual({
       extensionTemplate,
       extensionContent: [{name: 'my-special-extension', flavor: undefined, index: 0}],
@@ -197,13 +197,13 @@ describe('extension prompt', async () => {
       message: 'Type of extension?',
       choices: buildChoices(allFunctionTemplates),
     }
-    vi.mocked(renderSelectPrompt).mockResolvedValueOnce('product_discounts')
+    vi.mocked(renderAutocompletePrompt).mockResolvedValueOnce('product_discounts')
 
     // When
     const got = await generateExtensionPrompts(options)
 
     // Then
-    expect(renderSelectPrompt).toHaveBeenCalledWith(functionTypes)
+    expect(renderAutocompletePrompt).toHaveBeenCalledWith(functionTypes)
     expect(got).toEqual({
       extensionTemplate,
       extensionContent: [{name: 'my-product-discount', index: 0, flavor: 'rust'}],

diff --git a/packages/cli-kit/src/private/node/ui/components/AutocompletePrompt.test.tsx b/packages/cli-kit/src/private/node/ui/components/AutocompletePrompt.test.tsx
@@ -157,7 +157,7 @@ describe('AutocompletePrompt', async () => {
     )
 
     expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?
+      "?  Associate your project with the org Castile Ventures?   [36m[7mT[27m[2mype to search...[22m[39m
 
          [1mAutomations[22m
          [36m>[39m  [36mfirst[39m
@@ -796,7 +796,7 @@ describe('AutocompletePrompt', async () => {
     )
 
     expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "?  Associate your project with the org Castile Ventures?
+      "?  Associate your project with the org Castile Ventures?   [36m[7mT[27m[2mype to search...[22m[39m
 
          [1mAutomations[22m
          [36m>[39m  [36mfirst[39m

diff --git a/packages/cli-kit/src/private/node/ui/components/AutocompletePrompt.tsx b/packages/cli-kit/src/private/node/ui/components/AutocompletePrompt.tsx
@@ -38,6 +38,7 @@ enum PromptState {
 }
 
 const PAGE_SIZE = 25
+const MIN_NUMBER_OF_ITEMS_FOR_SEARCH = 5
 
 // eslint-disable-next-line react/function-component-definition
 function AutocompletePrompt<T>({
@@ -57,7 +58,7 @@ function AutocompletePrompt<T>({
   const [searchTerm, setSearchTerm] = useState('')
   const [searchResults, setSearchResults] = useState<SelectItem<T>[]>(paginatedInitialChoices.slice(0, PAGE_SIZE))
   const {stdout} = useStdout()
-  const canSearch = initialChoices.length >= 5
+  const canSearch = initialChoices.length > MIN_NUMBER_OF_ITEMS_FOR_SEARCH
   const [hasMorePages, setHasMorePages] = useState(initialHasMorePages)
   const [wrapperHeight, setWrapperHeight] = useState(0)
   const [promptAreaHeight, setPromptAreaHeight] = useState(0)

diff --git a/packages/cli-kit/src/private/node/ui/components/SelectInput.tsx b/packages/cli-kit/src/private/node/ui/components/SelectInput.tsx
@@ -116,6 +116,8 @@ function Item<T>({
   )
 }
 
+const MAX_AVAILABLE_LINES = 25
+
 // eslint-disable-next-line react/function-component-definition
 function SelectInputInner<T>(
   {
@@ -132,7 +134,7 @@ function SelectInputInner<T>(
     hasMorePages = false,
     morePagesMessage,
     infoMessage,
-    availableLines = 25,
+    availableLines = MAX_AVAILABLE_LINES,
     submitWithShortcuts = false,
     onSubmit,
   }: SelectInputProps<T>,