Ngobrolin Testing - Ngobrolin WEB Ep12

1:26Kapan-kapan kita bahas karakter Unicode?

1:28Detail kali ya.

1:30Mungkin di sini, dia pasang Unicode.

1:34Jadi nggak bisa muncul tuh.

1:37Pons, kita bahas Pons di tahun lalu.

1:40Ini yang lalu kan?

1:42Makasar kemarin Defece-nya mantap.

1:44Keren banget.

1:46Sampai over kapasitas ya.

1:48Tapi keren lah, mantap sekali.

1:50Tepok juga mantap.

1:52Selamat buat teman-teman GDG.

1:54Yang mengadakan Defece.

1:56Sukses ya.

1:58Sudah selesai semua ya Indonesia.

2:00Kalian talk.

2:02Terakhir Makasar, Depok, Bandung, dan teman-temannya.

2:06Minggu lalu.

2:08Dan malam hari ini kita akan...

2:10Menyapa-nyapa dulu.

2:12Ada Septian, ada Dito.

2:14Ada Thams.

2:16Ada siapa nih?

2:18Saiful Rahman. Halo-halo.

2:20Dan seperti yang ada di judul.

2:22Kita akan membahas tentang...

2:24Testing.

2:26Testing ini adalah...

2:28Salah satu, dua, tiga.

2:30Bahasa Indonesia apa ya?

2:32Pengujian ya, pengujian.

2:34Gatau apa ya resminya? Betul gitu.

2:36Pengujian.

2:38Cacok kan?

2:40Cuman agak masih asing ya.

2:42Test runner apa dong?

2:44Ujian sambil lari.

2:46Pengujian.

2:48Salah, test runner itu pengujian.

2:50Boleh, boleh, boleh.

2:52Ada...

2:54Topik tentang testing ini adalah...

2:56Topik yang sangat wise ya.

2:58Seperti...

3:00Mas Dana waktu...

3:02Saya mau ke Makasar...

3:04Dia bilang pesannya adalah...

3:06Eating wisely.

3:08Berlebihan.

3:10Karena berbahaya.

3:12Dan ada Dina juga...

3:16Ada Power Ranger.

3:18Power Ranger. Ini Ranger apa?

3:20Ranger Merah.

3:22Dari ikonnya Ranger Merah. Jason ya?

3:24Jason.

3:26Jason Srinivai.

3:28Nama panjangnya.

3:30Oke, oke.

3:32Testing.

3:34Ini kita ngelantar ke mana-mana ya.

3:36Testing.

3:38Apa itu testing?

3:40Siapa yang bisa menjelaskan tentang testing?

3:42Testing. Testing itu kan kita...

3:46Kode kita banyak ya.

3:48Nah, terus kita punya...

3:50Kita nggak tahu nih...

3:52Bakal selalu berjalan dengan baik atau nggak.

3:54Terutama nanti kalau udah diubah...

3:56Berkali-kali.

3:58Atau mungkin digunakan di komponen...

4:00Atau fungsi atau modul yang berbeda.

4:02Nah, jadi intinya nggak tahu ini...

4:04Definisi lebihnya atau nggak.

4:06Saya coba.

4:08Punya ekspetasi.

4:10Terus kita matching dengan...

4:12Hasilnya cocok nggak? Sesuai nggak dengan...

4:14Atau ekspetasi kita.

4:16Itu harus selalu sesuai.

4:18Kalau tambahan dari saya...

4:20Kivan, gimana?

4:22Testing itu bagian dari kualitas...

4:24Assurance.

4:26Assurance itu artinya memastikan.

4:28QA.

4:30Bagaimana memastikan kalau kode kita itu...

4:32Sorry, kalau aplikasi kita itu...

4:34Tetap berjalan...

4:36Sesuai dengan...

4:38Requirement.

4:40Harapan.

4:42Harapan dan sesuai dengan...

4:44Yang diplankan, yang dicitakan.

4:46Jadi...

4:48Kalau inputnya A...

4:50Dan diharapkan...

4:52Diharapkan hasilnya B...

4:54Harus...

4:56Inputnya A tetap B.

4:58Jadi jangan di input A jadi C.

5:00Jadi memastikan itu.

5:02Mungkin kelihatannya sepele.

5:04Keliatannya sepele.

5:06Misalnya kalau kita bikin fungsi...

5:08Jumlah.

5:10A tambah B menjadi C.

5:12Keliatannya sepele.

5:14Tapi kalau misalnya kita sudah...

5:16Memikirkan scale.

5:18Skalabilitas.

5:20Kode kita terus bertambah.

5:22Apalagi kalau kita manage...

5:24Open source...

5:26Manage project...

5:28Open source atau project enterprise.

5:30Atau project...

5:32Skala kecil tapi dipakai...

5:34Jutaan aplikasi.

5:36Jutaan aplikasi.

5:38Bayangkan kalau kita...

5:40Kesalahan sedikit...

5:42Mengubah kodanya...

5:44Jutaan aplikasi bisa rusak.

5:46Makanya butuh quality assurance.

5:48Dan karena kita...

5:50Developnya secara kontinu, tentu kita...

5:52Masa kita ngelakukannya...

5:54Capek juga ya...

5:56Ngetes satu-satu.

5:58Mau deploy atau memperbarui...

6:00Aplikasi kita, kita harus cek satu-satu.

6:02Bayangkan kalau...

6:04Kalau aplikasi itu besar...

6:06Kita harus cek satu-satu semua.

6:08Jadi...

6:10Butuh namanya...

6:12Testing.

6:14Bagi naik quality assurance.

6:16Juga ada yang disebut dengan TDD.

6:18Test Driven Development.

6:20Dimana kalau kita...

6:22Mau nondevelop sesuatu...

6:24Buat dulu testnya.

6:26Buat dulu scenario-nya.

6:28Jadi dari tiket...

6:30Scenario-nya apa?

6:32Apa yang diharapkan?

6:34Pastinya baru buat kodenya.

6:36Kalau saya dulu, sukanya...

6:38BDD, Bug Driven Development.

6:42Asal ada bug, perbaiki.

6:44Asal ada bug, perbaiki.

6:46Ada bug, perbaiki.

6:48Ya.

6:50Ngomongin tentang bugs, juga kadang-kadang...

6:52Ya, kita kan nggak bisa...

6:54Selalu dalam kondisi ideal.

6:56Misalkan katakanlah, "Wah, dikejar deadline..."

6:58"Kita harus bikin aplikasi tapi tanpa tes."

7:00Awalnya gitu kan.

7:02Tiba-tiba begitu di tes...

7:04"Eh, ternyata ada bugs."

7:06Untuk memastikan bugs ini tidak muncul lagi...

7:08Kita bisa bikin tes dari situ.

7:10"Oh, pastiin ini tidak akan muncul."

7:12Jadi ketika nanti kita perbaiki...

7:14Terus ada bugs kedua...

7:16Kadang-kadang kan sering jadian ya...

7:18Bugs pertama muncul, kita perbaiki.

7:20Bugs yang pertama...

7:22Balik lagi.

7:24Jadi salah satu fungsinya tes adalah...

7:26Untuk memastikan bahwa...

7:28Bugs pertama itu akan tetap di...

7:30Tetap dihandle.

7:32Tidak muncul lagi.

7:34Kalau pun ada error, dia akan ketahuan.

7:36Dan artinya...

7:38Implementasi untuk menyelesaikan bugs kedua...

7:40Ada yang keliru.

7:42Karena bugs pertamanya jadi muncul lagi.

7:44Berarti itu kombinasi ya...

7:46BDD dan TDD.

7:48Back-driven dan test-driven.

7:50Ada satu hal yang saya dapatkan dari Mas Deta.

7:52Waktu di DevFest Depok kemarin...

7:54Dia bercerita tentang testing.

7:58Bagaimana testing itu...

8:00Bisa memperbaiki konsep desain sistemnya...

8:02Aplikasi kita.

8:04Jadi uniknya di situ.

8:06Gimana-gimana?

8:08Itu Mas Riza dah balik.

8:12Saya ulang sedikit biar Mas Riza bisa nanti.

8:14Jadi waktu itu Mas...

8:16Oke, bentar.

8:18Mistake-nya habis kali.

8:20Baterai habis.

8:22Belum dicolok.

8:24Cek, cek, cek.

8:26Sudah.

8:28Jadi ada satu hal yang saya pelajari dari Mas Deta.

8:36Waktu di DevFest Depok kemarin itu...

8:40Bagaimana testing itu bisa...

8:42Memperbaiki konsep desain sistemnya kita.

8:48Dengan melakukan tes.

8:50Jadi contohnya...

8:52Kalau misalnya sebuah tampilan...

8:54Hanya tampilan Dasbo.

8:56Dengan tesnya kita.

8:58Kalau tesnya kebanyakan...

9:00Artinya desain sistem kita itu...

9:02Ada yang salah.

9:04Ada yang kurang benar.

9:06Karena tesnya jadi kebanyakan.

9:08Jadi bagian...

9:10Responsibility dari UI elemen kita...

9:12Terlalu banyak.

9:14Akhirnya harus dipecah-pecah.

9:16Mana yang controller.

9:18Mana yang...

9:20Apa yang disebutnya?

9:22Satu controller, satu lagi apa?

9:24-Model. -Model misalnya.

9:26Controller dan model.

9:28Jadi mana yang hanya ngurus data, mana yang ngurus...

9:30Bagian input-outputnya.

9:32-Pesentasi. -Pesentasinya.

9:34Jadi kalau dipisah...

9:36Sehingga...

9:38Testnya itu bisa lebih...

9:40Lebih spesifik terhadap...

9:42Terhadap elemen tertentu.

9:44Dan...

9:46Hasilnya desain sistemnya kita jadi lebih baik.

9:48Sehingga kalau nge-debug...

9:50Itu bisa langsung tepat...

9:52Tepat...

9:54Tepat sasaran.

9:56Dan juga testing scenario-nya...

9:58Itu jadi lebih cepat karena...

10:00Scope-nya lebih kecil.

10:02Seperti itu.

10:04Jadi kalau markup, ya fokus di markup.

10:06Terus kalau misalnya ada logic-nya kayak...

10:08Reusable function kayak buat...

10:10Memproses string, number gitu...

10:12Kalkulasi itu dipisah ya.

10:14Di unit testing sendiri.

10:16Makanya ada unit testing, terus kemudian naik...

10:18Integration testing.

10:20Naik lagi end-to-end testing.

10:22Ada...

10:24Kalau saya sukanya... -Accept end testing.

10:26Assertance testing.

10:28Visual regression testing.

10:30Ada lagi performance testing.

10:32Isinya testing semua.

10:36Kodanya dikit.

10:38Ngomongin soal tadi ya...

10:40Tididi ya, test development ini kan...

10:42Sesuatu yang...

10:44Kadang kalau baru mulai agak...

10:46Sulit ya, karena testing aja...

10:48Baru, terus tiba-tiba kita harus...

10:50Nulis testing duluan nggak kebayang gitu kan.

10:52Tapi di luar itu...

10:54Mau testing duluan...

10:56Atau testing belakangan...

10:58Intinya adalah yang penting harus ada testing.

11:00Dan benar sekali tadi...

11:02Yang disampaikan Ivan bahwa...

11:04Ketika kita menulis testing, itu sebenarnya...

11:06Kita sedang mendesain.

11:08Mendesain aplikasi kita atau mendesain...

11:10API untuk aplikasi kita.

11:12Di sini ada artikel yang menarik nih.

11:14Tentang... Dia sih bahasannya tentang TDD ya.

11:16Tapi ini berlaku juga untuk testing.

11:18Jadi testing itu bisa...

11:20Memaksa kita untuk berpikir.

11:22Secara jernih.

11:24Apa yang ingin kita capai.

11:26Bahkan...

11:28Nggak jarang kalau saya bikin...

11:30Aplikasi terus...

11:32Ada testingnya duluan gitu ya.

11:34Atau TDD gitu ya.

11:36Itu jadi kayak tuduh, kayak tuduh tulis.

11:38Pertama, saya pengen halaman ini...

11:40Ada...

11:42Titlenya ada headernya.

11:44Kemudian ada descriptionnya.

11:46Kemudian ada formnya, formnya isinya...

11:48Ada username, ada password, ada login form dan lain-lain.

11:50Itu kayak...

11:52Tuduh aja gitu, tuduh tulis.

11:54Jadi itu...

11:56Menjadi kerangka berpikir aja sebenarnya ya.

11:58Testing itu bukan hanya sekedar untuk...

12:00Ngecek apakah aplikasi kita jalan...

12:02Oke atau enggak.

12:04Tapi lebih ke bagaimana cara kita berpikir.

12:06Dan ke depannya itu...

12:08Bisa jadi dokumentasi ya.

12:10Sama-sama, itu sebelum kita bikin...

12:12Itu tuduh.

12:14Setelah kita bikin, 6 bulan kemudian kita...

12:16Udah ngerjain hal yang lain, kita pasti lupa.

12:18Kemungkinan besar kita lupa.

12:20Atau teman kerja kita belum tahu.

12:22Itu kan bisa kayak...

12:24Nerjemahin kodingan yang tadinya...

12:26Nggak tahu maksudnya apa.

12:28Tapi ini ada bisnis goalnya kan.

12:30Maksudnya minimal ada...

12:32Picking header atau ini harus menyumbahkan.

12:34Blablabla. Jadi tuduh dan nantinya...

12:36Sebagai dokumentasi ya.

12:38Oh iya. Nggak jarang kadang-kadang...

12:40Kalau misalkan kita lihat...

12:42Atau apa, saya lihat di...

12:44Sebuah repo gitu kan.

12:46Ini gimana cara pakai library-nya ya.

12:48Lihat di readme mungkin kurang lengkap gitu kan.

12:50Tapi ada folder test nih.

12:52Kita lihat aja di situ.

12:54Bagaimana cara penggunaan itu juga salah satu...

12:56Point yang bagus sekali ya.

12:58Jadi test itu selain sebagai...

13:00Kerangkap berpikir.

13:02Kemudian sebagai...

13:04Pengujian untuk aplikasi kita.

13:06Dan juga sebagai dokumentasi.

13:08Di sini...

13:10Benefit kedua menurut...

13:12Si JR Sinclair ini.

13:14Adalah...

13:16Kalau kita nge-debug, itu lebih mudah.

13:18Karena kita bisa tahu bahwa...

13:20Kalau kita nge-debug sesuatu...

13:22Eh, testingnya error nih. Oh berarti ini masih salah.

13:24Dan seterusnya.

13:26Dan yang ketiga ini...

13:28Objektif, subjektif ya.

13:30Apakah lebih...

13:32Menyenangkan? Bisa jadi.

13:34Kita bikin testing duluan, kita lihat merah gitu kan.

13:36Begitu jadi hijau kan seneng gitu kan.

13:38Jadi ada achievement gitu kan.

13:40Kebahagiaan tersendiri gitu.

13:42Jadi ya...

13:44Lumayan... Jadi kayak apa ya?

13:46Kayak gamification jadinya juga ya.

13:48Betul.

13:50Kamu di TDD ini, saya ada...

13:52Sering menemukan...

13:54Pendapat yang anti-pattern untuk TDD.

13:56Itu...

13:58Pertama, nulis sebuah...

14:00Bahasanya...

14:02Flow dari...

14:04Dari...

14:06Pengerjaannya lebih lama.

14:08Karena harus nulis test, harus nulis code.

14:10Kedua...

14:12Ya elah...

14:14Kodenya yang dirubah sedikit, nunggu testnya lama banget.

14:16Gitu kan.

14:18Oh, test running-nya lama ya?

14:20Karena sudah terlalu besar.

14:22Test runner-nya, misalnya...

14:24Let's say...

14:26Mungkin kalian develop...

14:28Chromium browser, maybe ya.

14:30Coba aja menjalani test Chromium browser.

14:32Kalau bisa di komputer kalian, gitu kan.

14:34Jadi...

14:36Yang dirubah cuma satu line.

14:38Kita tahu satu line itu gak bakalan...

14:40Bikin rusak, gitu kan.

14:42Tapi...

14:44Menjalani testnya itu harus 6 jam.

14:46Misalnya...

14:48Tiba-ibas.

14:50Nah, itu kan ibaratnya...

14:52Sebuah...

14:54Pendapat yang anti-pattern. Ada yang kayak...

14:56Ya udahlah, develop aja cepat.

14:58Kalau ada bug, nanti diperbaiki, gitu kan.

15:00Ada juga yang anti-pattern seperti itu.

15:02Gimana nih, menurut...

15:04Mas dan mbak-mbak.

15:06Cuma realistis sih ya.

15:10Emang... Apa?

15:12Terutama kalau yang freelance...

15:14Lombok dong, kalau ngabisin...

15:16Waktu banyak buat ngetest.

15:18Karena kalau misalnya... Apa?

15:20Nulis test, kalau jumlah jamnya...

15:22Dicharge ke klien...

15:24Mungkin ada kompetitor...

15:26Yang nggak pake testing.

15:28Cuma kalau klien...

15:30Bukan coder, bukan programmer, kan...

15:32Nggak bisa expect untuk apresiate...

15:34Hal-hal yang tadi semua kita bilang kan.

15:36Karena sulit jualan...

15:38Kalau kita bilang...

15:40Jualan dengan harga sekian...

15:42Karena kita ada testnya, loh.

15:44Jadi lebih lama, atau jadi lebih mahal, gitu ya.

15:46Padahal toko sebelah...

15:48Tanpa testing.

15:50Kualitasnya dianggap sama, bisa lebih cepat.

15:52Cuma itu... Mungkin...

15:54Nah, jujur...

15:56Sejak aku jadi... Apa?

15:58Developer full-time, nggak...

16:00Belum pernah freelance yang charge by the hour sih.

16:02Jadi, belum pernah ngerasain...

16:04Dilema yang kayak gitu. Cuma kalau...

16:06Yang dipraktekin sekarang, mah...

16:08Ya... Apa ya? Nah, go kompromi sih.

16:10Jadi kan...

16:12Ada filsafatnya juga kan, tuh. Apa?

16:14Testing, terutama yang sering dipost oleh...

16:16Can see dots, kan.

16:18Gak usah banyak-banyak.

16:20Tapi integration testnya lebih banyak.

16:22Jadi ini kan sebetulnya kayak...

16:24Pick your battle. Jadi...

16:26Gak harus semua hal yang kecil-kecil banget...

16:28Kita tulis unit testnya...

16:30Satu persatu. Kalau memang...

16:32Terutama kalau ada...

16:34Itu waktu.

16:36Atau satu flow. Misalnya...

16:38Bisa login. Ya kan?

16:40Itu satu flow, kan. Bisa masukin email.

16:42Password. Pencet button login.

16:44Apa yang terjadi. Ya, kayak...

16:46Itu... Gimanapun ya...

16:48Ya, nulis itu kan tetap makan waktu dan...

16:50Tenaga ya. Jadi itu gimana kita...

16:52Kompromi aja sih.

16:54Sulit di judge one size fits all.

16:56Oke.

16:58Sebelum saya menjawab...

17:00Ini ada pertanyaan bagus.

17:02Testing website itu key A ya?

17:04Divisinya sebutannya key A.

17:06Sebenarnya gini...

17:08Ada sedikit pergeseran ya.

17:10Kalau dulu kan divisinya berbeda ya.

17:12Yang benar-benar yang testing ya...

17:14Memang divisi QA gitu kan.

17:16Software quality assurance.

17:18Atau semacamnya.

17:20Tapi semakin kesini...

17:22Untuk automatic testing, terutama yang...

17:24Kayak unit test, integration test.

17:26Atau end-to-end testing.

17:28Itu sudah...

17:30Secara tidak langsung masuk ke rolnya...

17:32Developer sekarang. Masing-masing developer.

17:34Developer itu sekarang udah...

17:36Nambah tugasnya. Selain harus bikin...

17:38Implementasi code, juga harus...

17:40Bisa testing. Testingnya...

17:42Tidak sekomprehensif...

17:44Testing team QA ya. Kalau QA kan...

17:46Tulisnya beda lagi ya. Ada Katalon Studio...

17:48Katalon biasanya.

17:50Yang drag and drop. Terus dia bisa ngecek...

17:52Apakah skenario-nya lebih lengkap...

17:54Daripada yang kita tulis.

17:56Jadi agak sedikit berbeda.

17:58Dan itu juga sebenarnya...

18:00Mau wakili end-to-end kan ya? Apa?

18:02Firefox playwright.

18:04Di Firefox kan ada yang drag and drop juga...

18:06Jaman dulu itu dia membuat automation.

18:08Selenium?

18:10Bukan.

18:12Bukan.

18:14Ya mungkin...

18:16Mungkin untuk apa ya...

18:18Untuk perusahaan-perusahaan yang sudah besar...

18:20Pasti ada team QA-nya sendiri.

18:22Ya jadi satu team.

18:24Tapi...

18:26Kalau developer sekarang sih kayaknya...

18:28Harus ya. Harus bisa testing ya.

18:30Itu.

18:32Minimal...

18:34Minimal misalnya ada orang QA yang...

18:36Menjalankan end-to-end dengan...

18:38Canggih banget ada suite... Apa?

18:40Test suite-nya sendiri. Nah kita...

18:42Di sisi lain kita bikin unit testing...

18:44Sedikit aja memastikan misalnya...

18:46Komponennya terload dengan benar.

18:48Udah gitu. Apa?

18:50Paling minimal mulai dari situ. Ya nanti kalau ada...

18:52Waktu dan tenaga lebih bisa dikembangin.

18:54Funksinya jalan.

18:56Atau komponennya terload.

18:58Dirender dengan normal.

19:00Ya.

19:02Jadi si... Apa? Si division QA ini...

19:04Akan...

19:06Mencoba aplikasi kita dari sisi...

19:08Dari sudut pandang user.

19:10Ya.

19:12Kalau kita ya dari sudut pandang kita.

19:14Developer. Untuk... Ya itu tadi apa?

19:16Kerangka berfikir aja.

19:18Jadi di ibaratkan sebagai...

19:20Kerangka berfikir.

19:22Ada... Ada pernyataan...

19:24Ada satu dari Mas Deta...

19:26Waktu di presentasinya itu.

19:28Testing itu adalah user pertama kita.

19:30Nah.

19:32Jadi user pertama kita itu adalah...

19:34Testing. -Test runner-nya?

19:36Iya. -Kode testing-nya?

19:38Iya, iya, iya.

19:40Ya, kalau menjawab yang tadi ya.

19:42Jadi...

19:44Memang kerjaan kita nambah ya.

19:46Kita harus bikin testing.

19:48Harus bikin implementasinya.

19:50Kalau nanti ada perubahan.

19:52Kita harus ubah lagi testingnya.

19:54Jadi kan kode testing kita kan

19:56di otomasi dengan kode kan.

19:58Kode-nya ini kan juga harus dimaintain kan.

20:00Ditambahkan atau dikurangin.

20:02Yang biasanya sih bertambah ya.

20:04Bertambah terus seiring dengan...

20:06Apa, skenario-skenario yang bertambah gitu.

20:08Jadi memang...

20:10Pekerjaan yang...

20:12Menambah pekerjaan lah intinya.

20:14Cuman...

20:16Saya...

20:18Gak tahu ya temen-temen ya.

20:20Kalau saya sudah mengalami dan saya percaya bahwa

20:22testing akan menyelamatkan kita.

20:24Daripada misalkan gini.

20:26Projeknya 3 bulan.

20:28Terus gara-gara bug fixing jadi 6 bulan.

20:30Akan lebih baik, kita udah planning dari awal 6 bulan.

20:32Berserta tes gitu.

20:34Jadi tidak stres daripada fixing bugs.

20:36Fixing bugs itu...

20:38Lebih makan waktu.

20:40Melelahkan sekali secara mental.

20:42Saya mau berbagi pengalaman.

20:44Nyata.

20:46Jadi sebuah projek.

20:48Kita jalankan, kita perbaiki.

20:50Di situ saya enterprise sudah banyak.

20:52Banyak banget bagian-bagiannya.

20:54Kita perbaiki.

20:56Ini bagian visual aja ya.

20:58Gak usah sampai unit-unit testing.

21:00Atau feature-feature.

21:02Tapi hanya visualnya aja, CSS bahasanya.

21:04Kita perbaiki CSS.

21:06Kita perbaiki karena ada masalah

21:08viewport.

21:10Di viewport tertentu masalah atau di browser tertentu masalah.

21:12Kita perbaiki.

21:14Udah di tes live.

21:16Tetapi suatu saat, balik lagi, kenapa?

21:18Karena di bagian lain ternyata

21:20pakai komponen yang sama tetapi malah

21:22jadi overlap.

21:24Dan itu tidak ketahuan.

21:26Tidak ketahuan waktu di tes.

21:28Oleh manusia.

21:30Karena manusianya

21:32nggak ngecek ke bagian lain.

21:34Karena kita tahu

21:36ini page yang masalah,

21:38ini page yang kita perbaiki.

21:40Tetapi page yang lain tidak di tes.

21:42Kliennya jadi marah.

21:44Kenapa setiap kali ada

21:46kenapa urusan visual

21:48ini nggak beres-beres sih?

21:50Akhirnya jadi makan hati.

21:52Jadi kayak

21:54vicious cycle.

21:56Karena kita nggak punya

21:58kita nggak punya

22:00kerangka testing waktu itu.

22:02Ya itu yang

22:04lebih berbahaya kan. Maksudnya

22:06capek, capek

22:08di mental gitu kan.

22:10Yang membuat moral tim

22:12turun yang akibatnya bisa

22:14panjang tuh. Bisa resign,

22:16bisa apa, macem-macem.

22:18Karena kerjaannya jadi itu-itu aja.

22:20Iya, kerjaannya jadi membosankan

22:22dan melelahkan.

22:24Jadi akan lebih baik kalau

22:26ya udah, mendingan

22:28kerjaannya banyak nggak apa-apa, tapi

22:30lumayan menyenangkan gitu kan. Maksudnya

22:32nggak bolak-balik

22:34mengerjakan hal yang sama berulang-ulang.

22:36Itu sih kalau

22:38dari sekarang.

22:40- Menarik.

22:42- Terus kita bahas apa lagi nih?

22:44Tadi sempat dibahas sedikit

22:46tentang ini ya. - Genis-genis tes kali ya?

22:48- Genis-genis tes ya. - Genis-genis tes kali.

22:50Belum. - Bentar-bentar, sebelum.

22:52Ini dia. - Nah.

22:54- Kopilah dunia.

22:56- Bentuknya, bentuknya kayak piala.

22:58- Oh, bentuknya.

23:00- Nah, itu.

23:02Ya, ini opini juga sebetulnya sih.

23:04Cuma ini rekomendasi yang

23:06bagus sih.

23:08Jadi paling bawah tuh dasarnya

23:10itu bahkan nggak

23:12bukan exactly automatic

23:14testing ya, cuma static analysis.

23:16Itu kita pakai TypeScript,

23:18jadi sebelum dijalankan pun kita udah

23:20mencegah bug-bug yang

23:22udah bisa dideteksi, kayak misalnya

23:24salah jenis harusnya number

23:26jadi string, salah ketik,

23:28field-nya ilang, nama field-nya berubah.

23:30Itu kan hal-hal yang, ya udah kita

23:32nggak usah buang waktu ngejalanin apa-apa

23:34kalau itu bisa ditangkepkan.

23:36Nah, terus unit testing itu tadi yang perbagian-bagian

23:38entah itu fungsi

23:40kayak reusable function,

23:42permetodnya ditest sendiri,

23:44yang tadi dibahas Ivan itu

23:46perkomponen atau markup dibahas sendiri.

23:48Nah, integration itu

23:50satu section lah, gabungan dari

23:52beberapa, misalnya dalam satu

23:54komponen kan ada markup-nya,

23:56ada styling-nya,

23:58ada function-nya,

24:00ada logic-nya yang pure function, nah terakhir

24:02end-to-end tuh, yang dari awal sampai akhir

24:04serangkaian dari perspektif

24:06user, misalnya user mau sign up,

24:08user mau create post, dan

24:10lain-lain. Nah, ini

24:12bentuknya itu yang

24:14direkomendasikan kalau

24:16menurut perspektif

24:18can see dots ini sebagai

24:20full stack web dev itu

24:22terbanyak di integration katanya.

24:24Setuju nggak? Ini kan

24:26tetap opini ya.

24:28Ya, jangan lupakan juga

24:30semakin ke atas

24:32dari static unit

24:34integration end-to-end, itu

24:36semakin berat jalaninnya.

24:38Semakin mendekati user,

24:40tapi kalau dijalankan semakin berat.

24:42Karena ada automated-nya kan, kalau end-to-end kan,

24:44dia seolah-olah membuka browser sendiri,

24:46terus dia click, dia...

24:48Paling mahal lah ya, mahal.

24:50Bukan selalu dalam arti

24:52finansial, tapi mahal tenaga lah, mahal

24:54resource. Ya, jadi resource-nya

24:56lebih banyak, bekerjanya lebih sibuk

24:58lah laptop kita ya.

25:00Kalau static praktik,

25:02unit testing ringan, static

25:04analysis tuh hampir gratis lah ya,

25:06kita sekarang kalau pakai VS code

25:08kan udah include semua.

25:10Bisa langsung disave,

25:12langsung otomatis nge-format,

25:14ngasih tau wording sendiri.

25:16Kalau kita salah, ESLint juga udah

25:18ngasih opsi buat benerin,

25:20ngasih rekomendasi.

25:22Tapi di lain sisi,

25:24kalau end-to-end itu paling mahal, unit test

25:26atau static itu paling murah,

25:28kalau kita nulis unit test,

25:30itu effort-nya paling besar,

25:32karena kita ngetes-nya banyak.

25:34Lebih banyak

25:36daripada yang end-to-end. Kalau end-to-end misalkan

25:38kita ngetes form logic,

25:40form logic ya, click

25:42input yang pertama,

25:44masukin username, click input

25:46yang kedua masukin password, click login,

25:48hasilnya, selamat datang

25:50di dashboard, gitu kan.

25:52Kalau unit test, ya kita harus ngetes

25:54masukin username ini.

25:56Ada inputnya, ada button-nya,

25:58ada function buat nge-check jumlahnya, karakternya

26:00udah betul atau nggak.

26:02Betul, sangat banyak gitu. Jadi, effort-nya

26:04akan sangat besar, tapi di sisi

26:06yang lain kalau dijalankan

26:08ya lebih ringan, itu aja sih. Jadi,

26:10kita harus mencari keseimbangan.

26:12Kalau dari Ken C.Dot kan, dia bilangnya integration testing

26:14yang di tengah-tengah lah ya,

26:16nggak terlalu berat, tapi juga

26:18tidak terlalu banyak effort dari sisi

26:20kitanya sebagai developer.

26:22- Yang paling banyak

26:24saya lakukan memang diintegration sih

26:26sebenarnya. Karena

26:28karena saya taunya itu.

26:30- Dulu aslinya

26:32itu terus

26:34dibikin ulang sama

26:36dulu tweet aslinya dia, itu

26:38artikel ini berasal dari tweet

26:40tadinya dia nge-tweet kayak gitu ya, tentang

26:42ide-nya yang masih mentah.

26:44Terus karena banyak yang respon, dikembangin sebagai

26:46artikel. Terus ada ilustratornya

26:48Ekhet, kalau nggak salah yang bikin

26:50secara lebih

26:52proper, bandingkan bedanya

26:54developer dan ilustrator.

26:56- Ini masih pakai flow ya,

26:58belum typescript ya.

27:00- Tahun berapa itu?

27:022018?

27:04- 2018. - Ya, dulu

27:06masih rebutan.

27:08- Kalau idealisme ya,

27:10mulai dari kodenya sendiri,

27:12sudah

27:14type,

27:16strict type,

27:18ya udah strict.

27:20Terus kemudian

27:22karena strict type-nya, return-nya

27:24pun sudah jelas segala macam, field-nya

27:26sudah jelas, terus naik ke

27:28berarti untuk mendesain unit test-nya

27:30dan scenario-nya dari setiap

27:32functions juga sudah jelas.

27:34Terus naik lagi,

27:36menggabungkan setiap kali

27:38pemanggilan function-function itu

27:40dijadikan sebuah integration.

27:42Disinilah banyak scenario-senario

27:44kan.

27:46scenario, misalnya

27:48it should see blah-blah-blah

27:50it will

27:52get data

27:54like this, shape-nya

27:56shape-nya seperti apa, blah-blah-blah itu sudah

27:58ada di integration.

28:00Terus kemudian jalanin end-to-end

28:02test-nya juga ada scenario kan.

28:04Kalau misalnya login fail, login

28:06success, login

28:08tiga kali harusnya

28:10lihat

28:12contohnya

28:14lihat mesej apakah kamu

28:16lupa password, tunjukin masa

28:18something. Forgot password.

28:20Jadi, kalau

28:22kembali lagi, kalau misalnya kita

28:24sudah bisa desain dari

28:26dari bawah sampai ke atas

28:28untuk sebuah

28:30functionality, tentu kode

28:32kita pun, itu sudah kita

28:34pecah-pecah.

28:36Ya, sudah kita pecah-pecah

28:38sesuai dengan

28:40responsibilty dari setiap bagian.

28:42Itu akhirnya sudah

28:46sebuah desain sistem kan. Sudah sebuah

28:48desain sistem dari yang untuk

28:50kita, asetectur dari

28:52kodenya kita itu.

28:54Itu

29:00untuk

29:02itu akan meningkatkan yang disebut dengan

29:04maintainability.

29:06Kode kita jadi gampang di maintain.

29:08Kode kita jadi

29:10kalau dengan static analysis

29:12kan, kita wajib tuh bikin

29:14bikin

29:16JSdoc atau

29:18dokumen-dokumennya itu kan, sudah harus

29:20bisa diwajib kan.

29:22Jadi, documentability-nya juga

29:24dokumentasinya juga jadi jelas.

29:26Dari testing scenario-nya juga

29:28jadi jelas.

29:30Ingat, kalau dari

29:32biasanya kalau membangun sebuah

29:34fitur tertentu,

29:36gausah produk ya, fitur tertentu aja.

29:38Dari

29:40dari sisi product owner,

29:42itu pun kita harus diberikan scenario yang jelas

29:44kan. Di setiap

29:46tiketnya, bahasanya.

29:48Setiap tiketnya ada aset-tsekaretnya dan

29:50ada scenario. Senarionya

29:52inilah yang kita terjemahkan

29:54menjadi bagian dari

29:56testing dan testing.

29:58Jadi, semua sudah

30:00klop.

30:02Jadi, waktu testing kita jalan, itu sudah

30:04sudah sebisa mungkin mendekati

30:06aset-tsekretariat

30:08dari sebuah fitur.

30:10Memang, kelihatannya jadi

30:14ribet, jadi rumit.

30:16Tetapi, sekali

30:18dijalankan, sekali

30:20diselesaikan,

30:22kita udah

30:24masih, pas udah punya

30:26apa namanya ya?

30:28- Keyakinan. - Keyakinan, kalau itu

30:30kalau di deploy, itu

30:32- Sudah pasti jalan.

30:34- Besar kemungkinan aman,

30:36gitu ya. Besar kemungkinan aman. Gak perlu

30:38ya, ini gimana, nanti di production

30:40bakal kacau gak ini.

30:42- Itu tadi kayaknya ada yang komen deh, jalan kok

30:44di laptop saya. Tadi ada komennya

30:46"Cari, di-highlight aja."

30:48- Rafki, Rafki. Halo, Rafki.

30:50- Iya.

30:52- Ini mah, apa,

30:54ini hashtag untuk Docker ini.

30:56Nggak ya? - Iya.

30:58- Iya, hashtag universal

31:00development. - Iya.

31:02Apalagi kalau kita kerjanya bareng sama

31:04tim ya, lebih dari satu

31:06orang gitu. Ketika

31:08kita misalkan udah mengerjakan sesuatu,

31:10bersetak tesnya,

31:12terus tiba-tiba ada mungkin ada teman kita yang

31:14lain gitu kan, dia ubah-ubah

31:16ternyata

31:18apa yang kita kerjakan, atau

31:20bug fixing yang kita lakukan, tiba-tiba

31:22di-override sama dia secara tidak

31:24sengaja gitu kan.

31:26Kalau tesnya gak ada, itu kan gak ketahuan

31:28kan. Tapi kalau tesnya ada,

31:30begitu dia push, pas mau dia pull

31:32request, "Oh, ini masih error nih

31:34tesnya." Jadi gak bisa, dia harus

31:36perbaiki dulu. - Kalau jaman dulu kan gak ada pull

31:38request, Mas Riza, adanya

31:40FTP, VFTP upload.

31:42- Tidit langsung di FTP-nya

31:46juga bisa ya. - Berarti itu

31:48harus di-zip kan, versi satu, versi

31:50satu, fix satu,

31:52final, final-final

31:54banget gitu kan. - Saya

31:56mau sharing sedikit apa yang saya lakukan

31:58sebagai

32:00waktu itu develop sebuah

32:02plugin di WordPress, dan plugin ini

32:04digunakan, akan

32:06mau di-launching, soon gitu ya.

32:08Dan waktu lagi develop itu,

32:10karena

32:12justifikasinya, karena timeline-nya

32:14sangat optimistik, gak sempat

32:16untuk bikin tes.

32:18Gak sempat, bener-bener gak sempat

32:20karena banyak yang masih banyak

32:22ditudulisnya gitu,

32:24untuk sampai di titik beta, supaya

32:26bisa di-deploy. Alhasil,

32:28saya-nya yang burn out.

32:30Kenapa? Karena

32:32kriteria dari

32:34plugin tersebut, harus bisa

32:36waktu itu ya, beberapa tahun

32:38lalu, harus bisa jalan di PHP

32:405.6. Harus bisa jalan

32:42di PHP 7.1,

32:447.0, 7.1, 7.2.

32:46Harus bisa jalan

32:48di versi WordPress

32:505 sekian, 5 titik sekian,

32:525 titik sekian, 5 titik sekian, 5 titik sekian,

32:54jadi ada minimum version yang harus

32:56dijaga. Alhasil,

32:58coba di permutasikan aja. Berarti saya harus

33:00running test-nya manual,

33:02saya harus install plugin-nya,

33:04checking, checking, checking, di PHP

33:065.6, WordPress-nya

33:08mungkin ada 4 versi,

33:10di PHP 7.0, WordPress-nya 4 versi,

33:12itu jalannya pakai docker memang,

33:14tetapi manual,

33:16manual, benar-benar manual, saya

33:18mengin docker-nya,

33:20install plugin-nya, coba test

33:22klik klik klik, bisa lanjut.

33:24Itu setiap kali mau

33:26release, berarti setiap akhir sprint,

33:28mau dirilis zip-nya

33:30untuk dikasih ke

33:32tim user-nya

33:34bagian sana, untuk

33:36ngetes lagi.

33:38Karena belum punya end-to-end,

33:40dan belum punya fungsional testing,

33:42saya harus lakukan itu semuanya sendiri.

33:44Satu kali melakukan

33:46sebelum kompresi itu

33:48jadi sebuah zip,

33:50saya harus lakukan

33:52test itu 3-4 jam.

33:54Kalau ada satu kali gagal

33:56karena dia fatal error, berarti harus

33:58saya benerin lagi, saya ulang lagi.

34:00Itu semua dari awal lagi.

34:02Jadi sebenarnya,

34:04apa yang saya hemat

34:06waktunya tanpa melakukan testing,

34:08itu sia-sia.

34:10Tapi baik saya awal itu

34:12sudah pikirkan bagaimana end-to-end testingnya.

34:14Yes.

34:16Oke, sebelum kita

34:18ke bagian berikutnya,

34:20ini ada beberapa pertanyaan.

34:22Power Ranger lagi,

34:24saya pernah dapat jawab proyek

34:26kayak testing website aplikasi,

34:28seperti wadah belajar gitu,

34:30kayak misalnya dashboard, dicek

34:32isi-isinya ya,

34:34fitur-fiturnya, apakah itu

34:36yang dinamakan QA?

34:38Maaf banyak yang nanya. Gak apa-apa, kita senang

34:40kalau banyak yang nanya ya.

34:42Itu QA bukan?

34:44Itu QA.

34:46Tapi manual.

34:48Memastikan sebuah

34:50fitur itu jalan apa tidak,

34:52itu namanya QA.

34:54Cuma kan tenaga manusia ya,

34:56yang dipakai sebagai QA,

34:58yaitu punya

35:00beberapa batasan.

35:02Tadi manusia bisa

35:04luput, bisa

35:06gak meriksa bagian tertentu.

35:08Bisa terlalu kompleks juga.

35:10Ya, terus manusia itu buk,

35:14gak didesain untuk hal-hal

35:16repetitif yang

35:18skala besar kan ya.

35:20Manusia dibanding robot,

35:22kelebihannya kita bisa mengkonsep,

35:24kita bisa merancang, cuma kalau untuk

35:26hal-hal yang komputasi yang

35:28skala besar dan repetitif,

35:30ya, capek lah jembul kita.

35:32Jadi apa,

35:34ada titik di mana

35:36QA manual

35:38terbatas, ya udah.

35:40Jadi QA kan cukup luas.

35:42Jadi developer

35:44yang di bidang QA ya biasanya

35:46kerjaannya adalah bikin test suit

35:48dan apa, merancang lah,

35:50mendesain test-testnya.

35:52Ada lagi pertanyaan dari Aman Saputra,

35:54urutan pembuatan testing di tahap apa?

35:56Apa setelah MVP atau

35:58setiap buat function atau fitur baru?

36:00Sebelum MVP. MVPnya

36:02harus ada test juga.

36:04Karena MVP itu adalah

36:06minimum viable product,

36:08bukan produk

36:10setengah jadi atau yang banyak box, ya.

36:12Jadi

36:14MVP itu ya harus berserta

36:16test juga. Kalau mau mengadopsi

36:18gaya test driven development

36:20atau behavior driven

36:22development, berarti testnya duluan, baru

36:24ngerjain code-nya atau

36:26selesaiin fungsinya atau komponennya.

36:28Ya, kembali lagi ditekankan

36:30terserah mau testing

36:32duluan atau testing belakangan, yang penting ada testnya.

36:34Itu aja. Mau MVP,

36:36mau prototype, mau apa,

36:38itu harus ada disertakan dengan

36:40testnya, gitu.

36:42Terus selain

36:46yang tadi kita, yang udah di

36:48artikel tadi kan, baru

36:50yang paling penting ya,

36:52paling basic dari unit testing,

36:54integration testing, nah cuma

36:56terus di web kan ada hal-hal

36:58lain, jadi bisa aja temen-temen

37:00bakal lihat kayak accessibility

37:02testing, itu biasanya pakai

37:04X ya, AXE,

37:06atau DQ ya.

37:08Ya, terus ada juga

37:10seperti visual

37:12testing, visual regression

37:14testing, itu biasanya pakai layanan

37:16chromatic, mereka yang bikin storybook.

37:18Itu banyak.

37:20Storybook dulu. Storybook dulu, ya.

37:22Terus dia diakuisisi

37:24atau gimana sih ceritanya?

37:26Di salah storybook, terus kemudian storybook bikin

37:28chromatic sebagai service-nya.

37:30Oh, gitu. Oh, dia cari duitnya

37:32dari chromatic ya. Storybooknya

37:34sendiri adalah apa? Open source

37:36and free. Ya, itu semua kan

37:38prinsipnya sama, sama kayak tadi.

37:40Jangan sampai ada yang tiba-tiba

37:42berubah, terus pastikan

37:44sesuai kriteria.

37:46Kayak misalnya kalau di accessibility

37:48ya, pastikan user

37:50yang apa? Tuna Netra misalnya

37:52menggunakan screen reader, ya harus bisa

37:54mengisi form-nya juga. Nah, itu

37:56apa? Kita punya assertion

37:58atau ekspektasi, atau harapan, atau

38:00tujuan seperti itu, ya

38:02itu secara otomatis memastikan kode

38:04kita, ya, mencapai

38:06tujuan itu. Terus kalau yang

38:08visual, itu mereka

38:10keren sih. Keren cuma apa?

38:12Berbayar. Jadi ada

38:14gratisannya, cuma terbatas. Jadi

38:16mereka beneran bikin screenshot.

38:18Kalau ada yang tiba-tiba geser,

38:20sekian persen, jadi mereka kayak

38:22mirip mendeteksi CLS gitu deh.

38:24Tapi bukan CLS waktu

38:26di-load ya. Cuma dari

38:28commit 1 ke commit selanjutnya,

38:30kalau ada perubahan dan

38:32kita nggak nge-mark, misalnya kita

38:34nggak meng-update snapshot-nya

38:36dan tampilannya berubah, itu

38:38kita bakal dapet notice.

38:40Kita bisa approve

38:42kalau itu memang intended.

38:44Oke.

38:46Apalagi, apalagi ya jenis

38:48testing-nya, lainnya.

38:50Bikin tentang storybook, ada yang

38:52pernah lihat storybook mungkin?

38:54Atau tombolan?

38:56Coba ya, yang mana nih?

38:58Saya bisa tunjukin ini apa storybook

39:00yang ada di WordPress nih. Oh, boleh-boleh-boleh.

39:02Oh, ada ya? Baru tahu

39:04di WordPress.

39:06Jadi untuk ininya ya, untuk

39:08apa namanya? Untuk

39:10Gutenberg-nya, block editor-nya.

39:12Reakt ya, kalau nggak salah ya?

39:14Iya, dia pakai react. Jadi ini

39:16kan, tahu ya, Gutenberg

39:18punya namanya

39:20apa?

39:22Editor, terus kemudian ini

39:24block editor besarnya, ya.

39:26Elemen-elemen kan ada banyak banget tuh.

39:28Bisa ini, bisa tambah image,

39:30bisa segala macam kan.

39:32Terus, lihat nih, komponennya

39:34segitim banyak nih, komponen semua.

39:36Bayangkan kalau misalnya satu-satu harus

39:38dicek dan CSS. Harus nyalain

39:40PHP ya. Bayangin kalau ngetes-nya

39:42nggak pakai storybook. Iya.

39:44Yoi, lihat ini, ada

39:46inserter komponen, ada

39:48line height control,

39:50ya kan, ada

39:52text transform control.

39:54Ada, terus komponen-komponennya

39:56banyak juga nih.

39:58Animate,

40:00virtualize segala macam kan, ada komponen-komponen.

40:02Dan...

40:04Bisa task state-nya juga ya?

40:06Iya. Terus

40:08bisa color palette misalnya.

40:10Color palette-nya kan juga

40:12komponen sendiri nih.

40:14Color picker.

40:16Itu.

40:18Dan ini,

40:20kalau kita nggak bikin

40:22komponennya di storybook

40:24itu bakal susah banget

40:26di maintain. Jadi yang

40:28dilakukan adalah

40:30komponennya pertama

40:32di develop dulu di storybook.

40:34Jadi, sorry, komponennya

40:38ada di, mungkin di folder

40:40komponen, semua sample, tapi

40:42dijalankannya di storybook. Jadi kita nge-develop-nya

40:44di storybook.

40:46Dan CSS dan admin, segala macam.

40:48Ya, jadi semuanya

40:50itu kita, jadi bukan

40:52kita nge-develop-nya bukan di block editor

40:54utamanya. Kita

40:56nge-develop semua komponen kecil-kecilnya

40:58itu di storybook.

41:00Jadi, namun CSS

41:02dan komponen utamanya tetap berada

41:04di

41:06folder-nya sendiri lah, bahasanya ya.

41:08Kita cuma mau manggil

41:10komponen dan stylingnya itu

41:12di storybook. Jadi, komponen dan

41:14stylingnya itu sudah ter-encapsulasi

41:16hanya untuk di sebuah

41:18komponennya. Jadi sangat,

41:20jadi nggak ada pengaruh

41:22pengaruh antar komponen yang bisa

41:24merusak styling bahasanya gitu ya.

41:26Jadi, semuanya

41:28kita, mereka develop

41:30di dalam sini semua sendiri

41:32sampai,

41:34banyak banget lah, sampai icon lah.

41:36Nah, jika

41:38jika terjadi

41:40dan ini mereka punya regression testing-nya

41:42ya, jadi sampai bahkan

41:44apa namanya, mereka

41:46pasang

41:48ini bahasanya

41:50apa, accessibility, accessibility

41:54test-nya juga ada nih. Jadi,

41:56sudah pas accessibility

41:58testing-nya juga sudah ada.

42:00Jadi, kalau, kan

42:02ini project open source ya.

42:04Semua orang sebenarnya

42:06bisa aja

42:08apa namanya?

42:10Bisa aja

42:12nge-

42:14eh, salah, button book.

42:16Bisa aja nge-develop

42:20full-request

42:22ke sini.

42:24Jadi, kalau misalnya mereka nggak punya

42:26storybook dan testing ini

42:28ya, susah kan?

42:30Dan sedangkan block editor-nya

42:32dipakai berapa juta website

42:34ada kali,

42:36puluhan, ratusan juta website

42:38ya kan?

42:40Nah, jadi accessibility juga harus pass.

42:42Dan ini jalan secara

42:44otomatis.

42:46Mulai dari accessibility

42:50terus kemudian, apa ini

42:52bahasanya, viewport

42:54responsive, responsive-nya juga

42:56juga ditest.

42:58Dan ini otomatis semua kan?

43:00Kalau nggak pas, ya nggak pas

43:02nanti.

43:04Seperti itu.

43:06Nah, storybook juga punya

43:08apa, punya

43:10beberapa tutorial testing buat

43:12mungkin ada teman-teman yang belum pernah

43:14testing sama sekali, terus

43:16bingung mulai dari mana.

43:18Bisa banget tuh tutorial-nya bagus sih.

43:20Walaupun

43:22nanti misalnya

43:24nggak pakai storybook, misalnya

43:26akhirnya karena nggak sempat atau nggak

43:28diperlukan untuk project

43:30teman-teman sendiri nggak pakai storybook, itu

43:32pelajarannya banyak yang

43:34tetap bisa

43:36dimanfaatin.

43:38Karena itu menutup semua area testing.

43:40Berlaku untuk,

43:42bukan hanya untuk storybook ya,

43:44tapi umum ya.

43:46Di situ sih ya, dia pasti integrate

43:48storybook juga, cuma

43:50pelajarannya, caranya flow-nya bisa dipakai

43:52buat project lainnya.

43:54Project yang lain.

43:56Wah, menarik ya.

43:58Oke.

44:00Nah, ini ada pertanyaan bagus nih.

44:02Dari

44:04Isal, kalau TDD itu

44:06test-nya duluan, yang dimaksud adalah

44:08scanner test-nya atau unit test-nya.

44:10Bebas, bisa

44:12macam-macam, tergantung. Kalo

44:14di perusahaannya butuhnya apa,

44:16requirement-nya unit test, ya

44:18TDD-nya unit test. Tapi kalau misalkan

44:20pengennya integration testing, ya

44:22TDD-nya ya integration testing.

44:24Ya, tergantung kebutuhan aja.

44:26Bener gak sih?

44:28Dan biasanya sih, kalo unit test,

44:30ya bikin kayak expect.

44:32Jadi kita bikin failing test dulu.

44:34Biasanya kalo liat dari tutorial orang yang

44:36emang advocate TDD.

44:38Iya, kita nulis,

44:40beneran nulis expect-nya apa,

44:42kita nulis kriterianya, tapi

44:44kan kita baru komponen kosong nih misalnya,

44:46atau baru komponen placeholder, atau fungsi

44:48placeholder yang masih belum return

44:50apa-apa. Jadi emang expectasinya

44:525 kali running, harus merah,

44:54terus kita tulis kodonya sambil

44:56save sampai hijau.

44:58Habis itu refaktor kalo butuh, ya.

45:02Ada 3 tahapan itu kan.

45:04Kemudian ada pertanyaan dari Yudi.

45:08Bagaimana cara menguji sistem

45:10yang memiliki fungsi kompleks

45:12dan interaksi dengan sistem lain yang tidak dapat

45:14diprediksi secara pasti?

45:16Salah satunya bisa pake

45:18MSW nih. Ini

45:20use case yang bagus buat namanya

45:22mock service worker ya. Kan ga salah lupa

45:24kepanjangannya apa.

45:26Jadi misalnya kita perlu manggil API

45:28atau bahkan misalnya e-commerce

45:30transaksi kartu kredit itu yang

45:32itu kan interaksi sama pihak

45:34keluar dan ga mungkin selalu

45:36setiap kita testing berkali-kali

45:38TDD tadi kita selalu nge-hit

45:40API production atau

45:42service external.

45:44Jadi kita bisa

45:46membuat biar

45:48request kita request ke

45:50URL atau endpoint tertentu

45:52itu ya pake data

45:54mock atau data bohongan.

45:56Cuma ya pastikan

45:58bahwa data bohongannya sesuai dengan data

46:00beneran. Iya. Jadi biasanya kalo saya

46:02pake mock server

46:04pake mock server

46:06ada NPM-nya

46:08pake mock server. Terus saya mock. Jadi kalo

46:10dari

46:12biasanya tanya ya kalo kayak

46:14sekelas visa atau payment

46:16gateway itu mereka udah punya

46:18scenario-nya dan dokumentasi

46:20lengkap tuh response-response error-nya

46:22juga sudah jelas banget ya.

46:24Dan biasanya kan ada kodenya kalo kita pengen dapet

46:26error misalnya decline itu

46:28nomernya 1,2,3,4,5,4

46:30blablabla. Jadi itu membantu

46:32banget buat mocking.

46:34Jadi kita sudah mocking semua tuh dari

46:36success sampe error-errornya semua.

46:38Bahkan yang lebih banyak itu error sebenarnya.

46:40Karena success sudah beberapa.

46:42Success kan ya udah. Success mah udah.

46:44Terus kan macem-macem. Errornya

46:46seratusan gitu ya jenisnya.

46:48Nah kita, aplikasi kita

46:50itu jangan sampe

46:52nge-hit mereka terus-menerus gitu.

46:54Tapi nge-hitnya ke mock service worker ya kita.

46:56Jadi kita set up semua response-nya

46:58yang kira-kira, bukan kira-kira lagi

47:00sesuai dokumentasi

47:02semua response dan error code-nya

47:04kita mock.

47:06Jadi kita nge-hit mock server kita dan

47:08memastikan aplikasi kita

47:10kalo response-nya

47:12A, yang ditampilkan apa?

47:15Response-nya B, yang ditentu apa?

47:17Dan harus ada. Kita manangin itu.

47:19Apa sih kursus kelas namanya?

47:21Payment.

47:23Untuk mock juga

47:25perlu kita

47:27apa ya, kita gunakan.

47:29Terutama kalo misalkan API-nya

47:31dibatasi dengan

47:33trade limit gitu.

47:35Jangan sampe misalkan kita hit ke API

47:37tertentu atau bahkan API yang berbayar

47:39kita setiap kali jalanin test

47:41di hit terus gitu.

47:43Kita selesakan paket ini di tiba-tiba

47:45tagihannya ribuan.

47:47Membengkalkan. Atau

47:49trade limit terus tiba-tiba dia jadi error

47:51malah aplikasinya seolah-olah seperti error

47:53kan. Jadi hal-hal

47:55seperti itu yang pemanggilan ke terparti

47:57API atau ke pokoknya

47:59yang berhubungan dengan

48:01diluar aplikasinya, konteks

48:03aplikasinya itu di

48:05apa ya, mock itu

48:07apa ya, dibikin tier 1-nya.

48:09Seolah-olah kita panggil ke

48:11udah palsu sih, apa ya.

48:13Tier 1, simulasi lah ya.

48:15Seolah-olah kita panggil ke API

48:17GitHub misalkan, tapi

48:19written-nya udah kita tulis aja di kode

48:21kita, jadi seolah-olah aja, pura-pura aja.

48:23Pura-pura.

48:25Pernah ada yang ikut itu nggak sih

48:27coba-coba kayak competitive programming?

48:29Belum.

48:31Kayak main-main aja, main-main

48:33di Hacker, Hacker what? Hacker rank.

48:35Apa? Lead code.

48:37Kalau Hacker rank, code words itu

48:39pernah sih beberapa kali.

48:41Kita dikasih

48:43dikasih

48:45challenge-nya apa,

48:47tapi kan mereka sudah punya test

48:49kesenarionya kan mereka sudah punya kan.

48:51Itu kan sebenarnya

48:53ti-di-di, mereka udah siapin kesenarionya,

48:55siapin challenge, kita nulis kodenya

48:57untuk supaya, kita nulis sampai seperti itu.

48:59Sampai bisa

49:01pas semua

49:03senarionya.

49:07Oke, ngomongin tentang

49:09ini, end-to-end,

49:11ini ada yang minta rekomendasi

49:13tools dari Rico.

49:15Tools JS untuk end-to-end

49:17testing. Tadi udah kita sempat bahas sedikit ya

49:19tentang Cypress.

49:21Ada playwright juga.

49:23Ada playwright dari Microsoft, itu juga

49:25lagi hot ya, lagi panas,

49:27lagi seru.

49:29Ini

49:31cara pakenya tuh

49:33mudah banget.

49:35Ini seru sih, lucu.

49:37Dan kalau kita lihat,

49:39ini tuh malah

49:41mirip sama jQuery.

49:43Kalau dilihat sekilas ya, kayak kita

49:45menarget elemen tertentu, ya

49:47klik aja ini, terus dia bisa

49:49ising juga, dia bisa nunggu setelah klik,

49:51nunggu, terus expect.

49:53Jadi selekturnya itu mirip jQuery banget ya.

49:55Selekturnya bisa

49:57export juga kan?

49:59Bisa, bisa.

50:01Dan ini tutorial-nya bagus, kalau

50:03pernah pake sama sekali,

50:05itu ada tutorial gratis yang

50:07enak buat diikutin.

50:09Playwright sebenarnya lebih

50:11menarik ya.

50:13Lebih simpel lagi.

50:15Ok, kita coba ya.

50:17Apa namanya?

50:19Playwright.

50:21Ini.

50:23Test gitu ya.

50:25Ini, playwright.tab.

50:29Ya.

50:31Mana contohnya?

50:33Docs.

50:35Jalannya di Puppeteer kan nih?

50:37Iya, di atas Puppeteer.

50:39Puppeteer itu apa? Cuma itu semua engine bisa

50:41baik Cypress,

50:43maupun playwright, itu udah support

50:45macem-macem browser engine.

50:47Jadi aman.

50:49Nah, ini contohnya ya.

50:51Bukan cuma Puppeteer kan,

50:53Headless Chromium ya? Ini test ya.

50:55Jadi test, should what?

50:57Should see, should create,

50:59should what?

51:01Jadi ini adalah istilahnya apa?

51:03Scenario ya.

51:05Jadi kita mau tes apakah

51:07ini kita mau bikin

51:09bug report, ceritanya. Mau submit bug report.

51:11Kita bikin new issue dulu

51:13dengan request.post ke repo

51:15dengan user dana repo.

51:17Ke API GitHub gitu ya,

51:19ceritanya ya. Di sini udah ada usernya.

51:21Udah ada repo-nya.

51:23Kemudian kita kirimin datanya, title dan body.

51:25Dan ketika

51:27kita jalankan,

51:29ketika dia selesai posting,

51:31maka kita berharap atau expect

51:33bahwa isunya

51:35mereturn status oke

51:37sama dengan true.

51:39Gitu.

51:41Ini playwright.

51:43Kok kayak nulis unit test ya?

51:45Sedar sana ya.

51:47Sedar sana ya.

51:49Terus kita,

51:51ini kan udah return dari

51:53new issue yang di-postkan.

51:55Terus kita cek juga

51:57bahwa issue ini beneran ada.

51:59Sudah di-submit. Sudah ada di list of issue.

52:01Kita request get

52:03ke repo/issues.

52:05Kemudian kita cek

52:07hasilnya oke atau enggak.

52:09Kemudian kita cek apakah bug report

52:11yang satu, yang sama ini.

52:13Judulnya betul.

52:15Judulnya matching, body-nya juga matching.

52:17Keren ya.

52:21Playwright.

52:23Bagus-bagus.

52:25Semakin memudahkan ya.

52:27Kalau jaman dulu

52:29susahnya setengah mati untuk testingnya.

52:31Dulu kayak gimana sih? Coba cerita dikit.

52:33Selenium dulu.

52:35Taksik kayak gimana?

52:37Dulu itu

52:39salah satu yang

52:41pionernya, pionernya

52:45testing di front-end ya,

52:47bukan back-end ya, testing di front-end

52:49itu adalah angular.

52:51Dia pakai jasmine.

52:53Yang diadaptasi

52:55oleh Jess.

52:57Jess itu ditulis diatas jasmine.

52:59Jaman dulu masih pakai Pantom Jess

53:01kan ya? Iya.

53:03Pantom Jess.

53:05Saya kenal tuh orangnya yang bikin.

53:07Pantom ya, Pantom.

53:11Terus abis itu baru masuk

53:19ke selenium kan untuk yang end-to-end

53:21untuk integrationnya

53:23masih di jasmine.

53:25Dan jasmine itu yang

53:27serunya adalah, mungkin sampai

53:29sekarang juga, mungkin masih beberapa, masih ada

53:31yang pakai, dia bisa jalan di

53:33browser, nggak perlu pakai note.

53:35Karena dulu belum

53:37si angular pun dia nggak pakai

53:39note kan, dia pakai CDN-CDN aja bisa

53:41gitu kan. Jadi nggak perlu ada

53:43install note di lokal,

53:45tinggal tambahin CDN, jasmine nanti tambahin

53:47juga udah bisa bikin test suite

53:49di sana. Terus jalaninnya pakai lokal

53:51skian-skian/test misalkan, abis itu

53:53nanti dia akan ngetest

53:55aplikasi kita. Itu mulai

53:57awalnya dari sana.

53:59Itu sebelumnya tuh

54:01testing di

54:03front-end tuh, ya paling apa

54:05jQuery.test itu.

54:07Apa namanya? Lupa.

54:09Itu lah ada. Tapi itu lebih ke unit test

54:11ya.

54:13Untuk testing library-library-nya.

54:15Lebih dulu lagi

54:17itu langsung jalaninnya di browser.

54:19Jadi yang saya lupa

54:21pakai Selenium. - Kalau nggak jalan, berarti salah.

54:23- Bukan, Selenium gitu. Jadi bisa kayak

54:25web browser, kita

54:27record misalnya.

54:29Kita record dulu, kita

54:31record, klik-klik-klik, klik-klik-klik,

54:33jadi kayak end-to-end gitu. Kita klik

54:35dari awal sampai habis, kita masukin

54:37name and passwordnya, jadi

54:39di-play. - Oh, di-record ya?

54:41Kayak ini ya? Kayak

54:43patir record gitu ya?

54:45- Kalau saya lupa namanya,

54:47kalau yang terbaru, saya liat namanya

54:49Ghost Inspector yang mirip.

54:51Ghost Inspector di

54:53Firefox. Tapi mirip.

54:55Jaman dulu saya lupa namanya apa.

54:57Jadi

54:59kita nge-record

55:01kliknya kita, misalnya

55:03mau login, kita masukin password,

55:05segala macam. - Nanti dibikin script sama dia.

55:07- Nanti tinggal di-play. Kalau ada yang gagal,

55:09kalau ada yang gagal,

55:11dia akan bilang gagal.

55:13Dan itu, senarionya udah banyak.

55:15Tapi nggak pakai

55:17kayak web recorder itu dulu

55:19bukan untuk ini sih,

55:21bukan untuk ngetest, tapi

55:23untuk mencurangin sebuah sistem lah

55:25misalnya. Kayak

55:27nge-click ads misalnya.

55:29- Dulu belum ketahuan ya?

55:33- Belum. Kan pakai VPN.

55:35Dia pindah-pindah.

55:37- Diajak IP-nya.

55:39Malah ngajarin kriminal.

55:41- Untung nggak ada Mas Danang nonton, kan?

55:47- Eh, siapa bilang?

55:49Sekarang dia muncul.

55:51Ya, jadi sebenarnya

55:55sekarang tuh udah enak banget

55:57testing-nya. - Apalagi kalau kita

55:59pakai, gimana-gimana?

56:01Laluan aja. - Iya.

56:03Kemarin pengalaman udah lama

56:05nggak cobain spell kit, cobain

56:07lagi kan yang versi baru.

56:09Cobain di project baru, itu udah

56:11ada NPM test

56:13titik 2 unit untuk unit test.

56:15Yang Cypress-nya juga udah disetupin.

56:17Play rate-nya juga ada.

56:19Jadi udah tinggal jalanin aja.

56:21- Nah itu, kita pakai meta,

56:23kalau kita pakai meta framework, kayaknya

56:25sebagian besar meta framework modern

56:27udah include. Kayak swell kit kan

56:29kalau kita pakai official starter tuh

56:31yang pakai apa? NPM

56:33create swell itu dedikasi

56:35opsi, cuma emang opinionated.

56:37Karena dia pakai fit,

56:39unit testing-nya

56:41pakai fit test.

56:43Terus kalau apa, end-to-end-nya

56:45pakai play rate.

56:47Iya, kalau kita mau pakai yang lainnya, bebas.

56:49Cuma kalau dengan

56:51bawaan official starter kan kita

56:53beneran nggak usah repot-repot

56:55konfigurasi apapun ya, langsung jalan.

56:57Di Next.js juga sama.

56:59Ada contoh-contohnya malah itu

57:01bisa pilih mau pakai Cypress,

57:03mau pakai play rate.

57:05- Iya, terutama

57:07waktu instalasi play rate ya,

57:09saya baru pertama kali pakai kan, begitu

57:11dijalankan dia error, karena

57:13play rate-nya belum keinstall.

57:15Tapi install play rate-nya pun sederhana sekali.

57:17Gak kayak dulu kalau misalkan,

57:19"Woh, kita harus pakai, harus install

57:21Chrome driver-nya dulu, masukin ke folder ini."

57:23Gitu kan. Sekarang udah diinstallin

57:25kayak NPM-nya. - Untung nggak ngalamin.

57:27- Enak banget.

57:31- Nggak tahu kalau framework lain ada nggak ya

57:33kayak Nux segala macem, ada yang otomatis

57:35nggak testing-nya?

57:37- Testing-nya.

57:39Kita coba lihat. Ini contohnya

57:43mana nih? Manual setup.

57:45Nah, ini udah ada dia biasanya, Cypress.

57:47Cypress juga ada

57:49UI-nya ya, jadi kalau Cypress open,

57:51dia ada GUI.

57:53- Iya, dia otomatis buka di

57:55localhost.5432 atau

57:57semacamnya lah, punya protocol

57:59sendiri. - Nah, ini Cypress

58:01seperti ini nih. Ini integration testing ya

58:03contohnya ya.

58:05Jadi kita visit ke localhost, ini udah

58:07mirip seperti yang kita lakukan

58:09tapi secara otomatis.

58:11- Ini end-to-end. - Terus like elemennya

58:13kayak jQuery kan?

58:15- Ini end-to-end, sorry. Ini end-to-end, bukan

58:17integration.

58:19Ini end-to-end. Jadi... - Ini simpelnya ya.

58:21Ini end-to-end. - Iya.

58:23- So navigate into the about page gitu.

58:25- Ya, terus ke apa?

58:27- Dari about page ini,

58:29di-check apakah ada link

58:31yang isinya adalah about.

58:33Abis itu bisa di-click.

58:35Ya, bisa di-click.

58:37Terus abis itu, setelah di-click, apa yang kita

58:39harapkan? - Setelah di-click, artinya harus berubah.

58:41Harus berubah jadi /about.

58:43- Berisi about.

58:45- Dan ada h1 dengan

58:47isinya adalah about page ini. - Isinya harus about page.

58:49- Betul.

58:51- Biasanya lebih enak kayak senior-nya bikin

58:53test krenalialnya, junior-nya

58:55bikin kodenya semua.

58:57- Eh, tapi dulu ada tuh

58:59tools yang

59:01kita bikin skenario-nya bahasa

59:03Inggris, terus dia bisa convert jadi

59:05seperti ini. Jadi test skenario.

59:07Namanya apa ya?

59:09- Ada tuh... - Cucumber.

59:11- Cucumber. - Cucumber ya.

59:13- Cucumber itu apa ya? - Cucumber GS.

59:15- Cucumber GS.

59:17Ada nih Cucumber.io.

59:19- Di

59:21Ruby, kalau nggak

59:23salah. - Cuma dia

59:25bahasanya apa? Language.

59:27- Language-nya bahasa Inggris. - Bahasa Inggris ya.

59:29Bahasa Inggris. - Bisa bahasa Inggris ya?

59:31- Bahasa Indonesia. - Bahasa Indonesia.

59:33- Wah keren. - Nggak tahu.

59:35Bisa bahasa Inggris tahu saya. - Bahasa Inggris lah.

59:37- Iya bahasa Inggris tuh. Namanya

59:39Gherkin Syntax. - Gherkin, iya iya.

59:41Jadi dia ini khusus untuk kayak BDD.

59:45Jadi yang bikin

59:47Syntax Gherkin-nya ini bukan orang

59:49developer, tetapi bagian test.

59:51- Produk manager ya?

59:53- Produk owner lah. - Ini nanti bisa di-confort.

59:55- Saya ingat di depan mereka bikin sekali.

59:59- Coba bayangkan kita

1:00:01bikin ini

1:00:03pakai chat GB.

1:00:05- Pakai chat GB.

1:00:07- Enak banget.

1:00:09Ada yang bikinin test buat kita ya.

1:00:11Cucumber.io.

1:00:13Ya ini bener kan.

1:00:15Jadi skenario-skenario-nya

1:00:17saya pengen

1:00:19apa. - Wah kita kena

1:00:21kita kena spam nih.

1:00:23- Oh di spam. Pertama

1:00:25kaya prestasi nih rekor.

1:00:27Pertama kali kena spam buat.

1:00:29- Tapi spamnya. - Ayo.

1:00:31Jangan di-click ya teman-teman.

1:00:33Insinya bukan Beautiful Girls

1:00:35kok. Nanti malah di...

1:00:37- Wah berarti ini kita rame

1:00:41ya. Sampai ada spam segala ya.

1:00:43- Oh iya. - Kena spam

1:00:45buat. - Oke. Dari skenario ini

1:00:47di...

1:00:49seolah-olah ya. Ini, ini gak, gak

1:00:51ini ya. Jadi seolah-olah dia akan

1:00:53apa, dijadikan,

1:00:55dikompilasi menjadi ini.

1:00:57Atau ini yang eat ini.

1:00:59Terus kemudian when ini adalah

1:01:01ketika kondisi

1:01:03tertentu. Ya misalkan ini.

1:01:05Ketika ada tombol

1:01:07atau ada link, maka di-click.

1:01:09Kemudian then

1:01:11dan itu adalah harapannya.

1:01:13Maka dia akan menjadi ini.

1:01:15Ini adalah URL tentang...

1:01:17- Wih ada dua.

1:01:19Block lah. Block, block, block.

1:01:21Block juga. - Bisa. Saya gak tahu.

1:01:23- Bisa lah.

1:01:25- Oh bisa langsung dari

1:01:27ini ya. - Dari Streamyard.

1:01:29Ternyata bisa.

1:01:31- Ini baru, baru pernah.

1:01:33Harap ngaku. - Iya.

1:01:35Oke.

1:01:37- Beda, beda access.

1:01:39- Ini ada yang, ada yang Javascriptnya gak sih?

1:01:43- Ternyata beneran, ada Javascriptnya

1:01:45dan ini ada, ternyata beneran

1:01:47ada localization. Jadi

1:01:49emang bisa menulis pakai

1:01:51bahasa Indonesia dan bahasa lainnya.

1:01:53- Nice, localization.

1:01:55- BDD tuh, BDD.

1:01:57Eh ada Mas Dan. - Bener kan ada Mas Dan kan?

1:01:59- Ayo lho.

1:02:01- Jangan gagal lho.

1:02:03- Ivan tadi Mas Ivan.

1:02:05- Langsung diem.

1:02:11- Langsung diem.

1:02:13- Gomit.

1:02:15- Mana contoh yang JS ya? Pengen tahu.

1:02:17Gampar yang JS.

1:02:1910 minit tutorial.

1:02:21Kelamaan.

1:02:23- Ada tadi JS di halaman

1:02:25depannya landing page-nya. - Oh halaman depannya.

1:02:27- Oh di installation.

1:02:29- Oh installation.

1:02:31Oke.

1:02:33- Di paling atas. - Wih.

1:02:35Baru gabung. Oh gak apa-apa gak denger dia.

1:02:37Aman, aman.

1:02:39Langsung penasaran Mas Dan

1:02:41yang tadi paling ngomong apa.

1:02:43- Langsung diem.

1:02:45Langsung dicek.

1:02:47- Tuh ada Java,

1:02:49JavaScript, Ruby,

1:02:51dan 99.

1:02:53- Oh iya. Ini JS nih.

1:02:55Cucumber. Terus gimana cara ininya?

1:02:57Oh ini baru install ya?

1:02:59Guides berarti ya. Bener ya.

1:03:01Guides-nya yang

1:03:03JavaScript gak ada ya?

1:03:05Ini apa?

1:03:09- Oh.

1:03:11Oh iya.

1:03:13Wah harus kita ini lagi ya.

1:03:15- Ini bisa

1:03:17dimasukin si ICD juga ya?

1:03:19Oh iya itu poin

1:03:21bagus tuh. Apapun itu,

1:03:23gak harus pakai Cucumber.

1:03:25Sebisa mungkin testing kita ya

1:03:27digabungkan dengan

1:03:29workflow kita. Kalau yang paling

1:03:31simpel nih, pakai Git Hux

1:03:33dulu. Git Hux tuh misalnya yang terkenal

1:03:35Husky ya. Jadi apa?

1:03:37Entah kita

1:03:39ngubah codingan kita yang sebelumnya

1:03:41kan pertama bikin biasanya masih rapih

1:03:43banget tuh. Rapih ada testingnya.

1:03:45Nah besok-besoknya udah buru-buru ya udah

1:03:47sembarang

1:03:49diubah tanpa

1:03:51kita ngurusin testingnya atau mungkin

1:03:53teman kerja kita yang ngubah. Nah

1:03:55dengan Git Hux kita bisa ngatur

1:03:57tiap commit atau

1:03:59tiap mau push harus

1:04:01running semua dari

1:04:03static analysis juga bisa

1:04:05format, pastiin semua konsisten

1:04:07juga bisa ngejalanin

1:04:09testing, biasanya unit atau

1:04:11integration test. Jadi kalau itu fail

1:04:13ya kita harus

1:04:15handle itu dulu. Buat mencegah

1:04:17yang tadi tuh bug pertama dibenerin

1:04:19muncul bug kedua, bug kedua

1:04:21dibenerin, bug pertama balik

1:04:23nah itu bisa dicegah dengan pertama

1:04:25Git Hux. Terus kedua bisa juga

1:04:27si ICD kayak misalnya kalau

1:04:29pakai GitHub Actions atau

1:04:31Travis atau dan lain-lain.

1:04:33Cypress kalau nggak salah punya

1:04:35layanan, punya layanan

1:04:37berbayar juga ya cloud kayaknya.

1:04:39- Oh untuk itu ya

1:04:41untuk CIN-nya ya?

1:04:43- Jadi untuk dihook ke proses

1:04:45workflow CICD kita.

1:04:47Jadi intinya jangan sampai kita nge-deploy

1:04:49yang belum lulus. Pertama

1:04:51jangan sampai kita meng-commit kode

1:04:53yang belum di-testing.

1:04:55Kedua jangan sampai

1:04:57nge-deploy kode yang belum di-testing

1:04:59yang bisa, yang bisa rusak

1:05:01bisa lembak.

1:05:03- Ini juga buat apa?

1:05:05Gimana gimana?

1:05:07- Cuma mau bilang hati-hati

1:05:09kalau GitHub Action itu

1:05:11yang freenya cuma ada limitnya.

1:05:13- Iya.

1:05:15- Karena kalau kebanyakan

1:05:17ngetes itu

1:05:19naik loh GitHub Action

1:05:21hours-nya. Hati-hati.

1:05:23Jadi perlu diperhatikan juga soal billing.

1:05:25- Iya.

1:05:27Ini juga berlaku

1:05:29buat kasusnya Ivan tadi ya

1:05:31untuk ngetes

1:05:33PHP versi skian, PHP versi skian

1:05:35itu bisa DCI juga kan?

1:05:37- Iya. Sekarang sudah

1:05:39plugin itu udah di-handle sama tim lain

1:05:41dan itu sudah dibikin. Udah pakai

1:05:43parallel testing malah

1:05:45supaya udah

1:05:47dibikin permutasi tuh PHP

1:05:49yang sekarang supportnya

1:05:5174 dan 8 doang

1:05:53dan WordPress versionnya

1:05:554 terakhir. Jadi

1:05:57sudah dibikin permutasinya langsung.

1:05:59Begitu PR-nya naik

1:06:01dan dilabelin apa

1:06:03dilabelin misalnya review

1:06:05baru dia jalan.

1:06:07Dan sekali jalan, langsung sekali

1:06:0910 instance itu sekali jalan

1:06:11otomatis ngetes.

1:06:13Jadi kalau nggak pas

1:06:15tesnya, nggak direview kodenya.

1:06:17- Nggak direview.

1:06:19Ini saya pespa tadi ya?

1:06:21- Iya. - Jadi itu bagus

1:06:23buat produktivitas juga kali ya.

1:06:25Jadi, kalau pun ada orang yang

1:06:27developer yang not QA

1:06:29atau ngereview manual

1:06:31atau senior engineer yang ngereview manual

1:06:33kan yang nggak buang-buang waktu juga bolak-balik ngereview

1:06:35kode yang masih ada

1:06:37obvious error-nya.

1:06:39- Yes, betul.

1:06:41Ini tadi saya

1:06:43press cloud-nya.

1:06:45- Ada free plan-nya ya?

1:06:47Ada

1:06:49gratisan, cuma terbatas 500

1:06:51tes sebulan.

1:06:53Ada storybook sama chromatic.

1:06:55Chromatic itu juga bisa visual

1:06:57regression setting-nya.

1:06:59Dan snapshot test-nya juga bisa dilakukan.

1:07:01Enaknya pakai chromatic, dia bisa

1:07:03collaboration.

1:07:05Jadi, kalau misalnya ada...

1:07:07Jadi kalau misalnya kita punya

1:07:11komponen,

1:07:13misalnya CSS-nya berubah, terus kita kayak

1:07:15dia kayak kegeser

1:07:171 pixel jadinya.

1:07:19Karena padding-nya masalah.

1:07:21Jadi,

1:07:23harus ada yang nge-approve.

1:07:25- Betul nggak? Gak apa-apa nih.

1:07:27Gak apa-apa nih kegeser 1 pixel.

1:07:29Harus ada yang bertanggung jawab.

1:07:31- Atau memang sengaja.

1:07:33Mungkin perubahan font, perubahan

1:07:35perubahan size.

1:07:37Memang perubahan yang disengaja.

1:07:39Harus ada yang approve.

1:07:41- Kalau perubahan, apa, geser 1 pixel

1:07:43di snapshot

1:07:45nggak bisa

1:07:47ketangkap ya?

1:07:49Di mana?

1:07:51Perubahan di mana?

1:07:53- Yang perubahan 1 pixel itu.

1:07:55- Kalau di snapshot, kelihatan.

1:07:57- Maksudnya, apa, pakai

1:07:59jes snapshot?

1:08:01- Jes nggak bisa kelihatan kalau perubahan.

1:08:03- Ya, ada yang ngebaca domlo doang.

1:08:05- Kalau jes nggak ada...

1:08:07Jes itu ngebaca markup.

1:08:09- Oke, oke, oke.

1:08:11Oke, tadi...

1:08:13- Tapi jes bisa

1:08:15nge-snapshot juga kalau mau ditambah.

1:08:17- Oh, bisa.

1:08:19- Jes bisa nge-snapshot.

1:08:21Bukan nge-snapshot dom ya,

1:08:23dia nge-snapshot beneran.

1:08:25- Bisa, bisa, bisa.

1:08:27- Bisa di-save ke gambarnya.

1:08:29- Jalanin Papetir atau gimana?

1:08:31- Jalanin Papetir.

1:08:33- Ya.

1:08:35Oke, tadi sempat kita bahas

1:08:37tentang meta framework.

1:08:39Next bisa menggunakan baik

1:08:41sidepress ataupun playwrite

1:08:43ataupun feed kalau untuk

1:08:45unit testing ya.

1:08:47Kemudian bisa

1:08:49pakai jes juga tentunya.

1:08:51Terus ada lagi Astro.

1:08:53Astro juga sama.

1:08:55- Cuma dia belum

1:08:57ada, belum bawaan.

1:08:59Jadi nggak bisa langsung, cuma ada

1:09:01guide-nya ya minimal.

1:09:03- Sudah ada guide-nya, betul.

1:09:05Kalau SvelteKit,

1:09:07terakhir saya cek, belum ada

1:09:09di dokumentasinya.

1:09:11- Cuma malah ada di official starter-nya ya.

1:09:13- Iya, walaupun di

1:09:15project yang kita create, itu ada.

1:09:17Tapi mungkin belum, ini kan SvelteKit kan

1:09:19belum, masih projectnya

1:09:21bisa dibilang, masih beta ya.

1:09:23Belum beta satu. - Beta terus, dari kapan tahu?

1:09:25- Iya. Jadi mungkin

1:09:27belum lengkap lah, gitu. Cuman

1:09:29pas coba jalanin

1:09:31projectnya, itu udah ada NPM test dan lain-lain,

1:09:33udah lengkap semua. Cuma

1:09:35belum ada guide-nya aja. - Belum, dokumentasinya

1:09:37belum lengkap. Tapi udah bisa

1:09:39berjalan.

1:09:41- Nanya agak OOT, boleh lah.

1:09:43Satu, dua pertanyaan OOT, boleh ya?

1:09:45Kita jawab nanti ya.

1:09:47- Apa, yang menang Piala Dunia?

1:09:49- Yang menang Piala Dunia.

1:09:51- Masa nanya OOT,

1:09:53nggak boleh?

1:09:55- OOT.

1:09:57OOT.

1:09:59Bisa buat topic itu, OOT.

1:10:01- Bisa buat topic. Oh iya, tapi ada yang

1:10:03suggest topic juga nih.

1:10:05Ada yang suggest topic nih, mana tadi?

1:10:07- Micro-service.

1:10:09- Oh, micro-service.

1:10:11Kalau di front-end namanya

1:10:13micro-front-end.

1:10:15- Micro-front-end.

1:10:17- Eh itu tuh banyak yang tanya ya.

1:10:19Aku pas di Devast Bali kemarin juga

1:10:21ada yang tanya itu. Cuma karena waktu

1:10:23Mepet ya nggak bahas detail juga.

1:10:25- Oke. - Jadi kayaknya

1:10:27emang interest di micro-front-end

1:10:29makin naik ya.

1:10:31- Kenapa tuh?

1:10:33- Micro-front-end tuh apaan sih?

1:10:35- Front-end tapi kecil-kecil.

1:10:37Packagenya.

1:10:39Itu perspektifnya macem-macem sih.

1:10:41- Komponen dong.

1:10:43Komponen.

1:10:45- Ada yang kasus ekstrim, satu repo,

1:10:47satu komponen.

1:10:49Itu kasus yang paling ekstrim.

1:10:51Nah, terus

1:10:53alternatifnya lainnya, ada gini nih,

1:10:55biasanya e-commerce besar,

1:10:57itu, jadi satu tim misalnya

1:10:59section buat checkout,

1:11:01product checkout, card and checkout,

1:11:03itu satu repo sendiri,

1:11:05satu repo front-end sendiri,

1:11:07terus kayak product display,

1:11:09buat browsing product ya,

1:11:11buat browsing product, satu repo sendiri,

1:11:13terus buat kayak dashboard,

1:11:15misalnya user bisa login,

1:11:17bisa lihat history,

1:11:19itu satu repo sendiri,

1:11:21satu project sendiri.

1:11:23Itu kalau yang banyak artikel,

1:11:25terus sih Zalando, jadi mereka itu

1:11:27kelihatannya e-commerce besar

1:11:29di Eropa.

1:11:31Terus yang konon pakai micro-front-end

1:11:33juga itu Spotify, Ikea,

1:11:35cuma kalau itu sih nggak

1:11:37terlalu di-open ke public,

1:11:39apa perspektifnya,

1:11:41apa arsitekturnya kayak gimana.

1:11:43- Repo lah yang muka kayaknya.

1:11:45- Saya dulu pakai ini malah, satu repo,

1:11:47tapi multiple package.

1:11:49Jadi di-handle semua

1:11:51pakai Lerna.

1:11:53- Oh Lerna.

1:11:55Itu mono repo kan? Bukan?

1:11:57- Iya mono repo, tapi

1:12:01kita pakainya Atomic Design.

1:12:03Jadi setiap

1:12:05atom, setiap komponen,

1:12:07jadi ada dari atom,

1:12:09organism, atom,

1:12:11molekul, organism, segala macam itu

1:12:13jadi

1:12:15jadi satu

1:12:17package sendiri, DNPM package.

1:12:19Jadi saat mau di-import,

1:12:21tinggal import

1:12:23molekul-molekulnya aja.

1:12:25- Oh iya, kalau yang Zalando itu lupa sih

1:12:27repo-nya terpisah atau nggak,

1:12:29mungkin mono repo ya, cuma maksudnya

1:12:31tadi satu project, satu package.

1:12:33Nah ini yang

1:12:35OOT tanya apa, nggak tanya-tanya.

1:12:37- Iya, silahkan

1:12:39ditanyakan. Nah ini salah satu contoh

1:12:41micro front-end dari Paypal. Paypal

1:12:43juga micro front-end ya,

1:12:45jadi ada timnya karena

1:12:47udah banyak,

1:12:49jadi misalkan dia, ada contohnya nggak sini ya?

1:12:51- Nah itu front-endnya cuma satu?

1:12:53- Ini masing-masing

1:12:55yang warna biru, kuning,

1:12:57merah, sama abu-abu ini

1:12:59itu adalah aplikasi masing-masing.

1:13:01- Satu tim, satu project.

1:13:03- Iya, bahkan menu pun satu project

1:13:05sendiri bisa aja

1:13:07framework-nya beda-beda.

1:13:09Misalkan ini pakai view, ini pakai

1:13:11spelt misalkan ya.

1:13:13Atau apa, itu tergantung sama

1:13:15timnya.

1:13:17- Terus gabunginnya, yang ngegabungin

1:13:19semuanya satu project sendiri? - Ada, ada satu lagi.

1:13:21Dan yang menariknya adalah

1:13:23yang menulis

1:13:25artikel ini adalah mas Bimo, orang Indonesia

1:13:27yang bekerja di Paypal.

1:13:29- Nice.

1:13:31Kapan bisa diculik kesini?

1:13:33- Jauh ini. - Nggak, nggak, nggak.

1:13:35Terlalu jauh itu.

1:13:37Kemarin waktu di Makassar ada

1:13:39GDE baru kita namanya

1:13:41Dana, dia juga bahas tentang micro front-end

1:13:43dimana deploy ke Firebase

1:13:45hosting. - Wah seru itu.

1:13:47- Dia di Bukalapak dan Bukalapak juga

1:13:49menggunakan micro front-end.

1:13:51- Oh, biasanya berarti banyak di e-commerce ya

1:13:53keliatannya. - Iya.

1:13:55- Karena skop mereka besar.

1:13:57Iya, seru nih.

1:13:59- Bisa, bisa, bisa.

1:14:01Terima kasih ya.

1:14:03Masukkan untuk topiknya ya.

1:14:05Terima kasih. Kita masih nunggu

1:14:07pertanyaan OOT ini

1:14:09dari Mas Drian.

1:14:11Ayo ditunggu. Kita udah satu jam 14 menit.

1:14:13Kita tunggu 1-2 menit.

1:14:15Kalau nggak ada, ya berarti kita

1:14:17sudah dulu saja ya kali ya.

1:14:19Ini ada testimoni ini ya.

1:14:21Tistemoni, luar biasa ya.

1:14:23- Mantap.

1:14:25Swelt itu emang nagih sih.

1:14:27- Alhamdulillah, udah bisa bikin

1:14:29beberapa project, baik itu pakai spell

1:14:31atau spel kita. Iya.

1:14:33Seru, seru, seru.

1:14:35- Sekali pakai Swelt, pas balik ke

1:14:39React lagi sedih set-state

1:14:41sama use effectnya.

1:14:43- Loh, Eka kan sehari-hari

1:14:45React nggak? Atau apa?

1:14:47- Ada React, ada Swelt.

1:14:49- Ada Swelt juga? Oh, oke.

1:14:51Jadi, merasakan ya?

1:14:55- Kita bahas lah itu.

1:14:57Why the world doesn't need,

1:14:59why the world may not need React.

1:15:01- Virtual Dumbo.

1:15:03Tiamuk masa.

1:15:05- Tiamuk masa.

1:15:07Masanya lagi banyak.

1:15:09- Isu Sarah, Swelt, Anggular, React.

1:15:13- Kan ego-ego itu.

1:15:17- Siapa yang dari React itu?

1:15:19Yang bikin Redux?

1:15:21- Yang bikin Redux.

1:15:23Dan Abramov.

1:15:25- Kan dia bilang you may not need Redux.

1:15:27- Iya, padahal dia yang bikin ya.

1:15:29Dia bikin sampai

1:15:31di-hire. Dia soalnya bikin

1:15:33sampai di-hire Facebook, abis itu udah dia nggak perlu

1:15:35Redux lagi, udah.

1:15:37Videoannya itu dia.

1:15:39Buat di-hire aja.

1:15:41Pertanyaan tidak kunjung datang,

1:15:45kalau begitu, mungkin...

1:15:47- Oh, kalau mau tanya, bisa ke Slido, ya?

1:15:49- Oh, iya betul.

1:15:51- Bit.ly/ngobrolinweb.

1:15:55Silahkan, mau oot gimana juga nanyain, boleh?

1:15:57Kecuali nanyain nomor handphone, ya?

1:15:59Jangan, ya?

1:16:01- Boleh nanya, tapi nggak dijawab.

1:16:03- Nggak dijawab?

1:16:05- Oh, iya, iya.

1:16:07Baiklah.

1:16:09Kalau begitu,

1:16:11untuk malam ini, kita

1:16:13kemudahan dulu.

1:16:15Terima kasih buat teman-teman semuanya yang sudah hadir,

1:16:17yang sudah

1:16:19menemani.

1:16:21Diskusinya cukup seru. Malam hari ini cukup rame.

1:16:23Sampai ada spam segala, ya.

1:16:25Jadi, pencapaian baru.

1:16:27Terima kasih, kita ketemu lagi.

1:16:31Insya Allah ketemu lagi minggu depan.

1:16:33Saya Riza,

1:16:37Pamit, Eka, dan Ivan

1:16:39juga Pamit. Selamat malam, selamat istirahat.

1:16:41Selamat malam! Bye!