/
2023-03-06-react-testen-context-graphql.html
2843 lines (2500 loc) · 101 KB
/
2023-03-06-react-testen-context-graphql.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
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React Training</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"
/>
<link rel="stylesheet" href="slides/revealjs/reveal.js/dist/reset.css" />
<link rel="stylesheet" href="slides/revealjs/reveal.js/dist/reveal.css" />
<link rel="stylesheet" href="slides/revealjs/reveal.js/dist/theme/solarized.css" />
<!-- Theme used for syntax hislides/ghlighted code -->
<link rel="stylesheet" href="slides/revealjs/highlight-js-github-theme.css" />
<link rel="stylesheet" href="slides/revealjs/styles.css" />
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section data-state="title">
<h2 class="title" style="font-size: 7rem">
<b>React: Testen, Context, GraphQL</b>
</h2>
<h4>
<span class="transparent-bg">
<a href="https://nilshartmann.net" target="_blank">Nils Hartmann</a>
|
<a href="https://twitter.com/nilshartmann" target="_blank">@nilshartmann</a>
</span>
</h4>
<p style="margin-top: 4rem"></p>
<div>
<h3><span class="transparent-bg">Repository</span></h3>
<p>
<span class="transparent-bg"
>Remote:
<a href="https://github.com/nilshartmann/react18-training"
>https://github.com/nilshartmann/react18-training</a
></span
>
</p>
</div>
<p style="margin-top: 4rem"></p>
<div>
<h3><span class="transparent-bg">Slides</span></h3>
<p>
<span class="transparent-bg"
>Lokal: 2023-03-06-react-testen-context-graphql.html</span
>
</p>
<p>
<span class="transparent-bg"
>Remote:
<a
href="https://nilshartmann.github.io/react18-training/2023-03-06-react-testen-context-graphql.html"
>https://nilshartmann.github.io/react18-training/2023-03-06-react-testen-context-graphql.html</a
></span
>
</p>
</div>
</section>
<section>
<h2>Nils Hartmann</h2>
<p>
<a href="https://nilshartmann.net" target="_blank">https://nilshartmann.net</a>
/
<a href="https://twitter.com/nilshartmann" target="_blank">@nilshartmann</a>
</p>
<p>
<em>Freiberuflicher Software-Entwickler, Berater und Trainer aus Hamburg</em>
</p>
<div style="display: flex; justify-content: center">
<div>
<p>Java</p>
<p>JavaScript, TypeScript</p>
<p>React</p>
<p>Single-Page-Applications</p>
<p>GraphQL</p>
<p style="margin-top: 20px">
<a href="https://nilshartmann.net/workshops">Schulungen und Workshops</a>
</p>
</div>
<div style="margin-left: 15px">
<a href="https://reactbuch.de"
><img
style="max-height: 450px"
src="slides/images/react-buch-v2.jpg"
/><br />https://reactbuch.de</a
>
<br />
</div>
</div>
</section>
<!-- ============================================================================= -->
<section>
<h2>Agenda</h2>
<ul class="xx-list">
<li>
<a href="#/t-test">Testen mit Jest (Montag, 06.03.)</a>
</li>
<li>
<a href="#/t-apollo-react">Apollo Client (Dienstag, 07.03.)</a>
</li>
<li>
<a href="#/t-context">Context API (Montag, 13.03.)</a>
</li>
<li>
<a href="#/t-apollo-react-deep-dive">Apollo Deep Dive (Dienstag, 14.03.)</a>
</li>
</ul>
</section>
<!-- ============================================================================= -->
<section id="t-test">
<h2>Testen von React Anwendungen</h2>
</section>
<section data-markdown>
<textarea data-template>
### Vorbereitung
* Das Git-Repository https://github.com/nilshartmann/react18-training klonen
* Zunächst das "Backend" starten, in `blog-example/backend-rest`:
* ```bash
cd blog-example/backend-rest
npm install
npm start
```
* Wir machen alle Übungen im `blog-example/workspace-typescript`-Verzeichnis.
* In `blog-example/workspace-typescript/src` die Dateien `PostEditor.js` und `PostList.js` **löschen**!
* Dann kopierst Du aus dem Verzeichnis <code>blog-example/steps/5-typescript/src</code> die beiden Dateien:
* `PostEditor.tsx`
* `PostList.tsx`
* in den `src`-Ordner in deinem Workspace (`workspace-typescript/src`)
* Dann bitte `npm install` ausführen und die Anwendung starten:
* ```
cd blog-example/workspace-typescript
npm install
npm start
```
* Einmal die Anwendung im Browser öffnen, um zu sehen, ob's geht: http://localhost:3000
</textarea>
</section>
<section data-transition="slide none">
<h2>Was testen wir?</h2>
<ul>
<li><b>UI-unabhängige Logik</b> (zum Beispiel Backend Calls, Berechnungen etc.)</li>
<li>
<b>Rendering</b> (Ist die Liste der Blog Posts korrekt? Sieht das Markup aus, wie wir
uns das vorstellen?) und <b>Interaktionen</b> (funktionieren die Event Handler, die
Callback-Funktionen, der Programmfluß etc.?)
</li>
<li>
<b>Verhalten im Browser</b> (z.B. korrekte, pixelgenaue Darstellung,
Browser-spezifisches JavaScript, Arbeiten mit Browser-Technologie wie Titelzeile,
Session Storage, Scrollbars etc)
</li>
</ul>
</section>
<section>
<h1>Jest</h1>
<p>
<em
>"Delightful JavaScript Testing" (
<a href="https://jestjs.io/" target="_blank">https://jestjs.io/</a>)</em
>
</p>
<p>Vollständige Testlösung für React (und andere):</p>
<ul>
<li>API vergleichbar mit <a href="https://jasmine.github.io/">Jasmine</a></li>
<li>Test Runner</li>
<li>Specs/Assertions, Mocks</li>
<li>Code Coverage</li>
</ul>
</section>
<section>
<h4>Jest</h4>
<h3>Beispiel: Ein einfacher Testfall</h3>
<pre><code class="javascript" >// sum.js (or sum.ts)
export const sum = (a,b) => a+b;
</code></pre>
<pre><code class="javascript" >// sum.test.js
import {sum} from '../sum.js';
test('sum of 2 and 2 is 4', () => {
expect(sum(2, 2)).toBe(4);
});
test('sum of 2 and 2 is not 3', () => {
expect(sum(2, 2)).not.toBe(3);
});
</code></pre>
</section>
<section>
<h4>Jest</h4>
<h2>Testcases</h2>
<p>
<code>test</code> oder
<code>it</code>
</p>
<pre><code>test('it should work', () => {
expect(...).toBe(...);
});</code></pre>
<pre><code>it('it should also work', () => {
expect(...).toBe(...);
});</code></pre>
</section>
<section>
<h4>Jest</h4>
<h2>"Expectations" und "Matchers"</h2>
<div>
<p>
<code>expect()</code> liefert ein <em>Expectation</em> Objekt zurück, das verschiede
<em>Matcher</em> Funktionen bereitstellt:
</p>
<pre><code>expect(actual).toXyz(expected);
// for example:
expect("Hello Jest").toBe("Hello Jest"); // => ok
</code></pre>
</div>
<div>
<p>Beispiele für Matchers</p>
<pre><code>// Compare identity
expect(actual).toBe(expected);
// Compare value:
expect(actual).toEqual(expected);
// true / false / null:
expect(actual).toBeTruthy();
expect(actual).toBeFalsy();
expect(actual).toBeNull();
// Length (Array oder String)
expect(actual).toHaveLength(123);
</code></pre>
</div>
<p>
<a href="https://jestjs.io/docs/en/expect">https://jestjs.io/docs/en/expect</a>
</p>
</section>
<section>
<h4>Jest</h4>
<h2>Mock Funktionen</h2>
<ul>
<li>
<code>jest.fn()</code> erzeugt eine Mock-Funktion
<pre><code>// Gibt undefined zurück, wenn die Mock-Funktion ausgeführt wird
const aMockFn = jest.fn();
const x = aMockFn("hello", "world"); // => undefined
expect(x).toBeUndefined();
</code></pre>
</li>
<li>
Mit <code>toHaveBeenCalled</code>-Matcher-Funktionen kann geprüft werden, ob der Mock
aufgerufen wurde, wie häufig und mit welchen Parametern:
<pre><code>
expect(aMockFn).toHaveBeenCalled()); // Mock wurde aufgerufen (Parameter werden ignoriert)
expect(aMockFn).toHaveBeenCalledWith("hello", "world")); // Mock wurde mit 'huhu' aufgerufen
expect(aMockFn).toHaveBeenCalledTimes(1)); // Mock wurde genau einmal aufgerufen
// Übergebene Paramter stehen über .mock.calls:
expect(aMockFn.mock.calls[0][0]).toBe("hello");
expect(aMockFn.mock.calls[0][1]).toBe("world");
</code></pre>
</li>
<li>
Implementierung der Mock-Funktion kann als Parameter übergeben:
<pre><code>
const aMockFn = jest.fn( param => `Hello, ${param}` );
console.log(aMockFn('World'));
// => Hello, World
</code></pre>
</li>
</ul>
</section>
<section data-markdown>
<textarea data-template>
### Übung: Hello Jest!
* Im Workspace-Verzeichnis `blog-example/workspace-typescript` findest Du eine Datei `format-persons.ts`, die eine einzige Funktion enthält.
* Schreibe für diese Funktion einen Test in `workspace-typescript/__tests__/format-persons.test.ts`
* Du kannst den Test mit `npm test -- format-person` ausführen
* Hinweise dazu findest Du in `format-persons.test.ts`
* Eine mögliche Lösung findest Du in `blog-example/steps/6-tests/__tests__`
* Wenn Du fertig bist, bitte virtuell die Hand haben 🙋🏻♀️
</textarea
>
</section>
<section>
<h3>Testen von React Komponenten</h3>
</section>
<section>
<h3>react-testing-library</h3>
<p>
<em
>"Simple and complete React DOM testing utilities that encourage good testing
practices."
</em>
</p>
<p>
<a href="https://github.com/testing-library/react-testing-library" target="_blank"
>https://github.com/testing-library/react-testing-library</a
>)
</p>
<p>
Philosophie: Tests werden aus User-Perspektive geschrieben. Das bedeutet, um die zu
testenden Elemente zu finden, suchst Du nach Eigenschaften, nach denen auch ein User
suchen würde (z.B. Labels, Placeholder etc.)
</p>
<p>👉 <code>workspace-typescript</code></p>
</section>
<section>
<h3>react-testing-library</h3>
<p>Example</p>
<pre><code class="javascript" >
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
it("invokes callback on button click", () => {
const onAddPostFn = jest.fn();
// Render
render(<PostList onAddPost={onAddPostFn} posts={mockPosts} />);
// search the button
const buttonElement = screen.getByRole("button", { name: "Add Post" });
// "click" the button
userEvent.click(buttonElement);
// make sure it has been invoked
expect(onAddPostFn).toHaveBeenCalled();
});
</code></pre>
</section>
<section>
<h3>React Testing Library im Detail</h3>
</section>
<section>
<h3>Die render-Funktion</h3>
<ul>
<li>
Die render-Function aus der react-testing-library wird im Test verwendet, um eine
React Komponente (ohne Browser) zu rendern
</li>
<li>Genauso wie in der Anwendungen können Properties angegeben werden</li>
<li>
<pre><code class="javascript" >
import { render } from "@testing-library/react";
// Render a single component
render(<PostList onAddPost={onAddPostFn} posts={mockPosts} />);
</code></pre>
</li>
<li>
Dran denken, ggf. Contexte ebenfalls zu erzeugen, falls diese benötigt werden (Router,
Redux, GraphQL etc)!
</li>
<li>
<pre><code class="javascript" >
// Render with surrounding Redux Provider (or Router, your own Context etc.)
render(
<Provider>
<PostList onAddPost={onAddPostFn} posts={mockPosts} />
</Provider>
);
</code></pre>
</li>
<li>
Mock Provider:
<ul>
<li>
<a href="https://reactrouter.com/en/main/router-components/memory-router"
>Memory Router</a
>
</li>
<li>
<a
href="https://www.apollographql.com/docs/react/development-testing/testing/#the-mockedprovider-component"
>Apollo MockedProvider</a
>
</li>
</ul>
</li>
</ul>
</section>
<!-- ######################################################################################### ########################## -->
<section>
<h3>"Snapshot Testing" mit Jest</h3>
<p>
<code>expect(obj).toMatchSnapshot()</code> vergleicht ein erzeugtes JSON-Objekt mit
einem gespeicherten JSON-Objekt aus einer Datei:
</p>
<ul>
<li>
Bei der <b>ersten</b> Ausführung: Snapshot-Datei wird angelegt (
<a href="slides/images/jest-snapshot-file.png" target="_blank">Beispiel</a>)
<ul>
<li>Die Snapshot-Datei wird nun in Git eingecheckt</li>
</ul>
</li>
<li>
In den <b>folgenden</b> Test Ausführungen: ein neuer Snapshot wird jeweils erzeugt und
mit dem <b>gespeicherten</b> Snapshot verglichen
</li>
<li>
Wenn die Snapshots nicht identisch sind:
<ul>
<li>
Fehler mit Unterschieden (<a
href="slides/images/jest-snapshot-diff.png"
target="_blank"
>Beispiel</a
>)
</li>
<li>
Im "watch mode" von Jest kann der Snapshot aktualisiert werden
<img src="slides/images/jest-snapshot-update.png" />
</li>
</ul>
</li>
</ul>
</section>
<section data-markdown>
<textarea data-template>
### Snapshot Tests mit React
```typescript
import { render } from "@testing-library/react";
test('it should render correctly', () => {
const mockPosts = [ /* ... */ ];
const result = render(<PostList posts={mockPosts} onAddPost={jest.fn()} /> );
expect(result.asFragment()).toMatchSnapshot();
});
```
</textarea>
</section>
<!-- ######################### ########################### #################################################### -->
<section>
<h3>query Funktionen</h3>
<p>
Um die gerenderten HTML-Elemente aus deiner Komponente zu überprüfen und mit ihnen zu
interagieren, musst Du sie ersteinmal finden 🤓
</p>
<p>
Auf dem globalen <b>screen</b> Objekt der Testing-Lib sind verschiedene Funktionen
definiert, mit denen Du nach Elementen suchen kannst
</p>
<p>
Die query-Funktionen haben unterschiedliche <b>Suffixe</b>, die beschreiben,
<b>nach welchem Kriterium</b> Du suchst (nach Label, nach aria-role, ...)
</p>
<p>
Die Funktionen haben außerdem jeweils einen <b>Präfix</b> (getBy, queryBy etc) der
beschreibt, die Art des Rückgabewerts der jeweilgen Funktion (z.B. ob sie einen Error
wirft oder null zurückgibt, wenn das angefragte Element nicht gefunden wurde)
</p>
<p>
Mehr zu den query-Funktionen:
<a
target="_blank"
href="https://testing-library.com/docs/react-testing-library/cheatsheet#queries"
>React Testing Library Cheatsheet</a
>
</p>
<pre><code class="javascript">
// BEISPIELE:
// suche nach einem Button (Annahme: es gibt GENAU EINEN, ansonsten schlägt der Test fehl)
const buttonElement = screen.getByRole("button", { name: "Add Post" });
// suche nach einem Button (gibt null oder EINEN Button, wirft ansonst einen Fehler)
const buttonElement = screen.queryByRole("button", { name: "Add Post" });
// suche nach einem Button (gibt alle gefunden zurück oder ein leeres Array)
const buttonElement = screen.queryAllByRole("button", { name: "Add Post" });
</code></pre>
</section>
<section>
<h3>Überprüfen von Elementen</h3>
<p>
Wenn Du dein gesuchtes Elemente gefunden hast, kannst Du es überprüfen, ob es deinen
Erwartungen entspricht (korrekte Attribute gesetzt etc.)
</p>
<p>
Die Bibliothek
<a href="https://github.com/testing-library/jest-dom" target="_blank">jest-dom</a> fügt
dazu DOM-spezifiche Matcher für Jest hinzu.
</p>
<pre><code class="javascript">
import { screen } from "@testing-library/react";
const buttonElement = screen.queryByRole("button", { name: "Add Post" });
// stellt sicher, dass das Element im DOM vorhanden ist (getBy-Query würde hier vielleicht mehr Sinn machen)
expect(buttonElement).toBeInTheDocument();
// sicherstellen, dass ein Eingabefeld einen erwarteten Wert hat
expect(titleInput).toHaveValue("Moin moin");
// sicherstellen, dass ein Button disabled ist
expect(okButton).toBeDisabled();
</code></pre>
<p>Alle Matcher sind auf der oben verlinkten GitHub Seite dokumentiert</p>
</section>
<section>
<h3>Interaktionen</h3>
<p>
Du kannst mit den Elementen interagieren, in dem Du ihnen Events sendest, genau wie es
ein Browser tun würde
</p>
<p>
Es gibt eine weitere Bibliothek,
<a href="https://github.com/testing-library/user-event" target="_blank"> user-event</a>,
die dir dabei hilft, die Events zu erzeugen.
</p>
<pre><code class="javascript">
import userEvent from "@testing-library/user-event";
// Simuliert die Eingabe in ein Textfeld
userEvent.type(titleInput, "New Title");
// Simuliert den Klick auf einen Button
userEvent.click(clearButton);
</code></pre>
<p>Alle Events sind auf der GitHub Seite beschrieben (Link oben)</p>
<p>
Vor dem Versenden eines Events musst Du <b>nicht</b> überprüfen, ob das Element, dem Du
das Event senden willst, vorhanden ist. Die Bibliothek gibt eine sehr sprechende
Fehlermeldung aus, wenn das Element nicht vorhanden ist
</p>
</section>
<section data-markdown>
<textarea data-template>
## Der Testing Playground
* https://testing-playground.com/
* Hier kann man HTML-Code reinkopieren, mit dem man dann Query-Funktionen ausprobieren kann
* Dazu gibt es auch eine Browser-Erweiterung für [Chrome](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano)
* Mit `screen.logTestingPlaygroundURL()` kann man eine URL ausgeben lassen, die den im Test gerenderten HTML-Code direkt im Playground öffnet
</textarea>
</section>
<section>
<h2>Übung: Ein Test für den PostEditor</h2>
</section>
<section>
<h2>Übung: Tests für den PostEditor</h2>
<p>Erinnerung: Wir arbeiten in <code>blog-example/workspace-typescript</code></p>
<p>Schritte:</p>
<ol>
<li class="fragment">
Starte in <code>blog-example/workspace-typescript</code>:
<code>npm test -- PostEditor</code> (der Prozess läuft "ewig")
</li>
<li class="fragment">
Es sollte einen fehlerhaften Test geben:
<b><code>PostEditor.test.tsx</code></b
>.
</li>
<li class="fragment">Warum? Weil die Datei noch leer ist 😬!</li>
<li class="fragment">
Implementiere Tests für die PostEditor-Komponente. In der Datei<b
><code>PostEditor.test.tsx</code></b
>
findest Du Vorschläge.
</li>
</ol>
<p class="fragment">
Hinweis: wenn Du die Datei speicherst, werden die Tests automatisch neu ausgeführt
(solange Du
<code>npm test</code> noch laufen hast), ansonsten kannst Du "a" auf der Kommandozeile
drücken, zum erneuten Ausführen der Tests.
</p>
<p class="fragment">Mögliche Lösungen in <code>steps/6-test</code></p>
<p class="fragment">Wenn Du fertig bist, bitte "Hand heben" 🙋♀️</p>
</section>
<section>
<h3>Testen von fetch-Aufrufen</h3>
<p>Herausforderungen:</p>
<ul>
<li>Asynchroner Code (nicht beschränkt auf fetch)</li>
<li>Server Zugriffe/Server Mocks</li>
</ul>
</section>
<section>
<h3>Behandlung von asynchronem code</h3>
</section>
<section>
<h3>Testen von asynchronem Code</h3>
<p>
Beispiel: Die <b>App</b> Komponente lädt Daten, <em>erst dann</em> stellt sie die
PostList dar. Das Laden der Posts ist asynchron.
</p>
<pre><code class="javascript">
it("should render posts read from backend", () => {
render(<App />);
// Annahme: es gibt einen Artikel mit dem Title "Learning React"
const articleOne = screen.findByRole("heading", { name: "Learning React" });
expect(articleOne).toBeInTheDocument(); // THIS WON'T WORK!
});
</code></pre>
<p>
Wir können einen Test als async-funktion schreiben und darin mit <b>await</b> auf ein
Element warten
</p>
<pre><code class="javascript">
// Test-Funktion als async-Funktion (beachte 'async'):
it("should render posts read from backend", async () => {
render(<App />);
// Beachte await hier:
const articleOne = await screen.findByRole("heading", { name: "Learning React" });
expect(articleOne).toBeInTheDocument(); // YIPPIE, WORKS
});
</code></pre>
<p>
Achtung! Ihr müsst <code>find</code> Query-Funktionen verwenden, da die
<code>get</code>-Funktionen davon ausgehen, dass ein Element bereits vorhanden ist, und
nicht noch darauf warten.
</p>
</section>
<!-- ============================================================================= -->
<section>
<h3>Testen von fetch</h3>
<p>Wie gesehen, können wir asynchronen Code testen</p>
<p>Wollen wir fetch-Aufrufe in unserem Code haben, den wir testen?</p>
<p>
Möglicherweise nicht, weil wir bei echten fetch-Aufrufen auch einen echten, laufenden
und funktionierenden Server im Test bräuchten
</p>
<p>Stattdessen wollen wir das "echte" fetch mocken</p>
</section>
<section>
<h3>Fetch mocken, Ansatz #1</h3>
<p>Wir können <b>komplette Module</b> in Jest mocken</p>
<p>Wir könnten unseren fetch-Code in ein eigenes Modul schieben und das dann mocken</p>
<pre><code class="javascript">
// api.ts (fetch vereinfacht!)
export function readPosts() {
return fetch("http://localhost:7000/posts").then(response => response.json());
}
</code></pre>
<pre><code class="javascript">
// App.tsx:
import { readPosts } from "./api";
function App() {
// ...
React.useEffect(() => {
// Verwenden von readPosts hier:
readPosts()
.then(json => {
setLoading(false);
setPosts(json);
})
.catch(err => console.error("Loading data failed: " + err));
}, []);
}
</code></pre>
</section>
<section>
<h3>Mocken von Modulen in Jest</h3>
<p>Es gibt mehrere Varianten. Das hier die einfachste(?)</p>
<pre><code class="javascript">
// App.test.tsx
const mockPosts = [
{ id: "1", title: "One Fetch Mock", body: "Lorem ipsum" },
{ id: "2", title: "Second Post Fetch Mock", body: "Some more content" }
];
jest.mock("../api", () => ({
readPosts: () => Promise.resolve(mockPosts)
}));
it("should render posts read from backend", async () => {
render(<App />);
// Hier immer noch asnychroner Code (deswegen await), aber:
// kein laufender Server mehr benötigt
const articleOne = await screen.findByRole("heading", { name: "One" });
expect(articleOne).toBeInTheDocument();
expect(screen.getByText("Second Post")).toBeInTheDocument();
});
</code></pre>
<p>
Beispiel:
<code
>blog-example/steps/6a-testing-with-api-module/src/__tests__/App_module_mock.test.tsx</code
>
</p>
</section>
<section>
<h3>Ansatz #2: fetch API mocken</h3>
<p>Es gibt mehrere Bibliothken mit fetch-Mocks</p>
<p>
Für mich funktioniert
<a href="https://www.npmjs.com/package/jest-fetch-mock" target="_blank"
>jest-fetch-mock</a
>
am Besten
</p>
<pre><code class="javascript">
// App.test.tsx
it("should render posts read from backend", async () => {
// setzen des Ergebnisses, das der nächste fetch-Aufruf zurückliefern soll
fetchMock.mockResponse(JSON.stringify(mockPosts));
render(<App />);
// Immer noch asynchroner Code, aber kein "echter" fetch-Aufruf mehr,
// zurückgegeben wird das oben angegebene Ergebnis
const articleOne = await screen.findByRole("heading", { name: "One Fetch Mock" });
expect(articleOne).toBeInTheDocument();
});
</code></pre>
<p>
Beispiel:
<code
>blog-example/steps/6a-testing-with-api-module/src/__tests__/App_jest_mock.test.tsx</code
>
</p>
</section>
<section data-markdown>
<textarea data-template>
### jest-fetch-mock
* `fetchMock.mockResponse`: Ersetzt *alle* Aufrufe mit dem übergebenen Ergebnis
* `fetchMock.mockResponseOnce`: Ersetzt nur den nächsten Aufruf mit dem übergebenen Ergebnis
* `fetchMock.mockResponses`: Ersetzt die nächsten X Aufrufe mit den übergebenen Ergebnissen
* Alle Funktionen haben dieselbe Signatur:
* Entweder ihr setzt direkt das Ergebnis, das zurückgeliefert werden soll
* Oder ihr gebt eine Callback-Funktion an, die ein `Promise` mit der gewünschten Ergebnis zurückliefert
* Wenn ihr das Ergebnis direkt setzt, könnt ihr zwei Parameter übergeben:
1. Den Body, der zurückgeliefert werden soll Achtung! String kein Objekt! (ggf.`JSON.stringify()` verwenden)
2. Ein Objekt mit init-Parametern, mit dem ihr z.B. den Status setzen könnt
* siehe dazu [API Dokumentation der Response Funktion](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response)
* ```
const mockPosts = [ { title: "Hello", body: "World"} ];
// liefert HTTP 200 OK zurück für alle folgenden fetch-Aufrufe zurück:
fetchMock.mockResponse(JSON.stringify(mockPosts));
```
* ```
const mockResponse = { id: "100", title: "Hello", body: "World", createdAt: "2022-09-06"};
// liefert HTTP 201 CREATED für den nächsten fetch-Aufrufe zurück:
fetchMock.mockResponse(JSON.stringify(mockResponse), { status: 201 });
```
</textarea>
</section>
<!-- ============================================================================= -->
<section>
<h3>Ansatz #3: Mock Service Worker (MSW)</h3>
<p><a href="https://github.com/mswjs/msw" target="_blank">MSW</a></p>
<p>
MSW mockt echte Server-Aufrufe mit einem
<a href="https://developer.mozilla.org/de/docs/Web/API/Service_Worker_API"
>Service Worker</a
>
</p>
<p>
fetch-Aufrufe werden "richtig" ausgeführt, aber beantwortet von dem Service Worker Mock
</p>
<pre><code class="javascript">
// PostList.test.js
import { rest } from 'msw'
import { setupServer } from 'msw/node'
const server = setupServer(
rest.get('/posts', (req, res, ctx) => {
return res(ctx.json( mockPosts ))
}),
)
test("it should render blog list", async () => {
render(<PostList />);
// ...
})
</code></pre>
</section>
<section data-markdown>
<textarea data-template>
### Übung: Ein "Integrationstest" für die Blog-Anwendung
* Die `App.test.txt` ist auch noch leer 😢
* Schreibe einen Test dafür, der einmal die Anwendung "durchklickt". Stelle sicher:
* Die Postlist-Komponente wird initial mit einer Menge von mockPosts gerendert
* Der `Add Post`-Button funktioniert und öffnet den PostEditor.
* Das Speichern funktioniert
* Nach dem Speichern wird wieder die PostList angzeigt und der neue Post wird sichtbar
* Verwende zum Mocken der Request die `jest-fetch-mock`-Bibliothek
* In `App.test.tsx` findest Du weitere Hilfe.
* Ausführen des Tests: `npm test -- App`
* Achtung: Es gibt einen [Bug in der React Testing Library](https://github.com/testing-library/react-testing-library/issues/1051), der zu folgender Warnung auf der Konsole führt:
* Diese **act**-Warnung bitte ignorieren:
* ```
console.error
Warning: An update to App inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
```
</textarea>
</section>
<section>
<h2>Browser Tests</h2>
<p>Häufig eingesetzt:</p>
<ul>
<li>
<a href="https://www.selenium.dev/">Selenium - The "classic"</a>
</li>
<li><a href="https://www.cypress.io/" target="_blank">Cypress</a></li>
<li>
<a href="https://devexpress.github.io/testcafe/" target="_blank">TestCafe</a> (mit
Support für sehr viele Browser, u.a. auch den Cloud-Service
<a href="https://www.browserstack.com/" target="_blank">BrowserStack</a>)
</li>
<li>
<a href="https://playwright.dev/">Playwright</a> von Microsoft. Noch relativ neu,
Hype-Kurve zeigt gerade steil nach oben.
</li>
<li>
In TestCafe und Cypress werden die Tests in JavaScript/TypeScript geschrieben,
Selenium und Playwright gibt's für mehrere Sprachen
</li>
</ul>
</section>
<!-- ============================================================================= -->
<!-- ########################## GRAPHQL ######################################### -->
<section id="t-apollo-react">
<h1>GraphQL</h1>
<h2>Clients mit Apollo React</h2>
</section>
<section data-markdown>
<textarea data-template>
### Vorbereitung
* Bitte das Repository klonen: `git clone https://github.com/nilshartmann/react18-training`
* Das GraphQL Backend starten:
* ```bash
cd blog-example/backend-graphql
npm install
npm start
```
* GraphQL Explorer sollte auf [http://localhost:4000](http://localhost:4000) laufen
* Wir arbeiten dann im Verzeichnis `blog-example/workspace-graphql`
* Dort die Anwendung starten:
* ```bash
cd blog-example/workspace-graphql
npm install
npm start
```
* Anwendung sollte jetzt auf [http://localhost:3000](http://localhost:3000) laufen
</textarea
>
</section>
<section>
<h3>Apollo Client</h3>
<p>
<a href="https://www.apollographql.com/docs/react/"
>https://www.apollographql.com/docs/react/</a
>
</p>
<p>React Hooks um mit GraphQL Services zu kommunizieren</p>
<p>
Stellt einen <b>globalen Cache</b> zur Verfügung, um konsistente Daten in der ganzen
Anwendung sicherzustellen
</p>
</section>
<!-- ============================================================================= -->
<section>
<h3>Apollo Client DevTools</h3>
<p>Browser-Erweiterung, stellt z.B. den Inhalt des Caches dar</p>
<ul>
<li>
<a
href="https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm"
>Chrome</a
>
</li>
<li>
<a href="https://addons.mozilla.org/de/firefox/addon/apollo-developer-tools/"
>Firefox</a
>
</li>
</ul>
</section>
<section data-markdown>
<textarea data-template>
### Apollo Client
* Das `ApolloClient`-Objekt ist unter anderem für den Netzwerkverkehr, den Cache
und Fehlerbehandlung zuständig
* Der `ApolloClient` ist React-unabhängig und kann auch mit anderen JavaScript-Frameworks
verwendet werden.
* ```javascript
import ApolloClient from "apollo-client";
const client = new ApolloClient({
link: new HttpLink({uri: "http://localhost:4000"}),
cache: new InMemoryCache()
}};
```
---
### Link
* Mit einem `Link` wird beschrieben, wie Apollo die HTTP-Requests zum Server machen soll
* Man kann zum Beispiel eigene HTTP Header hinzufügen
* Auch die Konfiguration für Websockets für Subscriptions erfolgt darüber
* Für verschiedene Aufgaben gibt es verschiedene `Link`-Implementierungen, die
hintereinander ausgeführt werden können
---
### Link
* Beispiel: Header für Authentifizierung
* ```javascript
const authLink = setContext((_, { headers }) => {
// get the authentication token from local storage if it exists
const token = localStorage.getItem("publy.token");
if (!token) {
return headers;
}