DevExtreme/e2e/testcafe-devextreme/tests/common/treeList/column_auto_width.ts at 8dc3136664ca3808b665ec497ce13852c6653e56 · DevExpress/DevExtreme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import { ClientFunction } from 'testcafe';
import ExpandableCell from 'devextreme-testcafe-models/treeList/expandableCell';
import TreeList from 'devextreme-testcafe-models/treeList';
import url from '../../../helpers/getPageUrl';
import { createWidget } from '../../../helpers/createWidget';

fixture.disablePageReloads`Columns Auto Width`
  .page(url(__dirname, '../../container.html'));

const treeListData = [
  {
    id: 1, parentId: 0, name: 'Root item with a long name', size: 1024, date: '2024-01-01',
  },
  {
    id: 2, parentId: 1, name: 'Child 1', size: 512, date: '2024-02-01',
  },
  {
    id: 3, parentId: 1, name: 'Child 2 with a longer name value', size: 256, date: '2024-03-01',
  },
  {
    id: 4, parentId: 0, name: 'Second root', size: 2048, date: '2024-04-01',
  },
];

const treeListConfig = {
  dataSource: treeListData,
  keyExpr: 'id',
  parentIdExpr: 'parentId',
  columnAutoWidth: true,
  width: 500,
  repaintChangesOnly: true,
  columns: [
    { dataField: 'name' },
    { dataField: 'size', width: 100 },
    { dataField: 'date', width: 150 },
  ],
  scrolling: {
    mode: 'standard',
    useNative: false,
  },
};

// T1328904
test('columns should update auto width when expanding row', async (t) => {
  const treeList = new TreeList('#container');
  await t.expect(treeList.isReady()).ok();

  const widthsBefore = await treeList.getHeaderCellWidths();
  const [nameWidthBefore] = widthsBefore;
  await t.expect(widthsBefore).eql([250, 100, 150]);

  const expandableCell = new ExpandableCell(treeList.getDataRow(0).getDataCell(0));
  await t.click(expandableCell.getExpandButton());

  const widthsAfter = await treeList.getHeaderCellWidths();
  const [nameWidthAfter, sizeWidthAfter, dateWidthAfter] = widthsAfter;
  await t.expect(nameWidthAfter).gt(nameWidthBefore);
  await t.expect(sizeWidthAfter).eql(100);
  await t.expect(dateWidthAfter).eql(150);
}).before(async () => createWidget('dxTreeList', treeListConfig));

// T1328904
test('columns should update auto width when collapsing row', async (t) => {
  const treeList = new TreeList('#container');
  await t.expect(treeList.isReady()).ok();

  const widthsBefore = await treeList.getHeaderCellWidths();
  const [nameWidthBefore] = widthsBefore;

  const expandableCell = new ExpandableCell(treeList.getDataRow(0).getDataCell(0));
  await t.click(expandableCell.getCollapseButton());

  const widthsAfter = await treeList.getHeaderCellWidths();
  const [nameWidthAfter, sizeWidthAfter, dateWidthAfter] = widthsAfter;
  await t.expect(nameWidthAfter).lt(nameWidthBefore);
  await t.expect(sizeWidthAfter).eql(100);
  await t.expect(dateWidthAfter).eql(150);
}).before(async () => createWidget('dxTreeList', {
  ...treeListConfig,
  expandedRowKeys: [1],
}));

// T1328904
test('columns should update auto width when expanded row keys are updated using API', async (t) => {
  const treeList = new TreeList('#container');
  await t.expect(treeList.isReady()).ok();

  const widthsBefore = await treeList.getHeaderCellWidths();
  const [nameWidthBefore] = widthsBefore;
  await t.expect(widthsBefore).eql([250, 100, 150]);

  await treeList.apiOption('expandedRowKeys', [1]);

  const widthsAfter = await treeList.getHeaderCellWidths();
  const [nameWidthAfter, sizeWidthAfter, dateWidthAfter] = widthsAfter;
  await t.expect(nameWidthAfter).gt(nameWidthBefore);
  await t.expect(sizeWidthAfter).eql(100);
  await t.expect(dateWidthAfter).eql(150);
}).before(async () => createWidget('dxTreeList', treeListConfig));

test('columns should update auto width after loadDescendants call', async (t) => {
  const treeList = new TreeList('#container');
  await t.expect(treeList.isReady()).ok();

  await treeList.apiLoadDescendants(1);

  const widthsBefore = await treeList.getHeaderCellWidths();
  await t.expect(widthsBefore).eql([250, 100, 150]);

  const expandableCell = new ExpandableCell(treeList.getDataRow(0).getDataCell(0));
  await t.click(expandableCell.getExpandButton());

  const widthsAfter = await treeList.getHeaderCellWidths();
  const [nameWidthAfter, sizeWidthAfter, dateWidthAfter] = widthsAfter;
  await t.expect(nameWidthAfter).gt(250);
  await t.expect(sizeWidthAfter).eql(100);
  await t.expect(dateWidthAfter).eql(150);
}).before(async () => createWidget('dxTreeList', {
  ...treeListConfig,
  dataSource: {
    key: 'id',
    load: ClientFunction((loadOptions: any) => {
      let result = treeListData;

      if (loadOptions.filter) {
        const parentIds = loadOptions.filter[0] === 'parentId'
          ? [loadOptions.filter[2]]
          : loadOptions.filter
            .filter((f: any) => Array.isArray(f) && f[0] === 'parentId')
            .map((f: any) => f[2]);

        if (parentIds.length) {
          result = treeListData.filter((item) => parentIds.includes(item.parentId));
        }
      }
      return Promise.resolve(result);
    }, { dependencies: { treeListData } }),
  },
  remoteOperations: {
    filtering: true,
  },
}));