Skip to content

Commit 819a75c

Browse files
sdvgsdvg
committed
Add E2E tests
Refs: #1834
1 parent 62ecd44 commit 819a75c

File tree

4 files changed

+216
-8
lines changed

4 files changed

+216
-8
lines changed

‎packages/components/src/components/table-stateless/table-settings.e2e.ts‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import { expect } from '@playwright/test';
2+
import { test } from '@stencil/playwright';
3+
import type { TableHeaderCellsPropType } from '../../schema';
4+
5+
const DATA = [
6+
{ id: '1001', name: 'John', age: 30 },
7+
{ id: '1002', name: 'Jane', age: 25 },
8+
{ id: '1003', name: 'Bob', age: 35 },
9+
];
10+
11+
const HEADERS: TableHeaderCellsPropType = {
12+
horizontal: [
13+
[
14+
{ key: 'id', label: 'ID' },
15+
{ key: 'name', label: 'Name' },
16+
{ key: 'age', label: 'Age' },
17+
],
18+
],
19+
};
20+
21+
test.describe('kol-table-settings', () => {
22+
test.beforeEach(async ({ page }) => {
23+
await page.setContent(`<kol-table-stateless
24+
_label="Table with Settings"
25+
_header-cells='${JSON.stringify(HEADERS)}'
26+
_data='${JSON.stringify(DATA)}'
27+
/>`);
28+
await page.waitForChanges();
29+
});
30+
31+
test.describe('Basic Settings Popover Tests', () => {
32+
test('it opens the settings popover when clicking the settings button', async ({ page }) => {
33+
const settingsButton = page.getByTestId('popover-button').locator('button');
34+
await settingsButton.click();
35+
const popover = page.getByTestId('popover-content');
36+
await expect(popover).toBeVisible();
37+
});
38+
39+
test('it closes the popover when clicking the cancel button', async ({ page }) => {
40+
const settingsButton = page.getByTestId('popover-button').locator('button');
41+
await settingsButton.click();
42+
const cancelButton = page.getByTestId('table-settings-cancel');
43+
await cancelButton.click();
44+
const popover = page.getByTestId('popover-content');
45+
await expect(popover).not.toBeVisible();
46+
});
47+
48+
test('it persists settings after closing and reopening the popover', async ({ page }) => {
49+
const settingsButton = page.getByTestId('popover-button').locator('button');
50+
await settingsButton.click();
51+
52+
// Hide the name column
53+
const nameCheckbox = page.getByRole('checkbox', { name: 'Name' });
54+
await nameCheckbox.click();
55+
56+
// Apply changes
57+
const applyButton = page.getByTestId('table-settings-apply');
58+
await applyButton.click();
59+
60+
// Reopen settings
61+
await settingsButton.click();
62+
63+
// Verify name column is still hidden
64+
await expect(nameCheckbox).not.toBeChecked();
65+
});
66+
});
67+
68+
test.describe('Column Visibility Management', () => {
69+
test('it lists all columns in the settings', async ({ page }) => {
70+
const settingsButton = page.getByTestId('popover-button').locator('button');
71+
await settingsButton.click();
72+
73+
const columnLabels = page.locator('.kol-table-settings__column > span');
74+
await expect(columnLabels).toHaveText(['ID', 'Name', 'Age']);
75+
});
76+
77+
test('it toggles visibility of individual columns', async ({ page }) => {
78+
const settingsButton = page.getByTestId('popover-button').locator('button');
79+
await settingsButton.click();
80+
81+
const nameCheckbox = page.getByRole('checkbox', { name: 'Name' });
82+
await nameCheckbox.click();
83+
84+
const applyButton = page.getByTestId('table-settings-apply');
85+
await applyButton.click();
86+
87+
// Verify name column is hidden in the table
88+
const nameColumn = page.locator('kol-table-stateless-wc th').filter({ hasText: 'Name' });
89+
await expect(nameColumn).not.toBeVisible();
90+
});
91+
92+
test('it shows error message when all columns are hidden', async ({ page }) => {
93+
const settingsButton = page.getByTestId('popover-button').locator('button');
94+
await settingsButton.click();
95+
await page.waitForChanges();
96+
97+
// Hide all columns
98+
const checkboxes = page.getByRole('checkbox');
99+
for (const checkbox of await checkboxes.all()) {
100+
await checkbox.click();
101+
}
102+
103+
const applyButton = page.getByTestId('table-settings-apply');
104+
await applyButton.click();
105+
106+
const errorMessage = page.locator('kol-table-settings-wc kol-alert-wc');
107+
await expect(errorMessage).toBeVisible();
108+
});
109+
110+
test('it removes error message when at least one column is visible', async ({ page }) => {
111+
const settingsButton = page.getByTestId('popover-button').locator('button');
112+
await settingsButton.click();
113+
await page.waitForChanges();
114+
115+
// Hide all columns
116+
const checkboxes = page.getByRole('checkbox');
117+
for (const checkbox of await checkboxes.all()) {
118+
await checkbox.click();
119+
}
120+
121+
const applyButton = page.getByTestId('table-settings-apply');
122+
await applyButton.click();
123+
124+
// Show one column
125+
await checkboxes.first().click();
126+
await applyButton.click();
127+
128+
const errorMessage = page.locator('kol-table-settings-wc kol-alert-wc');
129+
await expect(errorMessage).not.toBeVisible();
130+
});
131+
});
132+
133+
test.describe('Column Width Management', () => {
134+
test('it accepts valid width values', async ({ page }) => {
135+
const settingsButton = page.getByTestId('popover-button').locator('button');
136+
await settingsButton.click();
137+
138+
const idWidthInput = page.getByRole('spinbutton', { name: 'ID' });
139+
await idWidthInput.fill('50');
140+
141+
const applyButton = page.getByTestId('table-settings-apply');
142+
await applyButton.click();
143+
144+
// Verify width is applied
145+
const idColumn = page.locator('kol-table-stateless-wc th').filter({ hasText: 'ID' });
146+
await expect(idColumn).toHaveAttribute('style', 'width: 50ch;');
147+
});
148+
});
149+
150+
test.describe('Column Order Management', () => {
151+
test('it disables up button for first column', async ({ page }) => {
152+
const settingsButton = page.getByTestId('popover-button').locator('button');
153+
await settingsButton.click();
154+
155+
const firstUpButton = page.getByTestId('table-settings-move-up').first().locator('button');
156+
await expect(firstUpButton).toBeDisabled();
157+
});
158+
159+
test('it disables down button for last column', async ({ page }) => {
160+
const settingsButton = page.getByTestId('popover-button').locator('button');
161+
await settingsButton.click();
162+
163+
const lastDownButton = page.getByTestId('table-settings-move-down').last().locator('button');
164+
await expect(lastDownButton).toBeDisabled();
165+
});
166+
167+
test('it moves a column up', async ({ page }) => {
168+
const settingsButton = page.getByTestId('popover-button').locator('button');
169+
await settingsButton.click();
170+
171+
// Move name column up
172+
const nameUpButton = page.getByTestId('table-settings-move-up').filter({ hasText: 'Name' });
173+
await nameUpButton.click();
174+
175+
const applyButton = page.getByTestId('table-settings-apply');
176+
await applyButton.click();
177+
178+
// Verify column order in table
179+
const columns = page.locator('kol-table-stateless-wc th');
180+
await expect(columns.nth(0)).toHaveText('Name');
181+
await expect(columns.nth(1)).toHaveText('ID');
182+
});
183+
184+
test('it moves a column down', async ({ page }) => {
185+
const settingsButton = page.getByTestId('popover-button').locator('button');
186+
await settingsButton.click();
187+
188+
// Move ID column down
189+
const idDownButton = page.getByTestId('table-settings-move-down').filter({ hasText: 'ID' });
190+
await idDownButton.click();
191+
192+
const applyButton = page.getByTestId('table-settings-apply');
193+
await applyButton.click();
194+
195+
// Verify column order in table
196+
const columns = page.locator('kol-table-stateless-wc th');
197+
await expect(columns.nth(0)).toHaveText('Name');
198+
await expect(columns.nth(1)).toHaveText('ID');
199+
});
200+
});
201+
});

‎packages/components/src/components/table-stateless/table-settings.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,28 +131,35 @@ export class KolTableSettings {
131131
/>
132132
<KolButtonWcTag
133133
_icons="codicon codicon-arrow-up"
134-
_label={translate('kol-table-settings-move-up')}
134+
_label={translate('kol-table-settings-move-up', { placeholders: { column: column.label } })}
135135
_hideLabel
136136
_variant="ghost"
137137
_on={{ onClick: () => this.moveColumn(column.key, 'up') }}
138138
_disabled={index === 0}
139+
data-testid="table-settings-move-up"
139140
/>
140141
<KolButtonWcTag
141142
_icons="codicon codicon-arrow-down"
142-
_label={translate('kol-table-settings-move-down')}
143+
_label={translate('kol-table-settings-move-down', { placeholders: { column: column.label } })}
143144
_hideLabel
144145
_variant="ghost"
145146
_on={{ onClick: () => this.moveColumn(column.key, 'down') }}
146147
_disabled={index === sortedColumns.length - 1}
148+
data-testid="table-settings-move-down"
147149
/>
148150
</div>
149151
))}
150152
</div>
151153
</div>
152154

153155
<div class="kol-table-settings__actions">
154-
<KolButtonWcTag _label={translate('kol-table-settings-cancel')} _variant="secondary" _on={{ onClick: () => this.handleCancel() }} />
155-
<KolButtonWcTag _label={translate('kol-table-settings-apply')} _variant="primary" _type="submit" />
156+
<KolButtonWcTag
157+
_label={translate('kol-table-settings-cancel')}
158+
_variant="secondary"
159+
_on={{ onClick: () => this.handleCancel() }}
160+
data-testid="table-settings-cancel"
161+
/>
162+
<KolButtonWcTag _label={translate('kol-table-settings-apply')} _variant="primary" _type="submit" data-testid="table-settings-apply" />
156163
</div>
157164
</form>
158165
</div>

‎packages/components/src/locales/de.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export default {
4545
'table-settings-apply': 'Übernehmen',
4646
'table-settings-show-column': 'Spalte {{column}} anzeigen',
4747
'table-settings-column-width': 'Breite von {{column}}',
48-
'table-settings-move-up': 'Spalte nach oben verschieben',
49-
'table-settings-move-down': 'Spalte nach unten verschieben',
48+
'table-settings-move-up': 'Spalte {{column}} nach oben verschieben',
49+
'table-settings-move-down': 'Spalte {{column}} nach unten verschieben',
5050
'table-settings-error-all-invisible': 'Mindestens eine Spalte muss sichtbar sein.',
5151
dropdown: 'Auswahlliste',
5252
'nav-label-open': 'Untermenü zu {{label}} öffnen',

‎packages/components/src/locales/en.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export default {
4545
'table-settings-apply': 'Apply',
4646
'table-settings-show-column': 'Show column {{column}}',
4747
'table-settings-column-width': '{{column}} width',
48-
'table-settings-move-up': 'Move column up',
49-
'table-settings-move-down': 'Move column down',
48+
'table-settings-move-up': 'Move {{column}} column up',
49+
'table-settings-move-down': 'Move {{column}} column down',
5050
'table-settings-error-all-invisible': 'At least one column must be visible.',
5151
dropdown: 'Dropdown',
5252
'nav-label-open': 'Submenu for {{label}} open',

0 commit comments

Comments
 (0)
⚡