1+ import * as React from 'react' ;
2+ import * as ReactDOM from 'react-dom' ;
3+
4+ import { Checkbox , ICheckboxProps } from "./component" ;
5+
6+ import { expect } from 'chai' ;
7+ import { mock , spy } from 'sinon' ;
8+ import { shallow , ShallowWrapper , mount , configure , ReactWrapper } from "enzyme" ;
9+
10+ // Configure enzyme
11+ import * as Adapter from "enzyme-adapter-react-16" ;
12+ configure ( { adapter : new Adapter ( ) } ) ;
13+
14+ describe ( "Checkbox" , ( ) => {
15+ let defaultProps : ICheckboxProps ;
16+ beforeEach ( ( ) => {
17+ defaultProps = {
18+ } ;
19+ } ) ;
20+
21+ it ( "Render" , ( ) => {
22+ let wrapper = shallow ( < Checkbox { ...defaultProps } /> ) ;
23+ expect ( wrapper ) . to . have . length ( 1 ) ;
24+ } ) ;
25+
26+ describe ( "Classname" , ( ) => {
27+ it ( "Default has classname" , ( ) => {
28+ let wrapper = shallow ( < Checkbox { ...defaultProps } /> ) ;
29+ let rootElement = wrapper . first ( ) ;
30+ expect ( rootElement . props ( ) . className ) . to . contain ( 'sci-react-checkbox' ) ;
31+ } ) ;
32+
33+ it ( "Disable style has no classname" , ( ) => {
34+ let wrapper = shallow ( < Checkbox { ...defaultProps } className = "blue" isBaseStylesDisabled = { true } /> ) ;
35+ let rootElement = wrapper . first ( ) ;
36+ expect ( rootElement . props ( ) . className ) . to . not . contain ( 'sci-react-checkbox' ) ;
37+ } ) ;
38+
39+ it ( "Class name override" , ( ) => {
40+ let wrapper = shallow ( < Checkbox { ...defaultProps } className = "blue" /> ) ;
41+ let rootElement = wrapper . first ( ) ;
42+ expect ( rootElement . props ( ) . className ) . to . contain ( 'sci-react-checkbox' ) ;
43+ expect ( rootElement . props ( ) . className ) . to . contain ( 'blue' ) ;
44+ } ) ;
45+ } ) ;
46+
47+ describe ( "Uncontrolled" , ( ) => {
48+ beforeEach ( ( ) => {
49+ defaultProps = {
50+ checked : true
51+ } ;
52+ } ) ;
53+
54+ it ( "Does not maintain it's own state" , ( ) => {
55+ // Render and validate the checkbox is checked
56+ let wrapper = mount ( < Checkbox { ...defaultProps } /> ) ;
57+ expect ( wrapper . getDOMNode ( ) . classList . contains ( "checked" ) , "Should have class 'checked'" ) . to . be . true ;
58+
59+ // Find and click on the visual
60+ let visual = wrapper . find ( ".visual" ) ;
61+ expect ( visual . length , "visual.length" ) . not . to . equal ( 0 ) ;
62+ // For some reason we are getting this node twice... just make sure it's the same thing
63+ expect ( visual . at ( 0 ) . getDOMNode ( ) === visual . at ( 1 ) . getDOMNode ( ) ) . to . be . true ;
64+ visual . first ( ) . simulate ( "click" ) ;
65+ // Now for some reason, onChange isn't called whne we click the visual element, lets run it manually
66+ wrapper . find ( ".data" ) . props ( ) . onChange ( {
67+ isDefaultPrevented : ( ) => { return false }
68+ } as any ) ;
69+
70+ // Now check the className
71+ expect ( wrapper . getDOMNode ( ) . classList . contains ( "checked" ) , "Should have class 'checked'" ) . to . be . true ;
72+ } ) ;
73+
74+ it ( "Callback onChange" , ( done : MochaDone ) => {
75+ // Props setup
76+ defaultProps . onChange = done ;
77+ let onChangeSpy = spy ( defaultProps , "onChange" ) ;
78+
79+ // Render and validate the checkbox is checked
80+ let wrapper = mount ( < Checkbox { ...defaultProps } /> ) ;
81+ expect ( wrapper . getDOMNode ( ) . classList . contains ( "checked" ) , "Should have class 'checked'" ) . to . be . true ;
82+
83+ // Find and click on the visual
84+ let visual = wrapper . find ( ".visual" ) ;
85+ expect ( visual . length , "visual.length" ) . not . to . equal ( 0 ) ;
86+ // For some reason we are getting this node twice... just make sure it's the same thing
87+ expect ( visual . at ( 0 ) . getDOMNode ( ) === visual . at ( 1 ) . getDOMNode ( ) ) . to . be . true ;
88+ visual . first ( ) . simulate ( "click" ) ;
89+ // Now for some reason, onChange isn't called whne we click the visual element, lets run it manually
90+ wrapper . find ( ".data" ) . props ( ) . onChange ( null ) ;
91+ } ) ;
92+
93+ it ( "Has no label" , ( ) => {
94+ let wrapper = shallow ( < Checkbox { ...defaultProps } /> ) ;
95+ expect ( wrapper . find ( ".text" ) . length ) . to . equal ( 0 ) ;
96+ } ) ;
97+
98+ it ( "Has label" , ( ) => {
99+ defaultProps . labelText = "I'm a label!" ;
100+ let wrapper = shallow ( < Checkbox { ...defaultProps } /> ) ;
101+ expect ( wrapper . find ( ".text" ) . length ) . to . equal ( 1 ) ;
102+ expect ( wrapper . find ( ".text" ) . text ( ) ) . to . equal ( defaultProps . labelText ) ;
103+ } ) ;
104+ } ) ;
105+
106+ describe ( "Controlled" , ( ) => {
107+ beforeEach ( ( ) => {
108+ defaultProps = {
109+ defaultChecked : true
110+ } ;
111+ } ) ;
112+
113+ it ( "Maintains it's own state" , ( ) => {
114+ // Render and validate the checkbox is checked
115+ let wrapper = mount ( < Checkbox { ...defaultProps } /> ) ;
116+ expect ( wrapper . getDOMNode ( ) . classList . contains ( "checked" ) , "Should have class 'checked'" ) . to . be . true ;
117+
118+ // Find and click on the visual
119+ let visual = wrapper . find ( ".visual" ) ;
120+ expect ( visual . length , "visual.length" ) . not . to . equal ( 0 ) ;
121+ // For some reason we are getting this node twice... just make sure it's the same thing
122+ expect ( visual . at ( 0 ) . getDOMNode ( ) === visual . at ( 1 ) . getDOMNode ( ) ) . to . be . true ;
123+ visual . first ( ) . simulate ( "click" ) ;
124+ // Now for some reason, onChange isn't called whne we click the visual element, lets run it manually
125+ wrapper . find ( ".data" ) . props ( ) . onChange ( {
126+ isDefaultPrevented : ( ) => { return false }
127+ } as any ) ;
128+
129+ // Now check the className
130+ expect ( wrapper . getDOMNode ( ) . classList . contains ( "checked" ) , "Should have class 'checked'" ) . to . be . false ;
131+ } ) ;
132+
133+ it ( "State does not change if default is prevented" , ( ) => {
134+ // Render and validate the checkbox is checked
135+ let wrapper = mount ( < Checkbox { ...defaultProps } /> ) ;
136+ expect ( wrapper . getDOMNode ( ) . classList . contains ( "checked" ) , "Should have class 'checked'" ) . to . be . true ;
137+
138+ // Find and click on the visual
139+ let visual = wrapper . find ( ".visual" ) ;
140+ expect ( visual . length , "visual.length" ) . not . to . equal ( 0 ) ;
141+ // For some reason we are getting this node twice... just make sure it's the same thing
142+ expect ( visual . at ( 0 ) . getDOMNode ( ) === visual . at ( 1 ) . getDOMNode ( ) ) . to . be . true ;
143+ visual . first ( ) . simulate ( "click" ) ;
144+ // Now for some reason, onChange isn't called whne we click the visual element, lets run it manually
145+ wrapper . find ( ".data" ) . props ( ) . onChange ( {
146+ isDefaultPrevented : ( ) => { return true }
147+ } as any ) ;
148+
149+ // Now check the className
150+ expect ( wrapper . getDOMNode ( ) . classList . contains ( "checked" ) , "Should have class 'checked'" ) . to . be . true ;
151+ } ) ;
152+
153+ it ( "Callback onChange" , ( done : MochaDone ) => {
154+ // Props setup
155+ defaultProps . onChange = done ;
156+ let onChangeSpy = spy ( defaultProps , "onChange" ) ;
157+
158+ // Render and validate the checkbox is checked
159+ let wrapper = mount ( < Checkbox { ...defaultProps } /> ) ;
160+ expect ( wrapper . getDOMNode ( ) . classList . contains ( "checked" ) , "Should have class 'checked'" ) . to . be . true ;
161+
162+ // Find and click on the visual
163+ let visual = wrapper . find ( ".visual" ) ;
164+ expect ( visual . length , "visual.length" ) . not . to . equal ( 0 ) ;
165+ // For some reason we are getting this node twice... just make sure it's the same thing
166+ expect ( visual . at ( 0 ) . getDOMNode ( ) === visual . at ( 1 ) . getDOMNode ( ) ) . to . be . true ;
167+ visual . first ( ) . simulate ( "click" ) ;
168+ // Now for some reason, onChange isn't called whne we click the visual element, lets run it manually
169+ wrapper . find ( ".data" ) . props ( ) . onChange ( null ) ;
170+ } ) ;
171+
172+ it ( "Has no label" , ( ) => {
173+ let wrapper = shallow ( < Checkbox { ...defaultProps } /> ) ;
174+ expect ( wrapper . find ( ".text" ) . length ) . to . equal ( 0 ) ;
175+ } ) ;
176+
177+ it ( "Has label" , ( ) => {
178+ defaultProps . labelText = "I'm a label!" ;
179+ let wrapper = shallow ( < Checkbox { ...defaultProps } /> ) ;
180+ expect ( wrapper . find ( ".text" ) . length ) . to . equal ( 1 ) ;
181+ expect ( wrapper . find ( ".text" ) . text ( ) ) . to . equal ( defaultProps . labelText ) ;
182+ } ) ;
183+ } ) ;
184+ } ) ;
0 commit comments