✨AI Column: Test unsupported Formatting properties (#31794)

Author: Raushen

packages/devextreme/js/__internal/grids/grid_core/ai_column/__tests__/ai_column.integration.test.ts

@@ -847,6 +847,115 @@ describe('columnOption', () => {
       .toEqual(['ID', 'AI Column', 'Name', 'Value']);
   });
 
+  it('should apply encodeHtml to AI column', async () => {
+    const aiIntegration = new AIIntegration({
+      sendRequest(prompt): RequestResult {
+        return {
+          promise: new Promise<string>((resolve) => {
+            const result = {};
+            Object.entries(prompt.data?.data).forEach(([key]) => {
+              result[key] = '<script>alert(\'XSS\')</script>';
+            });
+            resolve(JSON.stringify(result));
+          }),
+          abort: (): void => {},
+        };
+      },
+    });
+    const { component } = await createDataGrid({
+      dataSource: [
+        { id: 1, name: 'Name 1', value: 10 },
+      ],
+      columns: [
+        { dataField: 'id', caption: 'ID' },
+        {
+          type: 'ai',
+          caption: 'AI Column',
+          name: 'myColumn',
+          ai: {
+            aiIntegration,
+            prompt: 'Initial Prompt',
+          },
+        },
+      ],
+    });
+
+    await Promise.resolve();
+    expect(component.getDataCell(0, 1).getText()).toBe('<script>alert(\'XSS\')</script>');
+
+    component.apiColumnOption('myColumn', 'encodeHtml', false);
+    expect(component.getDataCell(0, 1).getText()).toBe('alert(\'XSS\')');
+    expect(component.apiColumnOption('myColumn').encodeHtml).toBe(false);
+  });
+
+  it('should use calculateDisplayValue for AI column', async () => {
+    const aiIntegration = new AIIntegration({
+      sendRequest(): RequestResult {
+        return {
+          promise: new Promise<string>((resolve) => {
+            resolve('{"1":"AI Value"}');
+          }),
+          abort: (): void => {},
+        };
+      },
+    });
+    const { component } = await createDataGrid({
+      dataSource: [
+        { id: 1, name: 'Name 1', value: 10 },
+      ],
+      columns: [
+        { dataField: 'id', caption: 'ID' },
+        {
+          type: 'ai',
+          caption: 'AI Column',
+          name: 'myColumn',
+          ai: {
+            aiIntegration,
+            prompt: 'Initial Prompt',
+          },
+          calculateDisplayValue: (): string => 'Calculated AI Value',
+        },
+      ],
+    });
+
+    await Promise.resolve();
+    expect(component.getDataCell(0, 1).getText()).toBe('Calculated AI Value');
+  });
+
+  it('should use customizeText for AI column', async () => {
+    const aiIntegration = new AIIntegration({
+      sendRequest(): RequestResult {
+        return {
+          promise: new Promise<string>((resolve) => {
+            resolve('{"1":"AI Value"}');
+          }),
+          abort: (): void => {},
+        };
+      },
+    });
+    const { component } = await createDataGrid({
+      dataSource: [
+        { id: 1, name: 'Name 1', value: 10 },
+      ],
+      columns: [
+        { dataField: 'id', caption: 'ID' },
+        {
+          type: 'ai',
+          caption: 'AI Column',
+          name: 'myColumn',
+          ai: {
+            aiIntegration,
+            prompt: 'Initial Prompt',
+          },
+          customizeText: (cellInfo): string => `Customized: ${cellInfo.valueText}`,
+        },
+      ],
+    });
+
+    await Promise.resolve();
+    expect(component.getDataCell(0, 1).getText()).toBe('Customized: AI Value');
+  });
+
   describe('when the name is reset', () => {
     it('should throw E1066', async () => {
       const { component } = await createDataGrid({

packages/devextreme/js/__internal/grids/grid_core/ai_column/__tests__/unsupported_base_properties.integration.test.ts

@@ -1,11 +1,13 @@
 import {
   afterEach, beforeEach, describe, expect, it, jest,
 } from '@jest/globals';
+import type { GenerateGridColumnCommandResponse } from '@js/common/ai-integration';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import type { Properties as DataGridProperties } from '@js/ui/data_grid';
 import DataGrid from '@js/ui/data_grid';
 import errors from '@js/ui/widget/ui.errors';
+import { AIIntegration } from '@ts/core/ai_integration/core/ai_integration';
 import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
 
 const SELECTORS = {
@@ -20,6 +22,13 @@ const dataSource = [
   { id: 3, name: 'Item 3', value: 3 },
 ];
 
+const EMPTY_CELL_TEXT = '\u00A0';
+
+interface RequestResult {
+  promise: Promise<GenerateGridColumnCommandResponse>;
+  abort: () => void;
+}
+
 const createDataGrid = async (
   options: DataGridProperties = {},
 ): Promise<{
@@ -391,4 +400,61 @@ describe('Unsupported properties', () => {
       },
     );
   });
+
+  describe('Formatting properties', () => {
+    it('Should not apply format to AI column (first load)', async () => {
+      const aiIntegration = new AIIntegration({
+        sendRequest(prompt): RequestResult {
+          return {
+            promise: new Promise<string>((resolve) => {
+              const result = {};
+              Object.entries(prompt.data?.data).forEach(([key, value]) => {
+                const { id, name } = value as { id: number; name: string };
+                if (id === 1) {
+                  result[key] = '';
+                } else {
+                  result[key] = `Response ${name}`;
+                }
+              });
+              resolve(JSON.stringify(result));
+            }),
+            abort: (): void => {},
+          };
+        },
+      });
+      const { component } = await createDataGrid({
+        dataSource,
+        showBorders: true,
+        keyExpr: 'id',
+        columns: [
+          'id',
+          {
+            caption: 'AI',
+            type: 'ai',
+            name: 'AItest',
+            ai: {
+              prompt: 'Provide name for item with value {value}',
+              aiIntegration,
+            },
+            format: {
+              type: 'currency',
+              precision: 0,
+              currency: 'EUR',
+            },
+            trueText: 'Yes',
+            falseText: 'No',
+            buttons: ['edit', 'delete'],
+            setCellValue: (rowData, value) => {
+              rowData.name = value;
+            },
+          },
+        ],
+      });
+
+      await Promise.resolve();
+
+      expect(component.getDataCell(0, 1).getText()).toBe(EMPTY_CELL_TEXT);
+      expect(component.getDataCell(1, 1).getText()).toBe('Response Item 2');
+    });
+  });
 });

packages/devextreme/js/__internal/grids/grid_core/ai_column/utils.ts

@@ -9,6 +9,7 @@ export const getAICommandColumnDefaultOptions = (): object => ({
   command: AI_COLUMN_NAME,
   cssClass: CLASSES.aiColumn,
   fixed: false,
+  encodeHtml: true,
   minWidth: 120,
 });