Skip to content

Commit e74fd1f

Browse files
layershiftermarcosmoura
layershifter
and
marcosmoura
authored
chore: fix tests in Toolbar.cy.tsx (#34119)
Co-authored-by: Marcos Moura <[email protected]>
1 parent deee540 commit e74fd1f

File tree

2 files changed

+53
-92
lines changed

2 files changed

+53
-92
lines changed

‎apps/react-18-tests-v9/cypress.config.ts

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { baseConfig } from '@fluentui/scripts-cypress';
55
const excludedSpecs = [
66
'!' + path.resolve('../../packages/react-components/react-overflow/library/src/**/*.cy.{tsx,ts}'),
77
'!' + path.resolve('../../packages/react-components/react-tag-picker/library/src/**/*.cy.{tsx,ts}'),
8-
'!' + path.resolve('../../packages/react-components/react-toolbar/library/src/**/*.cy.{tsx,ts}'),
98
];
109

1110
// Include all tests from this app and the components package

‎packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.cy.tsx

+53-91
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* @TODO: Fix tests to run on React 18 */
2-
31
import * as React from 'react';
42
import { mount as mountBase } from '@cypress/react';
53

@@ -32,32 +30,20 @@ describe('Toolbar', () => {
3230
</Toolbar>,
3331
);
3432

35-
cy.get(button)
36-
.eq(0)
37-
.focus()
38-
.get(button)
39-
.eq(0)
40-
.should('be.focused')
41-
// Navigate with right arrow to the right
42-
.type('{rightArrow}')
43-
.get(button)
44-
.eq(1)
45-
.should('be.focused')
46-
// Navigate with down arrow to the right
47-
.type('{downArrow}')
48-
.get(button)
49-
.eq(2)
50-
.should('be.focused')
51-
// Navigate with up arrow to the right
52-
.type('{upArrow}')
53-
.get(button)
54-
.eq(1)
55-
.should('be.focused')
56-
// Navigate with left arrow to the right
57-
.type('{leftArrow}')
58-
.get(button)
59-
.eq(0)
60-
.should('be.focused');
33+
cy.get(button).eq(0).click();
34+
cy.get(button).eq(0).focused();
35+
36+
cy.get(button).eq(0).type('{rightArrow}');
37+
cy.get(button).eq(1).focused();
38+
39+
cy.get(button).eq(1).type('{downArrow}');
40+
cy.get(button).eq(2).focused();
41+
42+
cy.get(button).eq(2).type('{upArrow}');
43+
cy.get(button).eq(1).focused();
44+
45+
cy.get(button).eq(1).type('{leftArrow}');
46+
cy.get(button).eq(0).focused();
6147
});
6248

6349
it('should have circular navigation', () => {
@@ -70,22 +56,14 @@ describe('Toolbar', () => {
7056
</Toolbar>,
7157
);
7258

73-
cy.get(button)
74-
.eq(3)
75-
.focus()
76-
.get(button)
77-
.eq(3)
78-
.should('be.focused')
79-
// Navigate from last to first
80-
.type('{rightArrow}')
81-
.get(button)
82-
.eq(0)
83-
.should('be.focused')
84-
// Navigate from first to last
85-
.type('{leftArrow}')
86-
.get(button)
87-
.eq(3)
88-
.should('be.focused');
59+
cy.get(button).eq(3).click();
60+
cy.get(button).eq(3).focused();
61+
62+
cy.get(button).eq(3).type('{rightArrow}');
63+
cy.get(button).eq(0).focused();
64+
65+
cy.get(button).eq(0).type('{leftArrow}');
66+
cy.get(button).eq(3).focused();
8967
});
9068
});
9169

@@ -99,18 +77,13 @@ describe('Toolbar', () => {
9977
</Toolbar>,
10078
);
10179

102-
cy.get(button)
103-
.eq(0)
104-
.focus()
105-
.get(button)
106-
.eq(0)
107-
.should('have.attr', 'aria-pressed', 'false')
108-
.get(button)
109-
.eq(0)
110-
.click()
111-
.get(button)
112-
.eq(0)
113-
.should('have.attr', 'aria-pressed', 'true');
80+
cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'false');
81+
82+
cy.get(button).eq(0).click();
83+
cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
84+
85+
cy.get(button).eq(0).click();
86+
cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'false');
11487
});
11588

11689
it('should set default checked values', () => {
@@ -140,18 +113,13 @@ describe('Toolbar', () => {
140113
</Toolbar>,
141114
);
142115

143-
cy.get(button)
144-
.eq(0)
145-
.focus()
146-
.get(button)
147-
.eq(0)
148-
.should('have.attr', 'aria-checked', 'false')
149-
.get(button)
150-
.eq(0)
151-
.click()
152-
.get(button)
153-
.eq(0)
154-
.should('have.attr', 'aria-checked', 'true');
116+
cy.get(button).eq(0).should('have.attr', 'aria-checked', 'false');
117+
118+
cy.get(button).eq(0).click();
119+
cy.get(button).eq(0).should('have.attr', 'aria-checked', 'true');
120+
121+
cy.get(button).eq(0).click();
122+
cy.get(button).eq(0).should('have.attr', 'aria-checked', 'true');
155123
});
156124

157125
it('should set default checked values', () => {
@@ -186,23 +154,16 @@ describe('Toolbar', () => {
186154
</Toolbar>,
187155
);
188156

189-
cy.get(button)
190-
.eq(0)
191-
.should('have.attr', 'aria-checked', 'true')
192-
.get(button)
193-
.eq(1)
194-
.click()
195-
.get(button)
196-
.eq(1)
197-
.should('have.attr', 'aria-checked', 'true')
198-
.get(button)
199-
.eq(0)
200-
.should('have.attr', 'aria-checked', 'false');
157+
cy.get(button).eq(0).should('have.attr', 'aria-checked', 'true');
158+
cy.get(button).eq(1).click();
159+
160+
cy.get(button).eq(1).should('have.attr', 'aria-checked', 'true');
161+
cy.get(button).eq(0).should('have.attr', 'aria-checked', 'false');
201162
});
202163
});
203164
});
204165

205-
describe('MenuTrigger', () => {
166+
describe('ToolbarDivider', () => {
206167
it('should focus first element', () => {
207168
mount(
208169
<Toolbar>
@@ -213,7 +174,7 @@ describe('MenuTrigger', () => {
213174
</Toolbar>,
214175
);
215176

216-
cy.get('html').type('Tab').type('{rightarrow}').get('[type="button"]').eq(0).should('be.focused');
177+
cy.get('html').type('Tab').type('{rightarrow}').get(button).eq(0).focused();
217178
});
218179

219180
it('should navigate with arrow key', () => {
@@ -225,14 +186,11 @@ describe('MenuTrigger', () => {
225186
<ToolbarButton>Item 3</ToolbarButton>
226187
</Toolbar>,
227188
);
228-
cy.get('[type="button"]')
229-
.eq(0)
230-
.focus()
231-
.type('{rightarrow}')
232-
.type('{rightarrow}')
233-
.get('[type="button"]')
234-
.eq(1)
235-
.should('be.focused');
189+
190+
cy.get(button).eq(0).click();
191+
192+
cy.get(button).eq(0).type('{rightarrow}');
193+
cy.get(button).eq(1).focused();
236194
});
237195

238196
it('should have circular navigation', () => {
@@ -244,6 +202,10 @@ describe('MenuTrigger', () => {
244202
<ToolbarButton>Item 3</ToolbarButton>
245203
</Toolbar>,
246204
);
247-
cy.get('[type="button"]').eq(0).focus().type('{leftarrow}').get('[type="button"]').eq(2).should('be.focused');
205+
206+
cy.get(button).eq(0).click();
207+
208+
cy.get(button).eq(0).type('{leftarrow}');
209+
cy.get(button).eq(2).focused();
248210
});
249211
});

0 commit comments

Comments
 (0)