ng-japan: Testing Angular app

Slides for ng-japan 2017

1. Testing Angular App @Quramy #ng-japan 2017.06.17
2. About me
3. About me w גࣜձࣾ8"$6-ॴଐͷϑϩϯτΤϯδχΞ
   w $PNNVOJUZ
   w OHKBQBO
   TUB⒎
   w (SBQI2-
   5PLZP
   PSHBOJ[FS
   w ॻ੶
   w ʮ&MFDUSPOͰ͸͡ΊΔΞϓϦ։ൃʯ
   w झຯ
   w 7JN
   5ZQF4DSJQU
   QMVHJOͷ։ൃϝϯς
4. Agenda w "OHVMBSͰԿΛ࡞͍ͬͯΔͷ͔
   w Ͳ͏΍ͬͯςετͯ͠Δ͔
    ੩తղੳฤ
    ୯ମςετฤ
    ࣗಈԽɾճؼςετฤ
5. ͲΜͳΞϓϦ࡞ͬͯΔͷ
6. AI Analyst w (PPHMF
   "OBMZUJDTͷσʔλΛղੳ
 8FCαΠτͷվળҊΛఏࣔ͢Δ##αʔϏε
7. Reopen after renovation w 
   d
   
   ͷ໿൒೥ؒͰϑϧεΫϥονϦχϡʔ ΞϧΛ࣮ࢪ
   w "OHVMBS+4
   WY
   
   "OHVMBS
   W
   Ͱ࡞Γ௚͠
   w ࠷ऴతʹ'SPOUFOEͷίʔυ͸ 
   MPD
   ఔ౓
8. γεςϜߏ੒ w 4JOHMF
   1BHF
   "QQMJDBUJPO
   w 'SPOUFOE
   
   w 5ZQF4DSJQU
   
   "OHVMBS
   w #BDLFOE
   
   w 8FC
   "1*
   (PMBOH
   w %BUB
   "OBMZTJT
   #BUDI
   1ZUIPO
   4DBMB
9. γεςϜಛੑ w σʔλղੳͱ͍͏αʔϏεͷ౎߹্ɺ࣮σʔλͰ݁Ռ֬ ೝ͕ߦ͑ΔΑ͏ʹͳΔ·Ͱ͕௕͍
   w ؅ཧը໘͔ΒղੳδϣϒΛΩϡʔΠϯά
   w ղੳδϣϒͷ׬ྃΛ଴ͭ
   ਺෼
   d
   ਺࣌ؒ
   w ղੳ݁ՌΛ"1*Ͱ(&5
   w ݁Ռը໘Λඳը
10. γεςϜಛੑ w ղੳ݁Ռͷίϯτϩʔϧ͕೉͍͠
    w */165
    (PPHMF
    "OBMZUJDT
    "1*
    Ͱऔಘͨ͠σʔλ
    w 065165
    ֤छ౷ܭ΍ػցֶश͕ు͘਺஋
    w ௨ৗ৮͍ͬͯΔ͚ͩͰ͸֬ೝͰ͖ͳ͍݁Ռը໘ύλʔϯ ͕͍ͬͺ͍
    
11. Τοδέʔε͸
    ۃྗςετͰ௵͍ͨ͠
12. ͲͷΑ͏ʹςετ͍ͯ͠Δ͔ How test this app
13. 1. ੩తղੳ Static Analysis
14. Compile = ࠷ॳͷςετ
15. Angular and TypeScript w "OHVMBS
    ͱݴ͑͹
    5ZQF4DSJQU
    w .JDSPTPGU
    ੡ͷ
    "MU
    +4
    w ੩తͳܕ෇
    
    WFS
    VQຖʹݡ͘ͳΔ
    ܕਪ࿦
    w $PNQJMF͕௨Βͳ͍ίʔυͳΜͯ࿦֎ͩʂ
16. Compilation and Templates? w Ͱ΋)5.-ςϯϓϨʔτ͸୞ͷจࣈྻ
    w ԿΛॻ͍ͯ΋$PNQJMF௨ͬͪΌ͏͡ΌΜʜ import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h1> {{title}} </h1> `, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; } It’s just string literal
17. AoT Compile w "P5 "IFBE
    PG
    5JNF
    $PNQJMF
    w ੩తʹ"OHVMBS
    $PNQPOFOUΛղੳͯ͠
 %0.ૢ࡞ίʔυΛੜ੒͢Δ͜ͱ
    w +J5 +VTU
    JO
    5JNF
    $PNQJMF
    w ࣮ߦ࣌ʹ$PNQPOFOU
    ͔Β$PNQJMFͯ͠
 %0.ૢ࡞ؔ਺Λ࡞Γग़͢͜ͱ
18. AoT Compile w "P5
    $PNQJMF͸5ZQF4DSJQU
    ιʔείʔυΛੜ੒͢Δ hoge.component.ts hoge.component.html hoge.component.css hoge.component.ngfactory.ts AoT Compilation
19. How to use AoT ? w !BOHVMBSDMJ
    w !BOHVMBSDPNQJMFSDMJ $ ng build --prod $ ngc -p tsconfig.json
20. (ࢀߟ) ݁Ռ͸͜Μͳײ͡
21. import * as i0 from './app.component.css.shim.ngstyle'; import * as i1 from '@angular/core'; import * as i2 from './app.component'; const styles_AppComponent:any[] = [i0.styles]; export const RenderType_AppComponent:i1.RendererType2 = i1.ɵcrt({encapsulation: 0,styles:styles_AppComponent, data:{}}); export function View_AppComponent_0(_l:any):i1.ɵViewDefinition { return i1.ɵvid(0,[(_l()(),i1.ɵeld(0,(null as any),(null as any),1,'h1',([] as any[]), (null as any),(null as any),(null as any),(null as any),(null as any))),(_l()(), i1.ɵted((null as any),['\n ','\n'])),(_l()(),i1.ɵted((null as any),['\n']))], (null as any),(_ck,_v) => { var _co:i2.AppComponent = _v.component; const currVal_0:any = _co.title; _ck(_v,1,0,currVal_0); }); } export function View_AppComponent_Host_0(_l:any):i1.ɵViewDefinition { return i1.ɵvid(0,[(_l()(),i1.ɵeld(0,(null as any),(null as any),1,'app-root',([] as any[]), (null as any),(null as any),(null as any),View_AppComponent_0,RenderType_AppComponent)), i1.ɵdid(49152,(null as any),0,i2.AppComponent,([] as any[]),(null as any),(null as any))], (null as any),(null as any)); } export const AppComponentNgFactory:i1.ComponentFactory<i2.AppComponent> = i1.ɵccf('app-root', i2.AppComponent,View_AppComponent_Host_0,{},{},([] as any[]));
22. Ε͖ͬͱͨ͠ TypeScript ιʔείʔυ
 (ਓ͕ؒಡΉ΋ͷ͡Όͳ͍͚Ͳ…)
23. AoT CompileͷԸܙ w ࣮ߦ࣌ύϑΥʔϚϯε ಛʹॳճඳը࣌ؒ ͷվળ
    w 5FNQMBUFͷ੩తίʔυνΣοΫ
    㾎 "OHVMBS
    &YQSFTTJPOͷจ๏Τϥʔ
    㾎 ଘࡏ͠ͳ͍ϓϩύςΟͷࢀর
    㾎 ଘࡏ͠ͳ͍
    $PNQPOFOU
    
    %JSFDUJWF
    
    1JQFͷࢀর
    㾎 FUD
24. Make more “strict” w --strict
    NPEF
    w 5ZQF4DSJQU
    ͔Βར༻ՄೳͳΦϓγϣϯ
    w ԼهͷશΦϓγϣϯ͕༗ޮԽ͞ΕΔ
    --noImplicitAny --noImplicitThis --alwaysStrict --strictNullChecks
    
25. Strict null check example export interface Hoge { foo?: { bar: string; } } function main(hoge: Hoge) { // TS2532: Object is possibly 'undefined'. console.log(hoge.foo.bar); } hoge.foo
    ͸
    OVMM
    
    VOEFpOFE
    ͔΋ΑʁɹͱౖΒΕΔ
26. Null check example export interface Hoge { foo?: { bar: string; } } function main(hoge: Hoge) { if (hoge.foo) { console.log(hoge.foo.bar); } } ͪΌΜͱ
    OVMM
    DIFDL
    ͢ΔͱΤϥʔ͸ফ͑Δ
    
27. With Angular templates export interface Hoge { foo?: { bar: string; } } @Component({ selector: 'app-hoge', template: `<div>{{hoge.foo.bar}}</div>`, }) export class HogeComponent { @Input() hoge: Hoge; } ͜Ε͸Ͳ͏ͩΖ͏ʁ
28. Great! $ ng build --prod Hash: 797e0c8cdb3322d2d094 Time: 9762ms chunk {0} polyfills.c1dd16e57fa8d11134c9.bundle.js (polyfills) 158 kB {4} [initial] [rendered] chunk {1} main.a49bd4f47eb88687420a.bundle.js (main) 11.3 kB {3} [initial] [rendered] chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered] chunk {3} vendor.5b15b8462e82e6e78e7f.bundle.js (vendor) 1.14 MB [initial] [rendered] chunk {4} inline.f43fbe997f9c1fcc2775.bundle.js (inline) 0 bytes [entry] [rendered] ERROR in src/$$_gendir/app/hoge/ hoge.component.ngfactory.ts (19,27):
 Object is possibly 'undefined'. "P5
    ͔͍͜͠ʂ
29. With Angular templates export interface Hoge { foo?: { bar: string; } } @Component({ selector: 'app-hoge', template: `<div *ngIf=“hoge.foo”>{{hoge.foo.bar}}</div>`, }) export class HogeComponent { @Input() hoge: Hoge; } ͪΌΜͱ
    OVMM
    DIFDL
    ͢ΔͱΤϥʔ͸ফ͑Δ
    
30. ΋ͬͱૣ͘Τϥʔʹؾ෇͖͍ͨ w ϩʔΧϧ։ൃ࣌͸
    +J5
    $PNQJMFΛར༻ͯ͠։ൃ
    w $*
    Ͱ
    "P5
    Ϗϧυͨ͠ͱ͖ʹΤϥʔʹؾ෇͘ ൵͍͠ʜ
    
31. Language Service Plugin w 5ZQF4DSJQU
    
    ͔Βͷ৽ػೳ
    w -BOHVBHF
    4FSWJDFΛࣗ༝ʹ֦ுՄೳʹ https://blogs.msdn.microsoft.com/typescript/2017/04/27/announcing-typescript-2-3/
32. What’s Language Service? w ΤσΟλʹ
    $PNQJMFS
    ͷ৘ใΛಧ͚Δ໾ׂ https://github.com/Microsoft/TypeScript/wiki/Architectural-Overview#layer-overview
33. @angular/language-service w "OHVMBS
    νʔϜۘ੡ͷ
    -BOHVBHF
    4FSWJDF
    1MVHJO
    w ಺෦తʹ
    "P5
    $PNQJMFS
    Λར༻
    w 5ZQF4DSJQU
    ʹରԠͨ͠ΤσΟλɾ*%&Ͱಈ࡞ { "compilerOptions": { : "plugins": [ { "name": "@angular/language-service" } ] } }
34. With VSC
35. With Vim
36. Other tools for static analysis w IUUQTQBMBOUJSHJUIVCJPUTMJOU
    w IUUQTHJUIVCDPNNHFDIFWDPEFMZ[FS
37. 2. ୯ମςετ
 Unit Testing
38. Angular ͱ୯ମςετ w 5FTUJOHؔ࿈ͷαϙʔτ΋खް͍
 ͕͢͞
    l0OF
    'SBNFXPSLz
    w "OHVMBSʹ͓͚Δඪ४
    5FTU
    TUBDL
    * ,BSNB
    ** +BTNJOF
    *** "OHVMBS
    UFTUJOH
    VUJMJUJFT
39. I. Karma w 5FTU
    3VOOFS
    GPS
    +BWB4DSJQU
    w 5FTU
    DPEFΛϒϥ΢βͰ࣮ߦ͢ΔͨΊͷUPPM
    w ϒϥ΢βͷىಈ
    w ςετίʔυͷૹΓࠐΈ TFSWFS
    
    CSPXTFS
    w ςετ݁Ռͷදࣔ CSPXTFS
    
    TFSWFS
    w FUD
40. II. Jasmine w 5FTUJOH
    'SBNFXPSL
    GPS
    +BWB4DSJQU
    w ࠷ॳ͔Β৭ʑೖͬͯΔ
    
    w %FTDSJCF
    TQFDT
    #%%
    w "TTFSUJPO
    
    w 4QZJOH
    w FUD
    w /PEFKT
    PS
    8FC
    #SPXTFS
    ͷͲͪΒͰ΋ಈ࡞
41. Simple Jasmine example: describe('FizzBuzz', () => { it('should say Fizz when input can be divided 3', () => { expect(fizzBuzz(3)).toBe('Fizz'); }); it('should say Buzz when input can be divided 5', () => { expect(fizzBuzz(5)).toBe('Buzz'); }); });
42. III. Angular testing utilities w !BOHVMBSDPSFUFTUJOH
    w ςετ༻"OHVMBS
    NPEVMFͷηοτΞοϓ
    w ඇಉظ੍ޚؔ਺
    w FUD
    w ଞʹ΋
    !BOHVMBSIUUQUFTUJOH
    ΍
    !BOHVMBSSPVUFS UFTUJOH
    ͳͲɺςετΛαϙʔτ͢Δػೳ܈͕ඪ४Ͱ෇͍ ͯ͘Δ
44. @angular/cli and test w ͔Βςετ͕ಈ࡞͢Δ؀ڥΛ࡞Δ͸݁ߏେมʜ
    w !BOHVMBSDMJ
    ʹ೚ͤΔͷ͕٢
    w ,BSNBͷઃఆ
    XFCQBDLͷઃఆ
    UFTU
    DPEFͷTDB⒎PME
    w ͪͳΈʹ
    FF
    UFTUJOH
    ΋ηοτΞοϓͯ͘͠ΕΔ
45. Run test with @angular/cli $ ng new my-angualr-app $ cd my-angualr-app $ ng test —single-run Executed 3 of 3 SUCCESS (0.192 secs / 0.169 secs)
46. ΍ͬͺΓؾʹͳΔͷ͸ Componentͷςετ
47. 3 ways to Component Testing w "OHVMBS
    $PNQPOFOUͷςετύλʔϯ͸େ͖͘௨Γ
    * *TPMBUFE
    5FTUJOH
    ** 4IBMMPX
    5FTUJOH
    *** *OUFHSBUJPO
    5FTUJOH https://vsavkin.com/three-ways-to-test-angular-2-components-dcea8e90bd8d
48. I. Isolated Testing $PNQPOFOUͷϩδοΫͷΈΛςετ͢Δ
49. I. Isolated Testing @Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <hero-detail [hero]="selectedHero"></hero-detail> `, }) export class AppComponent { title = 'Tour of Heroes'; heroes: Hero[] = [ { id: 10, name: 'Windstorm' } ]; selectedHero: Hero; onSelect(hero: Hero) { this.selectedHero = hero; } }
50. I. Isolated Testing @Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <hero-detail [hero]="selectedHero"></hero-detail> `, }) export class AppComponent { title = 'Tour of Heroes'; heroes: Hero[] = [ { id: 10, name: 'Windstorm' } ]; selectedHero: Hero; onSelect(hero: Hero) { this.selectedHero = hero; } }
51. Example: describe('AppComponent(Isolated testing)', () => { it('should be set selectedHero when onSelect called', () => { const comp = new AppComponent(); const hero = { id: 1, name: 'a hero' }; comp.onSelect(hero); expect(comp.selectedHero).toBe(hero); }); });
52. I. Isolated Testing w 5ZQF4DSJQU
    DMBTTͱͯ͠ͷςετ
    w 4FSWJDF
    5FTUJOHͱ΄΅ಉ༷ͷख๏
    w $PNQJMF
    ඳըίετθϩ
    
    ඇৗʹߴ଎
    w %0.ؔ࿈ͷݕূ͸Ͱ͖ͳ͍
    w ෳࡶͳΠϯελϯεϝιουͷݕূʹ޲͘
53. II. Shallow Testing ࣗ෼ࣗ਎ͷ
    5FNQMBUF
    ͷΈඳը͢Δ
 Լ૚ͷ
    $PNQPOFOU
    ͸ඳը͠ͳ͍
54. II. Shallow Testing @Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <hero-detail [hero]="selectedHero"></hero-detail> `, }) export class AppComponent { title = 'Tour of Heroes'; heroes: Hero[] = [ { id: 10, name: 'Windstorm' } ]; selectedHero: Hero; onSelect(hero: Hero) { this.selectedHero = hero; } }
55. Example: describe('AppComponent(Shallow testing)', () => { it('should render hero-detail element when selectedHero is set', () => { const fixture = TestBed.configureTestingModule({ declarations: [AppComponent], schemas: [NO_ERRORS_SCHEMA], }).createComponent(AppComponent); fixture.componentInstance.selectedHero = { id: 10, name: 'Windstorm' }; fixture.detectChanges(); expect(fixture.debugElement.query(By.css('hero-detail'))).toBeTruthy(); }); });
56. II. Shallow Testing w /0@&33034@4$)&."
    ʹΑΓԼ૚$PNQPOFOUͷ $PNQJMF͕ແࢹ͞ΕΔ
    
    ௨ৗ͸Τϥʔʹͳͬͯ͠·͏
    
    w $PNQJMF
    ඳըίετ͸ࣗ਎ͷ$PNQPOFOU෼ͷΈ

    
    
    ·͊·͊ߴ଎
    w ෦෼తʹ%0.ͷݕূ͕Մೳ
    w )5.-ཁૉͷඳը
    %0.Πϕϯτϋϯυϥͷݕূ౳
    w 5FNQMBUF಺ͷ"OHVMBS
    FYQSFTTJPO֬ೝʹ޲͘
57. III. Integration Testing Լ૚ͷ$PNQPOFOU΋ؚΊͯશͯඳը͢Δ
58. III. Integration Testing @Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <hero-detail [hero]="selectedHero"></hero-detail> `, }) export class AppComponent { title = 'Tour of Heroes'; heroes: Hero[] = [ { id: 1, name: 'Windstorm' } ]; selectedHero: Hero; onSelect(hero: Hero) { this.selectedHero = hero; } }
59. Example: describe('AppComponent(Integration Testing)', () => { it('should pass selectedHero object to heroDetailComponent', async(() => { const fixture = TestBed.configureTestingModule({ imports: [AppModule, FormsModule], }).createComponent(AppComponent); fixture.detectChanges(); fixture.debugElement .query(By.css('li:first-child')).triggerEventHandler('click', {}); fixture.detectChanges(); expect( fixture.debugElement.query(By.directive(HeroDetailComponent)) .componentInstance.hero ).toBe(fixture.componentInstance.selectedHero); })); });
60. III. Integration Testing w $PNQPOFOUͷඳըʹඞཁͳґଘؔ܎શͯΛಡΈࠐΉ
    w શґଘ$PNQPOFOU
    ͷ$PNQJMF
    ඳըίετΛཁ͢Δ

    
    
    ΋ͬͱ΋ߴίετ
    w ׬શͳ%0.ͷݕূ͕Մೳ
    w $PNQPOFOU͕ؒ࿈ܞ͢Δ෦෼ͷ֬ೝ౳ʹ޲͘
61. ݁ہͲͷύλʔϯ͕ྑ͍ͷ΍Β w 8"$6-Ͱ͸
    *OUFHSBUJPO
    5FTUJOH͕ଟΊ
    w ,BSNB
    ্Ͱݟͨ໨
    ಛʹΤοδέʔε
    ΋֬ೝ͍ͨ͠
 ˞
    ࣾ಺௨শ
    z,BSNBۦಈ։ൃz
    w $PNQPOFOUͷߏ੒ʹࡉ͔͍
    6*
    $PNQPOFOU͕ඞཁ
 ྫ
    JDPO
    CVUUPO
    FUD
    w 4IBMMPX
    5FTUJOHͩͱԿ΋ඳը͞Εͳ͍͜ͱ΋ଟ͍
    w ࡶʹ.PEVMFΛJNQPSU͢Δํָ͕ ଵຫͱ΋
62. ݁ہͲͷύλʔϯ͕ྑ͍ͷ΍Β w $PNQPOFOU
    ʹෳࡶͳϝιουΛ࣮૷͠ͳ͍ํ਑
    w ෳࡶ͞͸
    4FSWJDF
    4UPSF૚
    ʹدͤΖࢦ਑ͷͨΊ
    w *TPMBUFE
    $PNQPOFOU
    5FTUJOH
    ͷग़൪͕গͳ͍
63. Karma Driven Development
64. Ͳ͜·Ͱݕূ͢Δͷ͔ w ओͳݕূର৅
    w OH*G
    ΍
    <DMBTTYYYY>
    ͷӈล͕ਖ਼͘͠ಈ࡞͍ͯ͠Δ͜ͱ
    w ࢠ$PNQPOFOUͷ
    !*OQVU
    ʹਖ਼͘͠஋Λ౉͍ͯ͠Δ͜ͱ
    w %0.Πϕϯτ΍ࢠ$PNQPOFOUͷ
    !0VUQVU
    ʹԠͯ͡ɺ $PNQPOFOUͷϝιου͕ൃՐ͢Δ͜ͱ
    w ٯʹςΩετ \\YYY^^ ΍1JQFͷ݁ՌͳͲɺࡉ͔͍ඳը݁Ռ ͸BTTFSUJPO͍ͯ͠ͳ͍
    ཧ༝͸ޙड़
65. 
    ࣗಈԽͱճؼςετ
    "VUPNBUJPO
    
    3FHSFTTJPO
66. Put it all together…? w $*Ͱಈ࡞ͤ͞Δ
    w $PNQJMBUJPO
    5FTUJOH
    w "OHVMBS
    6OJU
    5FTUJOH
67. …ͨͩճ͚ͩ͢͡Ό໪ମͳ͍
68. One more thing w ൃ୺͸
    +FTU
    
    3FBDU
    ͷ
    4OBQTIPU
    5FTUJOH
    ΁ͷಌΕ import React from 'react'; import Link from '../Link.react'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); });
69. Snapshot Testing w ςετ݁Ռ 4OBQTIPU Λʮਖ਼͍݁͠Ռʯͱͯ͠อଘ
    w ࣍ճςετ࣌ʹલճ݁Ռͱͷࠩ෼Λݕࠪ͢Δ ƭ The latest snapshot (DOM String) ƭ The actual snapshot (DOM String) Update if snapshot is accepted Assertion
70. Visual Snapshot Testing w ୯ମςετͰඳըΛ࣮ߦ͍ͯ͠Δ 4IBMMPX
    
    *OUFHSBUJPO
    w ඳը݁Ռಉ࢜ͷൺֱͰ4OBQTIPU
    5FTUΠέΔ͔΋ʁ
    
    Ʃ The latest snapshot (PNG Image) Ʃ The actual snapshot (PNG Image) Update if snapshot is accepted Assertion
71. ಋೖͯ͠Έͨ
72. Expected image Actual Image Difference
73. Flow of Visual Regression Test w $PNQPOFOU
    5FTU
    ͷ
    BGUFS&BDIͰ
    ,BSNB
    ͔Βը૾Ωϟ ϓνϟΛऔಘ
    QOHը૾ͱͯ͠อଘ
74. I. Capture Actual Images w ,BSNBʹΑΔ୯ମςετ࣮ߦ
    w $PNQPOFOU
    5FTUJOHͷ֤TQFDຖʹ ը໘ΩϟϓνϟΛऔಘ
    w Ωϟϓνϟऔಘʹ͸ &MFDUSPO /JHIUNBSF
    ͷ"1*Λར༻
    ♥
75. II. Fetch Expected Images w HJU
    TIPXCSBODIతͳౕ͔Βɺ
 ൺֱର৅ͱ͢Δ΂͖DPNNJUΛ୳ࡧ
    w ͜ͷDPNNJU
    IBTIΛLFZʹ"84
    4 ͔Β
    &YQFDUFE
    ը૾Λμ΢ϯϩʔυ
76. III. Compare w ը૾ͷࠩ෼ݕ஌࣮ߦ JNBHFNBHJDL 
    w "DUVBM
    ࠓճͷςετ݁Ռը૾܈
    w &YQFDUFE
    EPXOMPBEͨ͠ը૾܈
    w 4΁ࠓճͷςετը૾ΛΞοϓ
    w 4΁ൺֱϨϙʔτΛΞοϓ
    w (JU)VC
    ΁݁ՌΛ௨஌
77. ※ ࠩ෼͕ଟ͍ͱ๻ʹౖΒΕ·͢
78. Tools for Visual Regression test w OQN
    QBDLBHFT
    TQFDJBM
    UIBOLT
    GPS
    !CPLVXFC
    w Ωϟϓνϟऔಘ
    LBSNBOJHIUNBSF
    w ը૾ࠩ෼ݕग़
    
    ݁ՌϨϙʔτͷग़ྗ
    SFHDMJ
    w "84
    4
    
    (JU)VC
    "1*
    DBMM
    ͸
    TIFMM
    TDSJQU
    ʹϕλॻ͖
    w ݱঢ়͸4FUVQ͕େม
    
 Ώ͘Ώ͘͸TVJU
    తͳUPPMʹ͍͖͍ͯͨ͠
79. Visual TestingͷԸܙ w $44
    TUZMF΍QJQF݁ՌͷݕূΛ໌ࣔతʹॻ͔ͣͱ΋ɺ
 ҙਤͤ͵ഁյʹؾ෇͚Δ
    w ॳճίϛοτ࣌ͷϨϏϡʔΛ͔ͬ͠Γ͓͚ͯ͠͹Α͍
    w ςετ݁Ռ͕ը૾Խ͞Ε͍ͯΔɿ
    㾎 ϨϏϡʔ࣌ʹը૾Λ֬ೝͰ͖Δ
    ˠ
    ϨϏϡΞෛՙ΋ܰݮ
    㾎 ͜ΜͳQOHͰ͖ͨΑʂײ͕ग़Δ
    ˠ
 ςετίʔυΛॻ͘ϞνϕʔγϣϯVQʹܨ͕Δ
80. ྫ: ͜ΜͳpngͰ͖ͨΑ(ŪƄźŗ w 4QFDͷ಺༰
    lάϥϑʹΧʔιϧ౰ͯͨΒۙ๣఺৘ใ͕QPQVQ͞ΕΔz
81. ·ͱΊ
    /H4VNNBSZ
82. ࠓ೔఻͔͑ͨͬͨ͜ͱ w ੩తղੳπʔϧΛςετʹ׆༻
    w 5ZQF4DSJQU
    "P5
    $PNQJMF
    -BOHVBHF
    4FSWJDF
    w $PNQPOFOU
    5FTUJOH
    QBUUFSOͷ࢖͍෼͚
    w *TPMBUFE
    
    4IBMMPX
    
    *OUFHSBUJPO
    w νʔϜͰςετΛָ͠ΊΔ࢓૊Έ
83. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Have a nice test
84. ͓·͚
    ओʹۤ࿑࿩ 
 "QQFOEJY
85. A. Component Testͷίετ
86. (ࢀߟ) Component Testͷίετ w *OUFHSBUJPO
    5FTUJOH
    QBUUFSO
    ͸݁ߏॏ͍ͨ
    w 
    $PNQPOFOUTΛؚΉ.PEVMFʹґଘ͢ΔUFTUΛ
    έʔ ε࣮ߦ͢Δͱɺ+J5
    $PNQJMF͚࣌ؒͩͰ
    d
    ඵఔ౓
87. (࠶ܝ) AoT CompileͷԸܙ w ࣮ߦ࣌ύϑΥʔϚϯε ಛʹॳճඳը࣌ؒ ͷվળ
    w 5FNQMBUFͷ੩తίʔυνΣοΫ
    㾎 "OHVMBS
    &YQSFTTJPOͷจ๏Τϥʔ
    㾎 ଘࡏ͠ͳ͍ϓϩύςΟͷࢀর
    㾎 ଘࡏ͠ͳ͍
    $PNQPOFOU
    
    %JSFDUJWF
    
    1JQFͷࢀর
    㾎 FUD
88. (ࢀߟ) JiT and AoT Unit Testing w "OHVMBS
    W
    ͔Β͸ɺ"P5
    $PNQJMFͷ݁ՌΛ୯ମςε τ͔Βར༻Մೳʹ
    w 4QFDຖͷ$PNQPOFOU
    $PNQJMF࣌ؒΛ࡟ݮͰ͖Δ // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting(), [()=> AppModuleNgSummary], );
89. (ࢀߟ) ద༻݁Ռ w ࣮1SKͰ͸෼ۙ͘࡟ݮ
    
 ࠨ
    ద༻લ
    ӈ
    ద༻ޙ
    w ରԠ͢ΔQMVHJOͳͲ͕
    !BOHVMBSDMJ
    ʹ౥ࡌ͞ΕΕ͹ɺ
 ΧδϡΞϧʹར༻Ͱ͖ΔΑ͏ʹͳΔ͸ͣͳͷͰظ଴ɻ
90. B. Visual RegressionͷਏΈ
91. Visual Testingͷେม͞ w ҆ఆͨ͠Ωϟϓνϟऔಘ͸݁ߏେม
    w ϒϥ΢βͷϨϯμϦϯάΛ଴ͨͳ͍ͱμϝ
    w ݁ہ
    TFU5JNFPVU
    
    NTFD
    
    S*$
    ʹམͪண͘
    w ޡݕ஌
    'BMMT
    1PTJUJWF
    Λ͍͔ʹݮΒ͔͢
    w $44
    "OJNBUJPO͸ࣄલʹແޮԽ͢ΔͳͲ޻෉͕ඞཁ
    w * { transition-duration: 0; !important }