test: add initial tests

Author: 43081j

packages/core/src/index.ts

@@ -8,6 +8,6 @@ export { default as SelectPrompt } from './prompts/select.js';
 export { default as SelectKeyPrompt } from './prompts/select-key.js';
 export { default as TextPrompt } from './prompts/text.js';
 export type { ClackState as State } from './types.js';
-export { block, getColumns, isCancel } from './utils/index.js';
+export { block, getColumns, getRows, isCancel } from './utils/index.js';
 export type { ClackSettings } from './utils/settings.js';
 export { settings, updateSettings } from './utils/settings.js';

packages/core/src/utils/index.ts

@@ -90,3 +90,11 @@ export const getColumns = (output: Writable): number => {
 	}
 	return 80;
 };
+
+export const getRows = (output: Writable): number => {
+	const withRows = output as Writable & { rows?: number };
+	if ('rows' in withRows && typeof withRows.rows === 'number') {
+		return withRows.rows;
+	}
+	return 20;
+};

packages/prompts/src/limit-options.ts

@@ -1,6 +1,5 @@
 import type { Writable } from 'node:stream';
-import { WriteStream } from 'node:tty';
-import { getColumns } from '@clack/core';
+import { getColumns, getRows } from '@clack/core';
 import { wrapAnsi } from 'fast-wrap-ansi';
 import color from 'picocolors';
 import type { CommonOptions } from './common.js';
@@ -41,13 +40,13 @@ export const limitOptions = <TOption>(params: LimitOptionsParams<TOption>): stri
 	const columnPadding = params.columnPadding ?? 0;
 	const rowPadding = params.rowPadding ?? 4;
 	const maxWidth = columns - columnPadding;
-	const rows = output instanceof WriteStream && output.rows !== undefined ? output.rows : 20;
+	const rows = getRows(output);
 	const overflowFormat = color.dim('...');
 
 	const paramMaxItems = params.maxItems ?? Number.POSITIVE_INFINITY;
 	const outputMaxItems = Math.max(rows - rowPadding, 0);
 	// We clamp to minimum 5 because anything less doesn't make sense UX wise
-	const maxItems = Math.min(outputMaxItems, Math.max(paramMaxItems, 5));
+	const maxItems = Math.max(paramMaxItems, 5);
 	let slidingWindowLocation = 0;
 
 	if (cursor >= maxItems - 3) {

packages/prompts/test/__snapshots__/autocomplete.test.ts.snap

@@ -46,6 +46,34 @@ exports[`autocomplete > limits displayed options when maxItems is set 1`] = `
 ]
 `;
 
+exports[`autocomplete > renders bottom ellipsis when items do not fit 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select an option
+│
+│  Search: _
+│  ● Line 0
+│  Line 1
+│  Line 2
+│  Line 3
+│  ...
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=10>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select an option
+│  Line 0
+Line 1
+Line 2
+Line 3",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`autocomplete > renders initial UI with message and instructions 1`] = `
 [
   "<cursor.hide>",
@@ -96,6 +124,28 @@ exports[`autocomplete > renders placeholder if set 1`] = `
 ]
 `;
 
+exports[`autocomplete > renders top ellipsis when scrolled down and its do not fit 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  Select an option
+│
+│  Search: _
+│  ...
+│  ● Option 2
+│  ↑/↓ to select • Enter: confirm • Type: to search
+└",
+  "<cursor.backward count=999><cursor.up count=7>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  Select an option
+│  Option 2",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`autocomplete > shows hint when option has hint and is focused 1`] = `
 [
   "<cursor.hide>",

packages/prompts/test/autocomplete.test.ts

@@ -168,6 +168,63 @@ describe('autocomplete', () => {
 		expect(isCancel(value)).toBe(true);
 		expect(output.buffer).toMatchSnapshot();
 	});
+
+	test('renders bottom ellipsis when items do not fit', async () => {
+		output.rows = 5;
+
+		const options = [
+			{
+				value: Array.from({ length: 4 })
+					.map((_val, index) => `Line ${index}`)
+					.join('\n'),
+			},
+			{
+				value: 'Option 2',
+			},
+		];
+
+		const result = autocomplete({
+			message: 'Select an option',
+			options,
+			maxItems: 5,
+			input,
+			output,
+		});
+
+		input.emit('keypress', '', { name: 'return' });
+		await result;
+		expect(output.buffer).toMatchSnapshot();
+	});
+
+	test('renders top ellipsis when scrolled down and its do not fit', async () => {
+		output.rows = 5;
+
+		const options = [
+			{
+				value: 'option1',
+				label: Array.from({ length: 4 })
+					.map((_val, index) => `Line ${index}`)
+					.join('\n'),
+			},
+			{
+				value: 'option2',
+				label: 'Option 2',
+			},
+		];
+
+		const result = autocomplete({
+			message: 'Select an option',
+			options,
+			initialValue: 'option2',
+			maxItems: 5,
+			input,
+			output,
+		});
+
+		input.emit('keypress', '', { name: 'return' });
+		await result;
+		expect(output.buffer).toMatchSnapshot();
+	});
 });
 
 describe('autocompleteMultiselect', () => {

packages/prompts/test/limit-options.test.ts

@@ -0,0 +1,28 @@
+import { beforeEach, describe, expect, test } from 'vitest';
+import { type LimitOptionsParams, limitOptions } from '../src/index.js';
+import { MockWritable } from './test-utils.js';
+
+describe('limitOptions', () => {
+	let output: MockWritable;
+	let options: LimitOptionsParams<{ value: string }>;
+
+	beforeEach(() => {
+		output = new MockWritable();
+		options = {
+			output,
+			options: [],
+			maxItems: undefined,
+			cursor: 0,
+			style: (option) => option.value,
+			columnPadding: undefined,
+			rowPadding: undefined,
+		};
+	});
+
+	test('returns all items if they fit', async () => {
+		options.options = [{ value: 'Item 1' }, { value: 'Item 2' }, { value: 'Item 3' }];
+		options.maxItems = 5;
+		const result = limitOptions(options);
+		expect(result).toEqual(['Item 1', 'Item 2', 'Item 3']);
+	});
+});

packages/prompts/test/test-utils.ts

@@ -4,6 +4,7 @@ export class MockWritable extends Writable {
 	public buffer: string[] = [];
 	public isTTY = false;
 	public columns = 80;
+	public rows = 20;
 
 	_write(
 		chunk: any,

tsconfig.json

@@ -17,5 +17,5 @@
       "@clack/prompts": ["./packages/prompts/src/index.ts"]
     }
   },
-  "include": ["packages/*/src/**/*"]
+  "include": ["packages/*/src/**/*.ts", "packages/*/test/**/*.ts"]
 }