おもらし Resolve

Retty Engineer Meetup#1 (https://retty.connpass.com/event/152101/) で話した LT の公開用スライドです。

Transcript

1. +4ςετςΫχοΫ
 CZ
   3ZPUBSP
   ,P
   !QJLBUFOPS
   ʙ
   ͓΋Β͠
   1SPNJTF
   ͷճ
   ʙ
2. ͜Ε͸
   3FUUZ
   &OHJOFFS
   .FFUVQ
   Ͱ࿩ͨ͠
   -5
   ͷެ։༻ࢿྉͰ͢
   IUUQTSFUUZDPOOQBTTDPNFWFOU
3. ͓લ୭ͩ 3FUUZ
   גࣜձࣾ
   8FCݕࡧνʔϜ
   ΤϯδχΞ
   3ZPUBSP
   ,P
   
   
   
   *%
   ͸େମ
   !QJLBUFOPS
 
   େֶଔۀޙ
   ೖࣾ
   ۀ຿ྖҬ
   
   
   όοΫΤϯυ
   
   
   ݕࡧ඼࣭վળ
   
   
   &MBTUJDTFBSDI
   ͷ͓कΓ
   
   
   Πϯϑϥख఻͍
   0ODBMM
   
4. ͜Μͳςετ "XFTPNF
   ͳϑΥʔϜ ૹ
   ৴ ॲཧͷྲྀΕ
   
5. ͜Μͳςετ ϐΧνϡ΢ ૹ
   ৴ ॲཧͷྲྀΕ
   
6. ͜Μͳςετ ϐΧνϡ΢ ૹ
   ৴ ॲཧͷྲྀΕ
   ೖྗ׬ྃޙɺૹ৴ϘλϯΛԡ͢
   ˣ
7. ͜Μͳςετ ϐΧνϡ΢ ૹ
   ৴ ॲཧͷྲྀΕ
   ೖྗ׬ྃޙɺૹ৴ϘλϯΛԡ͢
   ˣ
   Ϙλϯ͕άϨʔΞ΢τ͢Δ
   <BUUSEJTBCMFE>
   ˣ
8. ͜Μͳςετ ϐΧνϡ΢ ૹ
   ৴ ॲཧͷྲྀΕ
   ೖྗ׬ྃޙɺૹ৴ϘλϯΛԡ͢
   ˣ
   Ϙλϯ͕άϨʔΞ΢τ͢Δ
   <BUUSEJTBCMFE>
   ˣ
   "1*
   ௨৴
   ˣ "1*
   αʔόʔ
9. ͜Μͳςετ ϐΧνϡ΢ ૹ
   ৴ ॲཧͷྲྀΕ
   ೖྗ׬ྃޙɺૹ৴ϘλϯΛԡ͢
   ˣ
   Ϙλϯ͕άϨʔΞ΢τ͢Δ
   <BUUSEJTBCMFE>
   ˣ
   "1*
   ௨৴
   ˣ
   ׬ྃͨ͠Βݩʹ໭͢
   <BUUS
   >
   "1*
   αʔόʔ
10. ͜Μͳςετ ϐΧνϡ΢ ૹ
    ৴ ॲཧͷྲྀΕ
    ೖྗ׬ྃޙɺૹ৴ϘλϯΛԡ͢
    ˣ
    Ϙλϯ͕άϨʔΞ΢τ͢Δ
    <BUUSEJTBCMFE>
    ˣ
    "1*
    ௨৴
    ˣ
    ׬ྃͨ͠Βݩʹ໭͢
    <BUUS
    >
    "1*
    αʔόʔ ૹ৴Ϙλϯ͕ԡ͞Ε͔ͯΒ௨৴׬ྃ·Ͱ
    disabled
    Ͱ͋Δ͜ͱΛςετ͍ͨ͠
11. ίϯϙʔωϯτͷίʔυྫ <template> <form> <input v-model="name" placeholder="Awesome Form"/> <button type="submit" :disabled="loading">ૹ৴</button> </form> </template> <script> import { callAPI } from 'API௨৴͢Δ΍ͭ'; export default { data() { return { name: '', loading: false, }; }, methods: { async onSubmit() { this.loading = true; try { await callAPI(this.name); this.$emit('success'); } catch (error) { // ͳΜ͔΍Δ } finally { this.loading = false; } }, }, }; </script>
12. ίϯϙʔωϯτͷίʔυྫ <template> <form> <input v-model="name" placeholder="Awesome Form"/> <button type="submit" :disabled="loading">ૹ৴</button> </form> </template> <script> import { callAPI } from 'API௨৴͢Δ΍ͭ'; export default { data() { return { name: '', loading: false, }; }, methods: { async onSubmit() { this.loading = true; try { await callAPI(this.name); this.$emit('success'); } catch (error) { // ͳΜ͔΍Δ } finally { this.loading = false; } }, }, }; </script> BTZODBXBJU
13. ΍Γ͍ͨςετ describe('onSubmit', () => { it('activates loading flag when form submitted', () => { // before submit expect(wrapper.vm.loading).toBe(false); // waiting API call expect(wrapper.vm.loading).toBe(true); // after submission completed expect(wrapper.vm.loading).toBe(false); }); });
14. ΍Γ͍ͨςετ describe('onSubmit', () => { it('activates loading flag when form submitted', () => { // before submit expect(wrapper.vm.loading).toBe(false); // waiting API call expect(wrapper.vm.loading).toBe(true); // after submission completed expect(wrapper.vm.loading).toBe(false); }); }); ͜͜Ͳ͏͢Μͷ
15. ωλ͹Β͠ 
 ͓΋Β͠
    1SPNJTF
    1SPNJTF
    ͷ
    SFTPMWF
    ϋϯυϥͷείʔϓΛ֎ʹ࿙Β͢ 3FTPMWF
16. 1SPNJTFSFTPMWF
17. Promise.resolve(value) • value
    Ͱ
    3FTPMWF
    ͞Εͨ
    Promise
    Λฦ͢
    • ͭ·Γ͜͏
    function rizorubu(value) { return new Promise(function(resolve){ resolve(value); }) } 1SPNJTFSFTPMWF
18. function rizorubu(value) { return new Promise(function(resolve){ resolve(value); }) }
19. let leakedResolve; function rizorubu(value) { return new Promise(function(resolve){ leakedResolve = resolve; }) } 3FTPMWF
    ͷ࿙Β͔ͨ͠
20. let leakedResolve; function rizorubu(value) { return new Promise(function(resolve){ leakedResolve = resolve; }) } 3FTPMWF
    ϋϯυϥ͕
 είʔϓ֎ʹ࿙ΕΔ 3FTPMWF
    ͷ࿙Β͔ͨ͠
21. let leakedResolve; function rizorubu(value) { return new Promise(function(resolve){ leakedResolve = resolve; }) } leakedResolve(Promise.resolve("poyo")); BTZOD
    GVODUJPO
    rezorubu()
    Λ
    ޷͖ͳͱ͖ʹ
    3FTPMWF
    Ͱ͖Δʂ 3FTPMWF
    ͷ࿙Β͔ͨ͠ 3FTPMWF
    ϋϯυϥ͕
 είʔϓ֎ʹ࿙ΕΔ
22. ΍Γ͍ͨςετ describe('onSubmit', () => { it('activates loading flag when form submitted', () => { // before submit expect(wrapper.vm.loading).toBe(false); // waiting API call expect(wrapper.vm.loading).toBe(true); // after submission completed expect(wrapper.vm.loading).toBe(false); }); });
23. ίϯϙʔωϯτͷίʔυྫ <template> <form> <input v-model="name" placeholder="Awesome Form"/> <button type="submit" :disabled="loading">ૹ৴</button> </form> </template> <script> import { callAPI } from 'API௨৴͢Δ΍ͭ'; export default { data() { return { name: '', loading: false, }; }, methods: { async onSubmit() { this.loading = true; try { await callAPI(this.name); this.$emit('success'); } catch (error) { // ͳΜ͔΍Δ } finally { this.loading = false; } }, }, }; </script>
24. ίϯϙʔωϯτͷίʔυྫ <template> <form> <input v-model="name" placeholder="Awesome Form"/> <button type="submit" :disabled="loading">ૹ৴</button> </form> </template> <script> import { callAPI } from 'API௨৴͢Δ΍ͭ'; export default { data() { return { name: '', loading: false, }; }, methods: { async onSubmit() { this.loading = true; try { await callAPI(this.name); this.$emit('success'); } catch (error) { // ͳΜ͔΍Δ } finally { this.loading = false; } }, }, }; </script>
25. ݁ہ͜͏ͳͬͨ let apiResolve; jest.mock('API௨৴͢Δ΍ͭ', () => ({ callAPI: () => new Promise(resolve => { apiResolve = resolve; }), })); describe('AwesomeForm', () => { let wrapper; beforeEach(() => { wrapper = shallowMount(AwesomeForm); }); +FTU
    ͱ
    WVFUFTUVUJMT
    Λ࢖͍ͬͯ·͢ describe('onSubmit', () => { it('activates loading flag when form submitted', async () => { // before submit expect(wrapper.vm.loading).toBe(false); const submissionPromise = wrapper.vm.onSubmit(); // waiting API call await wrapper.vm.$nextTick(); expect(wrapper.vm.loading).toBe(true); apiResolve(Promise.resolve(true)); await submissionPromise; // after submission completed expect(wrapper.vm.loading).toBe(false); }); }); });
26. ݁ہ͜͏ͳͬͨ let apiResolve; jest.mock('API௨৴͢Δ΍ͭ', () => ({ callAPI: () => new Promise(resolve => { apiResolve = resolve; }), })); describe('AwesomeForm', () => { let wrapper; beforeEach(() => { wrapper = shallowMount(AwesomeForm); }); +FTU
    ͱ
    WVFUFTUVUJMT
    Λ࢖͍ͬͯ·͢ describe('onSubmit', () => { it('activates loading flag when form submitted', async () => { // before submit expect(wrapper.vm.loading).toBe(false); const submissionPromise = wrapper.vm.onSubmit(); // waiting API call await wrapper.vm.$nextTick(); expect(wrapper.vm.loading).toBe(true); apiResolve(Promise.resolve(true)); await submissionPromise; // after submission completed expect(wrapper.vm.loading).toBe(false); }); }); }); jest.mock Ͱ Λஔ͖׵͑ import { callAPI } from 'API௨৴͢Δ΍ͭ';
27. ݁ہ͜͏ͳͬͨ let apiResolve; jest.mock('API௨৴͢Δ΍ͭ', () => ({ callAPI: () => new Promise(resolve => { apiResolve = resolve; }), })); describe('AwesomeForm', () => { let wrapper; beforeEach(() => { wrapper = shallowMount(AwesomeForm); }); describe('onSubmit', () => { it('activates loading flag when form submitted', async () => { // before submit expect(wrapper.vm.loading).toBe(false); const submissionPromise = wrapper.vm.onSubmit(); // waiting API call await wrapper.vm.$nextTick(); expect(wrapper.vm.loading).toBe(true); apiResolve(Promise.resolve(true)); await submissionPromise; // after submission completed expect(wrapper.vm.loading).toBe(false); }); }); }); +FTU
    ͱ
    WVFUFTUVUJMT
    Λ࢖͍ͬͯ·͢ jest.mock Ͱ Λஔ͖׵͑ import { callAPI } from 'API௨৴͢Δ΍ͭ'; ͓΋Β͠
28. ݁ہ͜͏ͳͬͨ let apiResolve; jest.mock('API௨৴͢Δ΍ͭ', () => ({ callAPI: () => new Promise(resolve => { apiResolve = resolve; }), })); describe('AwesomeForm', () => { let wrapper; beforeEach(() => { wrapper = shallowMount(AwesomeForm); }); describe('onSubmit', () => { it('activates loading flag when form submitted', async () => { // before submit expect(wrapper.vm.loading).toBe(false); const submissionPromise = wrapper.vm.onSubmit(); // waiting API call await wrapper.vm.$nextTick(); expect(wrapper.vm.loading).toBe(true); apiResolve(Promise.resolve(true)); await submissionPromise; // after submission completed expect(wrapper.vm.loading).toBe(false); }); }); }); +FTU
    ͱ
    WVFUFTUVUJMT
    Λ࢖͍ͬͯ·͢ MPBEJOH
    USVF
    Λݕূͯ͠
    3FTPMWF ΦέΦέΦοέʔ
29. Promise.reject(reason) • reason
    ʹΑΓ
    3FKFDU
    ͞Εͨ
    Promise
    Λฦ͢
    • ɹɹ
 Έ͍ͨʹॻ͘͜ͱͰΤϥʔ࣌ͷςετ΋Ͱ͖·͢
    1SPNJTFSFKFDU leakedResolve(Promise.reject(new Error("something happened")))
30. References: Mozilla. "Promise.reject()". MDN Web docs. 2019/3/23. https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject Mozilla. "Promise.resolve()". MDN Web docs. 2019/3/18. https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve azu. "Javascript Promise ͷຊ". Ver 1.6.5. https://azu.github.io/promises-book/