Skip to content

Commit d553368

Browse files
ealmloffealmloff
committed
better scoped classes
1 parent 61261d9 commit d553368

98 files changed

Lines changed: 1396 additions & 1058 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎playwright/accordion.spec.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ import { test, expect } from "@playwright/test";
22

33
test("test", async ({ page }) => {
44
await page.goto("http://127.0.0.1:8080/component/?name=accordion&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
5-
// Get the first .accordion-item
6-
const accordionItem = page.locator(".accordion-item");
7-
// Click on the first .accordion-item
5+
// Get the first .dx-accordion-item
6+
const accordionItem = page.locator(".dx-accordion-item");
7+
// Click on the first .dx-accordion-item
88
const firstAccordionItem = accordionItem.first();
99
await firstAccordionItem.locator("button").click();
10-
// Verify that the first .accordion-item is expanded (data-open="true")
10+
// Verify that the first .dx-accordion-item is expanded (data-open="true")
1111
await expect(firstAccordionItem).toHaveAttribute("data-open", "true");
1212

13-
// Click on the second .accordion-item
13+
// Click on the second .dx-accordion-item
1414
const secondAccordionItem = accordionItem.nth(1);
1515
await secondAccordionItem.locator("button").click();
16-
// Verify that the second .accordion-item is expanded (data-open="true")
16+
// Verify that the second .dx-accordion-item is expanded (data-open="true")
1717
await expect(secondAccordionItem).toHaveAttribute("data-open", "true");
18-
// Verify the first .accordion-item is collapsed (data-open="false")
18+
// Verify the first .dx-accordion-item is collapsed (data-open="false")
1919
await expect(firstAccordionItem).toHaveAttribute("data-open", "false");
2020
});

‎playwright/alert-dialog.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ test('test', async ({ page }) => {
44
await page.goto('http://127.0.0.1:8080/component/?name=alert_dialog&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
55
await page.getByRole('button', { name: 'Show Alert Dialog' }).click();
66
// Assert the dialog is open
7-
const dialog = page.locator('.alert-dialog-backdrop');
7+
const dialog = page.locator('.dx-alert-dialog-backdrop');
88
await expect(dialog).toHaveAttribute('data-state', 'open');
99
// Assert the cancel button is focused
1010
const cancelButton = page.getByRole('button', { name: 'Cancel' });

‎playwright/avatar.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { test, expect } from "@playwright/test";
33
test("test", async ({ page }) => {
44
await page.goto("http://127.0.0.1:8080/component/?name=avatar&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
55
// Get the avatar element
6-
const avatar = page.locator(".avatar-item").nth(0);
6+
const avatar = page.locator(".dx-avatar-item").nth(0);
77
// Verify the avatar has a loaded image
88
let image = avatar.locator("img");
99
await expect(image).toHaveAttribute("src", "https://avatars.githubusercontent.com/u/66571940?s=96&v=4");
1010

1111
// Get the third avatar element (Error State - has invalid image URL, shows fallback)
12-
const errorAvatar = page.locator(".avatar-item").nth(2);
12+
const errorAvatar = page.locator(".dx-avatar-item").nth(2);
1313
// Verify the error state avatar has fallback text
1414
await expect(errorAvatar).toContainText("JK");
1515
});

‎playwright/calendar.spec.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ test("test", async ({ page }) => {
55
timeout: 20 * 60 * 1000,
66
}); // Increase timeout to 20 minutes
77
// Find the calendar element
8-
const calendar = page.locator(".calendar").nth(0);
8+
const calendar = page.locator(".dx-calendar").nth(0);
99
// Find the calendar-nav-prev button
10-
const prevButton = calendar.locator(".calendar-nav-prev");
10+
const prevButton = calendar.locator(".dx-calendar-nav-prev");
1111
// Find the calendar-nav-next button
12-
const nextButton = calendar.locator(".calendar-nav-next");
12+
const nextButton = calendar.locator(".dx-calendar-nav-next");
1313

1414
// Assert the calendar is displayed
1515
await expect(calendar).toBeVisible({ timeout: 30000 });
1616
// Assert the current month is displayed
17-
const currentMonth = calendar.locator(".calendar-month-select");
17+
const currentMonth = calendar.locator(".dx-calendar-month-select");
1818
let currentMonthText = await currentMonth.inputValue();
1919

2020
// Click the previous button to go to the previous month
@@ -31,7 +31,7 @@ test("test", async ({ page }) => {
3131
// Move focus to the calendar with tab
3232
await page.keyboard.press("Tab");
3333
const focusedDay = calendar.locator(
34-
'.calendar-grid-cell[data-month="current"]:focus'
34+
'.dx-calendar-grid-cell[data-month="current"]:focus'
3535
);
3636
// Assert a day is focused
3737
const firstDay = focusedDay.first();
@@ -83,9 +83,9 @@ test("year navigation by moving 52 weeks with arrow keys", async ({ page }) => {
8383
});
8484

8585
// Find the calendar element
86-
const calendar = page.locator(".calendar").nth(0);
87-
const monthSelect = calendar.locator(".calendar-month-select");
88-
const yearSelect = calendar.locator(".calendar-year-select");
86+
const calendar = page.locator(".dx-calendar").nth(0);
87+
const monthSelect = calendar.locator(".dx-calendar-month-select");
88+
const yearSelect = calendar.locator(".dx-calendar-year-select");
8989

9090
// Assert the calendar is displayed
9191
await expect(calendar).toBeVisible({ timeout: 30000 });
@@ -110,7 +110,7 @@ test("year navigation by moving 52 weeks with arrow keys", async ({ page }) => {
110110

111111
// Move focus to the calendar manually
112112
const firstDay = calendar
113-
.locator('.calendar-grid-cell[data-month="current"]')
113+
.locator('.dx-calendar-grid-cell[data-month="current"]')
114114
.first();
115115
await firstDay.focus();
116116

@@ -148,9 +148,9 @@ test("shift + arrow keys navigation", async ({ page }) => {
148148
});
149149

150150
// Find the calendar element
151-
const calendar = page.locator(".calendar").nth(0);
152-
const monthSelect = calendar.locator(".calendar-month-select");
153-
const yearSelect = calendar.locator(".calendar-year-select");
151+
const calendar = page.locator(".dx-calendar").nth(0);
152+
const monthSelect = calendar.locator(".dx-calendar-month-select");
153+
const yearSelect = calendar.locator(".dx-calendar-year-select");
154154

155155
// Assert the calendar is displayed
156156
await expect(calendar).toBeVisible({ timeout: 30000 });
@@ -163,7 +163,7 @@ test("shift + arrow keys navigation", async ({ page }) => {
163163

164164
// Move focus to the calendar
165165
const firstDay = calendar
166-
.locator('.calendar-grid-cell[data-month="current"]')
166+
.locator('.dx-calendar-grid-cell[data-month="current"]')
167167
.first();
168168
await firstDay.focus();
169169

@@ -199,9 +199,9 @@ async function testArrowKeyNavigation(
199199
});
200200

201201
// Find the calendar element
202-
const calendar = page.locator(".calendar").nth(0);
203-
const monthSelect = calendar.locator(".calendar-month-select");
204-
const yearSelect = calendar.locator(".calendar-year-select");
202+
const calendar = page.locator(".dx-calendar").nth(0);
203+
const monthSelect = calendar.locator(".dx-calendar-month-select");
204+
const yearSelect = calendar.locator(".dx-calendar-year-select");
205205

206206
// Assert the calendar is displayed
207207
await expect(calendar).toBeVisible({ timeout: 30000 });
@@ -217,13 +217,13 @@ async function testArrowKeyNavigation(
217217

218218
// Move focus to the starting day of the current month
219219
const startDay = calendar
220-
.locator('.calendar-grid-cell[data-month="current"]')
220+
.locator('.dx-calendar-grid-cell[data-month="current"]')
221221
[startPosition]();
222222
await startDay.focus();
223223

224224
// Get the focused day selector
225225
const focusedDay = calendar.locator(
226-
'.calendar-grid-cell[data-month="current"]:focus'
226+
'.dx-calendar-grid-cell[data-month="current"]:focus'
227227
);
228228

229229
// Array to track all days visited

‎playwright/collapsible.spec.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { test, expect } from "@playwright/test";
22

33
test("test", async ({ page }) => {
44
await page.goto("http://127.0.0.1:8080/component/?name=collapsible&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
5-
// Get the .collapsible-content
6-
const collapsibleContent = page.locator(".collapsible-content");
7-
// Click on the .collapsible-trigger
8-
const firstCollapsibleTrigger = page.locator(".collapsible-trigger");
5+
// Get the .dx-collapsible-content
6+
const collapsibleContent = page.locator(".dx-collapsible-content");
7+
// Click on the .dx-collapsible-trigger
8+
const firstCollapsibleTrigger = page.locator(".dx-collapsible-trigger");
99
await firstCollapsibleTrigger.click();
10-
// Verify that the first .collapsible-content is expanded (data-open="true")
10+
// Verify that the first .dx-collapsible-content is expanded (data-open="true")
1111
await expect(collapsibleContent.first()).toHaveAttribute("data-open", "true");
1212
});

‎playwright/context-menu.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ test('pointer navigation', async ({ page }) => {
77
});
88

99
// Assert the context menu is visible
10-
const contextMenu = page.locator('.context-menu-content');
10+
const contextMenu = page.locator('.dx-context-menu-content');
1111
await expect(contextMenu).toHaveAttribute('data-state', 'open');
1212
// Click on the "Edit" menu item
1313
await page.getByRole('menuitem', { name: 'Edit' }).click();
@@ -22,7 +22,7 @@ test('keyboard navigation', async ({ page }) => {
2222
});
2323

2424
// Assert the context menu is visible
25-
const contextMenu = page.locator('.context-menu-content');
25+
const contextMenu = page.locator('.dx-context-menu-content');
2626
await expect(contextMenu).toHaveAttribute('data-state', 'open');
2727
// Hit escape to close the context menu
2828
await page.keyboard.press('Escape');

‎playwright/dialog.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ test('test', async ({ page }) => {
44
await page.goto('http://127.0.0.1:8080/component/?name=dialog&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
55
await page.getByRole('button', { name: 'Show Dialog' }).click();
66
// Assert the dialog is open
7-
const dialog = page.locator('.dialog-backdrop');
7+
const dialog = page.locator('.dx-dialog-backdrop');
88
await expect(dialog).toHaveAttribute('data-state', 'open');
99
// Assert the close button is focused
1010
const closeButton = dialog.getByRole('button');

‎playwright/menubar.spec.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import { test, expect } from "@playwright/test";
22

33
test("pointer navigation", async ({ page }) => {
44
await page.goto("http://127.0.0.1:8080/component/?name=menubar&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
5-
const fileMenu = page.locator(".menubar-menu").first();
5+
const fileMenu = page.locator(".dx-menubar-menu").first();
66
const fileMenuButton = fileMenu.getByRole("menuitem", { name: "File" });
77
await fileMenuButton.click();
88
// Assert the menu is open
99
const fileMenuContent = fileMenu.getByRole("menu");
1010
await expect(fileMenuContent).toHaveAttribute("data-state", "open");
1111

1212
// After the menu is open, hover over the Edit menu item
13-
const editMenu = page.locator(".menubar-menu").nth(1);
13+
const editMenu = page.locator(".dx-menubar-menu").nth(1);
1414
const editMenuButton = editMenu.getByRole("menuitem", { name: "Edit" });
1515
await editMenuButton.hover();
1616
// Assert the Edit menu content is open
@@ -28,13 +28,13 @@ test("pointer navigation", async ({ page }) => {
2828

2929
test("keyboard navigation", async ({ page }) => {
3030
await page.goto("http://127.0.0.1:8080/component/?name=menubar&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
31-
await page.locator(".menubar").focus();
32-
const fileMenu = page.locator(".menubar-menu").first();
31+
await page.locator(".dx-menubar").focus();
32+
const fileMenu = page.locator(".dx-menubar-menu").first();
3333
const fileMenuButton = fileMenu.getByRole("menuitem", { name: "File" });
3434
// Go right with the keyboard
3535
await page.keyboard.press("ArrowRight");
3636
// Assert the focus is on the Edit menu item
37-
const editMenu = page.locator(".menubar-menu").nth(1);
37+
const editMenu = page.locator(".dx-menubar-menu").nth(1);
3838
const editMenuButton = editMenu.getByRole("menuitem", { name: "Edit" });
3939
await expect(editMenuButton).toBeFocused();
4040
// Go left with the keyboard

‎playwright/navbar.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ test('mobile navigation', async ({ page }) => {
2424

2525
test('keyboard navigation', async ({ page }) => {
2626
await page.goto('http://127.0.0.1:8080/component/?name=navbar&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
27-
await page.locator('.navbar').focus();
27+
await page.locator('.dx-navbar').focus();
2828
// Go right with the keyboard
2929
await page.keyboard.press('ArrowRight');
3030
// Assert the focus is on the information menu item

‎playwright/select.spec.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ test("test", async ({ page }) => {
55
timeout: 20 * 60 * 1000,
66
}); // Increase timeout to 20 minutes
77
// Find Select a fruit...
8-
let selectTrigger = page.locator(".select-trigger");
8+
let selectTrigger = page.locator(".dx-select-trigger");
99
await selectTrigger.click();
1010
// Assert the select menu is open
11-
const selectMenu = page.locator(".select-list");
11+
const selectMenu = page.locator(".dx-select-list");
1212
await expect(selectMenu).toHaveAttribute("data-state", "open");
1313

1414
// Assert the menu is focused
@@ -64,10 +64,10 @@ test("test", async ({ page }) => {
6464
test("tabbing out of menu closes the select menu", async ({ page }) => {
6565
await page.goto("http://127.0.0.1:8080/component/?name=select&");
6666
// Find Select a fruit...
67-
let selectTrigger = page.locator(".select-trigger");
67+
let selectTrigger = page.locator(".dx-select-trigger");
6868
await selectTrigger.click();
6969
// Assert the select menu is open
70-
const selectMenu = page.locator(".select-list");
70+
const selectMenu = page.locator(".dx-select-list");
7171
await expect(selectMenu).toHaveAttribute("data-state", "open");
7272

7373
// Assert the menu is focused
@@ -80,10 +80,10 @@ test("tabbing out of menu closes the select menu", async ({ page }) => {
8080
test("tabbing out of item closes the select menu", async ({ page }) => {
8181
await page.goto("http://127.0.0.1:8080/component/?name=select&");
8282
// Find Select a fruit...
83-
let selectTrigger = page.locator(".select-trigger");
83+
let selectTrigger = page.locator(".dx-select-trigger");
8484
await selectTrigger.click();
8585
// Assert the select menu is open
86-
const selectMenu = page.locator(".select-list");
86+
const selectMenu = page.locator(".dx-select-list");
8787
await expect(selectMenu).toHaveAttribute("data-state", "open");
8888

8989
// Assert the menu is focused
@@ -101,10 +101,10 @@ test("tabbing out of item closes the select menu", async ({ page }) => {
101101
test("options selected", async ({ page }) => {
102102
await page.goto("http://127.0.0.1:8080/component/?name=select&");
103103
// Find Select a fruit...
104-
let selectTrigger = page.locator(".select-trigger");
104+
let selectTrigger = page.locator(".dx-select-trigger");
105105
await selectTrigger.click();
106106
// Assert the select menu is open
107-
const selectMenu = page.locator(".select-list");
107+
const selectMenu = page.locator(".dx-select-list");
108108
await expect(selectMenu).toHaveAttribute("data-state", "open");
109109

110110
// Assert no items have aria-selected
@@ -130,8 +130,8 @@ test("options selected", async ({ page }) => {
130130
test("down arrow selects first element", async ({ page }) => {
131131
await page.goto("http://127.0.0.1:8080/component/?name=select&");
132132
// Find Select a fruit...
133-
let selectTrigger = page.locator(".select-trigger");
134-
const selectMenu = page.locator(".select-list");
133+
let selectTrigger = page.locator(".dx-select-trigger");
134+
const selectMenu = page.locator(".dx-select-list");
135135
await selectTrigger.focus();
136136

137137
// Select the first option
@@ -143,8 +143,8 @@ test("down arrow selects first element", async ({ page }) => {
143143
test("up arrow selects last element", async ({ page }) => {
144144
await page.goto("http://127.0.0.1:8080/component/?name=select&");
145145
// Find Select a fruit...
146-
let selectTrigger = page.locator(".select-trigger");
147-
const selectMenu = page.locator(".select-list");
146+
let selectTrigger = page.locator(".dx-select-trigger");
147+
const selectMenu = page.locator(".dx-select-list");
148148
await selectTrigger.focus();
149149

150150
// Select the first option

0 commit comments

Comments
 (0)