@@ -2,29 +2,26 @@ import { render, fireEvent } from '@testing-library/vue'
2
2
import '@testing-library/jest-dom/extend-expect'
3
3
import Select from './components/Select'
4
4
5
- // There are several ways to interact with a Select component.
5
+ // In this test file we showcase several ways to interact with a Select element
6
6
test ( 'Select component' , async ( ) => {
7
+ let optionElement
7
8
const { getByDisplayValue, getByText } = render ( Select )
8
9
9
- // Get the Select element by using the initially displayed value.
10
+ // Get the Select element by using the initially displayed value
10
11
const select = getByDisplayValue ( 'Tyrannosaurus' )
11
-
12
- // Assert initial value
13
12
expect ( select . value ) . toBe ( 'dino1' )
14
13
15
- // Update it by manually sending an option value
14
+ // Update it by manually sending a valid option value
16
15
await fireEvent . update ( select , 'dino2' )
17
16
expect ( select . value ) . toBe ( 'dino2' )
18
17
19
- // We can also get the option value from the element itself
20
- await fireEvent . update ( select , getByText ( 'Tyrannosaurus' ) . value )
21
- expect ( select . value ) . toBe ( 'dino1' )
22
-
23
18
// We can trigger an update event by directly getting the <option> element
24
- await fireEvent . update ( getByText ( 'Deinonychus' ) )
19
+ optionElement = getByText ( 'Deinonychus' )
20
+ await fireEvent . update ( optionElement )
25
21
expect ( select . value ) . toBe ( 'dino3' )
26
22
27
23
// ...even if option is within an <optgroup>
28
- await fireEvent . update ( getByText ( 'Diplodocus' ) )
24
+ optionElement = getByText ( 'Diplodocus' )
25
+ await fireEvent . update ( optionElement )
29
26
expect ( select . value ) . toBe ( 'dino4' )
30
27
} )
0 commit comments