Upgrade to Pro — share decks privately, control downloads, hide ads and more …

おもらし Resolve

Ryotaro Ko
November 01, 2019

おもらし Resolve

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

Ryotaro Ko

November 01, 2019
Tweet

More Decks by Ryotaro Ko

Other Decks in Programming

Transcript

  1. ͜Μͳςετ ϐΧνϡ΢ ૹ৴ ॲཧͷྲྀΕ ೖྗ׬ྃޙɺૹ৴ϘλϯΛԡ͢ ˣ Ϙλϯ͕άϨʔΞ΢τ͢Δ<BUUSEJTBCMFE> ˣ "1*௨৴ ˣ

    ׬ྃͨ͠Βݩʹ໭͢<BUUS> "1*αʔόʔ ૹ৴Ϙλϯ͕ԡ͞Ε͔ͯΒ௨৴׬ྃ·Ͱ disabledͰ͋Δ͜ͱΛςετ͍ͨ͠
  2. ίϯϙʔωϯτͷίʔυྫ <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>
  3. ίϯϙʔωϯτͷίʔυྫ <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
  4. ΍Γ͍ͨςετ 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); }); });
  5. ΍Γ͍ͨςετ 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); }); }); ͜͜Ͳ͏͢Μͷ
  6. let leakedResolve; function rizorubu(value) { return new Promise(function(resolve){ leakedResolve =

    resolve; }) } 3FTPMWFϋϯυϥ͕
 είʔϓ֎ʹ࿙ΕΔ 3FTPMWFͷ࿙Β͔ͨ͠
  7. let leakedResolve; function rizorubu(value) { return new Promise(function(resolve){ leakedResolve =

    resolve; }) } leakedResolve(Promise.resolve("poyo")); BTZODGVODUJPOrezorubu()Λ ޷͖ͳͱ͖ʹ3FTPMWFͰ͖Δʂ 3FTPMWFͷ࿙Β͔ͨ͠ 3FTPMWFϋϯυϥ͕
 είʔϓ֎ʹ࿙ΕΔ
  8. ΍Γ͍ͨςετ 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); }); });
  9. ίϯϙʔωϯτͷίʔυྫ <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>
  10. ίϯϙʔωϯτͷίʔυྫ <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>
  11. ݁ہ͜͏ͳͬͨ 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); }); }); });
  12. ݁ہ͜͏ͳͬͨ 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௨৴͢Δ΍ͭ';
  13. ݁ہ͜͏ͳͬͨ 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௨৴͢Δ΍ͭ'; ͓΋Β͠
  14. ݁ہ͜͏ͳͬͨ 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Λ࢖͍ͬͯ·͢ MPBEJOHUSVF Λݕূͯ͠3FTPMWF ΦέΦέΦοέʔ
  15. 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/