Skip to content

Commit 08ea397

Browse files
Lukas742Lukas742
committed
add SelectDialog test
1 parent 23d7f33 commit 08ea397

File tree

3 files changed

+414
-2
lines changed

3 files changed

+414
-2
lines changed

‎.github/workflows/test.yml‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ jobs:
1212
playwright:
1313
name: Playwright
1414
runs-on: ubuntu-latest
15+
strategy:
16+
matrix:
17+
react: ['18', '19']
18+
fail-fast: false
1519
steps:
1620
- name: Checkout
1721
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
@@ -24,16 +28,22 @@ jobs:
2428
- name: Install
2529
run: yarn install --immutable
2630

31+
- name: Install React 18
32+
if: ${{ matrix.react == '18' }}
33+
run: |
34+
yarn add "@types/react@18" "@types/react-dom@18" --dev
35+
yarn add react@18 react-dom@18
36+
2737
- uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
2838
with:
29-
name: build-19
39+
name: build-${{ matrix.react }}
3040
path: packages
3141

3242
- name: Install Playwright browsers
3343
run: npx playwright install --with-deps chromium
3444

3545
- name: Run Playwright tests
36-
run: yarn test:pw playwright/test/ --project chromium
46+
run: yarn test:pw playwright/test/ packages/main/src/components/SelectDialog/test/ --project chromium
3747

3848
cypress:
3949
name: Cypress

‎packages/main/src/components/SelectDialog/test/SelectDialog.spec.tsx‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import { expect } from '@playwright/experimental-ct-react';
2+
import { test } from '../../../../../../playwright/ui5-fixtures.js';
3+
import {
4+
SelectDialogBasicTestComp,
5+
SelectDialogHeaderTestComp,
6+
SelectDialogSelectionWithToggleTestComp,
7+
SelectDialogSearchTestComp,
8+
SelectDialogConfirmButtonTextTestComp,
9+
SelectDialogNumberOfSelectedItemsTestComp,
10+
SelectDialogCancelWithToggleTestComp,
11+
SelectDialogConfirmButtonPropsTestComp,
12+
} from './SelectDialogTestComponents.js';
13+
14+
test.describe('SelectDialog', () => {
15+
test('Basic', async ({ mount, page }) => {
16+
await mount(<SelectDialogBasicTestComp />);
17+
await expect(page.locator('[ui5-dialog]')).toBeVisible();
18+
await expect(page.locator('[ui5-input][placeholder="Search"]')).toBeVisible();
19+
await page.getByText('Cancel').click();
20+
await expect(page.locator('[ui5-dialog]')).not.toBeVisible();
21+
});
22+
23+
test('with headerText', async ({ mount, page, ui5wc }) => {
24+
await mount(<SelectDialogHeaderTestComp />);
25+
const header = page.getByText('Select Dialog');
26+
await expect(header).toHaveCSS('grid-column-start', 'titleStart');
27+
await expect(header).toHaveCSS('grid-column-end', 'titleCenter');
28+
await expect(header).toHaveAttribute('level', 'H1');
29+
30+
await ui5wc.closePopupWithEsc();
31+
await page.getByTestId('toggle-center').click();
32+
await page.getByTestId('open-btn').click();
33+
await expect(header).toHaveCSS('grid-area', 'titleCenter');
34+
await expect(header).toHaveAttribute('level', 'H1');
35+
36+
await ui5wc.closePopupWithEsc();
37+
await page.getByTestId('set-h2').click();
38+
await page.getByTestId('open-btn').click();
39+
await expect(header).toHaveAttribute('level', 'H2');
40+
});
41+
42+
test('selection', async ({ mount, page, ui5wc }) => {
43+
await mount(<SelectDialogSelectionWithToggleTestComp />);
44+
const list = page.locator('[ui5-list]');
45+
46+
// Single mode - no rememberSelections
47+
await expect(page.locator('[ui5-dialog]')).toBeVisible();
48+
await list.getByText('Product1').click();
49+
await expect(page.locator('[ui5-dialog]')).not.toBeVisible();
50+
await expect(page.getByTestId('selected-items')).toHaveText('Last Selected Item: Product1');
51+
await page.getByTestId('open-btn').click();
52+
const listItems = page.locator('[ui5-li]');
53+
for (let i = 0; i < 5; i++) {
54+
await expect(listItems.nth(i)).not.toHaveAttribute('selected');
55+
}
56+
await ui5wc.closePopupWithEsc();
57+
58+
// Single mode - with rememberSelections
59+
await page.getByTestId('toggle-remember').click();
60+
await page.getByTestId('open-btn').click();
61+
await list.getByText('Product1').click();
62+
await expect(page.locator('[ui5-dialog]')).not.toBeVisible();
63+
await expect(page.getByTestId('selected-items')).toHaveText('Last Selected Item: Product1');
64+
await page.getByTestId('open-btn').click();
65+
await expect(list.locator('[ui5-li][text="Product1"]')).toHaveAttribute('selected');
66+
for (const text of ['Product0', 'Product2', 'Product3', 'Product4']) {
67+
await expect(list.locator(`[ui5-li][text="${text}"]`)).not.toHaveAttribute('selected');
68+
}
69+
await ui5wc.closePopupWithEsc();
70+
71+
await expect(page.getByTestId('close-count')).toHaveText('4');
72+
await expect(page.getByTestId('confirm-count')).toHaveText('2');
73+
await expect(page.getByTestId('change-count')).toHaveText('2');
74+
75+
// Close via Cancel and Escape
76+
await page.getByTestId('reset').click();
77+
await page.getByTestId('open-btn').click();
78+
await page.getByText('Cancel').click();
79+
await expect(page.locator('[ui5-dialog]')).not.toBeVisible();
80+
await expect(page.getByTestId('close-count')).toHaveText('5');
81+
82+
await page.getByTestId('open-btn').click();
83+
await expect(page.locator('[ui5-dialog]')).toBeVisible();
84+
await ui5wc.closePopupWithEsc();
85+
86+
await expect(page.getByTestId('close-count')).toHaveText('6');
87+
await expect(page.getByTestId('confirm-count')).toHaveText('2');
88+
await expect(page.getByTestId('change-count')).toHaveText('2');
89+
90+
// Multiple mode - no rememberSelections
91+
await page.getByTestId('reset').click();
92+
await page.getByTestId('set-multiple').click();
93+
await page.getByTestId('open-btn').click();
94+
await expect(page.locator('[ui5-dialog]')).toBeVisible();
95+
await list.getByText('Product1').click();
96+
await list.getByText('Product3').click();
97+
await page.getByRole('button', { name: 'Select' }).click();
98+
await expect(page.getByTestId('selected-items')).toHaveText('Last Selected Item: Product1Product3');
99+
100+
await page.getByTestId('open-btn').click();
101+
for (let i = 0; i < 5; i++) {
102+
await expect(listItems.nth(i)).not.toHaveAttribute('selected');
103+
}
104+
105+
// Multiple mode - with rememberSelections
106+
await page.getByText('Cancel').click();
107+
await page.getByTestId('toggle-remember').click();
108+
await page.getByTestId('open-btn').click();
109+
await list.getByText('Product1').click();
110+
await list.getByText('Product3').click();
111+
await expect(page.locator('[ui5-dialog]')).toBeVisible();
112+
await page.getByRole('button', { name: 'Select' }).click();
113+
await expect(page.getByTestId('selected-items')).toHaveText('Last Selected Item: Product1Product3');
114+
await page.getByTestId('open-btn').click();
115+
await expect(list.locator('[ui5-li][text="Product1"]')).toHaveAttribute('selected');
116+
await expect(list.locator('[ui5-li][text="Product3"]')).toHaveAttribute('selected');
117+
for (const text of ['Product0', 'Product2', 'Product4']) {
118+
await expect(list.locator(`[ui5-li][text="${text}"]`)).not.toHaveAttribute('selected');
119+
}
120+
await ui5wc.closePopupWithEsc();
121+
122+
await expect(page.getByTestId('close-count')).toHaveText('10');
123+
await expect(page.getByTestId('confirm-count')).toHaveText('4');
124+
await expect(page.getByTestId('change-count')).toHaveText('6');
125+
});
126+
127+
test('Search', async ({ mount, page, ui5wc }) => {
128+
await mount(<SelectDialogSearchTestComp />);
129+
await expect(page.locator('[accessible-name="Reset"][ui5-icon]')).not.toBeVisible();
130+
131+
const input = page.locator('[ui5-input]');
132+
await ui5wc.typeIntoInput(input, 'Test');
133+
await expect(page.getByTestId('input-val')).toHaveText('input: Test');
134+
await expect(page.getByTestId('search-count')).toHaveText('0');
135+
await expect(page.getByTestId('input-count')).toHaveText('1');
136+
await expect(page.getByTestId('reset-count')).toHaveText('0');
137+
138+
await input.locator('input').press('Enter');
139+
await expect(page.getByTestId('search-val')).toHaveText('search: Test');
140+
await expect(page.getByTestId('search-count')).toHaveText('1');
141+
await expect(page.getByTestId('input-count')).toHaveText('1');
142+
await expect(page.getByTestId('reset-count')).toHaveText('0');
143+
144+
await page.locator('[accessible-name="Search"][ui5-icon]').click();
145+
await expect(page.getByTestId('search-count')).toHaveText('2');
146+
await expect(page.getByTestId('input-count')).toHaveText('1');
147+
await expect(page.getByTestId('reset-count')).toHaveText('0');
148+
149+
await page.locator('[part="clear-icon"][ui5-icon]').click();
150+
await expect(page.getByTestId('search-count')).toHaveText('2');
151+
// clearing the input via clear button fires input event as well
152+
await expect(page.getByTestId('input-count')).toHaveText('2');
153+
await expect(page.getByTestId('reset-count')).toHaveText('1');
154+
await expect(page.locator('[accessible-name="Reset"][ui5-icon]')).not.toBeVisible();
155+
});
156+
157+
test('confirmButtonText', async ({ mount, page }) => {
158+
await mount(<SelectDialogConfirmButtonTextTestComp />);
159+
await expect(page.locator('[ui5-dialog]')).toBeVisible();
160+
await page.getByText('Exterminate').click();
161+
await expect(page.getByTestId('confirm-count')).toHaveText('1');
162+
await expect(page.locator('[ui5-dialog]')).not.toBeVisible();
163+
});
164+
165+
test('numberOfSelectedItems', async ({ mount, page }) => {
166+
await mount(<SelectDialogNumberOfSelectedItemsTestComp />);
167+
await expect(page.getByText('Selected: 1337')).toBeVisible();
168+
});
169+
170+
test('onCancel', async ({ mount, page, ui5wc }) => {
171+
await mount(<SelectDialogCancelWithToggleTestComp />);
172+
173+
// Single mode
174+
await page.getByTestId('open-btn').click();
175+
await page.getByText('Cancel').click();
176+
await expect(page.getByTestId('cancel-count')).toHaveText('1');
177+
178+
await page.getByTestId('open-btn').click();
179+
await expect(page.locator('[ui5-dialog]')).toBeVisible();
180+
await ui5wc.closePopupWithEsc();
181+
await expect(page.getByTestId('cancel-count')).toHaveText('2');
182+
183+
// Multiple mode
184+
await page.getByTestId('set-multiple').click();
185+
await page.getByTestId('open-btn').click();
186+
await page.getByText('Cancel').click();
187+
await expect(page.getByTestId('cancel-count')).toHaveText('3');
188+
189+
await page.getByTestId('open-btn').click();
190+
await expect(page.locator('[ui5-dialog]')).toBeVisible();
191+
await ui5wc.closePopupWithEsc();
192+
await expect(page.getByTestId('cancel-count')).toHaveText('4');
193+
});
194+
195+
test('confirmButtonProps', async ({ mount, page }) => {
196+
await mount(<SelectDialogConfirmButtonPropsTestComp />);
197+
const btn = page.getByTestId('confirmBtn');
198+
await expect(btn).toBeVisible();
199+
await expect(btn).toHaveAttribute('disabled');
200+
await expect(btn).toHaveAttribute('design', 'Emphasized');
201+
});
202+
});

0 commit comments

Comments
 (0)