-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
984 lines (735 loc) · 116 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Test-driven-react-native-android-application by JAYKRISHNAN</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Test-driven-react-native-android-application</h1>
<h2 class="project-tagline"></h2>
<a href="https://github.com/JAYKRISHNAN/Test-driven-react-native-android-application" class="btn">View on GitHub</a>
<a href="https://github.com/JAYKRISHNAN/Test-driven-react-native-android-application/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/JAYKRISHNAN/Test-driven-react-native-android-application/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<h1>
<a id="test-driving-react-native-applications" class="anchor" href="#test-driving-react-native-applications" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Test driving react native applications</h1>
<p>React Native is a game changing mobile app development framework that concentrates on fast development. Based on the philosophy "Learn once, write anywhere", it makes it possible to build IOS, Android and Windows mobile apps just using Javascript.</p>
<p>So React Native helps you to build awesome applications across multiple platforms. Now you have one question lingering in your head and that is the reason you are reading this post. How am I going to test these ? We also had the same question while working on React Native and couldn't find a hands-on tutorial that helps a beginner get started on writing tests for React Native applications. Read on this post and once you finish it, you will feel much more confident in testing React Native applications.</p>
<p>This tutorial assumes you are comfortable working with React Native, basic concepts of React, and testing of Javascript code. If not, feel free to checkout the following links.</p>
<p>After completing this tutorial you will be able to</p>
<ul>
<li>Write unit tests for your component logic.</li>
<li>Test behaviour of components on various user interactions like press and scroll.</li>
<li>Easily test defaultProps, propTypes, state transitions and similar aspects of React components. </li>
<li>Appreciate how TDD encourages you to follow idioms in react.</li>
</ul>
<p>Before we actually jump into the code, let us take a brief walkthrough over our test setup. We will be using the following libraries for testing.</p>
<ul>
<li>[Babel][1]: A Javascript compiler to transpile our javascript code so that it is compatible everywhere.</li>
<li>[Mocha][2]: A Javascript testing framework running on [node.js][3] to run our tests.</li>
<li>[Chai][4] : A library that provides us with interfaces to write assertions in our test.</li>
<li>[Sinon][5]: A library that provides us with spies, stubs and mocks which are used extensively while testing.</li>
<li>[React Native Mock][6] : Library that provides a completely mocked version of react-native that is easily testable.</li>
<li>[Enzyme][7]: A React test utility that helps us to write painless tests for react components.JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components.</li>
</ul>
<p>Setting all these up is a pain, but we have done that for you. Checkout our [react native boiler plate][8] that helps you kickstart your application development with all the setup done for state model, testing, continuous integration etc. Go to your console and type the following commands.</p>
<pre><code>git clone https://github.com/multunus/react-native-boilerplate ReactNativeBoilerplate
cd ReactNativeBoilerplate
npm install
</code></pre>
<p>Rename <code>config.example.json</code> to <code>config.json</code> and modify it as required.</p>
<p>The app is setup to use the [NodeJS JWT Authentication sample server][9], follow the instructions and update the baseURL in<code>config.json</code> to a valid url say <code>http://localhost</code>.</p>
<p>That's it. Time for coding!</p>
<p>It's time to rewind back a little bit and refresh the first tutorial you ever did on [React][10]. The simple Comment Box. If you haven't gone through it, you can take a look at it [here][11]. We will build the same application in React Native using [TDD][12]. We will be replacing the react components used in the tutorial by native components for android and using [Async Storage][13] provided by react native to store our data instead of a server with a database. If you are not comfortable with Test Driven Development, you may choose to write your code and then write tests for it. But we feel TDD improves the quality of your code and especially while working on React, this is more evident as the components you build will be simple, testable and you will refrain yourselves from writing too much of logic into your components.</p>
<p>We are going to build the app in Android platform. But don't worry if you are using react native for IOS or Windows mobile app development, the testing techniques you learn here is independent of the platform and can be applied across platforms.<br>
We shall use the same component structure as in the react tutorial for our app.</p>
<ul>
<li>A view of all of the comments</li>
<li>A form to submit a comment</li>
</ul>
<p>We will have the following component hierarchy</p>
<p>-<code>CommentBox</code>: The root component<br>
-<code>CommentList</code> : To display a list of all components<br>
-<code>Comment</code> : To display a single comment<br>
-<code>CommentForm</code> : A form for user to write a comment</p>
<p><strong>Our first test</strong></p>
<p>Okay, now it's time for coding. Let us write our first test. The components for the app are written in <code>src/components</code> directory and the corresponding tests for components are written in <code>src/components/__specs__</code> directory. Open a new file <code>src/components/__specs__/Comment.spec.js</code> and write the following code.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">Comment</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../Comment.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><comment><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a view component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>comment<span class="pl-k">><</span><span class="pl-k">/</span>comment<span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(View);
});
});</pre></div>
<p>That is a simple test to begin with. Let's checkout what is going on here. We are using [shallow rendering API][14] of enzyme here. It is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behaviour of child components. <code>shallow()</code> method returns a shallow wrapper object around the component that is to be tested. Enzyme provides a rich set of methods that can be called on the wrapper instance, for testing various aspects of a component. Check out the [docs][14] . In this spec we are just checking the type of the component.</p>
<p>We must appreciate the work of Leland Richardson for building [Enzyme]<a href="JS%20testing%20utility%20which%20helps%20us%20write%20tests%20for%20react%20%22web%22%20components">15</a> and [React Native Mock]<a href="fully%20mocked%20and%20test-friendly%20version%20of%20react%20native,%20which%20makes%20enzyme%20compatible%20with%20react%20native">6</a>. The result of this effort is painless testing of react native components.</p>
<p>Now save the file and run <code>npm test</code> from console and watch your tests fail. Now we build the <code>Comment</code> component. Open <code>src/components/Comment.js</code> and write the following code.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">View</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">Comment</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p>Now run <code>npm test</code> from console and see your tests pass. Bingo! Now we will be progressively writing tests and code to build the complete app. We'll be following the same procedure for the rest of our tutorial. Write tests, watch it fail, write code, see it passing, refactor if necessary. You can read more about [Red Green Refactor here][16] .<br>
Now that we're all good to go, let's start with the topmost component in the component structure.</p>
<p><code>src/components/__specs__/CommentBox.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span>, <span class="pl-smi">Text</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentBox</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentBox.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentbox><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">beforeEach</span>(<span class="pl-k">function</span>() {
wrapper <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentbox<span class="pl-k">></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a view component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(View);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have a title Comment It<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">contains</span>(<span class="pl-k"><</span>text<span class="pl-k">></span><span class="pl-c1">Comment</span> It<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-c1">true</span>);
});
});</pre></div>
<p>These tests describe CommentBox to be a View component and have a Text component inside it. We'll write minimal amount of code to make this test pass. and a Text component with the text "Comment It" in it. Now the actual code.</p>
<p><code>src/components/CommentBox.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">Text</span>, <span class="pl-smi">View</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentBox</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span>text<span class="pl-k">></span><span class="pl-c1">Comment</span> It<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p>We need a CommentList and CommentForm component inside our CommentBox.<br>
We'll just define these components without working logic just for now, and come back to these components and complete them later.</p>
<p><code>src/components/__specs__/CommentForm.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentform><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a view component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
wrapper <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentform<span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(View);
});
});</pre></div>
<p><code>src/components/CommentForm.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">View</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentForm</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p><code>src/components/__specs__/CommentList.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">ListView</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentList</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentList.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentlist><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a ListView component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentlist<span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(ListView);
});
});</pre></div>
<p><code>src/components/CommentList.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">ListView</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentList</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>listview<span class="pl-k">></span>
);
}
}</pre></div>
<p>Let's add them to CommentBox component. Add a couple of specs to CommentBox.spec.js as follows </p>
<p><code>src/components/__specs__/CommentBox.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span>, <span class="pl-smi">Text</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentBox</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentBox.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentList</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentList.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentbox><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">beforeEach</span>(<span class="pl-k">function</span>() {
wrapper <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentbox<span class="pl-k">></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a view component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(View);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have a title Comment It<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">contains</span>(<span class="pl-k"><</span>text<span class="pl-k">></span><span class="pl-c1">Comment</span> It<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-c1">true</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should render CommentList component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(CommentList)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">1</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should render CommentForm component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(CommentForm)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">1</span>);
});
});</pre></div>
<p><code>src/components/CommentBox.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>,<span class="pl-smi">Text</span>, <span class="pl-smi">View</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentList</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./CommentList.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentBox</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span>text<span class="pl-k">></span><span class="pl-c1">Comment</span> It<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span>commentlist<span class="pl-k">></span>
<span class="pl-k"><</span>commentform<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>commentform<span class="pl-k">><</span><span class="pl-k">/</span>commentlist<span class="pl-k">><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p>Now that we have the whole structure in place, we'll implement with the functionality starting with Comment component.</p>
<p>For each comment we'll pass author name of the comment and the actual comment as props. Comment component should take these props and render both the author name and actual comment.</p>
<p><code>src/components/__specs__/Comment.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span>, <span class="pl-smi">Text</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">Comment</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../Comment.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><comment><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a view component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>comment<span class="pl-k">><</span><span class="pl-k">/</span>comment<span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(View);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should render 2 text components<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>comment<span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(<span class="pl-c1">Text</span>)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">2</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should render the given comment<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>comment<span class="pl-k">></span> This is a comment <span class="pl-k"><</span><span class="pl-k">/</span>comment<span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">contains</span>(<span class="pl-k"><</span>text<span class="pl-k">></span> This is a comment <span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-c1">true</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should render the given author name<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>comment author<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Author<span class="pl-pds">"</span></span><span class="pl-k">><</span><span class="pl-k">/</span>comment<span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">contains</span>(<span class="pl-k"><</span>text<span class="pl-k">></span>Author<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-c1">true</span>);
});
});</pre></div>
<p><code>src/components/Comment.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">View</span>, <span class="pl-smi">Text</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">Comment</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span>text<span class="pl-k">></span>
{<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-smi">author</span>}
<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span>text<span class="pl-k">></span>
{<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-smi">children</span>}
<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p>Aha! We have successfully test-driven our first React Native component.</p>
<p>Since we have comments now, let's list them out in our CommentList component. The CommentList component takes all the comment data as an array of JSONs and render each comment.<br>
Feel free to refer docsif you have any questions on usage of [ListView][17].</p>
<p><code>src/components/__specs__/CommentList.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span>, <span class="pl-smi">ListView</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentList</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentList.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">Comment</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../Comment.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentlist><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">beforeEach</span>(<span class="pl-k">function</span>() {
data <span class="pl-k">=</span> [
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Pete Hunt<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is one comment<span class="pl-pds">"</span></span>},
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Jordan Walke<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is a super comment<span class="pl-pds">"</span></span>},
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Jordan Walkerr<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is an ordinary comment<span class="pl-pds">"</span></span>}
];
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should define its propTypes<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">CommentList</span>.<span class="pl-smi">propTypes</span>.<span class="pl-c1">data</span>).<span class="pl-smi">to</span>.<span class="pl-smi">be</span>.<span class="pl-en">an</span>(<span class="pl-s"><span class="pl-pds">'</span>function<span class="pl-pds">'</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a ListView component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentlist data<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{data}<span class="pl-pds">"</span></span><span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(ListView);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have correct datasource in state<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentlist data<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{data}<span class="pl-pds">"</span></span><span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>dataSource<span class="pl-pds">'</span></span>).<span class="pl-smi">_dataBlob</span>).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(data);
});
});</pre></div>
<p><code>src/components/CommentList.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">View</span>, <span class="pl-smi">ListView</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">Comment</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./Comment.js<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentList</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-k">static</span> propTypes <span class="pl-k">=</span> {
data<span class="pl-k">:</span> <span class="pl-smi">React</span>.<span class="pl-smi">PropTypes</span>.<span class="pl-smi">array</span>
};
<span class="pl-en">constructor</span>(<span class="pl-smi">props</span>) {
<span class="pl-v">super</span>(props);
<span class="pl-v">this</span>.<span class="pl-smi">state</span> <span class="pl-k">=</span> {
dataSource<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-en">ListView.DataSource</span>({<span class="pl-en">rowHasChanged</span><span class="pl-k">:</span> (<span class="pl-smi">r1</span>, <span class="pl-smi">r2</span>) <span class="pl-k">=></span> r1 <span class="pl-k">!==</span> r2}).<span class="pl-en">cloneWithRows</span>(<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-c1">data</span>)
};
}
<span class="pl-en">componentWillReceiveProps</span>(){
<span class="pl-v">this</span>.<span class="pl-en">setState</span>({
dataSource<span class="pl-k">:</span> <span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-smi">dataSource</span>.<span class="pl-en">cloneWithRows</span>(<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-c1">data</span>)
});
}
<span class="pl-en">render</span>() {
<span class="pl-k">return</span> (
<span class="pl-k"><</span>listview datasource<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{this.state.dataSource}<span class="pl-pds">"</span></span> renderrow<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{this.renderComment.bind(this)}<span class="pl-pds">"</span></span> <span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span>
);
}
<span class="pl-en">renderComment</span>(<span class="pl-smi">row</span>) {
<span class="pl-k">return</span> (
<span class="pl-k"><</span>comment author<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{row.author}<span class="pl-pds">"</span></span><span class="pl-k">></span>{<span class="pl-smi">row</span>.<span class="pl-c1">text</span>}<span class="pl-k"><</span><span class="pl-k">/</span>comment<span class="pl-k">></span>
);
}
}</pre></div>
<p>Every time the CommentList component gets re-rendered, we need to update the dataSource state of the component to display newly added comment to the CommentList. We are just doing that in <code>componentWillReceiveProps</code> method.</p>
<p>Note that we wrote a spec to ensure that the propTypes of the component is defined. Read more about propTypes [here][18] .</p>
<p>We can list comments but cannot add a new one. For that let us build the CommentForm component. It has two text input fields to input author name and actual comment and a submit button to submit the comment. Let's build the basic UI of this component and then build the functionality.</p>
<p><code>src/components/__specs__/CommentForm.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span>, <span class="pl-smi">TouchableNativeFeedback</span>, <span class="pl-smi">TextInput</span>, <span class="pl-smi">Text</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentform><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">beforeEach</span>(<span class="pl-k">function</span>() {
wrapper <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentform<span class="pl-k">></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a view component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(View);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have 2 TextInput components<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TextInput)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">2</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have a submit button<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TouchableNativeFeedback)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">1</span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TouchableNativeFeedback).<span class="pl-en">containsMatchingElement</span>(<span class="pl-k"><</span>text<span class="pl-k">></span>Submit<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-c1">true</span>);
});
});</pre></div>
<p><code>src/components/CommentForm.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">View</span>, <span class="pl-smi">TouchableNativeFeedback</span>, <span class="pl-smi">Text</span>, <span class="pl-smi">TextInput</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentForm</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span>textinput placeholder<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>name<span class="pl-pds">"</span></span> style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{height:<span class="pl-pds">"</span></span> <span class="pl-c1">40</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> bordercolor<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">'</span>gray<span class="pl-pds">'</span></span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> borderwidth<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-c1">1</span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span>
<span class="pl-k"><</span>textinput placeholder<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>comment<span class="pl-pds">"</span></span> style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{height:<span class="pl-pds">"</span></span> <span class="pl-c1">40</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> bordercolor<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">'</span>gray<span class="pl-pds">'</span></span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> borderwidth<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-c1">1</span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span>
<span class="pl-k"><</span>touchablenativefeedback<span class="pl-k">></span>
<span class="pl-k"><</span>view style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{width:<span class="pl-pds">"</span></span> <span class="pl-c1">150</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> height<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-c1">100</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> backgroundcolor<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">'</span>red<span class="pl-pds">'</span></span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span>
<span class="pl-k"><</span>text style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{margin:<span class="pl-pds">"</span></span> <span class="pl-c1">30</span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span>Submit<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>touchablenativefeedback<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>textinput<span class="pl-k">><</span><span class="pl-k">/</span>textinput<span class="pl-k">><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p>The functionality of the CommentForm component is as follows.</p>
<ul>
<li>The input value of two TextInput components for entering author and comment should depend on state of the CommentForm component.</li>
<li>When user enters text and the text in the input field changes, update the state to corresponding value</li>
<li>On clicking the submit button, it should invoke <code>handleCommentSubmit</code> method of CommentBox component, which is passed as props to the CommentForm component and it should also set the author and comment state to initial blank string.</li>
</ul>
<p>For time- being let us define an empty method in CommentBox component.</p>
<p><code>src/components/CommentBox.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>,<span class="pl-smi">Text</span>, <span class="pl-smi">View</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentList</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./CommentList.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentBox</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">handleCommentSubmit</span>(<span class="pl-smi">comment_data</span>) {
}
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span>text<span class="pl-k">></span><span class="pl-c1">Comment</span> It<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span>commentlist<span class="pl-k">></span>
<span class="pl-k"><</span>commentform<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>commentform<span class="pl-k">><</span><span class="pl-k">/</span>commentlist<span class="pl-k">><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p>Now lets make sure that state of the CommentForm component changes with data in the input fields and the value of the input components are dependent on state.</p>
<p><code>src/components/__specs__/CommentForm.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span>, <span class="pl-smi">TouchableNativeFeedback</span>, <span class="pl-smi">TextInput</span>, <span class="pl-smi">Text</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentform><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">beforeEach</span>(<span class="pl-k">function</span>() {
wrapper <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentform<span class="pl-k">></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a view component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(View);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have an initial state<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>name<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>comment<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have 2 TextInput components<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TextInput)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">2</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have a submit button<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TouchableNativeFeedback)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">1</span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TouchableNativeFeedback).<span class="pl-en">containsMatchingElement</span>(<span class="pl-k"><</span>text<span class="pl-k">></span>Submit<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-c1">true</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have author input component with value dependent on state<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-smi">wrapper</span>.<span class="pl-en">setState</span>({name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>JK<span class="pl-pds">'</span></span>});
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TextInput).<span class="pl-en">first</span>().<span class="pl-en">props</span>().<span class="pl-c1">value</span>).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">'</span>JK<span class="pl-pds">'</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have the comment input component with value dependent on state<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-smi">wrapper</span>.<span class="pl-en">setState</span>({comment<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>An awesome comment<span class="pl-pds">'</span></span>});
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TextInput).<span class="pl-en">at</span>(<span class="pl-c1">1</span>).<span class="pl-en">props</span>().<span class="pl-c1">value</span>).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">'</span>An awesome comment<span class="pl-pds">'</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should change state when the text of author input component changes<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">authorInputComponent</span> <span class="pl-k">=</span> <span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>TextInput<span class="pl-pds">'</span></span>).<span class="pl-en">first</span>();
<span class="pl-smi">authorInputComponent</span>.<span class="pl-en">simulate</span>(<span class="pl-s"><span class="pl-pds">'</span>ChangeText<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>wenger<span class="pl-pds">'</span></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>name<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">'</span>wenger<span class="pl-pds">'</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should change state when the text of comment input component changes<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">commentInputComponent</span> <span class="pl-k">=</span> <span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>TextInput<span class="pl-pds">'</span></span>).<span class="pl-en">at</span>(<span class="pl-c1">1</span>);
<span class="pl-smi">commentInputComponent</span>.<span class="pl-en">simulate</span>(<span class="pl-s"><span class="pl-pds">'</span>ChangeText<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>arsenal<span class="pl-pds">'</span></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>comment<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">'</span>arsenal<span class="pl-pds">'</span></span>);
});
});</pre></div>
<p><code></code><code>src/components/CommentForm.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">View</span>, <span class="pl-smi">TouchableNativeFeedback</span>, <span class="pl-smi">Text</span>, <span class="pl-smi">TextInput</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentForm</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">constructor</span>(<span class="pl-smi">props</span>) {
<span class="pl-v">super</span>(props);
<span class="pl-v">this</span>.<span class="pl-smi">state</span> <span class="pl-k">=</span> {name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>, comment<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>};
}
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span>textinput placeholder<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>name<span class="pl-pds">"</span></span> style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{height:<span class="pl-pds">"</span></span> <span class="pl-c1">40</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> bordercolor<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">'</span>gray<span class="pl-pds">'</span></span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> borderwidth<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-c1">1</span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> onchangetext<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{(text)<span class="pl-pds">"</span></span> <span class="pl-k">==</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span> <span class="pl-v">this</span>.<span class="pl-en">setState</span>({name<span class="pl-k">:</span> text})}
value<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-c1">name</span>}
<span class="pl-k">/</span><span class="pl-k">></span>
<span class="pl-k"><</span>textinput placeholder<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>comment<span class="pl-pds">"</span></span> style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{height:<span class="pl-pds">"</span></span> <span class="pl-c1">40</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> bordercolor<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">'</span>gray<span class="pl-pds">'</span></span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> borderwidth<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-c1">1</span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> onchangetext<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{(content)<span class="pl-pds">"</span></span> <span class="pl-k">==</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span> <span class="pl-v">this</span>.<span class="pl-en">setState</span>({comment<span class="pl-k">:</span> content})}
value<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-smi">comment</span>}
<span class="pl-k">/</span><span class="pl-k">></span>
<span class="pl-k"><</span>touchablenativefeedback<span class="pl-k">></span>
<span class="pl-k"><</span>view style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{width:<span class="pl-pds">"</span></span> <span class="pl-c1">150</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> height<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-c1">100</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> backgroundcolor<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">'</span>red<span class="pl-pds">'</span></span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span>
<span class="pl-k"><</span>text style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{margin:<span class="pl-pds">"</span></span> <span class="pl-c1">30</span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span>Submit<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>touchablenativefeedback<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>textinput<span class="pl-k">><</span><span class="pl-k">/</span>textinput<span class="pl-k">><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p>Now that that's done we'll wire up submission of form on clicking submit button. We must ensure that the submit button click should restore the state of two input components to initial state.</p>
<p><code>src/components/__specs__/CommentForm.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span>, <span class="pl-smi">TouchableNativeFeedback</span>, <span class="pl-smi">TextInput</span>, <span class="pl-smi">Text</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">sinon</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>sinon<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentBox</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentBox.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentform><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">beforeEach</span>(<span class="pl-k">function</span>() {
wrapper <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentform<span class="pl-k">></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a view component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(View);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have an initial state<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>name<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>comment<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have 2 TextInput components<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TextInput)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">2</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have a submit button<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TouchableNativeFeedback)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">1</span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TouchableNativeFeedback).<span class="pl-en">containsMatchingElement</span>(<span class="pl-k"><</span>text<span class="pl-k">></span>Submit<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-c1">true</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have author input component with value dependent on state<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-smi">wrapper</span>.<span class="pl-en">setState</span>({name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>JK<span class="pl-pds">'</span></span>});
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TextInput).<span class="pl-en">first</span>().<span class="pl-en">props</span>().<span class="pl-c1">value</span>).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">'</span>JK<span class="pl-pds">'</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have the comment input component with value dependent on state<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-smi">wrapper</span>.<span class="pl-en">setState</span>({comment<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>An awesome comment<span class="pl-pds">'</span></span>});
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(TextInput).<span class="pl-en">at</span>(<span class="pl-c1">1</span>).<span class="pl-en">props</span>().<span class="pl-c1">value</span>).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">'</span>An awesome comment<span class="pl-pds">'</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should change state when the text of author input component changes<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">authorInputComponent</span> <span class="pl-k">=</span> <span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>TextInput<span class="pl-pds">'</span></span>).<span class="pl-en">first</span>();
<span class="pl-smi">authorInputComponent</span>.<span class="pl-en">simulate</span>(<span class="pl-s"><span class="pl-pds">'</span>ChangeText<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>wenger<span class="pl-pds">'</span></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>name<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">'</span>wenger<span class="pl-pds">'</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should change state when the text of comment input component changes<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">commentInputComponent</span> <span class="pl-k">=</span> <span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>TextInput<span class="pl-pds">'</span></span>).<span class="pl-en">at</span>(<span class="pl-c1">1</span>);
<span class="pl-smi">commentInputComponent</span>.<span class="pl-en">simulate</span>(<span class="pl-s"><span class="pl-pds">'</span>ChangeText<span class="pl-pds">'</span></span>,<span class="pl-s"><span class="pl-pds">'</span>arsenal<span class="pl-pds">'</span></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>comment<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">'</span>arsenal<span class="pl-pds">'</span></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>invokes handleCommitSubmit method of CommentBox with author and comment<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-smi">sinon</span>.<span class="pl-en">stub</span>(<span class="pl-smi">CommentBox</span>.<span class="pl-c1">prototype</span>, <span class="pl-s"><span class="pl-pds">"</span>handleCommentSubmit<span class="pl-pds">"</span></span>);
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentform oncommentsubmit<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{CommentBox.prototype.handleCommentSubmit}/<span class="pl-pds">"</span></span><span class="pl-k">></span>);
<span class="pl-k">const</span> <span class="pl-c1">submitButton</span> <span class="pl-k">=</span> <span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>TouchableNativeFeedback<span class="pl-pds">'</span></span>).<span class="pl-en">first</span>();
<span class="pl-smi">wrapper</span>.<span class="pl-en">setState</span>({name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>JK <span class="pl-pds">'</span></span>});
<span class="pl-smi">wrapper</span>.<span class="pl-en">setState</span>({comment<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span> Arsenal is the best<span class="pl-pds">'</span></span>});
<span class="pl-smi">submitButton</span>.<span class="pl-en">simulate</span>(<span class="pl-s"><span class="pl-pds">'</span>press<span class="pl-pds">'</span></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">CommentBox</span>.<span class="pl-c1">prototype</span>.<span class="pl-smi">handleCommentSubmit</span>.<span class="pl-en">calledWith</span>({author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>JK<span class="pl-pds">'</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Arsenal is the best<span class="pl-pds">'</span></span>})).<span class="pl-smi">to</span>.<span class="pl-smi">be</span>.<span class="pl-smi">true</span>;
<span class="pl-smi">CommentBox</span>.<span class="pl-c1">prototype</span>.<span class="pl-smi">handleCommentSubmit</span>.<span class="pl-en">restore</span>();
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>sets the state of two input fields to the initial state on press<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-smi">sinon</span>.<span class="pl-en">stub</span>(<span class="pl-smi">CommentBox</span>.<span class="pl-c1">prototype</span>, <span class="pl-s"><span class="pl-pds">"</span>handleCommentSubmit<span class="pl-pds">"</span></span>);
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentform oncommentsubmit<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{CommentBox.prototype.handleCommentSubmit}/<span class="pl-pds">"</span></span><span class="pl-k">></span>);
<span class="pl-k">const</span> <span class="pl-c1">submitButton</span> <span class="pl-k">=</span> <span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>TouchableNativeFeedback<span class="pl-pds">'</span></span>).<span class="pl-en">first</span>();
<span class="pl-smi">wrapper</span>.<span class="pl-en">setState</span>({name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>JK<span class="pl-pds">'</span></span>});
<span class="pl-smi">wrapper</span>.<span class="pl-en">setState</span>({comment<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Arsenal is the best<span class="pl-pds">'</span></span>});
<span class="pl-smi">submitButton</span>.<span class="pl-en">simulate</span>(<span class="pl-s"><span class="pl-pds">'</span>press<span class="pl-pds">'</span></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>name<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>comment<span class="pl-pds">'</span></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>);
<span class="pl-smi">CommentBox</span>.<span class="pl-c1">prototype</span>.<span class="pl-smi">handleCommentSubmit</span>.<span class="pl-en">restore</span>();
});
});</pre></div>
<p><code>src/components/CommentForm.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">View</span>, <span class="pl-smi">TouchableNativeFeedback</span>, <span class="pl-smi">Text</span>, <span class="pl-smi">TextInput</span>} <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentForm</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">constructor</span>(<span class="pl-smi">props</span>) {
<span class="pl-v">super</span>(props);
<span class="pl-v">this</span>.<span class="pl-smi">state</span> <span class="pl-k">=</span> {name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>, comment<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>};
}
<span class="pl-k">static</span> propTypes <span class="pl-k">=</span> {
onCommentSubmit<span class="pl-k">:</span> <span class="pl-smi">React</span>.<span class="pl-smi">PropTypes</span>.<span class="pl-smi">func</span>
};
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span>textinput placeholder<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>name<span class="pl-pds">"</span></span> style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{height:<span class="pl-pds">"</span></span> <span class="pl-c1">40</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> bordercolor<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">'</span>gray<span class="pl-pds">'</span></span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> borderwidth<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-c1">1</span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> onchangetext<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{(text)<span class="pl-pds">"</span></span> <span class="pl-k">==</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span> <span class="pl-v">this</span>.<span class="pl-en">setState</span>({name<span class="pl-k">:</span> text})}
value<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-c1">name</span>}
<span class="pl-k">/</span><span class="pl-k">></span>
<span class="pl-k"><</span>textinput placeholder<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>comment<span class="pl-pds">"</span></span> style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{height:<span class="pl-pds">"</span></span> <span class="pl-c1">40</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> bordercolor<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">'</span>gray<span class="pl-pds">'</span></span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> borderwidth<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-c1">1</span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> onchangetext<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{(content)<span class="pl-pds">"</span></span> <span class="pl-k">==</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span> <span class="pl-v">this</span>.<span class="pl-en">setState</span>({comment<span class="pl-k">:</span> content})}
value<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-smi">comment</span>}
<span class="pl-k">/</span><span class="pl-k">></span>
<span class="pl-k"><</span>touchablenativefeedback onpress<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{()<span class="pl-pds">"</span></span> <span class="pl-k">==</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span> <span class="pl-v">this</span>.<span class="pl-en">onPressButton</span>()}<span class="pl-k">></span>
<span class="pl-k"><</span>view style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{width:<span class="pl-pds">"</span></span> <span class="pl-c1">150</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> height<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-c1">100</span>,<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> backgroundcolor<span class="pl-k">:=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span> <span class="pl-s"><span class="pl-pds">'</span>red<span class="pl-pds">'</span></span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span>
<span class="pl-k"><</span>text style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{{margin:<span class="pl-pds">"</span></span> <span class="pl-c1">30</span>}}<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span><span class="pl-k">></span>Submit<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>touchablenativefeedback<span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>textinput<span class="pl-k">><</span><span class="pl-k">/</span>textinput<span class="pl-k">><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
<span class="pl-en">onPressButton</span>() {
<span class="pl-k">var</span> author <span class="pl-k">=</span> <span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-c1">name</span>.<span class="pl-en">trim</span>();
<span class="pl-k">var</span> comment <span class="pl-k">=</span> <span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-smi">comment</span>.<span class="pl-en">trim</span>();
<span class="pl-v">this</span>.<span class="pl-smi">state</span> <span class="pl-k">=</span> {name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>, comment<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>};
<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-en">onCommentSubmit</span>({author<span class="pl-k">:</span> author, text<span class="pl-k">:</span> comment});
}
}</pre></div>
<p>Observe how we test the behaviour of components on user interaction. We use [simulate()][19] method provided by shallow rendering API of enzyme to simulate the <code>press</code> event here. This method can be used to test other types of user interactions as well.</p>
<p>CommentBox component is where everything is wired up together. It should pass a list of comment data to CommentList as props and also handle storing the comments when submitted from CommentForm.<br>
We'll use [Asyncstorage][13] of React-Native to store and retrieve comments. We'll start with getting the comments and passing them to CommentList. The key for AsyncStorage data collection will be passed as props to CommentBox from app's root component. Let us take care of submitting of a comment first .</p>
<p><code>src/components/__specs__/CommentBox.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span>, <span class="pl-smi">Text</span>, <span class="pl-smi">AsyncStorage</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">sinon</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>sinon<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentBox</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentBox.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentList</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentList.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentbox><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">beforeEach</span>(<span class="pl-k">function</span>() {
wrapper <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>commentbox asyncstoragekey<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{'comments'}<span class="pl-pds">"</span></span><span class="pl-k">></span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should be a view component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">type</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(View);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have a title Comment It<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">contains</span>(<span class="pl-k"><</span>text<span class="pl-k">></span><span class="pl-c1">Comment</span> It<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>)).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-c1">true</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should render comment list component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(CommentList)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">1</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should render comment form component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(CommentForm)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">1</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should have an initial state<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>data<span class="pl-pds">'</span></span>).<span class="pl-c1">length</span>).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-c1">0</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should pass its state data as props to commentlist component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(CommentList).<span class="pl-en">props</span>().<span class="pl-c1">data</span>).<span class="pl-smi">to</span>.<span class="pl-en">eql</span>(<span class="pl-smi">wrapper</span>.<span class="pl-en">state</span>(<span class="pl-s"><span class="pl-pds">'</span>data<span class="pl-pds">'</span></span>));
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should pass its handleCommentSubmit method as props to CommentForm component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
commentBox <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">CommentBox</span>();
<span class="pl-k">var</span> definedMethod <span class="pl-k">=</span> <span class="pl-smi">commentBox</span>.<span class="pl-smi">handleCommentSubmit</span>;
<span class="pl-k">var</span> passedMethod <span class="pl-k">=</span> <span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(CommentForm).<span class="pl-en">props</span>().<span class="pl-smi">onCommentSubmit</span>;
<span class="pl-en">expect</span>(<span class="pl-smi">definedMethod</span>.<span class="pl-c1">toString</span>()).<span class="pl-smi">to</span>.<span class="pl-en">equal</span>(<span class="pl-smi">passedMethod</span>.<span class="pl-c1">toString</span>());
});
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span>handleCommentSubmit<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>stores comment data using asyncstorage on comment submit<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">var</span> data <span class="pl-k">=</span> [
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Pete Hunt<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is one comment<span class="pl-pds">"</span></span>},
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Jordan Walke<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is a super comment<span class="pl-pds">"</span></span>},
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Jordan Walkerr<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is an ordinary comment<span class="pl-pds">"</span></span>}
];
commentBox <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">CommentBox</span>({asyncStorageKey<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>comments<span class="pl-pds">'</span></span>});
<span class="pl-smi">commentBox</span>.<span class="pl-smi">state</span>.<span class="pl-c1">data</span> <span class="pl-k">=</span> data;
<span class="pl-k">var</span> commentData <span class="pl-k">=</span> {author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>JK<span class="pl-pds">'</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Arsenal is the best<span class="pl-pds">'</span></span>};
<span class="pl-smi">data</span>.<span class="pl-c1">push</span>(commentData);
<span class="pl-k">var</span> spy <span class="pl-k">=</span> <span class="pl-smi">sinon</span>.<span class="pl-en">spy</span>(AsyncStorage, <span class="pl-s"><span class="pl-pds">"</span>setItem<span class="pl-pds">"</span></span>);
<span class="pl-smi">commentBox</span>.<span class="pl-en">handleCommentSubmit</span>(commentData);
<span class="pl-en">expect</span>(<span class="pl-smi">spy</span>.<span class="pl-smi">calledOnce</span>).<span class="pl-smi">to</span>.<span class="pl-smi">be</span>.<span class="pl-smi">true</span>;
<span class="pl-en">expect</span>(<span class="pl-smi">spy</span>.<span class="pl-en">calledWith</span>(<span class="pl-s"><span class="pl-pds">'</span>comments<span class="pl-pds">'</span></span>, <span class="pl-c1">JSON</span>.<span class="pl-en">stringify</span>(data))).<span class="pl-smi">to</span>.<span class="pl-smi">be</span>.<span class="pl-smi">true</span>;
});
});
});</pre></div>
<p><code>src/components/CommentBox.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>, <span class="pl-smi">Text</span>, <span class="pl-smi">View</span>, <span class="pl-smi">AsyncStorage</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentList</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./CommentList.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentBox</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">constructor</span>(<span class="pl-smi">props</span>) {
<span class="pl-v">super</span>(props);
<span class="pl-v">this</span>.<span class="pl-smi">state</span> <span class="pl-k">=</span> {data<span class="pl-k">:</span> []};
<span class="pl-v">this</span>.<span class="pl-smi">handleCommentSubmit</span> <span class="pl-k">=</span> <span class="pl-v">this</span>.<span class="pl-smi">handleCommentSubmit</span>.<span class="pl-en">bind</span>(<span class="pl-v">this</span>);
}
<span class="pl-k">static</span> propTypes <span class="pl-k">=</span> {
asyncStorageKey<span class="pl-k">:</span> <span class="pl-smi">React</span>.<span class="pl-smi">PropTypes</span>.<span class="pl-smi">string</span>
};
<span class="pl-en">handleCommentSubmit</span>(<span class="pl-smi">comment_data</span>) {
<span class="pl-k">var</span> comments <span class="pl-k">=</span> <span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-c1">data</span>;
<span class="pl-smi">comments</span>.<span class="pl-c1">push</span>(comment_data);
<span class="pl-smi">AsyncStorage</span>.<span class="pl-c1">setItem</span>(<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-smi">asyncStorageKey</span>, <span class="pl-c1">JSON</span>.<span class="pl-en">stringify</span>(comments));
}
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span>text<span class="pl-k">></span><span class="pl-c1">Comment</span> It<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span>commentlist data<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{this.state.data}/<span class="pl-pds">"</span></span><span class="pl-k">></span>
<span class="pl-k"><</span>commentform oncommentsubmit<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{this.handleCommentSubmit}/<span class="pl-pds">"</span></span><span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>commentform<span class="pl-k">><</span><span class="pl-k">/</span>commentlist<span class="pl-k">><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p>That takes care of submitting comment part. Now lets do the comment loading part</p>
<p><code>src/components/__specs__/CommentBox.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">View</span>, <span class="pl-smi">Text</span>, <span class="pl-smi">AsyncStorage</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">sinon</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>sinon<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentBox</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentBox.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentList</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentList.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><commentbox><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span>handleCommentSubmit<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>stores comment data using asyncstorage on comment submit<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">var</span> data <span class="pl-k">=</span> [
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Pete Hunt<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is one comment<span class="pl-pds">"</span></span>},
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Jordan Walke<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is a super comment<span class="pl-pds">"</span></span>},
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Jordan Walkerr<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is an ordinary comment<span class="pl-pds">"</span></span>}
];
commentBox <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">CommentBox</span>({asyncStorageKey<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>comments<span class="pl-pds">'</span></span>});
<span class="pl-smi">commentBox</span>.<span class="pl-smi">state</span>.<span class="pl-c1">data</span> <span class="pl-k">=</span> data;
<span class="pl-k">var</span> commentData <span class="pl-k">=</span> {author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>JK<span class="pl-pds">'</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Arsenal is the best<span class="pl-pds">'</span></span>};
<span class="pl-smi">data</span>.<span class="pl-c1">push</span>(commentData);
<span class="pl-k">var</span> spy <span class="pl-k">=</span> <span class="pl-smi">sinon</span>.<span class="pl-en">spy</span>(AsyncStorage, <span class="pl-s"><span class="pl-pds">"</span>setItem<span class="pl-pds">"</span></span>);
<span class="pl-smi">commentBox</span>.<span class="pl-en">handleCommentSubmit</span>(commentData);
<span class="pl-en">expect</span>(<span class="pl-smi">spy</span>.<span class="pl-smi">calledOnce</span>).<span class="pl-smi">to</span>.<span class="pl-smi">be</span>.<span class="pl-smi">true</span>;
<span class="pl-en">expect</span>(<span class="pl-smi">spy</span>.<span class="pl-en">calledWith</span>(<span class="pl-s"><span class="pl-pds">'</span>comments<span class="pl-pds">'</span></span>, <span class="pl-c1">JSON</span>.<span class="pl-en">stringify</span>(data))).<span class="pl-smi">to</span>.<span class="pl-smi">be</span>.<span class="pl-smi">true</span>;
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>invokes the getComments method<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">var</span> data <span class="pl-k">=</span> [
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Pete Hunt<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is one comment<span class="pl-pds">"</span></span>},
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Jordan Walke<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is a super comment<span class="pl-pds">"</span></span>},
{ author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>Jordan Walkerr<span class="pl-pds">"</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>This is an ordinary comment<span class="pl-pds">"</span></span>}
];
commentBox <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">CommentBox</span>({asyncStorageKey<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>comments<span class="pl-pds">'</span></span>});
<span class="pl-smi">sinon</span>.<span class="pl-en">stub</span>(commentBox, <span class="pl-s"><span class="pl-pds">"</span>getComments<span class="pl-pds">"</span></span>);
<span class="pl-k">var</span> commentData <span class="pl-k">=</span> {author<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>JK<span class="pl-pds">'</span></span>, text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Arsenal is the best<span class="pl-pds">'</span></span>};
<span class="pl-smi">commentBox</span>.<span class="pl-en">handleCommentSubmit</span>(commentData);
<span class="pl-en">expect</span>(<span class="pl-smi">commentBox</span>.<span class="pl-smi">getComments</span>.<span class="pl-smi">calledOnce</span>).<span class="pl-smi">to</span>.<span class="pl-smi">be</span>.<span class="pl-smi">true</span>;
});
});
});</pre></div>
<p><code>src/components/CommentBox.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, {<span class="pl-smi">Component</span>,<span class="pl-smi">Text</span>, <span class="pl-smi">View</span>, <span class="pl-smi">AsyncStorage</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentList</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./CommentList.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentForm</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./CommentForm.js<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">CommentBox</span> <span class="pl-k">extends</span> <span class="pl-e">React</span>.<span class="pl-smi">Component</span> {
<span class="pl-en">constructor</span>(<span class="pl-smi">props</span>) {
<span class="pl-v">super</span>(props);
<span class="pl-v">this</span>.<span class="pl-smi">state</span> <span class="pl-k">=</span> {data<span class="pl-k">:</span> []};
<span class="pl-v">this</span>.<span class="pl-smi">handleCommentSubmit</span> <span class="pl-k">=</span> <span class="pl-v">this</span>.<span class="pl-smi">handleCommentSubmit</span>.<span class="pl-en">bind</span>(<span class="pl-v">this</span>);
<span class="pl-v">this</span>.<span class="pl-smi">getComments</span> <span class="pl-k">=</span> <span class="pl-v">this</span>.<span class="pl-smi">getComments</span>.<span class="pl-en">bind</span>(<span class="pl-v">this</span>);
}
<span class="pl-k">static</span> propTypes <span class="pl-k">=</span> {
asyncStorageKey<span class="pl-k">:</span> <span class="pl-smi">React</span>.<span class="pl-smi">PropTypes</span>.<span class="pl-smi">string</span>
};
<span class="pl-en">getComments</span>() {
<span class="pl-smi">AsyncStorage</span>.<span class="pl-c1">getItem</span>(<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-smi">asyncStorageKey</span>)
.<span class="pl-en">then</span>((<span class="pl-smi">comments</span>) <span class="pl-k">=></span> {
comments <span class="pl-k">=</span> <span class="pl-c1">JSON</span>.<span class="pl-c1">parse</span>(comments);
<span class="pl-v">this</span>.<span class="pl-en">setState</span>({ data<span class="pl-k">:</span> comments });
})
.<span class="pl-en">catch</span>(() <span class="pl-k">=></span> {
});
}
<span class="pl-en">handleCommentSubmit</span>(<span class="pl-smi">comment_data</span>) {
<span class="pl-k">var</span> comments <span class="pl-k">=</span> <span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-c1">data</span>;
<span class="pl-smi">comments</span>.<span class="pl-c1">push</span>(comment_data);
<span class="pl-smi">AsyncStorage</span>.<span class="pl-c1">setItem</span>(<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-smi">asyncStorageKey</span>, <span class="pl-c1">JSON</span>.<span class="pl-en">stringify</span>(comments));
<span class="pl-v">this</span>.<span class="pl-en">getComments</span>();
}
<span class="pl-en">render</span>() {
<span class="pl-k">return</span>(
<span class="pl-k"><</span>view<span class="pl-k">></span>
<span class="pl-k"><</span>text<span class="pl-k">></span><span class="pl-c1">Comment</span> It<span class="pl-k"><</span><span class="pl-k">/</span>text<span class="pl-k">></span>
<span class="pl-k"><</span>commentlist data<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{this.state.data}/<span class="pl-pds">"</span></span><span class="pl-k">></span>
<span class="pl-k"><</span>commentform oncommentsubmit<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{this.handleCommentSubmit}/<span class="pl-pds">"</span></span><span class="pl-k">></span>
<span class="pl-k"><</span><span class="pl-k">/</span>commentform<span class="pl-k">><</span><span class="pl-k">/</span>commentlist<span class="pl-k">><</span><span class="pl-k">/</span>view<span class="pl-k">></span>
);
}
}</pre></div>
<p>To get the app up and running we need to have a root component and register it in the App registry<br>
Let us create a component called App and render CommentBox component inside it. While rendering the CommentBox component, we pass in the AsyncStorage key as props.</p>
<p><code>src/__specs__/app.spec.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">shallow</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>enzyme<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> { <span class="pl-smi">expect</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>chai<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentBox</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../components/CommentBox.js<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">App</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../app.js<span class="pl-pds">'</span></span>;
<span class="pl-en">describe</span>(<span class="pl-s"><span class="pl-pds">'</span><app><span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should render a commentBox component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>app<span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(CommentBox)).<span class="pl-smi">to</span>.<span class="pl-smi">have</span>.<span class="pl-c1">length</span>(<span class="pl-c1">1</span>);
});
<span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">'</span>should pass data as props on rendering CommentBox component<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> {
<span class="pl-k">const</span> <span class="pl-c1">wrapper</span> <span class="pl-k">=</span> <span class="pl-en">shallow</span>(<span class="pl-k"><</span>app<span class="pl-k">></span>);
<span class="pl-en">expect</span>(<span class="pl-smi">wrapper</span>.<span class="pl-c1">find</span>(CommentBox).<span class="pl-en">props</span>().<span class="pl-smi">asyncStorageKey</span>).<span class="pl-smi">to</span>.<span class="pl-en">eql</span>(<span class="pl-s"><span class="pl-pds">'</span>comments<span class="pl-pds">'</span></span>);
});
});</pre></div>
<p><code>src/components/app.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">Component</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">CommentBox</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./components/CommentBox.js<span class="pl-pds">'</span></span>;
<span class="pl-k">export</span> <span class="pl-v">default</span> <span class="pl-k">class</span> <span class="pl-en">App</span> <span class="pl-k">extends</span> <span class="pl-e">Component</span> {
<span class="pl-en">render</span>() {
<span class="pl-k">return</span> (
<span class="pl-k"><</span>commentbox asyncstoragekey<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>{'comments'}/<span class="pl-pds">"</span></span><span class="pl-k">></span>
);
}
}</pre></div>
<p>Now register the component in the app registry and that's it.</p>
<p><code>index.android.js</code></p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> { <span class="pl-smi">AppRegistry</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-native<span class="pl-pds">'</span></span>;
<span class="pl-k">import</span> <span class="pl-smi">App</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./src/app<span class="pl-pds">'</span></span>;
<span class="pl-smi">AppRegistry</span>.<span class="pl-en">registerComponent</span>(<span class="pl-s"><span class="pl-pds">'</span>ReactNativeBoilerplate<span class="pl-pds">'</span></span>, () <span class="pl-k">=></span> App);</pre></div>
<p>You can view the entire codebase [here][20] .</p>
<hr>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/JAYKRISHNAN/Test-driven-react-native-android-application">Test-driven-react-native-android-application</a> is maintained by <a href="https://github.com/JAYKRISHNAN">JAYKRISHNAN</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>