Frontend testing practice & principle in Mamikos

🔬

x

Tri Hargianto

Connect

trihargianto.com

Tri Hargianto

Tri Hargianto

Tech Lead, Front-end at Mamikos / Co-Organizer at JogjaJS

x

Yang akan dibahas

01

02

03

04

05

06

07

Apa itu testing dan kenapa bikin automation test

Untuk siapa kita membuat UI

Sejarah frontend testing di Mamikos dan masalahnya

Pendekatan yang dipakai sekarang

Library yang dipakai

Ngomongin Code Coverage

Yang kami pelajari setelah menerapkan automation test

x

Ekspektasi

✔

✔

✔

✔

Gak bahas testing di luar frontend testing

Gak bahas End-to-end testing

Contoh kode pakai Vue & JavaScript

Merupakan praktik testing di Mamikos

x

Ngomongin Testing

01

Apa itu testing dan kenapa bikin automation test

x

Automation Testing

Manual Testing

VS

x

Automation Testing?

Form.vue

Form.test.js

x

Automation Testing?

Ngapain repot-repot, bikin kode tes? langsung manual beres kan?

Fitur yang lagi dibikin jadi lebih lama dong selesainya

x

Kenapa repot bikin automation test?

• Dapet rasa yakin komponen dan fitur yang kita bikin bekerja sesuai yang kita mau

Benar

Salah

• Merupakan poin KPI mu

​

• Ikutan hype

​

• Di suruh senior supaya Pull Request di approve

​

dll

x

Gimana caranya bisa dapet

rasa yakin?

x

Bahas pengguna

02

Untuk siapa kita membuat UI

x

Studi Kasus: Komponen Counter

https://github.com/trihargianto/testing-principle-demo

x

Untuk Siapa Kita Membuat Komponen UI ?

Yang berinteraksi dengan komponen mu melalui browser

End-User

x

• Melihat sebuah teks, 2 tombol plus dan minus, 1 tombol berlabel “Kirim”.

​

• Ketika ia menekan tombol merah (-), maka angka 2 akan dikurangi satu

​

• ditambah satu lagi ketika menekan tombol biru (+)

​

• Jika tombol “kirim” di tekan, maka ia akan men-submit form nya

Yang berinteraksi dengan komponen mu melalui browser

End-User

x

• Me-render komponen ini di komponen <form-user /> (misal)

​

• Dari situ ia akan mengirimkan props label dan event click untuk mendapatkan nilainya.

Yang memakai

komponen mu

Developer

x

Mari sepakat bahwa kita membuat UI hanya untuk melayani 2 users dan tidak selain itu

x

Sejarah & Masalah

03

Sejarah frontend testing di Mamikos dan masalahnya

x

Studi Kasus: Komponen Counter

https://github.com/trihargianto/testing-principle-demo

x

Requirements

• Menampilkan sebuah angka dengan nilai default 0.

​

• Satu tombol berwarna biru untuk menaikkan satu angka ke atas.

​

• Satu tombol berwarna merah untuk menurunkan satu angka ke bawah.

​

• Satu tombol submit yang akan men-trigger event click

​

• Satu baris teks yang berfungsi sebagai label form

x

Demo

https://github.com/trihargianto/testing-principle-demo

x

Kesalahan #1 : Implementation Detail Testing

Demo

https://github.com/trihargianto/testing-principle-demo/tree/1-implementation-detail-testing

x

Kenapa Perlu Menghindari Implementation Detail Testing

1. Automation test fail ketika kita me-refactor kode. False Negative.
2. Automation test pass ketika kita merusak aplikasi. False Positive.

False Positive: Kondisi ketika automation test pass tapi aplikasi sebenarnya tidak berjalan normal

​

False Negative: Kondisi ketika automation test fail tapi aplikasi sebenarnya berjalan normal

x

Kesalahan #2 : Pakai shallowMount()

x

Apa itu shallowMount() ?

App.vue

Counter.vue

TextDisplay.vue

App.test.js

Counter.test.js

TextDisplay.test.js

“Creates a Wrapper that contains the mounted and rendered Vue component, but with stubbed child components”

x

Demo

https://github.com/trihargianto/testing-principle-demo/tree/2-shallowmount

​

​

x

Kenapa pakai shallowMount() ?

1. Tiap komponen bisa punya file test nya sendiri dan ter-isolate dari tes lain

​

1. Performance

x

shallowMount() in action

x

Pendekatan

04

Pendekatan yang dipakai sekarang

x

— Kent C Dodds

#1 Menerapkan Prinsip

“The more your tests resemble the way your software is used, the more confidence they can give you.”

x

#2 Blackbox testing

x

#2 Blackbox testing

x

#3 Teknik Memilih Selector

x

Demo

https://github.com/trihargianto/testing-principle-demo/tree/3-blackbox

x

Library & Tools

05

Library & tools yang dipakai sekarang

x

Sebuah prinsip akan lebih maksimal untuk diterapkan ketika kita mempunyai tools yang tepat.

x

Tools

Jest

Mercury is the smallest planet

Before

After

Vue-Test-Utils

Mercury is the smallest planet

Jest

jestjs.io

Vue Testing Library

testing-library.com/vue

Mock Service Worker

mswjs.io

Jest DOM

github.com/testing-library/jest-dom

x

Demo

https://github.com/trihargianto/testing-principle-demo/tree/4-vue-testing-library

Jest

jestjs.io

Vue Testing Library

testing-library.com/vue

Jest DOM

github.com/testing-library/jest-dom

x

Code Coverage

06

Apa itu Code Coverage dan perannya di Mamikos

x

Code Coverage

— ChatGPT

“Code coverage is a metric used in software testing to measure the extent to which your code has been tested. It quantifies the percentage of code that has been executed during a test suite or testing process. Code coverage helps developers and quality assurance teams assess the thoroughness of their testing efforts, identify areas of the code that remain untested, and gauge the overall quality of their software.”

x

Demo Code Coverage

jest --coverage

x

Daily Monitoring

x

Refleksi

07

Yang kami pelajari setelah menerapkan automation test

x

#1 Development Speed

x

#2 Reproducibility

“Humans should do things that humans are good at, and performing repetitive tasks is not one of them.”

x

#3 Bisa Diprediksi

x

Resources

📝

Tempat buat belajar frontend testing

x

Belajar Frontend Testing

Course

Book

Blog

Testing Libraries

https://testingjavascript.com

https://www.manning.com/books/testing-javascript-applications (Lucas da Costa)

https://kentcdodds.com/blog?q=testing

https://test-utils.vuejs.org/guide/

https://testing-library.com/vue

x

— Kent C Dodds

“Always remember the reason that you’re testing is about confidence. If something your test is doing isn’t bringing you more confidence, then consider whether you can stop doing it!”

x

Terimakasih

x