Cursor Mock Rule Creation & GenAI Mock Test Creation (using rules) (opendatahub-io#5541)

* feat(testing): Add comprehensive Cypress mock test rules - RHOAIENG-34223

Created detailed Cursor rules for mock test creation:
- cypress-mock.mdc (995 lines): Comprehensive guidelines for creating
  and maintaining Cypress mock tests with fully mocked backends
- MOCK_TEST_RULES_SUMMARY.md: Quick reference guide for developers
- Minor update to cypress-e2e.mdc globs config

Key features of mock test rules:
- Test structure and organization patterns (describe/beforeEach/it)
- Backend mocking with interceptors (cy.interceptOdh, cy.interceptK8sList)
- Mandatory use of page objects (no direct cy.findByTestId in tests)
- Mock data management (always use __mocks__ folder)
- Common test patterns (tables, modals, forms, drag-drop, routing)
- Access control and feature flag testing
- Code quality and linting requirements
- Test execution and debugging guidelines
- Complete implementation checklists

Addresses acceptance criteria for RHOAIENG-34223:
- ✅ Draft markdown-formatted Cursor rule for Mock Test Generation
- ✅ Include intelligent patterns for API endpoint mocking
- ⏳ Review with team and incorporate feedback (next step)
- ⏳ Test rules with real codebase examples (next step)

* chore: simplify workflow name to 'Cypress e2e Test'

* Add Cypress mock test rules and groupSettings mock tests

- Add comprehensive Cypress mock test rules document (.cursor/rules/cypress-mock.mdc)
- Create groupSettings page object with test selectors
- Implement 15 mock tests for groupSettings page covering:
  - Page display and navigation
  - Admin and user group selection
  - Save functionality and validation
  - Error handling (save errors, loading errors)
  - New group creation
  - Loading states

Related to RHOAIENG-34223

* Update Cypress mock test rules with learnings from existing tests

- Add Contextual pattern for reusable page object sections
- Add appChrome usage for navigation items
- Add proper wait validation with specific text checks
- Add success/error validation with semantic HTML roles
- Add scope management with .document() for portaled content
- Add test structure best practices (focus on flows, not micro-tests)
- Add minimal mocking principle
- Add proper payload validation patterns
- Emphasize reviewing existing tests before creating new ones

These learnings come from comparing duplicate groupSettings tests with
existing userManagement tests and identifying best practices.

* Remove duplicate groupSettings tests

The groupSettings page is already tested by userManagement.cy.ts since
both test the same GroupSettings component at /settings/user-management.

The duplicate tests were created without checking for existing coverage.
Removed:
- frontend/src/__tests__/cypress/cypress/tests/mocked/groupSettings/groupSettings.cy.ts
- frontend/src/__tests__/cypress/cypress/pages/groupSettings.ts

* feat(gen-ai): Add comprehensive mock tests for AI Playground chatbot

- Add Cypress mock test rules with strict testID requirements
- Create chatbot mock tests covering UI interactions, configuration, and messaging
- Add data-testid attributes to chatbot components for robust test selectors
- Update page objects to use testIDs instead of brittle selectors
- Add rule: never add timeouts to page objects, only in tests
- Enhance mcpServersTestHelpers to support custom namespaces

Components updated with testIDs:
- ChatbotHeaderActions: view-code-button, kebab-menu-toggle, menu items
- ChatbotSettingsPanel: rag-section, mcp-servers-section, system-instructions
- ModelParameterFormGroup: temperature-input
- SystemInstructionFormGroup: system-instructions-input
- NoData: empty-state-action-button

Tests cover:
- Page load and message input verification
- Model configuration (temperature, streaming, system instructions)
- MCP servers panel visibility
- Header actions (view code, kebab menu, delete)
- Message sending and bot response verification

All 8 tests passing ✅

* fix(gen-ai): Fix chatbot mock tests CI failures

- Fix ReDoS vulnerability in chatbotPage.ts by removing dynamic RegExp
- Create cypress:server:bff-mock script to run BFF with all mock clients
- Update test:cypress-ci to run BFF + frontend + Cypress tests concurrently

This fixes the CI failures where chatbot.cy.ts tests were failing because
they expected a running BFF with mock data, but CI was only running the
frontend dev server. Now both BFF (with mocks) and frontend run during tests.

All 17 mock tests now pass (ci-smoke, mcpServers, chatbot).

* ci(gen-ai): Add Go setup and BFF support to frontend CI workflow

- Add Go setup step to install Go for running the BFF
- Configure Go version from bff/go.mod with caching

This enables the BFF to run in mock mode during frontend tests.

* fix: Add data-testid to disabled View Code button

The View Code button's data-testid was only on the enabled state,
causing the test to fail when the button is disabled (default state
when no message has been sent). Added data-testid to both states.

Author: antowaddle

.cursor/rules/cypress-e2e.mdc

@@ -1,6 +1,6 @@
 ---
 description: Comprehensive guidelines for creating and maintaining Cypress E2E tests including Robot Framework migrations and new feature testing
-globs: []
+globs: 
 alwaysApply: false
 ---
 # Cypress E2E Test Rules

.cursor/rules/cypress-mock.mdc

@@ -28,6 +28,12 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
 
+      - name: Set up Go
+        uses: actions/setup-go@v5
+        with:
+          go-version-file: 'packages/gen-ai/bff/go.mod'
+          cache-dependency-path: 'packages/gen-ai/bff/go.sum'
+
       - name: Cache npm dependencies
         uses: actions/cache@v4
         with:

.github/workflows/gen-ai-frontend-build.yml

@@ -29,13 +29,14 @@
     "clean": "rimraf dist",
     "cypress:server:dev": "webpack serve --color --progress --config ./config/webpack.dev.js --port 8080 --no-open",
     "cypress:server": "cd ../bff && make run PORT=9001",
+    "cypress:server:bff-mock": "cd ../bff && MOCK_LS_CLIENT=true MOCK_K8S_CLIENT=true MOCK_MCP_CLIENT=true MOCK_MAAS_CLIENT=true make run PORT=9001",
     "cypress:open": "cypress open --project src/__tests__/cypress",
     "cypress:open:e2e": "BASE_URL=http://localhost:4010 npm run cypress:open",
     "cypress:open:mock": "CY_MOCK=1 CY_WS_PORT=9002 BASE_URL=http://localhost:8080 npm run cypress:open -- ",
     "cypress:run": "cypress run -b chrome --project src/__tests__/cypress",
     "cypress:run:e2e": "BASE_URL=http://localhost:4010 npm run cypress:run",
     "cypress:run:mock": "CY_MOCK=1 CY_WS_PORT=9002 BASE_URL=http://localhost:8080 npm run cypress:run -- ",
-    "test:cypress-ci": "npx concurrently -P -k -s first \"npm run cypress:server:dev\" \"npx wait-on http://localhost:8080 && npm run cypress:run:mock\" -- "
+    "test:cypress-ci": "npx concurrently -P -k -s first \"npm run cypress:server:bff-mock\" \"PROXY_HOST=localhost PROXY_PORT=9001 npm run cypress:server:dev\" \"npx wait-on http://localhost:8080 http://localhost:9001 && npm run cypress:run:mock\" -- "
   },
   "devDependencies": {
     "@module-federation/enhanced": "^0.13.1",

packages/gen-ai/frontend/package.json

@@ -1,16 +1,42 @@
+import { TableRow } from './components/table';
+
+class ChatbotMCPServerRow extends TableRow {
+  constructor(
+    parentSelector: () => Cypress.Chainable<JQuery<HTMLTableRowElement>>,
+    private serverName: string,
+    private serverId: string,
+  ) {
+    super(parentSelector);
+  }
+
+  findConfigureButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId(`mcp-server-configure-button-${this.serverId}`);
+  }
+
+  findToolsButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId(`mcp-server-tools-button-${this.serverId}`);
+  }
+
+  isChecked(): Cypress.Chainable<boolean> {
+    return this.findCheckbox().then(($cb) => cy.wrap($cb.is(':checked')));
+  }
+}
+
 class ChatbotPage {
   visit(namespace?: string): void {
     cy.visit(namespace ? `/gen-ai-studio/playground/${namespace}` : '/gen-ai-studio/playground');
     this.waitForPageLoad();
   }
 
   private waitForPageLoad(): void {
-    cy.findByTestId('page-title').should('be.visible').and('contain.text', 'Playground');
+    cy.findByTestId('page-title', { timeout: 30000 })
+      .should('be.visible')
+      .and('contain.text', 'Playground');
   }
 
   verifyOnChatbotPage(expectedNamespace?: string): void {
     if (expectedNamespace) {
-      cy.location('pathname').should((pathname) => {
+      cy.location('pathname', { timeout: 60000 }).should((pathname) => {
         expect([
           `/gen-ai-studio/playground/${expectedNamespace}`,
           '/gen-ai-studio/playground',
@@ -19,6 +45,260 @@ class ChatbotPage {
     }
     this.waitForPageLoad();
   }
+
+  findMCPPanel(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('mcp-servers-panel-table');
+  }
+
+  expandMCPPanelIfNeeded(): void {
+    this.findMCPPanel().should('exist', { timeout: 30000 }).and('be.visible');
+  }
+
+  verifyMCPPanelVisible(): void {
+    this.findMCPPanel().should('be.visible', { timeout: 30000 });
+  }
+
+  private findCheckedCheckboxes(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.findMCPPanel().within(() => cy.get('input[type="checkbox"]:checked'));
+  }
+
+  getCheckedServer(): Cypress.Chainable<string> {
+    return this.findCheckedCheckboxes()
+      .should('have.length', 1)
+      .closest('tr')
+      .within(() => cy.get('td').eq(1))
+      .invoke('text')
+      .then((text) => {
+        const name = text.trim();
+        return cy.wrap(name).should('not.be.empty');
+      });
+  }
+
+  getServerRow(serverName: string, serverUrl: string): ChatbotMCPServerRow {
+    const rowSelector = () =>
+      this.findMCPPanel().contains('tr', serverName) as unknown as Cypress.Chainable<
+        JQuery<HTMLTableRowElement>
+      >;
+    return new ChatbotMCPServerRow(rowSelector, serverName, serverUrl);
+  }
+
+  findConfigureModal(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByRole('dialog');
+  }
+
+  hasConfigureModal(): Cypress.Chainable<boolean> {
+    return cy.findByRole('dialog').then(($dialog) => cy.wrap($dialog.length > 0));
+  }
+
+  verifyOnlyOneServerChecked(): void {
+    this.findCheckedCheckboxes().should('have.length', 1);
+  }
+
+  findCheckedServersCount(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.findCheckedCheckboxes();
+  }
+
+  // Chatbot Main UI Elements
+  findChatbotHeader(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('page-title');
+  }
+
+  findChatbotPlayground(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('chatbot');
+  }
+
+  findMessageBar(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('chatbot-message-bar');
+  }
+
+  findMessageInput(): Cypress.Chainable<JQuery<HTMLElement>> {
+    // data-testid is directly on the textarea element
+    return cy.findByTestId('chatbot-message-bar');
+  }
+
+  findSendButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    // PatternFly MessageBar component - Send button appears after typing
+    // NOTE: Cannot add testID to external library component, using semantic role
+    return cy.findByRole('button', { name: 'Send' });
+  }
+
+  findWelcomeMessage(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByText(/Welcome to the model playground/i);
+  }
+
+  findMessage(text: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByText(text);
+  }
+
+  findEmptyState(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('empty-state');
+  }
+
+  findEmptyStateTitle(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('empty-state').find('h1');
+  }
+
+  findEmptyStateMessage(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('empty-state-message');
+  }
+
+  findCreatePlaygroundButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('empty-state-action-button');
+  }
+
+  findEmptyStateActionButton(buttonText: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByRole('button', { name: buttonText });
+  }
+
+  findInitializingState(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByText(/Creating playground/i);
+  }
+
+  findFailedState(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByText(/Playground creation failed/i);
+  }
+
+  // Configuration Modal
+  findConfigurationModal(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByRole('dialog');
+  }
+
+  findViewCodeButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('view-code-button');
+  }
+
+  // Delete Playground Modal
+  findDeletePlaygroundModal(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('delete-modal');
+  }
+
+  // View Code Modal
+  findViewCodeModal(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByRole('dialog');
+  }
+
+  // Model Selection
+  findModelDropdown(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByText(/Model/i).parent().find('button') as unknown as Cypress.Chainable<
+      JQuery<HTMLElement>
+    >;
+  }
+
+  selectModel(modelName: string): void {
+    this.findModelDropdown().click();
+    cy.findByText(modelName).click();
+  }
+
+  // System Instructions
+  findSystemInstructionsSection(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('system-instructions-section');
+  }
+
+  findSystemInstructionInput(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('system-instructions-input');
+  }
+
+  setSystemInstructions(instructions: string): void {
+    this.findSystemInstructionInput().clear().type(instructions);
+  }
+
+  // Temperature Configuration
+  findTemperatureSection(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByText(/Temperature/i).parent();
+  }
+
+  findTemperatureInput(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('temperature-input');
+  }
+
+  setTemperature(value: string): void {
+    this.findTemperatureInput().clear().type(value);
+  }
+
+  // Streaming Configuration
+  findStreamingSection(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByText(/Streaming/i).parent();
+  }
+
+  findStreamingToggle(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.findStreamingSection().find('input[type="checkbox"]');
+  }
+
+  toggleStreaming(enable: boolean): void {
+    this.findStreamingToggle().then(($toggle) => {
+      const isChecked = $toggle.is(':checked');
+      if ((enable && !isChecked) || (!enable && isChecked)) {
+        this.findStreamingToggle().click({ force: true });
+      }
+    });
+  }
+
+  // RAG Section
+  findRAGSection(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('rag-section-title').parent();
+  }
+
+  findRAGToggle(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('rag-toggle-switch');
+  }
+
+  // MCP Servers Section
+  findMCPServersSection(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('mcp-servers-section-title').parent();
+  }
+
+  findMCPServersTable(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('mcp-servers-panel-table');
+  }
+
+  // Kebab Menu (Actions Menu)
+  findKebabMenuButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('header-kebab-menu-toggle');
+  }
+
+  openKebabMenu(): void {
+    this.findKebabMenuButton().click();
+  }
+
+  findDeleteMenuItem(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('delete-playground-menu-item');
+  }
+
+  findConfigureMenuItem(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('configure-playground-menu-item');
+  }
+
+  // Chat Messages
+  findChatMessage(text: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    // Use Cypress string matching instead of RegExp to avoid ReDoS
+    return cy.findByText(text);
+  }
+
+  findBotMessages(): Cypress.Chainable<JQuery<HTMLElement>> {
+    // PatternFly Chatbot component - Cannot add testID to external library
+    // NOTE: Using class selector as last resort for external component
+    return cy.get('[class*="pf-chatbot__message--bot"]');
+  }
+
+  findUserMessages(): Cypress.Chainable<JQuery<HTMLElement>> {
+    // PatternFly Chatbot component - Cannot add testID to external library
+    // NOTE: Using class selector as last resort for external component
+    return cy.get('[class*="pf-chatbot__message--user"]');
+  }
+
+  // Helper methods for chat interactions
+  sendMessage(message: string): void {
+    this.findMessageInput().type(message);
+    this.findSendButton().click();
+  }
+
+  verifyUserMessageInChat(message: string): void {
+    this.findUserMessages().should('contain.text', message);
+  }
+
+  verifyBotResponseContains(text: string): void {
+    this.findBotMessages().should('contain.text', text);
+  }
 }
 
 export const chatbotPage = new ChatbotPage();

packages/gen-ai/frontend/src/__tests__/cypress/cypress/pages/chatbotPage.ts

@@ -2,6 +2,7 @@
 import yaml from 'js-yaml';
 import {
   mockNamespaces,
+  mockNamespace,
   mockEmptyList,
   mockStatus,
   mockAAModels,
@@ -55,15 +56,26 @@ export const setupBaseMCPServerMocks = (
     lsdStatus: 'Ready' | 'NotReady';
     includeLsdModel?: boolean;
     includeAAModel?: boolean;
+    namespace?: string;
   } = {
     lsdStatus: 'NotReady',
     includeLsdModel: false,
     includeAAModel: false,
   },
 ): void => {
-  const namespace = config.defaultNamespace;
-
-  cy.interceptGenAi('GET /api/v1/namespaces', mockNamespaces());
+  const namespace = options.namespace ?? config.defaultNamespace;
+
+  // If a custom namespace is provided, include it in the namespaces list
+  const namespacesData =
+    options.namespace && options.namespace !== config.defaultNamespace
+      ? [
+          // eslint-disable-next-line camelcase
+          mockNamespace({ name: options.namespace, display_name: options.namespace }),
+          ...mockNamespaces().data,
+        ]
+      : mockNamespaces().data;
+
+  cy.interceptGenAi('GET /api/v1/namespaces', { data: namespacesData });
 
   // Mock AAA models endpoint
   if (options.includeAAModel) {