@@ -3,65 +3,127 @@ import { render, fireEvent } from '@testing-library/react';
33import Segmented from '../index' ;
44
55describe ( '<Segmented />' , ( ) => {
6+ const options = [
7+ { label : 'Daily' , value : 'daily' } ,
8+ { label : 'Weekly' , value : 'weekly' } ,
9+ { label : 'Monthly' , value : 'monthly' } ,
10+ ] ;
11+
612 it ( 'should match the snapshot' , ( ) => {
7- const { asFragment } = render ( < Segmented options = { [ 'Daily' , 'Weekly' , 'Monthly' ] } /> ) ;
13+ const { asFragment } = render ( < Segmented options = { options } /> ) ;
814 expect ( asFragment ( ) ) . toMatchSnapshot ( ) ;
915 } ) ;
1016
1117 it ( 'should render correctly' , ( ) => {
12- const { container } = render ( < Segmented options = { [ 'A' , 'B' , 'C' ] } /> ) ;
18+ const { container } = render (
19+ < Segmented
20+ options = { [
21+ { label : 'A' , value : 'a' } ,
22+ { label : 'B' , value : 'b' } ,
23+ { label : 'C' , value : 'c' } ,
24+ ] }
25+ />
26+ ) ;
1327 expect ( container . firstChild ) . toHaveClass ( 'ty-segmented' ) ;
1428 } ) ;
1529
1630 it ( 'should render options' , ( ) => {
17- const { getByText } = render ( < Segmented options = { [ 'Foo' , 'Bar' ] } /> ) ;
31+ const { getByText } = render (
32+ < Segmented
33+ options = { [
34+ { label : 'Foo' , value : 'foo' } ,
35+ { label : 'Bar' , value : 'bar' } ,
36+ ] }
37+ />
38+ ) ;
1839 expect ( getByText ( 'Foo' ) ) . toBeInTheDocument ( ) ;
1940 expect ( getByText ( 'Bar' ) ) . toBeInTheDocument ( ) ;
2041 } ) ;
2142
2243 it ( 'should select default value' , ( ) => {
2344 const { container } = render (
24- < Segmented options = { [ 'A' , 'B' , 'C' ] } defaultValue = "B" />
45+ < Segmented
46+ options = { [
47+ { label : 'A' , value : 'a' } ,
48+ { label : 'B' , value : 'b' } ,
49+ { label : 'C' , value : 'c' } ,
50+ ] }
51+ defaultValue = "b"
52+ />
2553 ) ;
2654 const active = container . querySelector ( '.ty-segmented__item_active' ) ;
2755 expect ( active ) . toBeTruthy ( ) ;
2856 expect ( active ! ) . toHaveTextContent ( 'B' ) ;
2957 } ) ;
3058
31- it ( 'should handle onChange' , ( ) => {
32- const onChange = jest . fn ( ) ;
33- const { getByText } = render (
34- < Segmented options = { [ 'A' , 'B' ] } onChange = { onChange } />
35- ) ;
36- fireEvent . click ( getByText ( 'B' ) ) ;
37- expect ( onChange ) . toHaveBeenCalledWith ( 'B' ) ;
59+ it ( 'should not select any option by default' , ( ) => {
60+ const { container } = render ( < Segmented options = { options } /> ) ;
61+ expect ( container . querySelector ( '.ty-segmented__item_active' ) ) . toBeNull ( ) ;
3862 } ) ;
3963
40- it ( 'should support object options' , ( ) => {
41- const { getByText } = render (
64+ it ( 'should handle onChange' , ( ) => {
65+ const onChange = jest . fn ( ) ;
66+ const { getByLabelText } = render (
4267 < Segmented
4368 options = { [
44- { label : 'Option A' , value : 'a' } ,
45- { label : 'Option B' , value : 'b' } ,
69+ { label : 'A' , value : 'a' } ,
70+ { label : 'B' , value : 'b' } ,
4671 ] }
72+ onChange = { onChange }
4773 />
4874 ) ;
49- expect ( getByText ( 'Option A' ) ) . toBeInTheDocument ( ) ;
75+ fireEvent . click ( getByLabelText ( 'B' ) ) ;
76+ expect ( onChange ) . toHaveBeenCalledWith (
77+ 'b' ,
78+ { label : 'B' , value : 'b' } ,
79+ expect . any ( Object )
80+ ) ;
5081 } ) ;
5182
5283 it ( 'should support block mode' , ( ) => {
5384 const { container } = render (
54- < Segmented options = { [ 'A' , 'B' ] } block />
85+ < Segmented
86+ options = { [
87+ { label : 'A' , value : 'a' } ,
88+ { label : 'B' , value : 'b' } ,
89+ ] }
90+ block
91+ />
5592 ) ;
5693 expect ( container . firstChild ) . toHaveClass ( 'ty-segmented_block' ) ;
5794 } ) ;
5895
5996 it ( 'should support disabled' , ( ) => {
6097 const onChange = jest . fn ( ) ;
61- const { getByText } = render (
62- < Segmented options = { [ 'A' , 'B' ] } disabled onChange = { onChange } />
98+ const { getByLabelText } = render (
99+ < Segmented
100+ options = { [
101+ { label : 'A' , value : 'a' } ,
102+ { label : 'B' , value : 'b' } ,
103+ ] }
104+ disabled
105+ onChange = { onChange }
106+ />
63107 ) ;
64- fireEvent . click ( getByText ( 'B' ) ) ;
108+ fireEvent . click ( getByLabelText ( 'B' ) ) ;
65109 expect ( onChange ) . not . toHaveBeenCalled ( ) ;
66110 } ) ;
111+
112+ it ( 'should reset uncontrolled selection when option is removed' , ( ) => {
113+ const { container, rerender } = render (
114+ < Segmented options = { options } defaultValue = "weekly" />
115+ ) ;
116+
117+ rerender (
118+ < Segmented
119+ options = { [
120+ { label : 'Daily' , value : 'daily' } ,
121+ { label : 'Monthly' , value : 'monthly' } ,
122+ ] }
123+ defaultValue = "weekly"
124+ />
125+ ) ;
126+
127+ expect ( container . querySelector ( '.ty-segmented__item_active' ) ) . toBeNull ( ) ;
128+ } ) ;
67129} ) ;
0 commit comments