component test

Kyoto.js 13の発表資料です

Transcript

1. ൥೰Ϩεͳίϯϙʔωϯτ
   ςετΛ໨ࢦͯ͠ !CPLVXFC
2. !CPLVXFC IUUQCMPHCPLVXFCNF w ݩ૊ΈࠐΈϋʔυ԰
   
   3VTUʹڵຯ͋Γ·͢
   w ࢁ͔ΒԼΓ͖ͯ·ͨ͠
   w ۀ຿Ͱ"OHVMBS
   
   झຯͰ3FBDU ࣗݾ঺հ CPLVXFC
3. w ͜Ε·Ͱͷίϯϙʔωϯτͷςετͱ 7JTVBM5FTUJOHʹࢸΔ·Ͱ
   w ࣮ફ7JTVBM5FTUJOH
   w ൵͍ࣦ͠ഊྫͱ஫ҙ఺ ࿩͢͜ͱ
4. ͜Ε·Ͱͷίϯϙʔωϯτͷςετͱ 7JTVBM5FTUJOHʹࢸΔ·Ͱ
5. ίϯϙʔωϯτͷςετ
   Ͳ͏΍ͬͯ·͔͢ʁ
6. ۪௚ʹΞαʔτ
7. ۪௚ʹΞαʔτ
   ҎԼ͸&O[ZNFʹهࡌ͋ͬͨྫ import React from 'react'; import { expect } from 'chai'; import { render } from 'enzyme'; import Foo from './Foo'; describe('<Foo />', () => { it('renders three `.foo-bar`s', () => { const wrapper = render(<Foo />); expect(wrapper.find('.foo-bar').length).to.equal(3); }); it('renders the title', () => { const wrapper = render(<Foo title="unique" />); expect(wrapper.text()).to.contain('unique'); }); });
8. 
   AFYQFDU XSBQQFSUFYU UPDPOUBJO bVOJRVF AͷΑ͏ͳ
   
   
   
   
   ΞαʔγϣϯΛॻ͘ͱมߋʹऑ͘ɺϝϯςφϯε͕େม
   
   5BCMF౳ͰʮOߦ໨͕IPHFͰ͋Δ͜ͱɺNߦ໨͕GVHBͰ͋Δ͜ͱʯ
   
   
   
   
   
   ɹ
   ͷΑ͏ʹɺͪ·ͪ·Ξαʔγϣϯ͢Δͷ͸ෆໟ͔ͭݱ࣮తͰͳ͍
   
   ݁ՌʮςʔϒϧͷSPX͕ߦ͋Δ͜ͱʯͷΑ͏ͳ;Θͬͱͨ͠
   ɹςετʹͳΓ͕ͪʜ ؊৺ͳͱ͖ʹςετ͕མͪͳ͔ͬͨΓ
   
   ্هΛ͍͍ԘകͰߦ͍͍ͨ ΍ͬͯΈͯ
   
9. ΋ͬͱָʹ͍͍ԘകͰ
   ςετͰ͖ͳ͍͔
10. 4OBQTIPU
    UFTUJOH
11. w ɹɹɹ"7"΍ɹɹ+FTU͕αϙʔτ
    w ίϯϙʔωϯτͷϨϯμϦϯά݁Ռ TOBQTIPU ΛKTPOͰอଘ
    
    
    
    લճ݁ՌΛਖ਼ͱ͠ࠓճ݁Ռͱൺֱɺࠩ෼͕ग़ͨ৔߹ɺࣦഊͱ͢Δ
    4OBQTIPU
    5FTUJOH
    
12. "7"Ͱͷ࢖༻ྫ
    ςετίʔυྫ import test from 'ava'; import React from 'react'; import render from 'react-test-renderer'; const HelloWorld = () => <h1>Hello World!</h1>; test('React Component snapshot test', t => { const tree = render.create( <HelloWorld /> ).toJSON(); t.snapshot(tree); }); 
    5&45@/".&UFTUKTTOBQ
    ͷΑ͏ͳܗࣜͷεφοϓγϣοτϑΝΠϧ
    
    
    
    
    
    ʹอଘ͞ΕΔ ͜ΕΛ࣍ճFYQFDUFEͱ͢Δ
13. 10: ).toJSON(); 11: t.snapshot(tree); 12: }); Did not match snapshot Difference: <h1> - Hello World..!? + Hello World! </h1> "7"Ͱͷ࢖༻ྫ
    A)FMMP
    8PSMEA
    
    A)FMMP
    8PSME A
    มߋ࣌ςετ݁Ռ
14. ྑ͍
15. 
    Ұ౓໨ࢹͰ֬ೝ͸ඞཁ͕ͩࡉʑͨ͠Ξαʔγϣϯ͕͍Βͳ͍
    
    ֬ೝޙɺVΦϓγϣϯͰͬ͘͞ͱFYQFDUFEͷߋ৽͕Ͱ͖Δ
    
    ࢠίϯϙʔωϯτͷมߋ΋ݕग़Ͱ͖Δ
    
    ݟͨ໨ͷςετ·Ͱ͸Ͱ͖ͳ͍
    
    
    
    
    
    DTTϑΝΠϧʹEJTQMBZOPOFͷΑ͏ͳมߋ͕ҙਤͤͣ
    
    
    
    
    
    
    ೖͬͯ΋TOBQTIPUςετ͸QBTT͢Δ
    
    
    
    
    
    ࢠίϯϙʔωϯτͷมߋʹΑΔ਌ίϯϙʔωϯτͷݟͨ໨͕
    
    
    
    
    
    ͲͷΑ͏ʹมΘ͔ͬͨ͸෼͔Βͳ͍ ΍ͬͯΈͯ
    
16. ίϯϙʔωϯτͷݟͨ໨·Ͱ ؚΊͯςετͰ͖ͳ͍͔
17. 7JTVBM
    UFTUJOH
18. w ςετ࣌ʹίϯϙʔωϯτͷϨϯμϦϯά݁ՌΛը૾Ωϟ ϓνϟΛऔಘɺҎલQBTTͨ͠ը૾Λਖ਼ͱ͠ࠓճ݁Ռͱൺ ֱɺࠩ෼͕ग़ͨ৔߹ɺࣦഊͱ͢Δ
    w ཁ͸લड़ͷ4OBQTIPU
    5FTUJOHͷը૾൛ 7JTVBM
    5FTUJOH
    
19. ٹ͍͍ͨྫ
    Search large… ! ݕࡧ ϘλϯʹQBEEJOH
    ௥Ճͯ͠ʔ ྫ
    4FBSDI'PSNKTY
20. ٹ͍͍ͨྫ
    Search large… ! ŝƄŒŖ ݕࡧ 
    ίϯϙʔωϯτʹมߋ͕ೖͬͨࡍʹɺมߋ͞ΕͨίϯϙʔωϯτΛ
    
    
    
    
    ࢖༻͍ͯ͠Δ਌ίϯϙʔωϯτͷݟͨ໨·Ͱ֬ೝ͕Ͱ͖Δ ྫ
    4FBSDI'PSNKTY 
    ҙਤͤͣൃੜ্ͨ͠هͷΑ͏ͳέʔεʹؾ͖͍ͮͨ
21. %&.0
22. 
    Ұ౓໨ࢹͰ֬ೝ͸ඞཁ͕ͩࡉʑͨ͠Ξαʔγϣϯ͕͍Βͳ͍
    
    ݟͨ໨΋ؚΊͯςετ͕Մೳ
    
    ࢠίϯϙʔωϯτͷมߋʹΑΔ਌ίϯϙʔωϯτͷݟͨ໨
    
    
    
    
    ͷࠩ෼·Ͱݕग़Ͱ͖Δ
    
    
    
    
    
    
    
    ؀ڥͷߏங͕େม
    ޙड़
    䠼
    ࣮%0.ςετ
    
    εΫϦʔϯγϣοτΛͱΔ࢓૊Έ͕ඞཁ
    ޙड़
    
    ϑϧϨϯμϦϯάͳͷͰॏ͍
    ΍ͬͯΈͯ
    
23. ࣮ફ7JTVBM
    5FTUJOH
24. ᶃ
    
    ςετ࣌ʹίϯϙʔωϯτͷTDSFFOTIPUΛอଘ͢Δ
    ᶄ
    
    (JUͷཤྺΛ୧ͬͯɺൺֱର৅ FYQFDUFE ͱ͢ΔTDSFFOTIPUΛ

    
    
    
    
    4͔Βμ΢ϯϩʔυ͢Δ
    ᶅ
    
    ࠓճͷTDSFFOTIPU BDUVBM ͱFYQFDUFEͷൺֱΛߦ͏
    ᶆ
    
    ࠓճͷTDSFFOTIPU BDUVBM ͱEJ⒎ը૾ͱIUNMϨϙʔτΛHJUͷ
    
    
    
    
    
    DPNNJU
    IBTIΛΩʔʹ4ʹΞοϓϩʔυ
    
    
    
    
    
    BDUVBM͸࣍ճҎ߱ͷFYQFDUFEީิͱͳΔ
    ᶇ
    
    4MBDLɺHJUIVCʹ݁ՌΛ௨஌
    $*ͰͷྲྀΕ
    
25. ςετ࣌ͷTDSFFOTIPUอଘ
    ࣮%0.ʹϨϯμϦϯάͭͭ͠εΫϦʔϯγϣοτΛࡱΔඞཁ͕͋Δ w
    
    
    
    
    LBSNBOJHIUNBSF
    
    
    
    /JHIUNBSFΛىಈ͢ΔLBSNBϓϥάΠϯ
    w
    
    
    
    
    
    "WBSPO
    
    
    
    
    "7"ΛFMFDUSPO্ͷQSPDFTTͰಈ࡞ͤ͞ΔϞδϡʔϧ
    
    
    
    
    લड़ͷTOBQTIPU
    UFTUJOH΋ซ༻Մೳ
    
    
    
    
    
    
    
    
    ཁ͸FMFDUSPOͷSFOEFSFSʹඳը͠ɺTDSFFOTIPUΛࡱΔ࡞ઓ
26. ςετ࣌ͷTDSFFOTIPUอଘ
    ςετίʔυྫ
    "WBSPO
    
    SFBDU
    import test from 'ava'; import React from 'react'; import { render } from 'react-dom'; import { screenshot } from 'avaron'; const Example = () => <h1>Hello World!</h1>; test('React Component snapshot test', async t => { ɹrender(<Example />, document.querySelector('.main')); await screenshot('screenshots/sample.png'); }); 
    TBNQMFQOHͱ͍͏QOH͕อଘ͞ΕΔ
27. (JUͷཤྺΛ୧ͬͯൺֱର৅Λऔಘ
    NBTUFS UPQJD FYQFDUFE BDUVBM ର৅ͷDPNNJU
    IBTIΛಛఆ͠ɺͦΕΛΩʔʹFYQFDUFEΛμ΢ϯϩʔυ 13 )&"%
28. BDUVBMͱFYQFDUFEͷൺֱ
    w SFHDMJ
    
    
    
    ը૾ൺֱΛߦͬͯEJ⒎ͱIUNMϨϙʔτΛੜ੒
    
    
    
    JNBHFNBHJDLʹґଘ͕ͯͨ͠JNHEJ⒎KT΁Ҡߦ QVSF
    +4
    
    
    
    
    
    
29. ४උ͕໘౗
    
    w 4ͷόέοτ࡞੒
    w (JUͷIBTI୳ࡧ
    w ը૾ൺֱ
    w 4΁ͷΞοϓϩʔυ
    w 4MBDL௨஌
    w HJUIVC௨஌
    
30. 
    
    
    SFHTVJU
    IUUQTSFHWJ[HJUIVCJPSFHTVJU
    
    
    
    DSFBUFE
    CZ
    !2VSBNZ
    લทͷ໘౗ͳ࡞ۀΛαϙʔτͯ͘͠ΕΔ
    
    TBNQMFT
     IUUQTHJUIVCDPNSFHWJ[SFHTJNQMFEFNP
     IUUQTHJUIVCDPNCPLVXFCSFBDUBWBSPOSFHTBNQMF
31. ൵͍ࣦ͠ഊྫͱ஫ҙ఺
32. ൵͍ࣦ͠ഊྫ
    BDUVBM FYQFDUFE EJ⒎ * { transition: none !important; animation: none !important; }
    Ϙλϯ͕ΞΫςΟϒʹͳͬͨࡍͷUSBOTJUJPOͰඍົʹ৭ҧ͏
    
    
    
    
    
    UFTUͷpYUVSFIUNMʹҎԼΛಥͬࠐΜͩ ʂʁ
    
33. ൵͍ࣦ͠ഊྫ
    BDUVBM
    ίετͷߴ͍ϖΠϯτ͕ؒʹ߹ͬͯͳ͔ͬͨ
    
    
    
    
    
    TDSFFOTIPUऔಘ·Ͱ଴ͪ࣌ؒΛগ͠௥Ճ
    
    
    
    
    
    ࠩ෼ݕग़ʹ͖͍͠஋Λઃఆ
    ݱঢ়͘Β͍ FYQFDUFE EJ⒎ ʂʁ
    
34. w 7JTVBM5FTUJOH͸ݟͨ໨΋ؚΊͯςετͰ͖ͯ࠷ߴ
    
    w ࣮ߦ࣌ؒͱ͸τϨʔυΦϑ
    w ҆ఆͨ͠εΫϦʔϯγϣοτ͕औΕΔΑ͏ߟྀ͕ඞཁ
    w ࠓޙ΋֎෦αʔϏεͳͲ΋ؚΊͯબ୒ࢶ͸૿͖͑ͯͦ ͏ ݴ͍͔ͨͬͨ͜ͱ
    
35. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠