cypress-ag-grid 3.3.1 → 3.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,598 +0,0 @@
1
- /// <reference types="cypress" />
2
-
3
- import { sort } from "../../src/agGrid/sort.enum";
4
- import {
5
- deleteKey,
6
- sortedCollectionByProperty,
7
- } from "../../src/helpers/arrayHelpers";
8
- import { filterOperator } from "../../src/agGrid/filterOperator.enum";
9
-
10
- const _pageSize = 5;
11
- const agGridSelector = "#myGrid";
12
- const expectedPaginatedTableData = [
13
- [
14
- { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
15
- { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "excellent", Price: "32000" },
16
- { Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "72000" },
17
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
18
- { Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "good", Price: "53000" },
19
- ],
20
- [
21
- { Year: "2020", Make: "Honda", Model: "Civic", Condition: "poor", Price: "22000" },
22
- { Year: "2020", Make: "Honda", Model: "Accord", Condition: "poor", Price: "32000" },
23
- { Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
24
- { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "good", Price: "22000" },
25
- { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "poor", Price: "5000" },
26
- ],
27
- [
28
- { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "good", Price: "25000" },
29
- { Year: "2020", Make: "Porsche", Model: "Boxter", Condition: "good", Price: "99000" },
30
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
31
- { Year: "2020", Make: "Mercedes", Model: "GLC300", Condition: "excellent", Price: "35000" },
32
- { Year: "2011", Make: "Honda", Model: "Civic", Condition: "good", Price: "9000" },
33
- ],
34
- [
35
- { Year: "2020", Make: "Honda", Model: "Accord", Condition: "good", Price: "34000" },
36
- { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
37
- { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "fair", Price: "3000" },
38
- { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
39
- { Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" },
40
- ],
41
- ];
42
-
43
- describe("ag-grid get data scenarios", () => {
44
- beforeEach(() => {
45
- cy.visit("../app/index.html");
46
- cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
47
- });
48
-
49
- it("verify paginated table data - any order - include all columns", () => {
50
- cy.get(agGridSelector).agGridValidatePaginatedTable(
51
- expectedPaginatedTableData
52
- );
53
- });
54
-
55
- it("verify paginated table data - exact order - include all columns", () => {
56
- cy.get(agGridSelector)
57
- .getAgGridData()
58
- .then((actualTableData) => {
59
- cy.agGridValidateRowsExactOrder(actualTableData, expectedPaginatedTableData[0]);
60
- });
61
- });
62
-
63
- it("verify exact order table data when columns are not in order - include all columns", () => {
64
- cy.get(agGridSelector).agGridPinColumn('Price', 'left');
65
-
66
- cy.get(agGridSelector)
67
- .getAgGridData()
68
- .then((actualTableData) => {
69
- cy.agGridValidateRowsExactOrder(actualTableData, expectedPaginatedTableData[0]);
70
- });
71
- });
72
-
73
- it("verify paginated table data - excluding columns", () => {
74
- const expectedPaginatedTableData = [
75
- [
76
- { Year: "2020", Make: "Toyota", Model: "Celica" },
77
- { Year: "2020", Make: "Ford", Model: "Mondeo" },
78
- { Year: "2020", Make: "Porsche", Model: "Boxter" },
79
- { Year: "2020", Make: "BMW", Model: "3-series" },
80
- { Year: "2020", Make: "Mercedes", Model: "GLC300" },
81
- ],
82
- [
83
- { Year: "2020", Make: "Honda", Model: "Civic" },
84
- { Year: "2020", Make: "Honda", Model: "Accord" },
85
- { Year: "2020", Make: "Ford", Model: "Taurus" },
86
- { Year: "2020", Make: "Hyundai", Model: "Elantra" },
87
- { Year: "2020", Make: "Toyota", Model: "Celica" },
88
- ],
89
- [
90
- { Year: "2020", Make: "Ford", Model: "Mondeo" },
91
- { Year: "2020", Make: "Porsche", Model: "Boxter" },
92
- { Year: "2020", Make: "BMW", Model: "3-series" },
93
- { Year: "2020", Make: "Mercedes", Model: "GLC300" },
94
- { Year: "2011", Make: "Honda", Model: "Civic" },
95
- ],
96
- [
97
- { Year: "2020", Make: "Honda", Model: "Accord" },
98
- { Year: "1990", Make: "Ford", Model: "Taurus" },
99
- { Year: "2020", Make: "Hyundai", Model: "Elantra" },
100
- { Year: "2020", Make: "BMW", Model: "2002" },
101
- { Year: "2023", Make: "Hyundai", Model: "Santa Fe" },
102
- ],
103
- ];
104
- cy.get(agGridSelector).agGridValidatePaginatedTable(
105
- expectedPaginatedTableData,
106
- {
107
- onlyColumns: ["Year", "Make", "Model"],
108
- }
109
- );
110
- });
111
-
112
- it("able to filter by checkbox", () => {
113
- const expectedTableData = [
114
- { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
115
- ];
116
- cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
117
- searchCriteria: {
118
- columnName: "Model",
119
- filterValue: "2002",
120
- },
121
- selectAllLocaleText: "Select All", // This is optional if you are using localText for ag grid
122
- hasApplyButton: true,
123
- });
124
- cy.get(agGridSelector)
125
- .getAgGridData()
126
- .then((actualTableData) => {
127
- cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
128
- });
129
- });
130
-
131
- it("able to filter by checkbox - multiple columns", () => {
132
- const expectedTableData = [
133
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
134
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
135
- { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
136
- ];
137
-
138
- cy.get(agGridSelector).agGridColumnFilterCheckboxMenu({
139
- searchCriteria: [
140
- {
141
- columnName: "Model",
142
- filterValue: "2002",
143
- },
144
- {
145
- columnName: "Model",
146
- filterValue: "3-series",
147
- },
148
- ],
149
- hasApplyButton: true,
150
- });
151
- cy.get(agGridSelector)
152
- .getAgGridData()
153
- .then((actualTableData) => {
154
- cy.agGridValidateRowsExactOrder(
155
- actualTableData,
156
- expectedTableData,
157
- true
158
- );
159
- });
160
- });
161
-
162
- it("able to filter by text - menu", () => {
163
- const expectedTableData = [
164
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
165
- { Year: "2020", Make: "Honda", Model: "Accord", Condition: "poor", Price: "32000" },
166
- { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "excellent", Price: "32000" },
167
- ];
168
- cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
169
- cy.get(agGridSelector).agGridColumnFilterTextMenu({
170
- searchCriteria: {
171
- columnName: "Price",
172
- filterValue: "32000",
173
- operator: filterOperator.equals,
174
- },
175
- hasApplyButton: true,
176
- });
177
- cy.get(agGridSelector)
178
- .getAgGridData()
179
- .then((actualTableData) => {
180
- cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
181
- });
182
- });
183
-
184
- it("able to filter by text - menu - multiple columns", () => {
185
- const expectedTableData = [
186
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
187
- ];
188
- cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
189
- cy.get(agGridSelector).agGridColumnFilterTextMenu({
190
- searchCriteria: [
191
- {
192
- columnName: "Price",
193
- filterValue: "32000",
194
- operator: filterOperator.equals,
195
- },
196
- {
197
- columnName: "Make",
198
- filterValue: "BMW",
199
- operator: filterOperator.equals,
200
- },
201
- ],
202
- hasApplyButton: true,
203
- });
204
- cy.get(agGridSelector)
205
- .getAgGridData()
206
- .then((actualTableData) => {
207
- cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
208
- });
209
- });
210
-
211
- it("able to filter by text - floating filter", () => {
212
- const expectedTableData = [
213
- { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "excellent", Price: "32000" },
214
- { Year: "2020", Make: "Ford", Model: "Mondeo", Condition: "good", Price: "25000" },
215
- { Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
216
- { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
217
- ];
218
-
219
- cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
220
- cy.get(agGridSelector).agGridColumnFilterTextFloating({
221
- searchCriteria: {
222
- columnName: "Make",
223
- filterValue: "Ford",
224
- },
225
- hasApplyButton: true,
226
- });
227
- cy.get(agGridSelector)
228
- .getAgGridData()
229
- .then((actualTableData) => {
230
- cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
231
- });
232
- });
233
-
234
- it("able to filter by text - floating filter - multiple conditions", () => {
235
- const expectedTableData = [
236
- { Year: "2020", Make: "BMW", Model: "2002", Condition: "excellent", Price: "88001" },
237
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
238
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "poor", Price: "32000" },
239
- ];
240
-
241
- cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
242
- cy.get(agGridSelector).agGridColumnFilterTextFloating({
243
- searchCriteria: {
244
- columnName: "Make",
245
- filterValue: "B",
246
- searchInputIndex: 0,
247
- },
248
- hasApplyButton: true,
249
- });
250
- cy.get(agGridSelector).agGridColumnFilterTextFloating({
251
- searchCriteria: {
252
- columnName: "Make",
253
- filterValue: "MW",
254
- searchInputIndex: 1,
255
- },
256
- hasApplyButton: true,
257
- });
258
- cy.get(agGridSelector)
259
- .getAgGridData()
260
- .then((actualTableData) => {
261
- cy.agGridValidateRowsExactOrder(actualTableData, expectedTableData);
262
- });
263
- });
264
-
265
- it("able to filter by text - floating filter - multiple columns", () => {
266
- const expectedTableData = [
267
- { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
268
- ];
269
- cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
270
- cy.get(agGridSelector).agGridColumnFilterTextFloating({
271
- searchCriteria: [
272
- {
273
- columnName: "Make",
274
- filterValue: "Ford",
275
- },
276
- {
277
- columnName: "Year",
278
- filterValue: "1990",
279
- },
280
- ],
281
- hasApplyButton: true,
282
- });
283
- cy.get(agGridSelector)
284
- .getAgGridData()
285
- .then((actualTableData) => {
286
- cy.get(agGridSelector).agGridValidateRowsExactOrder(
287
- actualTableData,
288
- expectedTableData
289
- );
290
- });
291
- });
292
-
293
- it("able to filter by text - floating filter - multi filter", () => {
294
- const expectedTableData = [
295
- { Year: "2020", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "19000" },
296
- { Year: "1990", Make: "Ford", Model: "Taurus", Condition: "excellent", Price: "900" },
297
- ];
298
- cy.get(agGridSelector).agGridSortColumn("Model", sort.ascending);
299
- cy.get(agGridSelector).agGridColumnFilterTextFloating({
300
- searchCriteria: [
301
- {
302
- columnName: "Model",
303
- filterValue: "Taurus",
304
- isMultiFilter: true,
305
- },
306
- ],
307
- hasApplyButton: true,
308
- });
309
- cy.get(agGridSelector)
310
- .getAgGridData()
311
- .then((actualTableData) => {
312
- cy.get(agGridSelector).agGridValidateRowsExactOrder(
313
- actualTableData,
314
- expectedTableData
315
- );
316
- });
317
- });
318
-
319
- it("able to validate empty table", () => {
320
- //Search for an entry that does not exist
321
- cy.get(agGridSelector).agGridColumnFilterTextMenu({
322
- searchCriteria: {
323
- columnName: "Price",
324
- filterValue: "0",
325
- operator: filterOperator.equals,
326
- },
327
- hasApplyButton: true,
328
- });
329
- cy.get(agGridSelector)
330
- .getAgGridData()
331
- .then((actualTableData) => {
332
- cy.agGridValidateEmptyTable(actualTableData);
333
- });
334
- });
335
-
336
- it("able to sort by ascending order", () => {
337
- cy.get(agGridSelector).agGridSortColumn("Make", sort.ascending);
338
- cy.fixture("cardata").then((carData) => {
339
- // This will sort the entirety of our collection by the specified columnName and sort order
340
- // and will return only the # of records specified. In this example, I include only the first
341
- // page of data.
342
- const expectedData_sortedByAscending = sortedCollectionByProperty(
343
- carData,
344
- "Make",
345
- sort.ascending,
346
- _pageSize
347
- );
348
- cy.get(agGridSelector)
349
- .getAgGridData()
350
- .then((actualTableData) => {
351
- cy.agGridValidateRowsExactOrder(
352
- actualTableData,
353
- expectedData_sortedByAscending
354
- );
355
- });
356
- });
357
- });
358
-
359
- it("able to sort by descending order", () => {
360
- cy.get(agGridSelector).agGridSortColumn("Make", sort.descending);
361
- cy.fixture("cardata").then((carData) => {
362
- // This will sort the entirety of our collection by the specified columnName and sort order
363
- // and will return only the # of records specified. In this example, I include only the first
364
- // page of data.
365
- const expectedData_sortedByDescending = sortedCollectionByProperty(
366
- carData,
367
- "Make",
368
- sort.descending,
369
- _pageSize
370
- );
371
- cy.get(agGridSelector)
372
- .getAgGridData()
373
- .then((actualTableData) => {
374
- cy.agGridValidateRowsExactOrder(
375
- actualTableData,
376
- expectedData_sortedByDescending
377
- );
378
- });
379
- });
380
- });
381
-
382
- it("remove column from grid and verify select column data", () => {
383
- cy.get(agGridSelector).agGridToggleColumnsSideBar("Year", true);
384
- cy.fixture("cardata").then((expectedTableData) => {
385
- const expectedData_yearColumnRemoved = removePropertyFromCollection(
386
- expectedTableData,
387
- ["Year"]
388
- );
389
- cy.get(agGridSelector)
390
- .getAgGridData()
391
- .then((actualTableData) => {
392
- cy.agGridValidateRowsExactOrder(
393
- actualTableData,
394
- expectedData_yearColumnRemoved.slice(0, _pageSize)
395
- );
396
- });
397
- });
398
- });
399
-
400
- it("remove single pinned column from grid and verify select column data", () => {
401
- cy.get(agGridSelector).agGridToggleColumnsSideBar("Price", true);
402
- cy.fixture("cardata").then((expectedTableData) => {
403
- const expectedData_priceColumnRemoved = removePropertyFromCollection(
404
- expectedTableData,
405
- ["Price"]
406
- );
407
-
408
- cy.get(agGridSelector)
409
- .getAgGridData()
410
- .then((actualTableData) => {
411
- cy.agGridValidateRowsExactOrder(
412
- actualTableData,
413
- expectedData_priceColumnRemoved.slice(0, _pageSize)
414
- );
415
- });
416
- });
417
- });
418
-
419
- it("remove multiple columns from grid and verify select column data", () => {
420
- cy.get(agGridSelector).agGridToggleColumnsSideBar("Price", true);
421
- cy.get(agGridSelector).agGridToggleColumnsSideBar("Make", true);
422
- cy.fixture("cardata").then((expectedTableData) => {
423
- const expectedData_multipleColumnsRemoved = removePropertyFromCollection(
424
- expectedTableData,
425
- ["Price", "Make"]
426
- );
427
- cy.get(agGridSelector)
428
- .getAgGridData()
429
- .then((actualTableData) => {
430
- cy.agGridValidateRowsExactOrder(
431
- actualTableData,
432
- expectedData_multipleColumnsRemoved.slice(0, _pageSize)
433
- );
434
- });
435
- });
436
- });
437
-
438
- it("only validate select column data", () => {
439
- const expectedTableData = [
440
- { Year: "2020", Make: "Toyota", Model: "Celica" },
441
- { Year: "2020", Make: "Ford", Model: "Mondeo" },
442
- { Year: "2020", Make: "Porsche", Model: "Boxter" },
443
- { Year: "2020", Make: "BMW", Model: "3-series" },
444
- { Year: "2020", Make: "Mercedes", Model: "GLC300" },
445
- ];
446
- cy.get(agGridSelector)
447
- .getAgGridData({ onlyColumns: ["Year", "Make", "Model"] })
448
- .then((actualTableData) => {
449
- cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
450
- });
451
- });
452
-
453
- it("able to filter by 'Blank'", () => {
454
- const expectedTableData = [
455
- { Year: "2023", Make: "Hyundai", Model: "Santa Fe", Condition: "excellent", Price: "" }
456
- ]
457
-
458
- cy.get(agGridSelector).agGridColumnFilterTextMenu({
459
- searchCriteria: {
460
- columnName: "Price",
461
- operator: filterOperator.blank,
462
- },
463
- hasApplyButton: true,
464
- });
465
- cy.get(agGridSelector)
466
- .getAgGridData()
467
- .then((actualTableData) => {
468
- cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
469
- });
470
-
471
- });
472
-
473
- it('able to filter by agTextColumnFilter with join operator', () => {
474
- const expectedTableData = [
475
- { Year: "2020", Make: "Toyota", Model: "Celica", Condition: "fair", Price: "35000" },
476
- { Year: "2020", Make: "BMW", Model: "3-series", Condition: "fair", Price: "45000" },
477
- { Year: "2020", Make: "Hyundai", Model: "Elantra", Condition: "fair", Price: "3000" },
478
- ]
479
- cy.get(agGridSelector).agGridColumnFilterTextFloating({
480
- searchCriteria:
481
- {
482
- columnName: "Condition",
483
- operator: filterOperator.startsWith,
484
- filterValue: 'f',
485
- searchInputIndex: 0,
486
- },
487
-
488
- multiple: true,
489
- hasApplyButton: true,
490
- });
491
-
492
- cy.get(agGridSelector).agGridColumnFilterTextFloating({
493
- searchCriteria:
494
- {
495
- columnName: "Condition",
496
- operator: filterOperator.endsWith,
497
- filterValue: "ir",
498
- searchInputIndex: 1,
499
- },
500
-
501
- multiple: true,
502
- hasApplyButton: true,
503
- });
504
-
505
- cy.get(agGridSelector)
506
- .getAgGridData()
507
- .then((actualTableData) => {
508
- cy.agGridValidateRowsSubset(actualTableData, expectedTableData);
509
- });
510
- });
511
- });
512
-
513
- function removePropertyFromCollection(expectedTableData, columnsToExclude) {
514
- //Exclude any specified columns
515
- if (columnsToExclude) {
516
- columnsToExclude.forEach((excludedColumn) => {
517
- expectedTableData.forEach((obj) => deleteKey(obj, excludedColumn));
518
- });
519
- }
520
- return expectedTableData;
521
- }
522
-
523
- // /// THE BELOW METHODS SHOWCASE HOW TO DYNAMICALLY GET THE EXPECTED DATA AND MANIPULATE IT FOR VALIDATION
524
- // /// THIS INCLUDES PAGINATION, FILTERING, and COLUMN EXCLUSION
525
-
526
- // export const carColumns = {
527
- // year: "Year",
528
- // make: "Make",
529
- // model: "Model",
530
- // price: "Price",
531
- // };
532
-
533
- // /**
534
- // * Returns ALL expected table data populated from the expected test data call and does not factor in pagination
535
- // * @param columnsToExclude Provide an array of string values for columns to not return in the data set
536
- // * @param filters a "\^" delimited string of all columns and values to search for in the grid (i.e. "Name=John Smith^Rate Plan=Standard"
537
- // */
538
- // export function getExpectedTableData(columnsToExclude, filters) {
539
- // let table = [];
540
-
541
- // // Get the expected table data from the cardata fixture file and process it with columns exclusions and filters
542
- // return cy
543
- // .fixture("cardata")
544
- // .then((cars) => {
545
- // table = cars;
546
- // })
547
- // .then(() => {
548
- // // Iterate over all filter strings and filter table results in the order in which they are provided
549
- // if (filters) {
550
- // filters.split("^").forEach((filter) => {
551
- // const [key, value] = filter.split("=");
552
- // const getKey = getKeyByValue(carColumns, key);
553
- // table = table.filter((a) => a[getKey].includes(value));
554
- // });
555
- // }
556
- // })
557
- // .then(() => {
558
- // // Update the property key values to match what is represented in the grid for validation purposes
559
- // // (i.e. in this example, we change make to Make, model to Model, and price to Price to match
560
- // // what is shown in the grid headers exactly).
561
- // for (const key in carColumns)
562
- // table.forEach((obj) => renameKey(obj, key, carColumns[key]));
563
-
564
- // //Exclude any specified columns
565
- // if (columnsToExclude) {
566
- // columnsToExclude.forEach((excludedColumn) => {
567
- // table.forEach((obj) => deleteKey(obj, excludedColumn));
568
- // });
569
- // }
570
- // return table;
571
- // });
572
- // }
573
-
574
- // /**
575
- // * Returns ALL expected table data and paginates the data based on the pageSize
576
- // * @param columnsToExclude Provide an array of string values for columns to not return in the data set
577
- // * @param pageSize If no value is provided, default value of 5 items per page is used
578
- // */
579
- // function getExpectedPaginatedTableData(columnsToExclude, pageSize = 5) {
580
- // const paginatedTableData = [];
581
- // // paginates the expected table data, and removes specified column exclusions
582
- // return getExpectedTableData(columnsToExclude)
583
- // .then((tableData) => {
584
- // const pages = Math.floor(tableData.length / pageSize);
585
- // const finalPageCount = tableData.length % pageSize;
586
- // let iterator = 0;
587
- // for (let i = 0; i < pages; i++) {
588
- // paginatedTableData.push(tableData.slice(iterator, iterator + pageSize));
589
- // iterator += pageSize;
590
- // }
591
- // paginatedTableData.push(
592
- // tableData.slice(iterator, iterator + finalPageCount)
593
- // );
594
- // })
595
- // .then(() => {
596
- // return paginatedTableData;
597
- // });
598
- // }
@@ -1,59 +0,0 @@
1
- import { filterOperator } from "../../src/agGrid/filterOperator.enum";
2
-
3
- const agGridSelector = "#myGrid2";
4
-
5
- describe("ag-grid get elements scenario", () => {
6
- beforeEach(() => {
7
- cy.visit("../app/index.html");
8
- cy.get(".ag-cell", { timeout: 10000 }).should("be.visible");
9
- });
10
-
11
- it("able to update grid cell value", () => {
12
- // filter to only show the porsche
13
- cy.get(agGridSelector).agGridColumnFilterTextFloating({
14
- searchCriteria: {
15
- columnName: "Make",
16
- filterValue: "Porsche",
17
- operator: filterOperator.equals,
18
- },
19
- hasApplyButton: true,
20
- });
21
-
22
- // expected values before changing the price
23
- const expectedTableBeforeEditing = [
24
- { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "72000" },
25
- { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
26
- ];
27
-
28
- // verify values before editing
29
- cy.get(agGridSelector)
30
- .getAgGridData()
31
- .then((tableData) => {
32
- cy.agGridValidateRowsSubset(tableData, expectedTableBeforeEditing);
33
- });
34
-
35
- // edit the porsche boxter from 72000 to 66000
36
- cy.get(agGridSelector)
37
- .getAgGridElements()
38
- .then((tableElements) => {
39
- const porscheRow = tableElements.find(
40
- (row) => row.Price.innerText === "72000"
41
- );
42
- const priceCell = porscheRow.Price;
43
- cy.wrap(priceCell).dblclick().type("66000{enter}");
44
- });
45
-
46
- // expected values after changing the price
47
- const expectedTableAfterEditing = [
48
- { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "66000" },
49
- { Year: "2020", Make: "Porsche", Model: "Boxter", Price: "99000" },
50
- ];
51
-
52
- // verify values before editing
53
- cy.get(agGridSelector)
54
- .getAgGridData()
55
- .then((tableData) => {
56
- cy.agGridValidateRowsSubset(tableData, expectedTableAfterEditing);
57
- });
58
- });
59
- });