feat(custom command): test-ucc-ui as custom ui test command (#1834)

**Issue number:**
https://splunk.atlassian.net/browse/ADDON-82195 
### PR Type

**What kind of change does this PR introduce?**
* [x] Feature
* [ ] Bug Fix
* [ ] Refactoring (no functional or API changes)
* [ ] Documentation Update
* [ ] Maintenance (dependency updates, CI, etc.)

## Summary

Custom Ui command to run basic ui tests with test coverage.
### Changes

The command enables to test inputs and configuration page based on their
globalConfig.json.

It enables users to render each page and run tests accordingly.
One issue is that mocking for Splunk libraries does not work, so ie.
features like hideForPlatform is not testable with this approach as
mocking for search-job is not possible.

### User experience

Additional command available.
## Checklist

If an item doesn't apply to your changes, leave it unchecked.

### Review

* [x] self-review - I have performed a self-review of this change
according to the [development
guidelines](https://splunk.github.io/addonfactory-ucc-generator/contributing/#development-guidelines)
* [x] Changes are documented. The documentation is understandable,
examples work [(more
info)](https://splunk.github.io/addonfactory-ucc-generator/contributing/#documentation-guidelines)
* [x] PR title and description follows the [contributing
principles](https://splunk.github.io/addonfactory-ucc-generator/contributing/#pull-requests)
* [ ] meeting - I have scheduled a meeting or recorded a demo to explain
these changes (if there is a video, put a link below and in the ticket)

### Tests

See [the testing
doc](https://splunk.github.io/addonfactory-ucc-generator/contributing/#build-and-test).

* [ ] Unit - tests have been added/modified to cover the changes
* [ ] Smoke - tests have been added/modified to cover the changes
* [ ] UI - tests have been added/modified to cover the changes
* [ ] coverage - I have checked the code coverage of my changes [(see
more)](https://splunk.github.io/addonfactory-ucc-generator/contributing/#checking-the-code-coverage)

**Demo/meeting:**

*Reviewers are encouraged to request meetings or demos if any part of
the change is unclear*

Author: soleksy-splunk

docs/custom_ui_extensions/context/custom_test_ui_command.md

@@ -0,0 +1,271 @@
+# Testing UI Components in UCC Framework
+
+This guide shows you how to test custom UI components in your Splunk Technology Add-on (TA) using the Unified Configuration Console (UCC) framework.
+
+---
+
+## What You'll Need
+
+Before starting, make sure you have:
+
+- **Node.js** version 22 or higher
+- **npm** version 10 or higher
+
+---
+
+## Getting Started
+
+### 1. Set Up Your UI Project
+
+First, create your UI sub-project by following the [UI Sub-Project Setup Guide](./custom_project_init.md).
+
+### 2. Create Your Test Files
+
+Create test files anywhere in your `src` directory. Use any of these file extensions:
+
+- `.test.js`, `.test.ts`, `.test.jsx`, `.test.tsx`
+- `.spec.js`, `.spec.ts`, `.spec.jsx`, `.spec.tsx`
+
+The testing framework will automatically find files matching the pattern `src/**/*.{js,jsx,ts,tsx}`.
+
+### 3. Add the Test Command
+
+Update your `package.json` file to include the test command:
+
+```json
+{
+  "scripts": {
+    "ucc-test": "test-ucc-ui"
+  }
+}
+```
+
+#### Complete package.json Example
+
+If you followed the UI Sub-Project Setup Guide, your `package.json` should look like this:
+
+<details>
+  <summary>View complete package.json</summary>
+
+```json
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "ucc-gen": "ucc-gen-ui ta_name=Splunk_TA_Name init_file_dir=src/ucc-ui.ts",
+    "ucc-test": "test-ucc-ui"
+  },
+  "dependencies": {
+    "@splunk/add-on-ucc-framework": "^5.65.0",
+    "@splunk/react-ui": "^4.42.0",
+    "@splunk/splunk-utils": "^3.1.0",
+    "@splunk/themes": "^0.23.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.20.0",
+    "@types/node": "^22.13.1",
+    "@types/react": "16.14.62",
+    "@types/react-dom": "16.9.25",
+    "typescript": "^5.8.2"
+  },
+  "overrides": {
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "@types/react": "16.14.62",
+    "@types/react-dom": "16.9.25"
+  },
+  "engines": {
+    "node": ">=22",
+    "npm": ">=10"
+  }
+}
+```
+
+</details>
+
+---
+
+## Testing Your UI Components
+
+The UCC framework provides two main functions to help you test your pages:
+
+### Testing Configuration Pages
+
+Use `renderConfigurationPage()` to test your configuration pages (like account settings).
+
+**Parameters:**
+
+- `globalConfig` (required): Your globalConfig.json file content
+- `customComponents` (optional): Object containing your custom UI components
+
+**Example:**
+
+```typescript
+import { screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+
+import { getGlobalConfig } from "./utils";
+import AdvancedInputsTabClass from "../ucc-ui-extensions/AdvancedInputsTab";
+import DateInputClass from "../ucc-ui-extensions/DateInput";
+
+it("Should open account addition form", async () => {
+  mockResponse();
+  
+  renderConfigurationPage(getGlobalConfig(), {
+    DateInput: {
+      component: DateInputClass,
+      type: "control",
+    },
+    AdvancedInputsTab: {
+      component: AdvancedInputsTabClass,
+      type: "tab",
+    },
+  });
+
+  // Wait for page to load
+  await waitForElementToBeRemoved(() => screen.getByText("Waiting"));
+
+  // Check if page elements are present
+  expect(screen.getByText("Configuration")).toBeInTheDocument();
+  expect(await screen.findByText("Mocked Account name")).toBeInTheDocument();
+  
+  // Test clicking the Add button
+  const addButton = screen.getByRole("button", { name: "Add" });
+  expect(addButton).toBeInTheDocument();
+  
+  await userEvent.click(addButton);
+  expect(await screen.findByText("Add Accounts")).toBeInTheDocument();
+});
+```
+
+### Testing Input Pages
+
+Use `renderInputsPage()` to test your input pages (like data input configurations).
+
+**Parameters:** Same as `renderConfigurationPage()`
+
+- `globalConfig` (required): Your globalConfig.json file content
+- `customComponents` (optional): Object containing your custom UI components
+
+**Example:**
+
+```typescript
+import { screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+
+import { getGlobalConfig } from "./utils";
+import AdvancedInputsTabClass from "../ucc-ui-extensions/AdvancedInputsTab";
+import DateInputClass from "../ucc-ui-extensions/DateInput";
+
+it("Should open inputs addition form", async () => {
+  mockResponse();
+  
+  renderInputsPage(getGlobalConfig(), {
+    DateInput: {
+      component: DateInputClass,
+      type: "control",
+    },
+    AdvancedInputsTab: {
+      component: AdvancedInputsTabClass,
+      type: "tab",
+    },
+  });
+
+  // Wait for page to load
+  await waitForElementToBeRemoved(() => screen.getByText("Waiting"));
+
+  // Check if page elements are present
+  expect(screen.getByText("Inputs")).toBeInTheDocument();
+  expect(await screen.findByText("Mocked Input name")).toBeInTheDocument();
+  
+  // Test clicking the Create button
+  const createButton = screen.getByRole("button", { name: "Create New Input" });
+  expect(createButton).toBeInTheDocument();
+  
+  await userEvent.click(createButton);
+  expect(await screen.findByText("Add Example service name")).toBeInTheDocument();
+});
+```
+
+---
+
+## Testing Best Practices
+
+### Mock API Responses
+
+We recommend using [MSW (Mock Service Worker)](https://mswjs.io/) to mock API calls in your tests.
+
+**1. Set up the server (server.ts):**
+
+```typescript
+import { setupServer } from "msw/node";
+import { afterAll, afterEach } from "vitest";
+
+export const server = setupServer();
+
+server.listen({
+  onUnhandledRequest: "warn",
+});
+
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+process.once("SIGINT", () => server.close());
+process.once("SIGTERM", () => server.close());
+```
+
+**2. Mock responses in your tests:**
+
+```typescript
+function mockResponse() {
+  server.use(
+    http.get(`/servicesNS/nobody/-/:endpointUrl/:serviceName`, () => {
+      return HttpResponse.json(mockServerResponseWithContent);
+    }),
+    http.get(`/servicesNS/nobody/-/:endpointUrl`, () => {
+      return HttpResponse.json(mockServerResponseWithContent);
+    })
+  );
+}
+```
+
+**3. Use standard response format:**
+
+```typescript
+export const mockServerResponseWithContent = {
+  links: {
+    create: `/servicesNS/nobody/Splunk_TA_Example/account/_new`,
+  },
+  updated: "2023-08-21T11:54:12+00:00",
+  entry: [
+    {
+      id: 1,
+      name: "Mocked Input name",
+      content: {
+        disabled: true,
+        fields1: "value1",
+        fields2: "value2",
+      },
+    },
+  ],
+  messages: [],
+};
+```
+
+---
+
+## Running Your Tests
+
+Once everything is set up, run your tests with:
+
+```bash
+npm run ucc-test
+```
+
+This will execute all test files in your `src` directory and show you the results.

mkdocs.yml

@@ -107,7 +107,8 @@ nav:
         - Custom tab: "custom_ui_extensions/standard/custom_tab.md"
       - Context:
         - Overview: "custom_ui_extensions/context/overview.md"
-        - UI project init: "custom_ui_extensions/context/custom_project_init.md"
+        - Initialize UI project : "custom_ui_extensions/context/custom_project_init.md"
+        - Test UI project : "custom_ui_extensions/context/custom_test_ui_command.md"
         - Custom cell : "custom_ui_extensions/context/custom_cell_context.md"
         - Custom Tab : "custom_ui_extensions/context/custom_tab_context.md"
         - Custom Control : "custom_ui_extensions/context/custom_control_context.md"

ui/cli/ucc-gen-test-ui.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const fileName = fileURLToPath(import.meta.url);
+const dirName = dirname(fileName);
+const viteTestUccConfigPath = `${dirName}/vite.config_ucc-test-gen-ui.ts`;
+
+execSync(`vitest run --coverage --config ${viteTestUccConfigPath}`, {
+    stdio: 'inherit',
+});

ui/cli/ucc-vite-test-setup.ts

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import '@testing-library/jest-dom';
+
+import { beforeEach, MockInstance, vi } from 'vitest';
+
+// eslint-disable-next-line import/no-mutable-exports
+export let consoleError: MockInstance<{
+    (...data: unknown[]): void;
+    (message?: unknown, ...optionalParams: unknown[]): void;
+}>;
+// eslint-disable-next-line no-console
+const originalConsoleError = console.error;
+beforeEach(() => {
+    consoleError = vi.spyOn(console, 'error');
+    consoleError.mockImplementation((...args: Parameters<typeof console.error>) => {
+        originalConsoleError(...args);
+        throw new Error(
+            `Console error was called. Call vi.spyOn(console, 'error').mockImplementation(() => {}) if this is expected.`
+        );
+    });
+});

ui/cli/vite.config_ucc-test-gen-ui.ts

@@ -0,0 +1,57 @@
+import { defineConfig } from 'vite';
+import type { ViteUserConfig as VitestUserConfigInterface } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import checker from 'vite-plugin-checker';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const fileName = fileURLToPath(import.meta.url);
+const dirName = dirname(fileName);
+const ucctestSetup = `${dirName}/ucc-vite-test-setup.ts`;
+
+const vitestTestConfig: VitestUserConfigInterface = {
+    test: {
+        watch: false,
+        globals: true,
+        environment: 'jsdom',
+        setupFiles: ucctestSetup,
+        server: {
+            deps: {
+                inline: ['jspdf'],
+            },
+        },
+        coverage: {
+            all: true,
+            provider: 'istanbul',
+            reporter: ['text'],
+            include: ['src/**/*.{js,jsx,ts,tsx}'],
+        },
+        exclude: [
+            '**/node_modules/**',
+            '**/dist/**',
+            '**/**.stories.**',
+            '**/*.types.ts',
+            '**/tests/**',
+            '**/test/**',
+            '**/mock*',
+            '**/__mocks__/**',
+            '**/*.d.ts',
+            '**/*.types.ts',
+        ],
+    },
+};
+
+export default defineConfig({
+    logLevel: 'info',
+    plugins: [
+        react(),
+        checker({
+            typescript: true,
+        }),
+    ],
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    base: '',
+    test: vitestTestConfig.test,
+});