Skip to content

Commit 9d09e76

Browse files
Lukas742Lukas742
committed
add test
1 parent fa0e1a4 commit 9d09e76

File tree

1 file changed

+176
-27
lines changed

1 file changed

+176
-27
lines changed

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx‎

Lines changed: 176 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,26 @@ const generateMoreData = (count) => {
9090
}));
9191
};
9292

93+
function checkColumnWidthWithTolerance(
94+
selector: string,
95+
expectedGrow: number,
96+
expectedSmart: number,
97+
isGrow: boolean,
98+
tolerance = 0.5,
99+
) {
100+
cy.log('checkColumnWidthWithTolerance');
101+
cy.get(selector)
102+
.invoke('outerWidth')
103+
.should((width) => {
104+
const expected = isGrow ? expectedGrow : expectedSmart;
105+
if (isGrow) {
106+
expect(width).to.equal(expected);
107+
} else {
108+
expect(width).to.be.within(expected - tolerance, expected + tolerance);
109+
}
110+
});
111+
}
112+
93113
type PropTypes = AnalyticalTablePropTypes['onRowSelect'];
94114

95115
const columns = [
@@ -1225,40 +1245,169 @@ describe('AnalyticalTable', () => {
12251245
);
12261246
});
12271247

1228-
it('Grow Mode: maxWidth', () => {
1229-
const TableComp = (props) => {
1248+
[AnalyticalTableScaleWidthMode.Grow, AnalyticalTableScaleWidthMode.Smart].forEach((scaleWidthMode) => {
1249+
it(`scaleWidthMode: ${scaleWidthMode}`, () => {
1250+
const isGrow = scaleWidthMode === AnalyticalTableScaleWidthMode.Grow;
12301251
const headerText =
12311252
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum aliquet arcu, ac facilisis tellus blandit nec. Etiam justo erat, dictum a ex ac, fermentum fringilla metus. Donec nibh magna, pellentesque ut odio id, feugiat vulputate nibh. In feugiat tincidunt quam, vitae sodales metus lobortis pellentesque. Donec eget rhoncus ante, in posuere nulla. Proin viverra, turpis id fermentum scelerisque, felis ipsum pharetra tortor, sed aliquet mi ex eu nisl. Praesent neque nunc, suscipit non interdum vitae, consequat sit amet velit. Morbi commodo dapibus lobortis. Vestibulum auctor velit sit amet semper egestas.';
1232-
const [columns, setColumns] = useState<{ Header: string; accessor: string; maxWidth?: number }[]>([
1253+
const initialColumns = [
12331254
{
12341255
Header: headerText,
12351256
accessor: 'name',
12361257
},
1237-
]);
1238-
return (
1239-
<>
1240-
<Button
1241-
onClick={() => {
1242-
setColumns([
1243-
{
1244-
Header: headerText,
1245-
accessor: 'name',
1246-
maxWidth: Infinity,
1247-
},
1248-
]);
1249-
}}
1250-
>
1251-
Custom maxWidth
1252-
</Button>
1253-
<AnalyticalTable {...props} columns={columns} scaleWidthMode={AnalyticalTableScaleWidthMode.Grow} />
1254-
</>
1255-
);
1256-
};
1257-
cy.mount(<TableComp data={data} />);
1258-
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 700);
1258+
];
1259+
const longDataEntry = { long: headerText };
1260+
const TableComp = (props: AnalyticalTablePropTypes) => {
1261+
const { columns } = props;
1262+
const [_columns, setColumns] = useState<{ Header: string; accessor: string; maxWidth?: number }[]>(
1263+
columns ?? initialColumns,
1264+
);
1265+
return (
1266+
<>
1267+
<Button
1268+
onClick={() => {
1269+
setColumns([
1270+
{
1271+
Header: headerText,
1272+
accessor: 'name',
1273+
maxWidth: Infinity,
1274+
},
1275+
]);
1276+
}}
1277+
>
1278+
Infinity
1279+
</Button>
1280+
<Button
1281+
onClick={() => {
1282+
setColumns([
1283+
{
1284+
Header: headerText,
1285+
accessor: 'name',
1286+
maxWidth: 100,
1287+
},
1288+
]);
1289+
}}
1290+
>
1291+
100
1292+
</Button>
1293+
<AnalyticalTable {...props} columns={_columns} scaleWidthMode={scaleWidthMode} />
1294+
</>
1295+
);
1296+
};
1297+
1298+
// additional fonts need to be prefetched in Cypress, otherwise it leads to flakiness
1299+
cy.window()
1300+
.then((win) => {
1301+
return Promise.all([
1302+
win.document.fonts.load('16px "72-Bold"'),
1303+
win.document.fonts.load('16px "72-Boldfull"'),
1304+
]);
1305+
})
1306+
.then(() => {
1307+
cy.mount(<TableComp data={data} />);
1308+
});
1309+
1310+
cy.get('[data-column-id="name"]')
1311+
.invoke('outerWidth')
1312+
.should('equal', isGrow ? 700 : 4120);
12591313

1260-
cy.findByText('Custom maxWidth').click();
1261-
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 4120);
1314+
cy.findByText('Infinity').click();
1315+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 4120);
1316+
1317+
cy.findByText('100').click();
1318+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 100);
1319+
1320+
const cols = [...initialColumns, { Header: 'Short Width', accessor: 'age' }];
1321+
cy.mount(<TableComp columns={cols} data={data} />);
1322+
cy.get('[data-column-id="name"]')
1323+
.invoke('outerWidth')
1324+
.should('equal', isGrow ? 700 : 4120);
1325+
cy.get('[data-column-id="age"]')
1326+
.invoke('outerWidth')
1327+
.should('equal', isGrow ? 700 : 97);
1328+
1329+
const cols2 = [
1330+
{ ...initialColumns[0], maxWidth: Infinity },
1331+
{ Header: 'Short Width', accessor: 'age' },
1332+
];
1333+
cy.mount(<TableComp columns={cols2} data={data} />);
1334+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 4120);
1335+
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 97);
1336+
1337+
const cols3 = [
1338+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1339+
{ Header: 'Short Width', accessor: 'age' },
1340+
];
1341+
cy.mount(<TableComp columns={cols3} data={data} />);
1342+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1343+
cy.get('[data-column-id="age"]')
1344+
.invoke('outerWidth')
1345+
.should('equal', isGrow ? 700 : 1704);
1346+
1347+
const cols4 = [
1348+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1349+
{ Header: 'Short Width', accessor: 'age' },
1350+
{ Header: 'Spread', accessor: 'friend.name', maxWidth: Infinity },
1351+
];
1352+
cy.mount(<TableComp columns={cols4} data={data} />);
1353+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1354+
cy.get('[data-column-id="age"]')
1355+
.invoke('outerWidth')
1356+
.should('equal', isGrow ? 700 : 868);
1357+
cy.get('[data-column-id="friend.name"]')
1358+
.invoke('outerWidth')
1359+
.should('equal', isGrow ? 1004 : 836);
1360+
1361+
const cols5 = [
1362+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1363+
{ Header: 'Short Width', accessor: 'age' },
1364+
{ Header: 'Spread', accessor: 'friend.name', maxWidth: Infinity },
1365+
{ Header: 'Long Content', accessor: 'long' },
1366+
];
1367+
cy.mount(<TableComp columns={cols5} data={[...data, longDataEntry]} />);
1368+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1369+
checkColumnWidthWithTolerance('[data-column-id="age"]', 518, 356.0625, isGrow);
1370+
checkColumnWidthWithTolerance('[data-column-id="friend.name"]', 486, 324.0625, isGrow);
1371+
checkColumnWidthWithTolerance('[data-column-id="long"]', 700, 1023.8593139648438, isGrow);
1372+
1373+
const cols6 = [
1374+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1375+
{ Header: 'Short Width', accessor: 'age' },
1376+
{ Header: 'Spread', accessor: 'friend.name', maxWidth: Infinity },
1377+
{ Header: 'Long Content', accessor: 'long', maxWidth: Infinity },
1378+
];
1379+
cy.mount(<TableComp columns={cols6} data={[...data, longDataEntry]} />);
1380+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1381+
checkColumnWidthWithTolerance('[data-column-id="age"]', 97, 356.0625, isGrow);
1382+
checkColumnWidthWithTolerance('[data-column-id="friend.name"]', 65, 324.0625, isGrow);
1383+
checkColumnWidthWithTolerance('[data-column-id="long"]', 3824, 1023.8593139648438, isGrow);
1384+
1385+
const cols7 = [
1386+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1387+
{ Header: 'Short Width', accessor: 'age', minWidth: 400 },
1388+
{ Header: 'Long Content', accessor: 'long', maxWidth: Infinity },
1389+
];
1390+
cy.mount(<TableComp columns={cols7} data={[...data, longDataEntry]} />);
1391+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1392+
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 400);
1393+
cy.get('[data-column-id="long"]')
1394+
.invoke('outerWidth')
1395+
.should('equal', isGrow ? 3824 : 1304);
1396+
1397+
const cols8 = [
1398+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1399+
{ Header: 'Spread', accessor: 'friend.name' },
1400+
{ Header: 'Short Width', accessor: 'age', minWidth: 400 },
1401+
];
1402+
cy.mount(<TableComp columns={cols8} data={data} />);
1403+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1404+
cy.get('[data-column-id="friend.name"]')
1405+
.invoke('outerWidth')
1406+
.should('equal', isGrow ? 700 : 1304);
1407+
cy.get('[data-column-id="age"]')
1408+
.invoke('outerWidth')
1409+
.should('equal', isGrow ? 1004 : 400);
1410+
});
12621411
});
12631412

12641413
it('Column Scaling: programatically change cols', () => {

0 commit comments

Comments
 (0)