tessl/npm-vue--cli-plugin-unit-jest

A Vue CLI plugin that adds Jest unit testing capabilities to Vue.js projects, providing seamless integration with the Vue CLI service through the 'test:unit' command.

—

Pending

Overview

Eval results

Files

UI Integration

Name: tessl/npm-vue--cli-plugin-unit-jest
Author: tessl

The UI integration capability provides Vue CLI UI integration that offers a graphical interface for running tests with interactive configuration options.

Capabilities

UI Plugin Registration

Registers the test:unit task with Vue CLI UI for graphical test management.

/**
 * Vue CLI UI plugin function that describes the test:unit task
 * @param api - UI Plugin API for task registration
 */
function uiPlugin(api: UIPluginAPI): void;

Usage Example:

// ui.js
module.exports = api => {
  api.describeTask({
    match: /vue-cli-service test:unit/,
    description: 'org.vue.jest.tasks.test.description',
    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest#injected-commands',
    prompts: [
      {
        name: 'watch',
        type: 'confirm',
        description: 'org.vue.jest.tasks.test.watch'
      },
      {
        name: 'notify',
        type: 'confirm',
        description: 'org.vue.jest.tasks.test.notify',
        when: answers => answers.watch
      },
      {
        name: 'update',
        type: 'confirm',
        description: 'org.vue.jest.tasks.test.update'
      }
    ],
    onBeforeRun: ({ answers, args }) => {
      if (answers.watch) args.push('--watch')
      if (answers.notify) args.push('--notify')
      if (answers.update) args.push('--updateSnapshot')
    }
  })
}

Task Description

Describes the test:unit task for the Vue CLI UI with interactive prompts and configuration.

/**
 * Describe a task for Vue CLI UI
 * @param taskDescription - Configuration for UI task representation
 */
describeTask(taskDescription: TaskDescription): void;

Task Configuration

Task Matching

The UI integration matches commands using regular expressions:

const taskMatch = /vue-cli-service test:unit/;

Interactive Prompts

The UI provides three main interactive options:

interface TaskPrompts {
  /** Enable watch mode for continuous testing */
  watch: ConfirmPrompt;
  /** Enable desktop notifications (only when watch is enabled) */
  notify: ConditionalConfirmPrompt;
  /** Update Jest snapshots */
  update: ConfirmPrompt;
}

Watch Mode Prompt:

const watchPrompt = {
  name: 'watch',
  type: 'confirm',
  description: 'org.vue.jest.tasks.test.watch'
};

Notification Prompt:

const notifyPrompt = {
  name: 'notify',
  type: 'confirm',
  description: 'org.vue.jest.tasks.test.notify',
  when: answers => answers.watch // Only show when watch mode is enabled
};

Snapshot Update Prompt:

const updatePrompt = {
  name: 'update',
  type: 'confirm',
  description: 'org.vue.jest.tasks.test.update'
};

Argument Processing

The UI integration translates user selections into Jest command-line arguments:

/**
 * Process UI selections and convert to command arguments
 * @param context - Task execution context with user answers
 */
onBeforeRun(context: TaskContext): void;

Argument Mapping:

watch: true → --watch flag
notify: true → --notify flag
update: true → --updateSnapshot flag

Internationalization

The UI uses internationalization keys for user-facing text:

interface I18nKeys {
  /** Task description key */
  'org.vue.jest.tasks.test.description': string;
  /** Watch mode option description */
  'org.vue.jest.tasks.test.watch': string;
  /** Notification option description */
  'org.vue.jest.tasks.test.notify': string;
  /** Snapshot update option description */
  'org.vue.jest.tasks.test.update': string;
}

External Documentation

The UI integration links to external documentation for additional help:

const documentationLink = 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest#injected-commands';

Task Execution Flow

Task Detection: Vue CLI UI detects vue-cli-service test:unit commands
Prompt Display: Shows interactive prompts based on task configuration
User Input: User selects options through the graphical interface
Argument Processing: onBeforeRun translates selections to CLI arguments
Command Execution: Enhanced command runs with user-selected options

Types

interface UIPluginAPI {
  /** Register a task description with Vue CLI UI */
  describeTask(taskDescription: TaskDescription): void;
}

interface TaskDescription {
  /** Regular expression to match commands */
  match: RegExp;
  /** Internationalization key for task description */
  description: string;
  /** Link to external documentation */
  link: string;
  /** Interactive prompts for user configuration */
  prompts: TaskPrompt[];
  /** Callback to process user selections before execution */
  onBeforeRun: (context: TaskContext) => void;
}

interface TaskPrompt {
  /** Unique identifier for the prompt */
  name: string;
  /** Prompt type (confirm, input, list, etc.) */
  type: string;
  /** Internationalization key for prompt description */
  description: string;
  /** Conditional display logic */
  when?: (answers: any) => boolean;
}

interface TaskContext {
  /** User answers from interactive prompts */
  answers: Record<string, any>;
  /** Command arguments array to be modified */
  args: string[];
}

interface ConfirmPrompt extends TaskPrompt {
  type: 'confirm';
}

interface ConditionalConfirmPrompt extends ConfirmPrompt {
  when: (answers: any) => boolean;
}

Usage in Vue CLI UI

When using the Vue CLI UI:

Open Vue CLI UI: vue ui
Select Project: Choose your Vue project
Navigate to Tasks: Go to the "Tasks" section
Find test:unit: Locate the unit testing task
Configure Options: Use the interactive prompts to set:
- Watch mode for continuous testing
- Desktop notifications (requires watch mode)
- Snapshot updates
Run Task: Execute with selected configuration

The UI integration provides a user-friendly alternative to remembering Jest command-line options and flags.

Install with Tessl CLI

npx tessl i tessl/npm-vue--cli-plugin-unit-jest

docs

command-registration.md

index.md

jest-presets.md

project-generation.md

ui-integration.md

tile.json