add mock cypress test for guardails (opendatahub-io#6159)

Author: pnaik1

packages/gen-ai/frontend/src/__tests__/cypress/cypress/__mocks__/index.ts

@@ -3,3 +3,4 @@ export * from './mockMCPServers';
 export * from './mockEmptyResponse';
 export * from './mockMCPResponses';
 export * from './mockAAModels';
+export * from './mockGuardrails';

packages/gen-ai/frontend/src/__tests__/cypress/cypress/__mocks__/mockGuardrails.ts

@@ -0,0 +1,110 @@
+/* eslint-disable camelcase */
+import type { GuardrailModelConfig, SafetyConfigResponse } from '~/app/types';
+
+/**
+ * Mock a single guardrail model configuration
+ *
+ * @param overrides - Partial properties to override defaults
+ * @returns GuardrailModelConfig object
+ */
+export const mockGuardrailModelConfig = (
+  overrides?: Partial<GuardrailModelConfig>,
+): GuardrailModelConfig => ({
+  model_name: 'llama-guard-3',
+  input_shield_id: 'trustyai_input',
+  output_shield_id: 'trustyai_output',
+  ...overrides,
+});
+
+/**
+ * Mock safety config response with guardrail models
+ *
+ * @param models - Array of guardrail model configs (optional)
+ * @returns SafetyConfigResponse object
+ */
+export const mockSafetyConfig = (
+  models?: Partial<GuardrailModelConfig>[],
+): SafetyConfigResponse => {
+  if (!models || models.length === 0) {
+    return {
+      guardrail_models: [mockGuardrailModelConfig()],
+    };
+  }
+
+  return {
+    guardrail_models: models.map((model) => mockGuardrailModelConfig(model)),
+  };
+};
+
+/**
+ * Mock an empty safety config response (no guardrails available)
+ *
+ * @returns SafetyConfigResponse with empty guardrail_models array
+ */
+export const mockEmptySafetyConfig = (): SafetyConfigResponse => ({
+  guardrail_models: [],
+});
+
+/**
+ * Mock a guardrail violation response for input
+ *
+ * @param responseId - Optional response ID (default: 'resp_guardrail_123')
+ * @param model - Optional model name (default: 'llama-3.2-1b')
+ * @returns Mocked chat response with input violation
+ */
+export const mockInputGuardrailViolation = (
+  responseId = 'resp_guardrail_123',
+  model = 'llama-3.2-1b',
+): Record<string, unknown> => ({
+  id: responseId,
+  model,
+  status: 'completed',
+  created_at: Date.now(),
+  output: [
+    {
+      id: 'msg_guardrail',
+      type: 'message',
+      role: 'assistant',
+      status: 'completed',
+      content: [
+        {
+          type: 'refusal',
+          refusal:
+            'I cannot process that request as it conflicts with my active safety guidelines. Please review your input for prompt manipulation, harmful content, or sensitive data (PII).',
+        },
+      ],
+    },
+  ],
+});
+
+/**
+ * Mock a guardrail violation response for output
+ *
+ * @param responseId - Optional response ID (default: 'resp_guardrail_456')
+ * @param model - Optional model name (default: 'llama-3.2-1b')
+ * @returns Mocked chat response with output violation
+ */
+export const mockOutputGuardrailViolation = (
+  responseId = 'resp_guardrail_456',
+  model = 'llama-3.2-1b',
+): Record<string, unknown> => ({
+  id: responseId,
+  model,
+  status: 'completed',
+  created_at: Date.now(),
+  output: [
+    {
+      id: 'msg_guardrail_output',
+      type: 'message',
+      role: 'assistant',
+      status: 'completed',
+      content: [
+        {
+          type: 'refusal',
+          refusal:
+            'The response to your request was intercepted by safety guardrails. The output was found to contain potential harmful content or sensitive data (PII).',
+        },
+      ],
+    },
+  ],
+});

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

@@ -1,7 +1,7 @@
 class AppChrome {
   visit(featureFlags?: string[]): void {
     const flags = featureFlags || ['genAiStudio'];
-    const flagsParam = flags.map((f) => `${encodeURIComponent(f)}=true`).join('&');
+    const flagsParam = flags.map((f) => `${f}=true`).join(',');
     const url = flagsParam ? `/?devFeatureFlags=${flagsParam}` : '/';
     cy.visit(url);
     this.waitForPageLoad();

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

@@ -50,6 +50,10 @@ class ChatbotPage {
     this.findMCPTab().click();
   }
 
+  clickGuardrailsTab(): void {
+    this.findGuardrailsTab().click();
+  }
+
   clickKnowledgeTab(): void {
     this.findKnowledgeTab().click();
   }
@@ -284,6 +288,10 @@ class ChatbotPage {
     this.findBotMessages().should('contain.text', text);
   }
 
+  verifyLastBotResponseContains(text: string): void {
+    this.findBotMessages().last().should('contain.text', text);
+  }
+
   verifyStopButtonVisible(): void {
     this.findStopButton().should('be.visible');
   }
@@ -322,6 +330,53 @@ class ChatbotPage {
     this.toggleStreaming(true);
   }
 
+  // Guardrails Section (inside Guardrails tab)
+  findGuardrailsSection(): Cypress.Chainable<JQuery<HTMLElement>> {
+    // Click Guardrails tab first to show guardrails section
+    this.clickGuardrailsTab();
+    return cy.findByTestId('guardrails-section-title').parent();
+  }
+
+  findGuardrailsEmptyState(): Cypress.Chainable<JQuery<HTMLElement>> {
+    this.clickGuardrailsTab();
+    return cy.findByTestId('guardrails-empty-state');
+  }
+
+  findGuardrailModelToggle(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('guardrail-model-toggle');
+  }
+
+  findUserInputGuardrailsSwitch(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('user-input-guardrails-switch');
+  }
+
+  findModelOutputGuardrailsSwitch(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('model-output-guardrails-switch');
+  }
+
+  selectGuardrailModel(modelName: string): void {
+    this.findGuardrailModelToggle().click();
+    cy.findByRole('option', { name: modelName }).click();
+  }
+
+  toggleUserInputGuardrails(enable: boolean): void {
+    this.findUserInputGuardrailsSwitch().then(($toggle) => {
+      const isChecked = $toggle.is(':checked');
+      if ((enable && !isChecked) || (!enable && isChecked)) {
+        this.findUserInputGuardrailsSwitch().click({ force: true });
+      }
+    });
+  }
+
+  toggleModelOutputGuardrails(enable: boolean): void {
+    this.findModelOutputGuardrailsSwitch().then(($toggle) => {
+      const isChecked = $toggle.is(':checked');
+      if ((enable && !isChecked) || (!enable && isChecked)) {
+        this.findModelOutputGuardrailsSwitch().click({ force: true });
+      }
+    });
+  }
+
   // Metrics Section
   findMetricsToggle(): Cypress.Chainable<JQuery<HTMLElement>> {
     return cy.contains('button', /Show metrics|Hide metrics/i) as unknown as Cypress.Chainable<