0
# UI Integration
1

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

4
## Capabilities
5

6
### UI Plugin Registration
7

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

10
```javascript { .api }
11
/**
12
 * Vue CLI UI plugin function that describes the test:unit task
13
 * @param api - UI Plugin API for task registration
14
 */
15
function uiPlugin(api: UIPluginAPI): void;
16
```
17

18
**Usage Example:**
19

20
```javascript
21
// ui.js
22
module.exports = api => {
23
  api.describeTask({
24
    match: /vue-cli-service test:unit/,
25
    description: 'org.vue.jest.tasks.test.description',
26
    link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest#injected-commands',
27
    prompts: [
28
      {
29
        name: 'watch',
30
        type: 'confirm',
31
        description: 'org.vue.jest.tasks.test.watch'
32
      },
33
      {
34
        name: 'notify',
35
        type: 'confirm',
36
        description: 'org.vue.jest.tasks.test.notify',
37
        when: answers => answers.watch
38
      },
39
      {
40
        name: 'update',
41
        type: 'confirm',
42
        description: 'org.vue.jest.tasks.test.update'
43
      }
44
    ],
45
    onBeforeRun: ({ answers, args }) => {
46
      if (answers.watch) args.push('--watch')
47
      if (answers.notify) args.push('--notify')
48
      if (answers.update) args.push('--updateSnapshot')
49
    }
50
  })
51
}
52
```
53

54
### Task Description
55

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

58
```javascript { .api }
59
/**
60
 * Describe a task for Vue CLI UI
61
 * @param taskDescription - Configuration for UI task representation
62
 */
63
describeTask(taskDescription: TaskDescription): void;
64
```
65

66
## Task Configuration
67

68
### Task Matching
69

70
The UI integration matches commands using regular expressions:
71

72
```javascript { .api }
73
const taskMatch = /vue-cli-service test:unit/;
74
```
75

76
### Interactive Prompts
77

78
The UI provides three main interactive options:
79

80
```javascript { .api }
81
interface TaskPrompts {
82
  /** Enable watch mode for continuous testing */
83
  watch: ConfirmPrompt;
84
  /** Enable desktop notifications (only when watch is enabled) */
85
  notify: ConditionalConfirmPrompt;
86
  /** Update Jest snapshots */
87
  update: ConfirmPrompt;
88
}
89
```
90

91
**Watch Mode Prompt:**
92

93
```javascript { .api }
94
const watchPrompt = {
95
  name: 'watch',
96
  type: 'confirm',
97
  description: 'org.vue.jest.tasks.test.watch'
98
};
99
```
100

101
**Notification Prompt:**
102

103
```javascript { .api }
104
const notifyPrompt = {
105
  name: 'notify',
106
  type: 'confirm',
107
  description: 'org.vue.jest.tasks.test.notify',
108
  when: answers => answers.watch // Only show when watch mode is enabled
109
};
110
```
111

112
**Snapshot Update Prompt:**
113

114
```javascript { .api }
115
const updatePrompt = {
116
  name: 'update',
117
  type: 'confirm',
118
  description: 'org.vue.jest.tasks.test.update'
119
};
120
```
121

122
### Argument Processing
123

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

126
```javascript { .api }
127
/**
128
 * Process UI selections and convert to command arguments
129
 * @param context - Task execution context with user answers
130
 */
131
onBeforeRun(context: TaskContext): void;
132
```
133

134
**Argument Mapping:**
135

136
- `watch: true` → `--watch` flag
137
- `notify: true` → `--notify` flag  
138
- `update: true` → `--updateSnapshot` flag
139

140
## Internationalization
141

142
The UI uses internationalization keys for user-facing text:
143

144
```javascript { .api }
145
interface I18nKeys {
146
  /** Task description key */
147
  'org.vue.jest.tasks.test.description': string;
148
  /** Watch mode option description */
149
  'org.vue.jest.tasks.test.watch': string;
150
  /** Notification option description */
151
  'org.vue.jest.tasks.test.notify': string;
152
  /** Snapshot update option description */
153
  'org.vue.jest.tasks.test.update': string;
154
}
155
```
156

157
## External Documentation
158

159
The UI integration links to external documentation for additional help:
160

161
```javascript { .api }
162
const documentationLink = 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest#injected-commands';
163
```
164

165
## Task Execution Flow
166

167
1. **Task Detection**: Vue CLI UI detects `vue-cli-service test:unit` commands
168
2. **Prompt Display**: Shows interactive prompts based on task configuration
169
3. **User Input**: User selects options through the graphical interface
170
4. **Argument Processing**: `onBeforeRun` translates selections to CLI arguments
171
5. **Command Execution**: Enhanced command runs with user-selected options
172

173
## Types
174

175
```javascript { .api }
176
interface UIPluginAPI {
177
  /** Register a task description with Vue CLI UI */
178
  describeTask(taskDescription: TaskDescription): void;
179
}
180

181
interface TaskDescription {
182
  /** Regular expression to match commands */
183
  match: RegExp;
184
  /** Internationalization key for task description */
185
  description: string;
186
  /** Link to external documentation */
187
  link: string;
188
  /** Interactive prompts for user configuration */
189
  prompts: TaskPrompt[];
190
  /** Callback to process user selections before execution */
191
  onBeforeRun: (context: TaskContext) => void;
192
}
193

194
interface TaskPrompt {
195
  /** Unique identifier for the prompt */
196
  name: string;
197
  /** Prompt type (confirm, input, list, etc.) */
198
  type: string;
199
  /** Internationalization key for prompt description */
200
  description: string;
201
  /** Conditional display logic */
202
  when?: (answers: any) => boolean;
203
}
204

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

212
interface ConfirmPrompt extends TaskPrompt {
213
  type: 'confirm';
214
}
215

216
interface ConditionalConfirmPrompt extends ConfirmPrompt {
217
  when: (answers: any) => boolean;
218
}
219
```
220

221
## Usage in Vue CLI UI
222

223
When using the Vue CLI UI:
224

225
1. **Open Vue CLI UI**: `vue ui`
226
2. **Select Project**: Choose your Vue project
227
3. **Navigate to Tasks**: Go to the "Tasks" section
228
4. **Find test:unit**: Locate the unit testing task
229
5. **Configure Options**: Use the interactive prompts to set:
230
   - Watch mode for continuous testing
231
   - Desktop notifications (requires watch mode)
232
   - Snapshot updates
233
6. **Run Task**: Execute with selected configuration
234

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