|
| 1 | +import DataGrid from 'devextreme-testcafe-models/dataGrid'; |
| 2 | +import { ClientFunction } from 'testcafe'; |
| 3 | +import url from '../../../../helpers/getPageUrl'; |
| 4 | +import { createWidget } from '../../../../helpers/createWidget'; |
| 5 | + |
| 6 | +fixture`Ai Column.Virtual Scrolling.Functional` |
| 7 | + .page(url(__dirname, './pages/containerWithAIIntegration.html')); |
| 8 | + |
| 9 | +const DATA_GRID_SELECTOR = '#container'; |
| 10 | + |
| 11 | +const checkAIColumnTexts = async ( |
| 12 | + t: TestController, |
| 13 | + component: DataGrid, |
| 14 | + expectedRowCount: number, |
| 15 | +): Promise<void> => { |
| 16 | + const visibleRows: Record<string, any>[] = await component.apiGetVisibleRows(); |
| 17 | + |
| 18 | + await t.expect(visibleRows.length).eql(expectedRowCount); |
| 19 | + |
| 20 | + // eslint-disable-next-line no-restricted-syntax |
| 21 | + for (const row of visibleRows) { |
| 22 | + await t |
| 23 | + .expect(component.getDataCell(row.dataIndex, 3).element.textContent) |
| 24 | + .eql(`Response ${row.data.name}`); |
| 25 | + } |
| 26 | +}; |
| 27 | + |
| 28 | +const resolveAIRequest = ClientFunction((): void => { |
| 29 | + const { aiResponseData } = (window as any); |
| 30 | + const { aiResolve } = (window as any); |
| 31 | + |
| 32 | + if (aiResponseData && aiResolve) { |
| 33 | + aiResolve(aiResponseData); |
| 34 | + |
| 35 | + (window as any).aiResponseData = null; |
| 36 | + (window as any).aiResolve = null; |
| 37 | + } |
| 38 | +}); |
| 39 | + |
| 40 | +const deleteGlobalVariables = ClientFunction((): void => { |
| 41 | + delete (window as any).aiResponseData; |
| 42 | + delete (window as any).aiResolve; |
| 43 | +}); |
| 44 | + |
| 45 | +test('DataGrid should send an AI request for rendered rows after scrolling without changing the page index', async (t) => { |
| 46 | + // arrange |
| 47 | + const dataGrid = new DataGrid(DATA_GRID_SELECTOR); |
| 48 | + |
| 49 | + // assert |
| 50 | + await t |
| 51 | + .expect(dataGrid.getLoadPanel().isVisible()) |
| 52 | + .ok(); |
| 53 | + |
| 54 | + // act |
| 55 | + await resolveAIRequest(); |
| 56 | + |
| 57 | + // assert |
| 58 | + await t |
| 59 | + .expect(dataGrid.isReady()) |
| 60 | + .ok() |
| 61 | + .expect(dataGrid.getLoadPanel().isVisible()) |
| 62 | + .notOk(); |
| 63 | + await checkAIColumnTexts(t, dataGrid, 11); |
| 64 | + |
| 65 | + // act |
| 66 | + await dataGrid.scrollTo(t, { y: 1000 }); |
| 67 | + |
| 68 | + // assert |
| 69 | + await t |
| 70 | + .expect(dataGrid.getScrollTop()) |
| 71 | + .eql(1000) |
| 72 | + .expect(dataGrid.apiPageIndex()) |
| 73 | + .eql(0) |
| 74 | + .expect(dataGrid.getDataCell(20, 0).element.textContent) |
| 75 | + .eql('21') |
| 76 | + .expect(dataGrid.getLoadPanel().isVisible()) |
| 77 | + .ok(); |
| 78 | + |
| 79 | + // act |
| 80 | + await resolveAIRequest(); |
| 81 | + |
| 82 | + // assert |
| 83 | + await t |
| 84 | + .expect(dataGrid.isReady()) |
| 85 | + .ok() |
| 86 | + .expect(dataGrid.getLoadPanel().isVisible()) |
| 87 | + .notOk(); |
| 88 | + await checkAIColumnTexts(t, dataGrid, 12); |
| 89 | +}) |
| 90 | + .before(async () => createWidget('dxDataGrid', () => { |
| 91 | + const generateData = (rowCount: number): Record<string, number | string>[] => { |
| 92 | + const result: Record<string, number | string>[] = []; |
| 93 | + |
| 94 | + for (let i = 0; i < rowCount; i += 1) { |
| 95 | + result.push({ id: i + 1, name: `Name ${i + 1}`, value: (i + 1) * 10 }); |
| 96 | + } |
| 97 | + |
| 98 | + return result; |
| 99 | + }; |
| 100 | + |
| 101 | + return { |
| 102 | + dataSource: generateData(200), |
| 103 | + height: 500, |
| 104 | + keyExpr: 'id', |
| 105 | + paging: { |
| 106 | + pageSize: 50, |
| 107 | + }, |
| 108 | + scrolling: { |
| 109 | + mode: 'virtual', |
| 110 | + }, |
| 111 | + columns: [ |
| 112 | + { dataField: 'id', caption: 'ID' }, |
| 113 | + { dataField: 'name', caption: 'Name' }, |
| 114 | + { dataField: 'value', caption: 'Value' }, |
| 115 | + { |
| 116 | + type: 'ai', |
| 117 | + caption: 'AI Column', |
| 118 | + name: 'myColumn', |
| 119 | + ai: { |
| 120 | + prompt: 'Initial prompt', |
| 121 | + // eslint-disable-next-line new-cap |
| 122 | + aiIntegration: new (window as any).DevExpress.aiIntegration({ |
| 123 | + sendRequest(prompt) { |
| 124 | + return { |
| 125 | + promise: new Promise<string>((resolve) => { |
| 126 | + const result: Record<string, string> = {}; |
| 127 | + |
| 128 | + Object.entries(prompt.data?.data).forEach(([key, value]) => { |
| 129 | + result[key] = `Response ${(value as any).name}`; |
| 130 | + }); |
| 131 | + |
| 132 | + (window as any).aiResponseData = JSON.stringify(result); |
| 133 | + (window as any).aiResolve = resolve; |
| 134 | + }), |
| 135 | + abort: (): void => {}, |
| 136 | + }; |
| 137 | + }, |
| 138 | + }), |
| 139 | + }, |
| 140 | + }, |
| 141 | + ], |
| 142 | + }; |
| 143 | + })) |
| 144 | + .after(async () => { |
| 145 | + await deleteGlobalVariables(); |
| 146 | + }); |
| 147 | + |
| 148 | +test('DataGrid should send an AI request for rendered rows after scrolling with changing the page index', async (t) => { |
| 149 | + // arrange |
| 150 | + const dataGrid = new DataGrid(DATA_GRID_SELECTOR); |
| 151 | + |
| 152 | + // assert |
| 153 | + await t |
| 154 | + .expect(dataGrid.getLoadPanel().isVisible()) |
| 155 | + .ok(); |
| 156 | + |
| 157 | + // act |
| 158 | + await resolveAIRequest(); |
| 159 | + |
| 160 | + // assert |
| 161 | + await t |
| 162 | + .expect(dataGrid.isReady()) |
| 163 | + .ok() |
| 164 | + .expect(dataGrid.getLoadPanel().isVisible()) |
| 165 | + .notOk(); |
| 166 | + await checkAIColumnTexts(t, dataGrid, 11); |
| 167 | + |
| 168 | + // act |
| 169 | + await dataGrid.scrollTo(t, { y: 1000 }); |
| 170 | + |
| 171 | + // assert |
| 172 | + await t |
| 173 | + .expect(dataGrid.getScrollTop()) |
| 174 | + .eql(1000) |
| 175 | + .expect(dataGrid.apiPageIndex()) |
| 176 | + .eql(1) |
| 177 | + .expect(dataGrid.getDataCell(20, 0).element.textContent) |
| 178 | + .eql('21') |
| 179 | + .expect(dataGrid.getLoadPanel().isVisible()) |
| 180 | + .ok(); |
| 181 | + |
| 182 | + // act |
| 183 | + await resolveAIRequest(); |
| 184 | + |
| 185 | + // assert |
| 186 | + await t |
| 187 | + .expect(dataGrid.isReady()) |
| 188 | + .ok() |
| 189 | + .expect(dataGrid.getLoadPanel().isVisible()) |
| 190 | + .notOk(); |
| 191 | + await checkAIColumnTexts(t, dataGrid, 12); |
| 192 | +}) |
| 193 | + .before(async () => createWidget('dxDataGrid', () => { |
| 194 | + const generateData = (rowCount: number): Record<string, number | string>[] => { |
| 195 | + const result: Record<string, number | string>[] = []; |
| 196 | + |
| 197 | + for (let i = 0; i < rowCount; i += 1) { |
| 198 | + result.push({ id: i + 1, name: `Name ${i + 1}`, value: (i + 1) * 10 }); |
| 199 | + } |
| 200 | + |
| 201 | + return result; |
| 202 | + }; |
| 203 | + |
| 204 | + return { |
| 205 | + dataSource: generateData(200), |
| 206 | + height: 500, |
| 207 | + keyExpr: 'id', |
| 208 | + paging: { |
| 209 | + pageSize: 20, |
| 210 | + }, |
| 211 | + scrolling: { |
| 212 | + mode: 'virtual', |
| 213 | + }, |
| 214 | + columns: [ |
| 215 | + { dataField: 'id', caption: 'ID' }, |
| 216 | + { dataField: 'name', caption: 'Name' }, |
| 217 | + { dataField: 'value', caption: 'Value' }, |
| 218 | + { |
| 219 | + type: 'ai', |
| 220 | + caption: 'AI Column', |
| 221 | + name: 'myColumn', |
| 222 | + ai: { |
| 223 | + prompt: 'Initial prompt', |
| 224 | + // eslint-disable-next-line new-cap |
| 225 | + aiIntegration: new (window as any).DevExpress.aiIntegration({ |
| 226 | + sendRequest(prompt) { |
| 227 | + return { |
| 228 | + promise: new Promise<string>((resolve) => { |
| 229 | + const result: Record<string, string> = {}; |
| 230 | + |
| 231 | + Object.entries(prompt.data?.data).forEach(([key, value]) => { |
| 232 | + result[key] = `Response ${(value as any).name}`; |
| 233 | + }); |
| 234 | + |
| 235 | + (window as any).aiResponseData = JSON.stringify(result); |
| 236 | + (window as any).aiResolve = resolve; |
| 237 | + }), |
| 238 | + abort: (): void => {}, |
| 239 | + }; |
| 240 | + }, |
| 241 | + }), |
| 242 | + }, |
| 243 | + }, |
| 244 | + ], |
| 245 | + }; |
| 246 | + })) |
| 247 | + .after(async () => { |
| 248 | + await deleteGlobalVariables(); |
| 249 | + }); |
0 commit comments