Skip to content

Commit 41a91bd

Browse files
committed
chore(html): reuse helper in tests
1 parent a18f185 commit 41a91bd

29 files changed

+4541
-6062
lines changed

packages/html/src/grid/grid-header.spec.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ import { classNames } from '../misc';
22

33
const className = `k-grid-header`;
44

5-
export type KendoGridHeaderProps = {
6-
virtualScrolling?: boolean;
7-
};
8-
95
export const GridHeader = (
106
props: React.HTMLAttributes<HTMLDivElement>
117
) => (

packages/html/src/grid/tests/grid-adaptive-pager.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Pager } from '../../pager';
1+
import { Grid, GridPager } from '../../grid';
22

33

44
export default () =>(
@@ -11,9 +11,10 @@ export default () =>(
1111
<div className="k-pane">
1212
<div className="k-view k-widget">
1313
<div className="k-stretched-view k-content">
14-
<div className="k-grid k-grid-md k-grid-display-block k-grid-mobile k-editable">
15-
<Pager className="k-grid-pager" adaptive info={false} pageSizes={false} />
16-
</div>
14+
<Grid className="k-grid-display-block k-grid-mobile k-editable" pager={(
15+
<GridPager className="k-grid-pager" adaptive info={false} pageSizes={false} />
16+
)}>
17+
</Grid>
1718
</div>
1819
</div>
1920
</div>
@@ -26,9 +27,10 @@ export default () =>(
2627
<div className="k-pane">
2728
<div className="k-view k-widget">
2829
<div className="k-stretched-view k-content">
29-
<div className="k-grid k-grid-md k-grid-display-block k-grid-mobile k-editable">
30-
<Pager className="k-grid-pager" adaptive info={false} pageSizes={false} dir="rtl" />
31-
</div>
30+
<Grid className="k-grid-display-block k-grid-mobile k-editable" pager={(
31+
<GridPager className="k-grid-pager" adaptive info={false} pageSizes={false} dir="rtl" />
32+
)}>
33+
</Grid>
3234
</div>
3335
</div>
3436
</div>

packages/html/src/grid/tests/grid-adaptive-search.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Button } from '../../button';
22
import { Searchbox } from '../../searchbox';
3-
import { Toolbar } from '../../toolbar';
3+
import { Grid, GridToolbar } from '../../grid';
44

55

66
export default () =>(
@@ -10,12 +10,13 @@ export default () =>(
1010
<div className="k-pane">
1111
<div className="k-view k-widget">
1212
<div className="k-stretched-view k-content">
13-
<div id="grid" className="k-grid k-grid-md k-grid-display-block k-grid-mobile">
14-
<Toolbar className="k-grid-toolbar">
13+
<Grid className="k-grid-display-block k-grid-mobile" toolbar={(
14+
<GridToolbar>
1515
<Button className="k-grid-pdf" icon="file-pdf">Export to PDF</Button>
1616
<Searchbox className="k-grid-search" placeholder="Search..." />
17-
</Toolbar>
18-
</div>
17+
</GridToolbar>
18+
)}>
19+
</Grid>
1920
</div>
2021
</div>
2122
</div>
@@ -26,12 +27,13 @@ export default () =>(
2627
<div className="k-pane">
2728
<div className="k-view k-widget">
2829
<div className="k-stretched-view k-content">
29-
<div id="grid" className="k-grid k-grid-md k-grid-display-block k-grid-mobile">
30-
<Toolbar className="k-grid-toolbar">
30+
<Grid className="k-grid-display-block k-grid-mobile" toolbar={(
31+
<GridToolbar>
3132
<Button className="k-grid-pdf" icon="file-pdf">Export to PDF</Button>
3233
<Searchbox className="k-grid-search" placeholder="Search..." />
33-
</Toolbar>
34-
</div>
34+
</GridToolbar>
35+
)}>
36+
</Grid>
3537
</div>
3638
</div>
3739
</div>

packages/html/src/grid/tests/grid-angular.tsx

+154-237
Large diffs are not rendered by default.

packages/html/src/grid/tests/grid-grouping-detail-template.tsx

+383-375
Large diffs are not rendered by default.

packages/html/src/grid/tests/grid-grouping.tsx

+195-293
Large diffs are not rendered by default.

packages/html/src/grid/tests/grid-hierarchy.tsx

+82-93
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,97 @@
11
import { Icon } from '../../icon';
2-
2+
import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
3+
import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
34

45
export default () =>(
56
<>
67
<div id="test-area" className="k-d-grid k-grid-cols-1">
78

89
<section>
9-
<div className="k-grid k-grid-md k-grid-no-scrollbar" style={{ width: "600px", height: "400px" }}>
10-
<div className="k-grid-header">
10+
11+
<Grid className="k-grid-no-scrollbar" style={{ width: "600px", height: "400px" }}>
12+
<GridHeader>
1113
<div className="k-grid-header-wrap">
12-
<table className="k-table k-table-md k-grid-header-table">
14+
<GridHeaderTable>
1315
<colgroup>
1416
<col className="k-hierarchy-col" /><col />
1517
</colgroup>
16-
<thead className="k-table-thead">
17-
<tr className="k-table-row">
18-
<th className="k-table-th k-header k-hierarchy-cell">
19-
</th>
20-
<th className="k-table-th k-header">
21-
<span className="k-cell-inner">
22-
<span className="k-link">
23-
<span className="k-column-title">Title</span>
24-
</span>
25-
</span>
26-
</th>
27-
</tr>
28-
</thead>
29-
</table>
18+
<TableThead>
19+
<TableRow>
20+
<GridHeaderCell className="k-hierarchy-cell"></GridHeaderCell>
21+
<GridHeaderCell columnTitle="Title"></GridHeaderCell>
22+
</TableRow>
23+
</TableThead>
24+
</GridHeaderTable>
3025
</div>
31-
</div>
32-
<div className="k-grid-content">
33-
<table className="k-table k-table-md k-grid-table">
34-
<colgroup>
35-
<col className="k-hierarchy-col" /><col />
36-
</colgroup>
37-
<tbody className="k-table-tbody">
38-
<tr className="k-table-row k-master-row">
39-
<td className="k-table-td k-hierarchy-cell">
40-
<Icon icon="caret-alt-right" />
41-
</td>
42-
<td className="k-table-td">1</td>
43-
</tr>
44-
<tr className="k-table-row k-table-alt-row k-alt k-master-row k-expanded">
45-
<td className="k-table-td k-hierarchy-cell">
46-
<Icon icon="caret-alt-down" />
47-
</td>
48-
<td className="k-table-td">2</td>
49-
</tr>
50-
<tr className="k-table-row k-detail-row">
51-
<td className="k-table-td k-hierarchy-cell"></td>
52-
<td className="k-table-td k-detail-cell" colSpan={1}>
53-
{/* hierarchy child content */}
54-
<div className="k-grid k-grid-md k-grid-no-scrollbar" style={{ height: "200px" }}>
55-
<div className="k-grid-header">
56-
<div className="k-grid-header-wrap">
57-
<table className="k-table k-table-md k-grid-header-table">
58-
<colgroup>
59-
<col /><col />
60-
</colgroup>
61-
<thead className="k-table-thead">
62-
<tr className="k-table-row">
63-
<th className="k-table-th k-header">
64-
<span className="k-cell-inner">
65-
<span className="k-link">
66-
<span className="k-column-title">Title</span>
67-
</span>
68-
</span>
69-
</th>
70-
<th className="k-table-th k-header">
71-
<span className="k-cell-inner">
72-
<span className="k-link">
73-
<span className="k-column-title">Title</span>
74-
</span>
75-
</span>
76-
</th>
77-
</tr>
78-
</thead>
79-
</table>
80-
</div>
81-
</div>
82-
<div className="k-grid-content">
83-
<table className="k-table k-table-md k-grid-table">
84-
<colgroup>
85-
<col /><col />
86-
</colgroup>
87-
<tbody className="k-table-tbody">
88-
<tr className="k-table-row k-master-row">
89-
<td className="k-table-td">Text</td>
90-
<td className="k-table-td">Text</td>
91-
</tr>
92-
<tr className="k-table-row k-table-alt-row k-alt k-master-row">
93-
<td className="k-table-td">Text</td>
94-
<td className="k-table-td">Text</td>
95-
</tr>
96-
</tbody>
97-
</table>
98-
</div>
99-
</div>
100-
</td>
101-
</tr>
102-
</tbody>
103-
</table>
104-
</div>
105-
</div>
26+
</GridHeader>
27+
<GridContainer>
28+
<GridContent>
29+
<GridTable>
30+
<colgroup>
31+
<col className="k-hierarchy-col" /><col />
32+
</colgroup>
33+
<TableTbody>
34+
<TableRow className="k-master-row">
35+
<TableTd className="k-hierarchy-cell">
36+
<Icon icon="caret-alt-right"></Icon>
37+
</TableTd>
38+
<TableTd>1</TableTd>
39+
</TableRow>
40+
<TableRow alt className="k-master-row k-expanded">
41+
<TableTd className="k-hierarchy-cell">
42+
<Icon icon="caret-alt-down"></Icon>
43+
</TableTd>
44+
<TableTd>2</TableTd>
45+
</TableRow>
46+
<TableRow className="k-detail-row">
47+
<TableTd className="k-hierarchy-cell"></TableTd>
48+
<TableTd className="k-detail-cell" colspan={1}>
49+
{/* hierarchy child content */}
50+
<Grid className="k-grid-no-scrollbar" style={{ height: "200px" }}>
51+
<GridHeader>
52+
<div className="k-grid-header-wrap">
53+
<GridHeaderTable>
54+
<colgroup>
55+
<col /><col />
56+
</colgroup>
57+
<TableThead>
58+
<TableRow>
59+
<GridHeaderCell columnTitle="Title"></GridHeaderCell>
60+
<GridHeaderCell columnTitle="Title"></GridHeaderCell>
61+
</TableRow>
62+
</TableThead>
63+
</GridHeaderTable>
64+
</div>
65+
</GridHeader>
66+
<GridContainer>
67+
<GridContent>
68+
<GridTable>
69+
<colgroup>
70+
<col />
71+
<col />
72+
</colgroup>
73+
<TableTbody>
74+
<TableRow className="k-master-row">
75+
<TableTd>Text</TableTd>
76+
<TableTd>Text</TableTd>
77+
</TableRow>
78+
<TableRow alt className="k-master-row">
79+
<TableTd>Text</TableTd>
80+
<TableTd>Text</TableTd>
81+
</TableRow>
82+
</TableTbody>
83+
</GridTable>
84+
</GridContent>
85+
</GridContainer>
86+
</Grid>
87+
</TableTd>
88+
</TableRow>
89+
</TableTbody>
90+
</GridTable>
91+
</GridContent>
92+
</GridContainer>
93+
</Grid>
94+
10695
</section>
10796

10897
</div>

0 commit comments

Comments
 (0)