TypeScriptとテストをはじめた

by syukai

Slide 1

Slide 1 text

5ZQF4DSJQUͱςετ Λ͸͡Ίͨ WLBOTBJ !TZVLBJ

Slide 2

Slide 2 text

ࣗݾ঺հ ϢΧΠ !TZVLBJ ීஈ΍ͬͯΔ͜ͱ w +BWB w 4QSJOH #PPU w 7VFKT w /&5΋ͪΐͬ͜ͱ

Slide 3

Slide 3 text

લճ ͷ͓͞Β͍ w 5ZQF4DSJQUͷಋೖ͕ݱࡏਐߦܗ w Ϣχοτςετͷಋೖ΋ݱࡏਐߦܗ w ࢲ͡Όͳ͍ਓ͕ؤுͬͯΔ͚ͲπϥΠ

Slide 4

Slide 4 text

5ZQF4DSJQU

Slide 5

Slide 5 text

5ZQF4DSJQUಋೖ w ͢Ͱʹ+BWB4DSJQUͰग़དྷ্͕ͬͯΔ΋ͷΛมߋ w ΍ͬͺΓܕ͕ͳ͍ͱ͠ΜͲ͍ w ίʔυॻ͍ͯͯʮ͜ΕͷܕͳΜ͚ͩͬʁʯͱ͔໘౗ w Τϥʔݟ͔ͯΒʮ͋ʔͦ͏͍΍จࣈྻͩͬͨΘʯ w ߲໨໊ͱ͔74$PEF༷ʹڭ͑ͯ΄͍͠ w εϖϧϛε͕࣮ߦ࣌ʹൃ֮ͱ͔ɾɾɾ

Slide 6

Slide 6 text

QBDLBHFKTPO w WVFDMJͰ࡞ͬͨΩϨΠͳQBDLBHFKTPOʹඞཁͳ΋ͷΛҠ ২ w WVFNBUFSJBM༻ʹ!UZQFTWVFNBUFSJBMΛ௥Ճ w OQNJOTUBMM͢ΔͱQBDLBHFKTPO͔Βফ͑Δɾɾɾ

Slide 7

Slide 7 text

ͱΓ͋͑ͣίϯύΠϧ௨͢ w KTΛUTʹม͑Δ w จ๏ͷҧ͍Λมߋ w FYQPSUɺQSPQ NFUIPE DPNQVUFEɺSPVUFSUT w BOZ͍ͬͯͬͺ͍ॻ͍ͨ w ͱΓ͋͑ͣίϯύΠϧ௨ͬͯͳΜͱͳ͘ಈ͚͹͍ͬͨΜ҆ ৺Ͱ͖Δ

Slide 8

Slide 8 text

JavaScript export default { props: ['model', 'mode'], data() { return {}; }, computed: { isAmode() { return this.mode === 'A'; } } } <script lang=“ts"> TypeScript import Vue from 'vue' @Component({}) export default class Card extends Vue { @prop() model!: any; @prop() mode!: string; /** computed */ get isAmode() { return this.mode === 'A'; } })

Slide 9

Slide 9 text

ܕΛݫ֨ʹ͍ͯ͘͠ w ౰ͨΓલ͚ͩͲBOZͰ͸શવخ͘͠ͳ͍ w TIJNTNZ.PEFMEUTΛ࡞ͬͯJOUFSGBDFͱͯ͠ܕΛఆٛ w BOZΛͪΌΜͱͨ͠ܕʹॻ͖׵͍͑ͯ͘ w JOQVU͕਺஋Λ౉ͯ͘͠ΕΔΑ͏ʹ͢Δ  WNPEFM⇛WNPEFMOVNCFS

Slide 10

Slide 10 text

<> // RestAPIͰड͚औΔσʔλͷܕ export = Employee; declare interface Employee { id: string; name: string; } <> import _Employee from '@/model/Employee'; export = myModel; declare module myModel { export interface Employee extends _Employee {} } <>

Slide 11

Slide 11 text

5ZQF4DSJQUରԠͷ࢓্͛ w &4MJOUΛ54MJOUʹมߋ w 54MJOU͸WVFDMJQMVHJOUZQFTDSJQUͷ΋ͷΛ࢖༻

Slide 12

Slide 12 text

Ϣχοτςετ

Slide 13

Slide 13 text

͠Ό΂Γ͍ͨ͜ͱ͸ ΫοΫϒοΫʹ ΄΅ॻ͍ͯ͋ͬͨ Vue.jsΫοΫϒοΫɿVue ίϯϙʔωϯτͷ୯ମςετ https://jp.vuejs.org/v2/cookbook/unit-testing-vue-components.html

Slide 14

Slide 14 text

ͳͥςετΛ͢ΔͷͰ͔͢ ίϯϙʔωϯτͷ୯ମςετʹ͸ͨ͘͞Μͷར఺͕͋Γ·͢: • ίϯϙʔωϯτ͕Ͳ͏ಈ࡞͢΂͖͔ͷυΩϡϝϯτΛఏڙ͠ ·͢ • ա౓ͳखಈςετͷ࣌ؒΛઅ໿͠·͢ • ৽͍͠ػೳʹ͓͚ΔόάΛݮΒ͠·͢ • ઃܭΛվྑ͠·͢ • ϦϑΝΫλϦϯάΛ༰қʹ͠·͢ ࣗಈςετ͸େن໛ͳ։ൃνʔϜ͕ෳࡶͳίʔυϕʔεΛอͭ ͜ͱΛՄೳʹ͠·͢ɻ

Slide 15

Slide 15 text

࣮ྫ ୯ମςετͷ͢΂͖͜ͱ͸: • ࣮ߦ͕ૣ͍͜ͱ • ཧղ͠΍͍͢͜ͱ • Ұͭͷ࡞ۀ ͚ͩΛςετ͢Δ͜ͱ ʢதུʣ ্هςετʹ͸͍͔ͭ͘ͷ໰୊͕͋Γ·͢: • 1ͭͷςετ͕ҟͳΔ͜ͱʹ͍ͭͯΞαʔγϣϯΛߦ͍ͬͯ·͢ • ίϯϙʔωϯτ͕ଘࡏͰ͖ΔҟͳΔঢ়ଶ΍ඳը͢΂͖΋ͷΛ఻͑Δͷ͕೉͍͠ ҎԼͷྫͰ͸ɺςετΛ࣍ͷΑ͏ʹվળ͍͖ͯ͠·͢: • it ϒϩοΫ͝ͱʹ1ͭͷΞαʔγϣϯͷΈ࡞੒͢Δ • ୹͘໌֬ͳςετͷઆ໌Λ࣋ͭ • ςετʹඞཁͳ࠷௿ݶͷσʔλ͚ͩΛఏڙ͢Δ • ॏෳͨ͠ϩδοΫʢwrapper ͷ࡞੒ͱ username ม਺ͷઃఆʣΛϑΝΫτϦؔ ਺ʹϦϑΝΫλϦϯά͢Δ

Slide 16

Slide 16 text

ͦΕ͸ͦΕͱͯ͠ ͱΓ͋͑ͣ࿩͠·͢

Slide 17

Slide 17 text

+FTU w ެࣜΛݟͳ͕Β+FTUରԠΛਐΊΔ

Slide 18

Slide 18 text

ࢀߟ w ʮ͸͡Ίͯͷࣗಈςετʯ w ςετͷߟ͑ํ΍੾Γ෼͚ํ

Slide 19

Slide 19 text

Ϣχοτςετ

Slide 20

Slide 20 text

ํ਑ w ςετΛཉுΒͳ͍ w 6*ςετ͸ఘΊΔ w ֎෦࿈ܞ΋ఘΊΔ w QSJWBUFͷςετέʔε͸͍Βͳ͍ w ͍͖ͳΓશ෦͸ٻΊͳ͍ʂϢχοτϨϕϧͷ҆શ֬อʂ

Slide 21

Slide 21 text

ྫʣQSJWBUF prevMonth(): void { this.addMonth(-1); } nextMonth(): void { this.addMonth(1); } private addMonth(months: number): void { let nextYear: number = Number(this.yyyy); let nextMonth: number = Number(this.mm) + months; if(nextMonth === 13) { nextYear += 1; nextMonth = 1; } else if (nextMonth === 0) { nextYear -= 1; nextMonth = 12; } this.yyyy = nextYear; this.mm = nextMonth; } w ʢ࣮૷͕ΞϨͳͷ͸͓͖ͯ͞ʜʣ w BEE.POUIͷҾ਺͸͔͔͋͠ Γ͑ͳ͍ w ͦΕҎ֎Λςετ͢Δඞཁͳ͠

Slide 22

Slide 22 text

ςετέʔε w JU̍ͭͰ̍ςετέʔεʹ͢Δʂ w ͳΜͷςετ͔ͩΘ͔Βͳ͘ͳΔ w JUͷ్தͰ౤ೖσʔλΛೖΕସ͑ͳ͍ w Ξαʔγϣϯ͸ෳ਺͋ͬͯΑ͍  ͭͷ౤ೖσʔλͰෳ਺ͷ߲໨ɾঢ়ଶΛ֬ೝ͢Δ

Slide 23

Slide 23 text

ྫʣJU̍ͭͰ̍ςετέʔε <> it('ϙΠϯτ͕ϚΠφεͳΒ0ʹ͢Δ', () => { wrapper.vm.form.points = 1; wrapper.vm.onValidPoint(); expect(wrapper.vm.form.points).toBe(1); wrapper.vm.form.points = -1; wrapper.vm.onValidPoint(); expect(wrapper.vm.form.points).toBe(0); });

Slide 24

Slide 24 text

ྫʣJU̍ͭͰ̍ςετέʔε <> it(‘onValidPoint ௨ৗ', () => { wrapper.vm.form.points = 1; wrapper.vm.onValidPoint(); expect(wrapper.vm.form.points).toBe(1); }); it(‘onValidPoint ϚΠφε', () => { wrapper.vm.form.points = -1; wrapper.vm.onValidPoint(); expect(wrapper.vm.form.points).toBe(0); });

Slide 25

Slide 25 text

"1*ݺͼग़͠ͷςετ w "1*ݺͼग़͠ʹ͸"YJPTΛ࢖༻ w ϢχοτςετͰ͸"1*ݺͼग़ͨ͘͠͠ͳ͍ʂ w "YJPT࢖ͬͨ"1*ݺͼग़͠ॲཧΛಠཱͤ͞Δ w ্هॲཧΛϞοΫʹஔ͖׵͑Δ

Slide 26

Slide 26 text

ྫʣ"QJΛݺͼग़͠Λಠཱ <> import axiosBase from '@/module/AxiosBase' let axios = axiosBase.axios; export default { getEmployees(): Promise { return axios.get('employees'); } } <>ɹaxiosࠩ͠ସ͑͸େมͳͷͰApi͝ͱࠩ͠ସ͑ const getEmployeesMock = jest.fn(); jest.mock('@/module/api/EmployeesApi', () => { return { getEmployees: getEmployeesMock }; })

Slide 27

Slide 27 text

ը໘දࣔͷςετ w ΍Βͳ͍ʂʂʂʂ w 7VFKT͔ͩΒσʔλ͕େৎ෉ͳΒදࣔ΋େৎ෉ͩΖʂ w େৎ෉ͳΜͩΑʂʂʂʂ w ͱ͸͍͑USBOTJUJPO͕͏·͘ಈ͍ͯΔ͔ɺσʔλͷ࠶ܭࢉ ͕ͪΌΜͱ൓Ԡͯ͠Δ͔͸ؾʹͳΔͱ͜Ζ  ⇛Ͳ͏͠Α͏

Slide 28

Slide 28 text

ςετॻ͍ͯಘͨ஌ݟ

Slide 29

Slide 29 text

ίϯϙʔωϯτ͸খ͘͢͞Δ w Ͱ͔͍ίϯϙʔωϯτ͸πϥΠɻখ͘͞͠Α͏ w ΍ͨΒϞοΫʹཔΖ͏ͱ͢Δ͜ͱʹͳΓɺͦͯ͠ϋϚΔ w ςετέʔεͷ૊Έ߹Θ͕ͤෳࡶʹͳΔ w ςετίʔυ͕௕͘ͳΓಡΉؾ͕ࣦͤΔ w ςετέʔε଍ΓͯΔ͔Θ͔Μͳ͍

Slide 30

Slide 30 text

ΫϥεΛੵۃతʹ࡞Δ w Ϋϥεʹ੾Γग़ͯ͠QSJWBUFʹ͢Ε͹ࢀরՕॴ͕ݮͬͯς ετύλʔϯ͕άοͱߜΕΔ w ॻ͍ͯͯؾ͍͚ͮͨͲςετύλʔϯߟ͑Δͷ͕໘౗ͬͯ ͜ͱ͸ӨڹՕॴଟ͍͔Βόάग़΍͍ͬͯ͢͜ͱͩΑͶ

Slide 31

Slide 31 text

5ZQF4DSJQU͡Όͳ͍ͱπϥΠ w ผͷҊ݅Ͱ+BWB4DSJQUͷ··ςετͯ͠Έͨ w GVODUJPOͷϞοΫࠩ͠ସ͕͑೉͍͠  ϦϙδτϦͷςετ͕πϥΠ w Ұ౓5ZQF4DSJQU΍Δͱ΋͏ܕແ͍ͷ໘౗͍͘͞