@@ -15,25 +15,25 @@ test.describe("datagrid-dropdown-filter-web", () => {
1515 test ( "show list of Companies with empty option on top of the list" , async ( { page } ) => {
1616 const menu = ( ) => page . locator ( "text=FMC Corp" ) ;
1717
18- await page . locator ( ".mx-name-drop_downFilter2" ) . click ( ) ;
18+ await page . locator ( ".mx-name-drop_downFilter2" ) . click ( { delay : 1 } ) ;
1919 await expect ( menu ( ) ) . toBeVisible ( ) ;
2020 const list = page . locator ( ".widget-dropdown-filter-menu-slot > ul > li" ) ;
2121 await expect ( list ) . toHaveCount ( 21 ) ;
22- await expect ( list . nth ( 0 ) ) . toHaveText ( "None " ) ;
22+ await expect ( list . nth ( 0 ) ) . toHaveText ( "Nada " ) ;
2323 await expect ( list . nth ( 2 ) ) . toHaveText ( "FMC Corp" ) ;
2424 await expect ( list . nth ( 20 ) ) . toHaveText ( "PETsMART Inc" ) ;
2525 } ) ;
2626
2727 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 " } ) ;
2929 const toggle = page . locator ( ".widget-dropdown-filter-toggle" ) ;
3030 const menu = ( ) => page . locator ( "text=FMC Corp" ) ;
3131 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 } ) ;
3333
34- await select ( ) . click ( ) ;
34+ await select ( ) . click ( { delay : 1 } ) ;
3535 await expect ( menu ( ) ) . toBeVisible ( ) ;
36- await option1 ( ) . click ( ) ;
36+ await option1 ( ) . click ( { delay : 1 } ) ;
3737 await expect ( toggle . nth ( 3 ) ) . toHaveText ( "Brown-Forman Corporation" ) ;
3838 await clickOutside ( ) ;
3939 await expect ( menu ( ) ) . not . toBeVisible ( ) ;
@@ -44,26 +44,29 @@ test.describe("datagrid-dropdown-filter-web", () => {
4444 } ) ;
4545
4646 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+ } ) ;
4753 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" } ) ;
5357
54- await select ( ) . click ( ) ;
58+ await select ( ) . click ( { delay : 1 } ) ;
5559 await expect ( menu ( ) . first ( ) ) . toBeVisible ( ) ;
5660 await expect ( option1 ( ) ) . toBeVisible ( ) ;
5761 await expect ( option2 ( ) ) . toBeVisible ( ) ;
5862 await expect ( option3 ( ) ) . toBeVisible ( ) ;
5963 } ) ;
6064
6165 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" } ) ;
6467
65- await select ( ) . click ( ) ;
66- await option2 ( ) . click ( ) ;
68+ await select ( ) . click ( { delay : 1 } ) ;
69+ await option2 ( ) . click ( { delay : 1 } ) ;
6770 const rows = page . locator ( ".mx-name-dataGrid21 .tr" ) ;
6871 await expect ( rows ) . toHaveCount ( 5 ) ; // 4 rows + 1 header row
6972 } ) ;
@@ -75,7 +78,7 @@ test.describe("datagrid-dropdown-filter-web", () => {
7578 const menu = ( ) => page . getByRole ( "option" , { name : "Environmental scientist" } ) ;
7679 const clickOutside = async ( ) => ( await page . locator ( "body" ) ) . click ( ) ;
7780
78- await select ( ) . click ( ) ;
81+ await select ( ) . click ( { delay : 1 } ) ;
7982 const checkedOptions = await menu ( ) . locator ( "input:checked" ) ;
8083 await expect ( checkedOptions ) . toHaveCount ( 0 ) ;
8184 await clickOutside ( ) ;
@@ -88,8 +91,8 @@ test.describe("datagrid-dropdown-filter-web", () => {
8891 const menu = ( ) => page . getByRole ( "option" , { name : "Environmental scientist" } ) ;
8992 const option1 = ( ) => page . getByRole ( "option" , { name : "Environmental scientist" } ) ;
9093
91- await select ( ) . click ( ) ;
92- await option1 ( ) . click ( ) ;
94+ await select ( ) . click ( { delay : 1 } ) ;
95+ await option1 ( ) . click ( { delay : 1 } ) ;
9396 const checkedOptions = await menu ( ) . locator ( "input:checked" ) ;
9497 await expect ( checkedOptions ) . toHaveCount ( 1 ) ;
9598 await expect ( checkedOptions . first ( ) ) . toBeChecked ( ) ;
@@ -106,9 +109,9 @@ test.describe("datagrid-dropdown-filter-web", () => {
106109 const option1 = ( ) => page . getByRole ( "option" , { name : "Environmental scientist" } ) ;
107110 const option2 = ( ) => page . getByRole ( "option" , { name : "Trader" } ) ;
108111
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 } ) ;
112115 const checkedOptions = await menu ( ) . locator ( "input:checked" ) ;
113116 await expect ( checkedOptions ) . toHaveCount ( 2 ) ;
114117 await expect ( checkedOptions . first ( ) ) . toBeChecked ( ) ;
0 commit comments