From 9b52370c1c6c2f36ec42cb96da6674ffb0add5ae Mon Sep 17 00:00:00 2001
From: Emil Petrov <emil.petrov@progress.com>
Date: Thu, 1 Feb 2024 15:01:37 +0200
Subject: [PATCH] test(grid): extract sticky and locked column state tests

---
 .../grid/tests/grid-locked-column-states.tsx  | 140 ++++++++++++++++++
 .../grid/tests/grid-sticky-column-states.tsx  | 123 +++++++++++++++
 2 files changed, 263 insertions(+)
 create mode 100644 packages/html/src/grid/tests/grid-locked-column-states.tsx
 create mode 100644 packages/html/src/grid/tests/grid-sticky-column-states.tsx

diff --git a/packages/html/src/grid/tests/grid-locked-column-states.tsx b/packages/html/src/grid/tests/grid-locked-column-states.tsx
new file mode 100644
index 00000000000..9f1114c7848
--- /dev/null
+++ b/packages/html/src/grid/tests/grid-locked-column-states.tsx
@@ -0,0 +1,140 @@
+import { GridContainer, GridContent, GridHeader, GridHeaderCell, GridHeaderTable, GridTable, GridWithLockedColumns } from '../../grid';
+import { TableThead, TableRow, TableTbody, TableTd } from '../../table';
+
+export default () => (
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+            <GridWithLockedColumns>
+                <GridHeader>
+                    <div className="k-grid-header-locked" style={{ width: "400px" }}>
+                        <GridHeaderTable>
+                            <colgroup>
+                                <col style={{ width: "150px" }} />
+                                <col style={{ width: "300px" }} />
+                            </colgroup>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell menu="column" columnTitle="Order ID"></GridHeaderCell>
+                                    <GridHeaderCell menu="column" columnTitle="Ship Name"></GridHeaderCell>
+                                </TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
+                    </div>
+                    <div className="k-grid-header-wrap" style={{ width: "581px" }}>
+                        <GridHeaderTable>
+                            <colgroup>
+                                <col style={{ width: "300px" }} />
+                                <col style={{ width: "300px" }} />
+                                <col style={{ width: "400px" }} />
+                            </colgroup>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell menu="column" columnTitle="Ship Country"></GridHeaderCell>
+                                    <GridHeaderCell menu="column" columnTitle="Ship City"></GridHeaderCell>
+                                    <GridHeaderCell menu="column" columnTitle="Ship Address"></GridHeaderCell>
+                                </TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
+                    </div>
+                </GridHeader>
+                <GridContainer>
+                    <div className="k-grid-content-locked" style={{ width: "400px", height: "303px" }}>
+                        <GridTable>
+                            <colgroup>
+                                <col style={{ width: "150px" }} />
+                                <col style={{ width: "300px" }} />
+                            </colgroup>
+                            <TableTbody>
+                                <TableRow>
+                                    <TableTd>10248</TableTd>
+                                    <TableTd>Vins et alcools Chevalier</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt>
+                                    <TableTd>10249</TableTd>
+                                    <TableTd>Toms Spezialitäten</TableTd>
+                                </TableRow>
+                                <TableRow>
+                                    <TableTd>10250</TableTd>
+                                    <TableTd>Hanari Carnes</TableTd>
+                                </TableRow>
+                                <TableRow hover className="k-alt" alt>
+                                    <TableTd>10251</TableTd>
+                                    <TableTd>Victuailles en stock (Hover)</TableTd>
+                                </TableRow>
+                                <TableRow selected >
+                                    <TableTd>10252</TableTd>
+                                    <TableTd>Suprêmes délices (Selected)</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt hover selected>
+                                    <TableTd>10253</TableTd>
+                                    <TableTd>Toms (Selected + Hover)</TableTd>
+                                </TableRow>
+                                <TableRow>
+                                    <TableTd>10254</TableTd>
+                                    <TableTd>Hanari Carnes</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt>
+                                    <TableTd>10255</TableTd>
+                                    <TableTd>Victuailles en stock</TableTd>
+                                </TableRow>
+                            </TableTbody>
+                        </GridTable>
+                    </div>
+                    <GridContent className="k-virtual-content" style={{ width: "605px", height: "320px" }}>
+                        <GridTable>
+                            <colgroup>
+                                <col style={{ width: "300px" }} />
+                                <col style={{ width: "300px" }} />
+                                <col style={{ width: "400px" }} />
+                            </colgroup>
+                            <TableTbody>
+                                <TableRow>
+                                    <TableTd>France</TableTd>
+                                    <TableTd>Reims</TableTd>
+                                    <TableTd>59 rue de l&apos;Abbaye</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt>
+                                    <TableTd>Germany</TableTd>
+                                    <TableTd>Münster</TableTd>
+                                    <TableTd>Luisenstr. 48</TableTd>
+                                </TableRow>
+                                <TableRow>
+                                    <TableTd>Brazil</TableTd>
+                                    <TableTd>Rio de Janeiro</TableTd>
+                                    <TableTd>Rua do Paço, 67</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt hover>
+                                    <TableTd>France</TableTd>
+                                    <TableTd>Lyon</TableTd>
+                                    <TableTd>2, rue du Commerce</TableTd>
+                                </TableRow>
+                                <TableRow selected>
+                                    <TableTd>Belgium</TableTd>
+                                    <TableTd>Charleroi</TableTd>
+                                    <TableTd>Boulevard Tirou, 255</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt hover selected>
+                                    <TableTd>Germany</TableTd>
+                                    <TableTd>Münster</TableTd>
+                                    <TableTd>Luisenstr. 48</TableTd>
+                                </TableRow>
+                                <TableRow>
+                                    <TableTd>Brazil</TableTd>
+                                    <TableTd>Rio de Janeiro</TableTd>
+                                    <TableTd>Rua do Paço, 67</TableTd>
+                                </TableRow>
+                                <TableRow className="k-alt" alt>
+                                    <TableTd>France</TableTd>
+                                    <TableTd>Lyon</TableTd>
+                                    <TableTd>2, rue du Commerce</TableTd>
+                                </TableRow>
+                            </TableTbody>
+                        </GridTable>
+                    </GridContent>
+                </GridContainer>
+            </GridWithLockedColumns>
+        </div>
+
+    </>
+
+);
diff --git a/packages/html/src/grid/tests/grid-sticky-column-states.tsx b/packages/html/src/grid/tests/grid-sticky-column-states.tsx
new file mode 100644
index 00000000000..ecd979c6669
--- /dev/null
+++ b/packages/html/src/grid/tests/grid-sticky-column-states.tsx
@@ -0,0 +1,123 @@
+import { GridContainer, GridContent, GridHeader, GridHeaderCell, GridHeaderTable, GridTable, GridWithStickyColumns } from '../../grid';
+import { TableThead, TableRow, TableTbody, TableTd } from '../../table';
+
+export default () => (
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+            <GridWithStickyColumns>
+                <GridHeader>
+                    <div className="k-grid-header-wrap">
+                        <GridHeaderTable style={{ width: "1100px" }}>
+                            <colgroup>
+                                <col style={{ width: "250px" }} />
+                                <col style={{ width: "150px" }} />
+                                <col style={{ width: "200px" }} />
+                                <col style={{ width: "250px" }} />
+                                <col style={{ width: "250px" }} />
+                            </colgroup>
+                            <TableThead>
+                                <TableRow>
+                                    <GridHeaderCell className="k-grid-content-sticky" rowspan={1} colspan={1} columnTitle="Product Name" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Units In Stock"></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Price"></GridHeaderCell>
+                                    <GridHeaderCell className="k-grid-content-sticky" rowspan={1} colspan={1} columnTitle="Units on Order" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}></GridHeaderCell>
+                                    <GridHeaderCell rowspan={1} colspan={1} columnTitle="Reorder Level"></GridHeaderCell>
+                                </TableRow>
+                            </TableThead>
+                        </GridHeaderTable>
+                    </div>
+                </GridHeader>
+                <GridContainer>
+                    <GridContent className="k-virtual-content">
+                        <div style={{ position: "relative" }}>
+                            <GridTable style={{ width: "1100px" }}>
+                                <colgroup>
+                                    <col width="250px" />
+                                    <col width="150px" />
+                                    <col width="200px" />
+                                    <col width="250px" />
+                                    <col width="250px" />
+                                </colgroup>
+                                <TableTbody>
+                                    <TableRow className="k-master-row">
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chai</TableTd>
+                                        <TableTd colspan={1}>39</TableTd>
+                                        <TableTd colspan={1}>$18.00</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd colspan={1}>10</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-master-row k-alt" role="row" alt>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chang</TableTd>
+                                        <TableTd colspan={1}>17</TableTd>
+                                        <TableTd colspan={1}>$19.00</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>40</TableTd>
+                                        <TableTd colspan={1}>25</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-master-row" role="row" selected>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Aniseed Syrup (Selected)</TableTd>
+                                        <TableTd colspan={1}>13</TableTd>
+                                        <TableTd colspan={1}>$10.00</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>70</TableTd>
+                                        <TableTd colspan={1}>25</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-master-row k-alt" role="row" alt selected>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef Anton&apos;s (Alt Selected)</TableTd>
+                                        <TableTd colspan={1}>53</TableTd>
+                                        <TableTd colspan={1}>$22.00</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd colspan={1}>0</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-master-row" role="row" selected hover>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef Anton&apos;s (Selected + Hover) </TableTd>
+                                        <TableTd colspan={1}>0</TableTd>
+                                        <TableTd colspan={1}>$21.35</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd colspan={1}>0</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-master-row k-alt" role="row" alt selected hover>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Grandma&apos;s (Alt Selected + Hover) </TableTd>
+                                        <TableTd colspan={1}>120</TableTd>
+                                        <TableTd colspan={1}>$25.00</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd colspan={1}>25</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-master-row" role="row">
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Uncle Bob&apos;s Organic Dried Pears</TableTd>
+                                        <TableTd colspan={1}>15</TableTd>
+                                        <TableTd colspan={1}>$30.00</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd colspan={1}>10</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-master-row k-alt" role="row" alt>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Northwoods Cranberry Sauce</TableTd>
+                                        <TableTd colspan={1}>6</TableTd>
+                                        <TableTd colspan={1}>$40.00</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd colspan={1}>0</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-master-row" role="row">
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Mishi Kobe Niku</TableTd>
+                                        <TableTd colspan={1}>29</TableTd>
+                                        <TableTd colspan={1}>97</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd colspan={1}>0</TableTd>
+                                    </TableRow>
+                                    <TableRow className="k-master-row k-alt" role="row" alt>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Ikura</TableTd>
+                                        <TableTd colspan={1}>31</TableTd>
+                                        <TableTd colspan={1}>$31.00</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd colspan={1}>0</TableTd>
+                                    </TableRow>
+                                </TableTbody>
+                            </GridTable>
+                        </div>
+                        <div className="k-height-container"><div></div></div>
+                    </GridContent>
+                </GridContainer>
+            </GridWithStickyColumns>
+        </div>
+
+    </>
+
+);