@@ -15,25 +15,25 @@ test.describe("datagrid-dropdown-filter-web", () => {
15
15
test ( "show list of Companies with empty option on top of the list" , async ( { page } ) => {
16
16
const menu = ( ) => page . locator ( "text=FMC Corp" ) ;
17
17
18
- await page . locator ( ".mx-name-drop_downFilter2" ) . click ( ) ;
18
+ await page . locator ( ".mx-name-drop_downFilter2" ) . click ( { delay : 1 } ) ;
19
19
await expect ( menu ( ) ) . toBeVisible ( ) ;
20
20
const list = page . locator ( ".widget-dropdown-filter-menu-slot > ul > li" ) ;
21
21
await expect ( list ) . toHaveCount ( 21 ) ;
22
- await expect ( list . nth ( 0 ) ) . toHaveText ( "None " ) ;
22
+ await expect ( list . nth ( 0 ) ) . toHaveText ( "Nada " ) ;
23
23
await expect ( list . nth ( 2 ) ) . toHaveText ( "FMC Corp" ) ;
24
24
await expect ( list . nth ( 20 ) ) . toHaveText ( "PETsMART Inc" ) ;
25
25
} ) ;
26
26
27
27
test ( "set value after option is clicked" , async ( { page } ) => {
28
- const select = ( ) => page . getByRole ( "columnheader " , { name : "sort Company " } ) . getByLabel ( "Search" ) ;
28
+ const select = ( ) => page . getByRole ( "combobox " , { name : "Select company " } ) ;
29
29
const toggle = page . locator ( ".widget-dropdown-filter-toggle" ) ;
30
30
const menu = ( ) => page . locator ( "text=FMC Corp" ) ;
31
31
const option1 = ( ) => page . getByRole ( "option" , { name : "Brown-Forman Corporation" } ) ;
32
- const clickOutside = async ( ) => page . locator ( "body" ) . click ( ) ;
32
+ const clickOutside = async ( ) => page . locator ( "body" ) . click ( { delay : 1 } ) ;
33
33
34
- await select ( ) . click ( ) ;
34
+ await select ( ) . click ( { delay : 1 } ) ;
35
35
await expect ( menu ( ) ) . toBeVisible ( ) ;
36
- await option1 ( ) . click ( ) ;
36
+ await option1 ( ) . click ( { delay : 1 } ) ;
37
37
await expect ( toggle . nth ( 3 ) ) . toHaveText ( "Brown-Forman Corporation" ) ;
38
38
await clickOutside ( ) ;
39
39
await expect ( menu ( ) ) . not . toBeVisible ( ) ;
@@ -44,26 +44,29 @@ test.describe("datagrid-dropdown-filter-web", () => {
44
44
} ) ;
45
45
46
46
test . describe ( "multiselect" , ( ) => {
47
+ let select ;
48
+ let menu ;
49
+ test . beforeEach ( async ( { page } ) => {
50
+ select = ( ) => page . getByRole ( "combobox" , { name : "Select role" } ) ;
51
+ menu = ( ) => select ( ) . getByRole ( "listbox" ) ;
52
+ } ) ;
47
53
test ( "shows list of Roles" , async ( { page } ) => {
48
- const select = ( ) => page . getByRole ( "columnheader" , { name : "Roles" } ) . getByLabel ( "Search" ) ;
49
- const menu = ( ) => page . locator ( "text=Economist" ) ;
50
- const option1 = ( ) => page . getByRole ( "option" , { name : "Economist" } ) ;
51
- const option2 = ( ) => page . getByRole ( "option" , { name : "Public librarian" } ) ;
52
- const option3 = ( ) => page . getByRole ( "option" , { name : "Prison officer" } ) ;
54
+ const option1 = ( ) => menu ( ) . getByRole ( "option" , { name : "Economist" } ) ;
55
+ const option2 = ( ) => menu ( ) . getByRole ( "option" , { name : "Public librarian" } ) ;
56
+ const option3 = ( ) => menu ( ) . getByRole ( "option" , { name : "Prison officer" } ) ;
53
57
54
- await select ( ) . click ( ) ;
58
+ await select ( ) . click ( { delay : 1 } ) ;
55
59
await expect ( menu ( ) . first ( ) ) . toBeVisible ( ) ;
56
60
await expect ( option1 ( ) ) . toBeVisible ( ) ;
57
61
await expect ( option2 ( ) ) . toBeVisible ( ) ;
58
62
await expect ( option3 ( ) ) . toBeVisible ( ) ;
59
63
} ) ;
60
64
61
65
test ( "does filtering when option is checked" , async ( { page } ) => {
62
- const select = ( ) => page . getByRole ( "columnheader" , { name : "Roles" } ) . getByLabel ( "Search" ) ;
63
- const option2 = ( ) => page . getByRole ( "option" , { name : "Public librarian" } ) ;
66
+ const option2 = ( ) => menu ( ) . getByRole ( "option" , { name : "Public librarian" } ) ;
64
67
65
- await select ( ) . click ( ) ;
66
- await option2 ( ) . click ( ) ;
68
+ await select ( ) . click ( { delay : 1 } ) ;
69
+ await option2 ( ) . click ( { delay : 1 } ) ;
67
70
const rows = page . locator ( ".mx-name-dataGrid21 .tr" ) ;
68
71
await expect ( rows ) . toHaveCount ( 5 ) ; // 4 rows + 1 header row
69
72
} ) ;
@@ -75,7 +78,7 @@ test.describe("datagrid-dropdown-filter-web", () => {
75
78
const menu = ( ) => page . getByRole ( "option" , { name : "Environmental scientist" } ) ;
76
79
const clickOutside = async ( ) => ( await page . locator ( "body" ) ) . click ( ) ;
77
80
78
- await select ( ) . click ( ) ;
81
+ await select ( ) . click ( { delay : 1 } ) ;
79
82
const checkedOptions = await menu ( ) . locator ( "input:checked" ) ;
80
83
await expect ( checkedOptions ) . toHaveCount ( 0 ) ;
81
84
await clickOutside ( ) ;
@@ -88,8 +91,8 @@ test.describe("datagrid-dropdown-filter-web", () => {
88
91
const menu = ( ) => page . getByRole ( "option" , { name : "Environmental scientist" } ) ;
89
92
const option1 = ( ) => page . getByRole ( "option" , { name : "Environmental scientist" } ) ;
90
93
91
- await select ( ) . click ( ) ;
92
- await option1 ( ) . click ( ) ;
94
+ await select ( ) . click ( { delay : 1 } ) ;
95
+ await option1 ( ) . click ( { delay : 1 } ) ;
93
96
const checkedOptions = await menu ( ) . locator ( "input:checked" ) ;
94
97
await expect ( checkedOptions ) . toHaveCount ( 1 ) ;
95
98
await expect ( checkedOptions . first ( ) ) . toBeChecked ( ) ;
@@ -106,9 +109,9 @@ test.describe("datagrid-dropdown-filter-web", () => {
106
109
const option1 = ( ) => page . getByRole ( "option" , { name : "Environmental scientist" } ) ;
107
110
const option2 = ( ) => page . getByRole ( "option" , { name : "Trader" } ) ;
108
111
109
- await select ( ) . click ( ) ;
110
- await option1 ( ) . click ( ) ;
111
- await option2 ( ) . click ( ) ;
112
+ await select ( ) . click ( { delay : 1 } ) ;
113
+ await option1 ( ) . click ( { delay : 1 } ) ;
114
+ await option2 ( ) . click ( { delay : 1 } ) ;
112
115
const checkedOptions = await menu ( ) . locator ( "input:checked" ) ;
113
116
await expect ( checkedOptions ) . toHaveCount ( 2 ) ;
114
117
await expect ( checkedOptions . first ( ) ) . toBeChecked ( ) ;
0 commit comments