q2-tecton-elements 1.47.0 → 1.48.1-alpha.0

package/dist/test/elements/q2-data-table-test.e2e.js

@@ -406,12 +406,53 @@ describe('q2-data-table', () => {
                 expect(await getCSSProperty(e2ePage, ['q2-data-table', 'td'], 'border-style')).toBe('none');
                 expect(await getCSSProperty(e2ePage, ['q2-data-table', 'td'], 'border-color')).toBe('rgb(0, 0, 0)');
             });
-            it('renders with border when true', async () => {
+            it('renders horizontal row borders when true (original implementation)', async () => {
                 table.setProperty('bordered', true);
                 await e2ePage.waitForChanges();
                 expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tbody tr'], 'border-width')).toBe('0px 0px 1px');
                 expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tbody tr'], 'border-style')).toBe('solid');
                 expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tr'], 'border-color')).toBe('rgb(153, 153, 153)');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'col'], 'border-width')).not.toBe('0px 1px 0px 0px');
+            });
+            it('renders horizontal row borders when set to horizontal', async () => {
+                table.setProperty('bordered', 'horizontal');
+                await e2ePage.waitForChanges();
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tbody tr'], 'border-width')).toBe('0px 0px 1px');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tbody tr'], 'border-style')).toBe('solid');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tr'], 'border-color')).toBe('rgb(153, 153, 153)');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'col'], 'border-width')).not.toBe('0px 1px 0px 0px');
+            });
+            it('renders vertical column borders when set to vertical', async () => {
+                table.setProperty('bordered', 'vertical');
+                await e2ePage.waitForChanges();
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'col'], 'border-width')).toBe('0px 1px 0px 0px');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'col'], 'border-style')).toBe('solid');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'col'], 'border-color')).toBe('rgb(153, 153, 153)');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tbody tr'], 'border-width')).not.toBe('0px 0px 1px');
+            });
+            it('renders with vertical and horizontal borders when set to grid', async () => {
+                table.setProperty('bordered', 'grid');
+                await e2ePage.waitForChanges();
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'col'], 'border-width')).toBe('0px 1px 0px 0px');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'col'], 'border-style')).toBe('solid');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'col'], 'border-color')).toBe('rgb(153, 153, 153)');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tbody tr'], 'border-width')).toBe('0px 0px 1px');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tbody tr'], 'border-style')).toBe('solid');
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tr'], 'border-color')).toBe('rgb(153, 153, 153)');
+            });
+            it('does not render a left-side vertical border on the first column', async () => {
+                table.setProperty('bordered', 'vertical');
+                await e2ePage.waitForChanges();
+                const borderWidth = await getCSSProperty(e2ePage, ['q2-data-table', 'col:first-child'], 'border-width');
+                expect(borderWidth).toBe('0px 1px 0px 0px');
+                expect(borderWidth).not.toBe('0px 0px 0px 1px');
+            });
+            it('does not render a vertical border on the rightmost column', async () => {
+                table.setProperty('bordered', 'vertical');
+                await e2ePage.waitForChanges();
+                const borderWidth = await getCSSProperty(e2ePage, ['q2-data-table', 'col:last-child'], 'border-width');
+                expect(borderWidth).toBe('0px');
+                expect(borderWidth).not.toBe('0px 1px 0px 0px');
             });
         });
         describe('shadowed', () => {
@@ -664,10 +705,14 @@ describe('q2-data-table', () => {
                                 ></q2-checkbox>
                             </th>
                             <th id="header-name">
-                                <div class="header-content" aria-label="Name">Name</div>
+                                <div class="header-content" aria-label="Name">
+                                    <slot name="header-cell-name">Name</slot>
+                                </div>
                             </th>
                             <th id="header-email">
-                                <div class="header-content">Email</div>
+                                <div class="header-content">
+                                    <slot name="header-cell-email">Email</slot>
+                                </div>
                             </th>
                         </tr>
                     </thead>
@@ -719,10 +764,14 @@ describe('q2-data-table', () => {
                         <tr>
                             <th></th>
                             <th id="header-name">
-                                <div class="header-content" aria-label="Name">Name</div>
+                                <div class="header-content" aria-label="Name">
+                                    <slot name="header-cell-name">Name</slot>
+                                </div>
                             </th>
                             <th id="header-email">
-                                <div class="header-content">Email</div>
+                                <div class="header-content">
+                                    <slot name="header-cell-email">Email</slot>
+                                </div>
                             </th>
                         </tr>
                     </thead>
@@ -786,10 +835,14 @@ describe('q2-data-table', () => {
                     <thead>
                         <tr>
                             <th id="header-name">
-                                <div class="header-content" aria-label="Name">Name</div>
+                                <div class="header-content" aria-label="Name">
+                                    <slot name="header-cell-name">Name</slot>
+                                </div>
                             </th>
                             <th id="header-email">
-                                <div class="header-content">Email</div>
+                                <div class="header-content">
+                                    <slot name="header-cell-email">Email</slot>
+                                </div>
                             </th>
                         </tr>
                     </thead>
@@ -856,6 +909,24 @@ describe('q2-data-table', () => {
                 `);
             });
         });
+        describe('striped', () => {
+            beforeEach(async () => {
+                e2ePage = await setup({
+                    html: `<q2-data-table></q2-data-table>`,
+                });
+                table = await e2ePage.find('q2-data-table');
+                table.setProperty('headers', headerData);
+                table.setProperty('rows', rowData);
+                table.setProperty('striped', true);
+                await e2ePage.waitForChanges();
+            });
+            it('sets the background on even-numbered rows', async () => {
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tbody tr#row-2'], 'background-color')).toBe('rgb(242, 242, 242)');
+            });
+            it('maintains transparent background on odd-numbered rows', async () => {
+                expect(await getCSSProperty(e2ePage, ['q2-data-table', 'tbody tr#row-1'], 'background-color')).toBe('rgba(0, 0, 0, 0)');
+            });
+        });
     });
     describe('Features', () => {
         describe('line clamping', () => {
@@ -1010,10 +1081,14 @@ describe('q2-data-table', () => {
                     <thead>
                         <tr>
                             <th id="header-name">
-                                <div class="header-content" aria-label="Name">Name</div>
+                                <div class="header-content" aria-label="Name">
+                                    <slot name="header-cell-name">Name</slot>
+                                </div>
                             </th>
                             <th id="header-email">
-                                <div class="header-content">Email</div>
+                                <div class="header-content">
+                                    <slot name="header-cell-email">Email</slot>
+                                </div>
                             </th>
                             <th>
                                 <span class="sr">
@@ -1125,10 +1200,14 @@ describe('q2-data-table', () => {
                     <thead>
                         <tr>
                             <th id="header-name">
-                                <div class="header-content" aria-label="Name">Name</div>
+                                <div class="header-content" aria-label="Name">
+                                    <slot name="header-cell-name">Name</slot>
+                                </div>
                             </th>
                             <th id="header-email">
-                                <div class="header-content">Email</div>
+                                <div class="header-content">
+                                    <slot name="header-cell-email">Email</slot>
+                                </div>
                             </th>
                             <th id="toggle">
                                 <span class="sr">
@@ -1189,6 +1268,23 @@ describe('q2-data-table', () => {
                 `);
             });
         });
+        describe('row and header cell slots', () => {
+            beforeEach(async () => {
+                e2ePage = await setup({
+                    html: `<q2-data-table></q2-data-table>`,
+                });
+                table = await e2ePage.find('q2-data-table');
+                table.setProperty('headers', headerData);
+                table.setProperty('rows', rowData);
+                await e2ePage.waitForChanges();
+            });
+            it('renders row slots for custom cell content', async () => {
+                expect(await e2ePage.find('q2-data-table >>> tr td slot')).toBeTruthy();
+            });
+            it('renders header slots for custom header content', async () => {
+                expect(await e2ePage.find('q2-data-table >>> th div.header-content slot')).toBeTruthy();
+            });
+        });
     });
     describe('Unit', () => {
         let dataTable;