@shopify/cli-kit 3.47.4 → 3.48.0

package/dist/private/node/ui/components/SelectInput.test.js

@@ -1,5 +1,5 @@
 import { SelectInput } from './SelectInput.js';
-import { sendInputAndWait, sendInputAndWaitForChange, waitForInputsToBeReady, render } from '../../testing/ui.js';
+import { sendInputAndWait, sendInputAndWaitForChange, waitForInputsToBeReady, render, getLastFrameAfterUnmount, } from '../../testing/ui.js';
 import { platformAndArch } from '../../../../public/node/os.js';
 import { describe, expect, test, vi } from 'vitest';
 import React from 'react';
@@ -29,11 +29,11 @@ describe('SelectInput', async () => {
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ARROW_UP);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   (1) First
-      >  (2) Second
-         (3) Third
+      "   First
+      >  Second
+         Third
 
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
         expect(onChange).toHaveBeenLastCalledWith(items[1]);
     });
@@ -57,43 +57,37 @@ describe('SelectInput', async () => {
         await waitForInputsToBeReady();
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   (1) First
-      >  (2) Second
-         (3) Third
+      "   First
+      >  Second
+         Third
 
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
         expect(onChange).toHaveBeenCalledWith(items[1]);
     });
-    test('handles single digit numeric shortcuts', async () => {
+    test('throws an error if a key has more than 1 character', async () => {
         const onChange = vi.fn();
         const items = [
             {
                 label: 'First',
                 value: 'first',
+                key: 'a',
             },
             {
                 label: 'Second',
                 value: 'second',
+                key: 'b',
             },
             {
                 label: 'Third',
                 value: 'third',
+                key: 'ab',
             },
         ];
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
-        await waitForInputsToBeReady();
-        await sendInputAndWaitForChange(renderInstance, '2');
-        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   (1) First
-      >  (2) Second
-         (3) Third
-
-         Press ↑↓ arrows to select, enter to confirm"
-    `);
-        expect(onChange).toHaveBeenCalledWith(items[1]);
+        expect(getLastFrameAfterUnmount(renderInstance)).toMatch('SelectInput: Keys must be a single character');
     });
-    test('handles keys with multiple digits', async () => {
+    test("throws an error if an item has key but others don't", async () => {
         const onChange = vi.fn();
         const items = [
             {
@@ -105,22 +99,13 @@ describe('SelectInput', async () => {
                 value: 'second',
             },
             {
-                label: 'Tenth',
-                value: 'tenth',
-                key: '10',
+                label: 'Third',
+                value: 'third',
+                key: 'a',
             },
         ];
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
-        await waitForInputsToBeReady();
-        await sendInputAndWaitForChange(renderInstance, '1', '0');
-        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   (1) First
-         (2) Second
-      >  (10) Tenth
-
-         Press ↑↓ arrows to select, enter to confirm"
-    `);
-        expect(onChange).toHaveBeenCalledWith(items[2]);
+        expect(getLastFrameAfterUnmount(renderInstance)).toMatch('SelectInput: All items must have keys if one does');
     });
     test('handles pressing non existing keys', async () => {
         const onChange = vi.fn();
@@ -141,54 +126,25 @@ describe('SelectInput', async () => {
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         await waitForInputsToBeReady();
         // nothing changes when pressing a key that doesn't exist
-        await sendInputAndWait(renderInstance, 500, '4');
+        await sendInputAndWait(renderInstance, 100, '4');
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      ">  (1) First
-         (2) Second
-         (3) Tenth
+      ">  First
+         Second
+         Tenth
 
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
         expect(onChange).not.toHaveBeenCalled();
     });
-    test('handles custom keys', async () => {
-        const onChange = vi.fn();
-        const items = [
-            {
-                label: 'First',
-                value: 'first',
-            },
-            {
-                label: 'Second',
-                value: 'second',
-            },
-            {
-                label: 'Third',
-                value: 'third',
-                key: 't',
-            },
-        ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
-        await waitForInputsToBeReady();
-        await sendInputAndWaitForChange(renderInstance, 't');
-        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   (1) First
-         (2) Second
-      >  (t) Third
-
-         Press ↑↓ arrows to select, enter to confirm"
-    `);
-        expect(onChange).toHaveBeenCalledWith(items[2]);
-    });
     const runningOnWindows = platformAndArch().platform === 'windows';
     test.skipIf(runningOnWindows)('support groups', async () => {
         const onChange = vi.fn();
         const items = [
-            { label: 'first', value: 'first', group: 'Automations', key: 'f' },
-            { label: 'second', value: 'second', group: 'Automations', key: 's' },
+            { label: 'first', value: 'first', group: 'Automations' },
+            { label: 'second', value: 'second', group: 'Automations' },
             { label: 'third', value: 'third', group: 'Merchant Admin' },
             { label: 'fourth', value: 'fourth', group: 'Merchant Admin' },
-            { label: 'fifth', value: 'fifth', key: 'a' },
+            { label: 'fifth', value: 'fifth' },
             { label: 'sixth', value: 'sixth' },
             { label: 'seventh', value: 'seventh' },
             { label: 'eighth', value: 'eighth' },
@@ -198,67 +154,46 @@ describe('SelectInput', async () => {
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: onChange }));
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "   Automations
-      >  (f) first
-         (s) second
+         >  first
+            second
 
          Merchant Admin
-         (3) third
-         (4) fourth
+            third
+            fourth
 
          Other
-         (a) fifth
-         (6) sixth
-         (7) seventh
-         (8) eighth
-         (9) ninth
-         (10) tenth
+            fifth
+            sixth
+            seventh
+            eighth
+            ninth
+            tenth
 
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
         await waitForInputsToBeReady();
-        await sendInputAndWaitForChange(renderInstance, 'a');
-        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   Automations
-         (f) first
-         (s) second
-
-         Merchant Admin
-         (3) third
-         (4) fourth
-
-         Other
-      >  (a) fifth
-         (6) sixth
-         (7) seventh
-         (8) eighth
-         (9) ninth
-         (10) tenth
-
-         Press ↑↓ arrows to select, enter to confirm"
-    `);
-        expect(onChange).toHaveBeenCalledWith(items[4]);
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "   Automations
-         (f) first
-         (s) second
+            first
+            second
 
          Merchant Admin
-         (3) third
-         (4) fourth
+         >  third
+            fourth
 
          Other
-         (a) fifth
-         (6) sixth
-      >  (7) seventh
-         (8) eighth
-         (9) ninth
-         (10) tenth
+            fifth
+            sixth
+            seventh
+            eighth
+            ninth
+            tenth
 
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
-        expect(onChange).toHaveBeenLastCalledWith(items[6]);
+        expect(onChange).toHaveBeenLastCalledWith(items[2]);
     });
     test('allows disabling shortcuts', async () => {
         const onChange = vi.fn();
@@ -285,7 +220,7 @@ describe('SelectInput', async () => {
          Second
          Third
 
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
         expect(onChange).not.toHaveBeenCalled();
     });
@@ -307,11 +242,11 @@ describe('SelectInput', async () => {
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, defaultValue: "second" }));
         await waitForInputsToBeReady();
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   (1) First
-      >  (2) Second
-         (3) Third
+      "   First
+      >  Second
+         Third
 
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
     });
     test('shows if there are more pages', async () => {
@@ -332,42 +267,41 @@ describe('SelectInput', async () => {
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, morePagesMessage: "Keep scrolling to see more items", hasMorePages: true }));
         await waitForInputsToBeReady();
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      ">  (1) First
-         (2) Second
-         (3) Third
+      ">  First
+         Second
+         Third
 
-         1-3 of many  Keep scrolling to see more items
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm.
+         1-3 of many  Keep scrolling to see more items"
     `);
     });
     test('supports a limit of items to show', async () => {
         const items = [
-            { label: 'first', value: 'first', key: 'f' },
-            { label: 'second', value: 'second', key: 's' },
+            { label: 'first', value: 'first' },
+            { label: 'second', value: 'second' },
             { label: 'third', value: 'third' },
             { label: 'fourth', value: 'fourth' },
-            { label: 'fifth', value: 'fifth', group: 'Automations', key: 'a' },
+            { label: 'fifth', value: 'fifth', group: 'Automations' },
             { label: 'sixth', value: 'sixth', group: 'Automations' },
             { label: 'seventh', value: 'seventh' },
             { label: 'eighth', value: 'eighth', group: 'Merchant Admin' },
             { label: 'ninth', value: 'ninth', group: 'Merchant Admin' },
             { label: 'tenth', value: 'tenth' },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, limit: 5 }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, availableLines: 10 }));
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   Automations
-      >  (a) fifth
-         (2) sixth
-
-         Merchant Admin
-         (3) eighth
-         (4) ninth
-
-         Other
-         (f) first
+      "   Automations                                                                  
+         >  fifth                                                                     
+            sixth                                                                     
+                                                                                      
+         Merchant Admin                                                               
+            eighth                                                                    
+            ninth                                                                     
+                                                                                      
+         Other                                                                        
+            first                                                                     
 
-         Showing 5 of 10 items.
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
         await waitForInputsToBeReady();
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
@@ -376,19 +310,18 @@ describe('SelectInput', async () => {
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   Automations
-         (2) sixth
-
-         Merchant Admin
-         (3) eighth
-         (4) ninth
+      "   Automations                                                                  
+            sixth                                                                     
+                                                                                      
+         Merchant Admin                                                               
+            eighth                                                                    
+            ninth                                                                     
+                                                                                      
+         Other                                                                        
+            first                                                                     
+         >  second                                                                    
 
-         Other
-         (f) first
-      >  (s) second
-
-         Showing 5 of 10 items.
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
     });
     test('pressing enter calls onSubmit on the default option', async () => {
@@ -434,7 +367,7 @@ describe('SelectInput', async () => {
         await sendInputAndWait(renderInstance, 100, ENTER);
         expect(onSubmit).toHaveBeenCalledWith(items[1]);
     });
-    test('using a shortcut calls onSubmit if submitWithShortcuts is true', async () => {
+    test('using a shortcut calls onSubmit', async () => {
         const onSubmit = vi.fn();
         const items = [
             {
@@ -453,75 +386,78 @@ describe('SelectInput', async () => {
                 key: 't',
             },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit, submitWithShortcuts: true }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
         await waitForInputsToBeReady();
-        await sendInputAndWait(renderInstance, 500, 's');
+        await sendInputAndWait(renderInstance, 100, 's');
         expect(onSubmit).toHaveBeenCalledWith(items[1]);
     });
-    test('using a shortcut does not call onSubmit if submitWithShortcuts is false', async () => {
+    test('supports disabled options', async () => {
         const onSubmit = vi.fn();
         const items = [
             {
                 label: 'First',
                 value: 'first',
-                key: 'f',
             },
             {
                 label: 'Second',
                 value: 'second',
-                key: 's',
+                disabled: true,
             },
             {
                 label: 'Third',
                 value: 'third',
-                key: 't',
             },
         ];
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
         await waitForInputsToBeReady();
-        await sendInputAndWait(renderInstance, 500, 's');
-        expect(onSubmit).not.toHaveBeenCalled();
+        await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "   First
+         Second
+      >  Third
+
+         Press ↑↓ arrows to select, enter to confirm."
+    `);
+        await sendInputAndWait(renderInstance, 100, ENTER);
+        expect(onSubmit).toHaveBeenCalledWith(items[2]);
     });
-    test('supports disabled options', async () => {
+    test('default value will be skipped if the option is disabled', async () => {
         const onSubmit = vi.fn();
         const items = [
             {
                 label: 'First',
                 value: 'first',
-                key: 'f',
             },
             {
                 label: 'Second',
                 value: 'second',
-                key: 's',
                 disabled: true,
             },
             {
                 label: 'Third',
                 value: 'third',
-                key: 't',
             },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
-        await waitForInputsToBeReady();
-        await sendInputAndWaitForChange(renderInstance, ARROW_DOWN);
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit, defaultValue: "second" }));
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   (f) First
-         (s) Second
-      >  (t) Third
+      ">  First
+         Second
+         Third
 
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter to confirm."
     `);
+        await waitForInputsToBeReady();
         await sendInputAndWait(renderInstance, 100, ENTER);
-        expect(onSubmit).toHaveBeenCalledWith(items[2]);
+        expect(onSubmit).toHaveBeenCalledWith(items[0]);
     });
-    test('default value will be skipped if the option is disabled', async () => {
+    test('selects the next non-disabled option if the first option is disabled', async () => {
         const onSubmit = vi.fn();
         const items = [
             {
                 label: 'First',
                 value: 'first',
                 key: 'f',
+                disabled: true,
             },
             {
                 label: 'Second',
@@ -535,26 +471,25 @@ describe('SelectInput', async () => {
                 key: 't',
             },
         ];
-        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit, defaultValue: "second" }));
+        const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
+        await waitForInputsToBeReady();
         expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      ">  (f) First
+      "   (f) First
          (s) Second
-         (t) Third
+      >  (t) Third
 
-         Press ↑↓ arrows to select, enter to confirm"
+         Press ↑↓ arrows to select, enter or a shortcut to confirm."
     `);
-        await waitForInputsToBeReady();
         await sendInputAndWait(renderInstance, 100, ENTER);
-        expect(onSubmit).toHaveBeenCalledWith(items[0]);
+        expect(onSubmit).toHaveBeenCalledWith(items[2]);
     });
-    test('selects the next non-disabled option if the first option is disabled', async () => {
+    test("doesn't allow submitting disabled options with shortcuts", async () => {
         const onSubmit = vi.fn();
         const items = [
             {
                 label: 'First',
                 value: 'first',
                 key: 'f',
-                disabled: true,
             },
             {
                 label: 'Second',
@@ -570,15 +505,8 @@ describe('SelectInput', async () => {
         ];
         const renderInstance = render(React.createElement(SelectInput, { items: items, onChange: () => { }, onSubmit: onSubmit }));
         await waitForInputsToBeReady();
-        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
-      "   (f) First
-         (s) Second
-      >  (t) Third
-
-         Press ↑↓ arrows to select, enter to confirm"
-    `);
-        await sendInputAndWait(renderInstance, 100, ENTER);
-        expect(onSubmit).toHaveBeenCalledWith(items[2]);
+        await sendInputAndWait(renderInstance, 100, 's');
+        expect(onSubmit).not.toHaveBeenCalled();
     });
 });
 //# sourceMappingURL=SelectInput.test.js.map