11import { h } from '@stencil/core' ;
22import { newSpecPage } from '@stencil/core/testing' ;
33
4- import { PickerColumn } from '../picker-column' ;
54import { PickerColumnOption } from '../../picker-column-option/picker-column-option' ;
5+ import { PickerColumn } from '../picker-column' ;
66
7- describe ( 'picker-column: assistive element ' , ( ) => {
7+ describe ( 'picker-column' , ( ) => {
88 beforeEach ( ( ) => {
99 const mockIntersectionObserver = jest . fn ( ) ;
1010 mockIntersectionObserver . mockReturnValue ( {
@@ -22,9 +22,9 @@ describe('picker-column: assistive element', () => {
2222 } ) ;
2323
2424 const pickerCol = page . body . querySelector ( 'ion-picker-column' ) ! ;
25- const assistiveFocusable = pickerCol . shadowRoot ! . querySelector ( '.assistive-focusable ' ) ! ;
25+ const pickerOpts = pickerCol . shadowRoot ! . querySelector ( '.picker-opts ' ) ! ;
2626
27- expect ( assistiveFocusable . getAttribute ( 'aria-label' ) ) . not . toBe ( null ) ;
27+ expect ( pickerOpts . getAttribute ( 'aria-label' ) ) . not . toBe ( null ) ;
2828 } ) ;
2929
3030 it ( 'should have a custom label' , async ( ) => {
@@ -34,9 +34,9 @@ describe('picker-column: assistive element', () => {
3434 } ) ;
3535
3636 const pickerCol = page . body . querySelector ( 'ion-picker-column' ) ! ;
37- const assistiveFocusable = pickerCol . shadowRoot ! . querySelector ( '.assistive-focusable ' ) ! ;
37+ const pickerOpts = pickerCol . shadowRoot ! . querySelector ( '.picker-opts ' ) ! ;
3838
39- expect ( assistiveFocusable . getAttribute ( 'aria-label' ) ) . toBe ( 'my label' ) ;
39+ expect ( pickerOpts . getAttribute ( 'aria-label' ) ) . toBe ( 'my label' ) ;
4040 } ) ;
4141
4242 it ( 'should update a custom label' , async ( ) => {
@@ -46,12 +46,12 @@ describe('picker-column: assistive element', () => {
4646 } ) ;
4747
4848 const pickerCol = page . body . querySelector ( 'ion-picker-column' ) ! ;
49- const assistiveFocusable = pickerCol . shadowRoot ! . querySelector ( '.assistive-focusable ' ) ! ;
49+ const pickerOpts = pickerCol . shadowRoot ! . querySelector ( '.picker-opts ' ) ! ;
5050
5151 pickerCol . setAttribute ( 'aria-label' , 'my label' ) ;
5252 await page . waitForChanges ( ) ;
5353
54- expect ( assistiveFocusable . getAttribute ( 'aria-label' ) ) . toBe ( 'my label' ) ;
54+ expect ( pickerOpts . getAttribute ( 'aria-label' ) ) . toBe ( 'my label' ) ;
5555 } ) ;
5656
5757 it ( 'should receive keyboard focus when enabled' , async ( ) => {
@@ -61,9 +61,9 @@ describe('picker-column: assistive element', () => {
6161 } ) ;
6262
6363 const pickerCol = page . body . querySelector ( 'ion-picker-column' ) ! ;
64- const assistiveFocusable = pickerCol . shadowRoot ! . querySelector < HTMLElement > ( '.assistive-focusable ' ) ! ;
64+ const pickerOpts = pickerCol . shadowRoot ! . querySelector < HTMLElement > ( '.picker-opts ' ) ! ;
6565
66- expect ( assistiveFocusable . tabIndex ) . toBe ( 0 ) ;
66+ expect ( pickerOpts . tabIndex ) . toBe ( 0 ) ;
6767 } ) ;
6868
6969 it ( 'should not receive keyboard focus when disabled' , async ( ) => {
@@ -73,9 +73,9 @@ describe('picker-column: assistive element', () => {
7373 } ) ;
7474
7575 const pickerCol = page . body . querySelector ( 'ion-picker-column' ) ! ;
76- const assistiveFocusable = pickerCol . shadowRoot ! . querySelector < HTMLElement > ( '.assistive-focusable ' ) ! ;
76+ const pickerOpts = pickerCol . shadowRoot ! . querySelector < HTMLElement > ( '.picker-opts ' ) ! ;
7777
78- expect ( assistiveFocusable . tabIndex ) . toBe ( - 1 ) ;
78+ expect ( pickerOpts . tabIndex ) . toBe ( - 1 ) ;
7979 } ) ;
8080
8181 it ( 'should use option aria-label as assistive element aria-valuetext' , async ( ) => {
@@ -91,9 +91,9 @@ describe('picker-column: assistive element', () => {
9191 } ) ;
9292
9393 const pickerCol = page . body . querySelector ( 'ion-picker-column' ) ! ;
94- const assistiveFocusable = pickerCol . shadowRoot ! . querySelector ( '.assistive-focusable ' ) ! ;
94+ const pickerOpts = pickerCol . shadowRoot ! . querySelector ( '.picker-opts ' ) ! ;
9595
96- expect ( assistiveFocusable . getAttribute ( 'aria-valuetext' ) ) . toBe ( 'My Label' ) ;
96+ expect ( pickerOpts . getAttribute ( 'aria-valuetext' ) ) . toBe ( 'My Label' ) ;
9797 } ) ;
9898
9999 it ( 'should use option text as assistive element aria-valuetext when no label provided' , async ( ) => {
@@ -107,8 +107,8 @@ describe('picker-column: assistive element', () => {
107107 } ) ;
108108
109109 const pickerCol = page . body . querySelector ( 'ion-picker-column' ) ! ;
110- const assistiveFocusable = pickerCol . shadowRoot ! . querySelector ( '.assistive-focusable ' ) ! ;
110+ const pickerOpts = pickerCol . shadowRoot ! . querySelector ( '.picker-opts ' ) ! ;
111111
112- expect ( assistiveFocusable . getAttribute ( 'aria-valuetext' ) ) . toBe ( 'My Text' ) ;
112+ expect ( pickerOpts . getAttribute ( 'aria-valuetext' ) ) . toBe ( 'My Text' ) ;
113113 } ) ;
114114} ) ;
0 commit comments