CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-jest-watch-typeahead

Jest plugin for filtering by filename or test name

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

filename-plugin.mddocs/

Filename Plugin

The filename plugin provides interactive filename-based test filtering with typeahead functionality. Users can type partial filenames to filter which test files run during Jest watch mode.

Capabilities

FileNamePlugin Class

Main plugin class implementing Jest's WatchPlugin interface for filename-based filtering.

/**
 * Jest watch plugin for filtering test files by filename patterns
 */
export default class FileNamePlugin implements WatchPlugin {
  constructor(options: {
    stdin: NodeJS.ReadStream;
    stdout: NodeJS.WriteStream;
    config?: PluginConfig;
  });
  
  /** Hook into Jest lifecycle events to receive project updates */
  apply(jestHooks: JestHookSubscriber): void;
  
  /** Handle keypress events from user input */
  onKey(key: string): void;
  
  /** Execute plugin functionality and update Jest configuration */
  run(
    globalConfig: Config.GlobalConfig,
    updateConfigAndRun: UpdateConfigCallback
  ): Promise<void>;
  
  /** Return plugin usage information for Jest's help display */
  getUsageInfo(): UsageData;
}

Usage Example:

import FileNamePlugin from "jest-watch-typeahead/filename";

// Plugin is typically instantiated by Jest
const plugin = new FileNamePlugin({
  stdin: process.stdin,
  stdout: process.stdout,
  config: {
    key: 'f',
    prompt: 'filter by filename'
  }
});

FileNamePatternPrompt Class

Interactive prompt class for filename pattern input and typeahead display.

/**
 * Pattern prompt for filename-based filtering with typeahead functionality
 */
export default class FileNamePatternPrompt extends PatternPrompt {
  constructor(pipe: NodeJS.WriteStream, prompt: Prompt);
  
  /** Update available search sources (project configurations and test paths) */
  updateSearchSources(sources: SearchSources): void;
  
  /** Handle pattern changes and update display */
  protected _onChange(pattern: string, options: ScrollOptions): void;
  
  /** Display typeahead results for current pattern */
  protected _printTypeahead(pattern: string, options: ScrollOptions): void;
  
  /** Get test files matching the current pattern */
  protected _getMatchedTests(pattern: string): Array<any>;
}

Pattern Matching System

The filename plugin uses regex-based pattern matching to filter test files:

  • Case-insensitive matching: Patterns match filenames regardless of case
  • Partial matching: Type partial filenames to see matching files
  • Real-time filtering: Results update as you type
  • Highlighting: Matching portions of filenames are highlighted in terminal output

Pattern Examples:

# Match all files containing "user"
user

# Match files ending with ".test.js"
\.test\.js$

# Match files in specific directory
components/.*\.test

# Match multiple patterns with OR
(user|auth).*test

Integration with Jest

Plugin Registration

// jest.config.js
module.exports = {
  watchPlugins: [
    'jest-watch-typeahead/filename'
  ]
};

Runtime Behavior

  1. Activation: Press the configured key (default: 'p') in Jest watch mode
  2. Pattern Input: Type partial filename patterns to filter files
  3. Visual Feedback: See matching files highlighted in real-time
  4. Selection: Press Enter to apply filter and run matching tests
  5. Exit: Press Escape to cancel and return to main watch menu

Hook Integration

The plugin integrates with Jest's hook system:

interface JestHookSubscriber {
  /** Called when file changes are detected */
  onFileChange(callback: (data: { projects: SearchSources }) => void): void;
}

The filename plugin subscribes to onFileChange to update available test files when the project structure changes.

Utility Functions

Path Formatting

/**
 * Format and trim file paths for terminal display
 * @param pad - Padding amount for alignment
 * @param config - Jest project configuration
 * @param testPath - Test file path to format
 * @param columns - Terminal column width
 * @returns Formatted path string with highlighting
 */
function trimAndFormatPath(
  pad: number,
  config: Config.ProjectConfig,
  testPath: string,
  columns: number
): string;

Pattern Highlighting

/**
 * Highlight matching portions of file paths
 * @param rawPath - Raw file path string
 * @param filePath - Processed file path for display
 * @param pattern - Search pattern to highlight
 * @returns Path string with ANSI highlighting
 */
function highlight(
  rawPath: string,
  filePath: string,
  pattern: string
): string;

Terminal Width Detection

/**
 * Get current terminal width for display formatting
 * @param pipe - Output stream (defaults to process.stdout)
 * @returns Terminal width in columns
 */
function getTerminalWidth(pipe?: NodeJS.WriteStream): number;

Display Item Helpers

/**
 * Print individual typeahead item to terminal
 * @param item - Item text to display
 * @param pipe - Output stream for writing
 */
function printTypeaheadItem(
  item: string,
  pipe: NodeJS.WritableStream
): void;

Typeahead Selection Formatting

/**
 * Format typeahead selection items with highlighting for active selection
 * @param item - Item text to format
 * @param index - Current item index
 * @param activeIndex - Index of currently active selection
 * @param prompt - Jest prompt instance for selection tracking
 * @returns Formatted item string with selection highlighting
 */
function formatTypeaheadSelection(
  item: string,
  index: number,
  activeIndex: number,
  prompt: Prompt
): string;

Types

type SearchSources = Array<{
  config: Config.ProjectConfig;
  testPaths: Array<string>;
}>;

interface UsageData {
  key: string;
  prompt: string;
}

interface UpdateConfigCallback {
  (config: {
    mode: 'watch';
    testPathPatterns: Array<string>;
  }): void;
}

docs

filename-plugin.md

index.md

testname-plugin.md

tile.json