End-to-end Testing dengan The Intern

Apa itu end-to-end testing ?

Sebagai programer, tentu kita semua udah kenal yang namanya testing. Ada macam-macam test yang bisa kita pake untuk meningkatkan kualitas kode dan/atau aplikasi yang kita buat. Yang paling umum dan wajib adalah unit-test untuk memvalidasi alur/logika program dalam unit yang paling kecil yaitu function.

End-to-end testing, sering disingkat E2E, adalah untuk memvalidasi cara kerja aplikasi atau website dari sudut pandang seorang user. Jadi dalam E2E testing kita tulis skrip untuk mensimulasikan behavior atau tindakan-tindakan seorang user — mirip bikin bot.

Dalam artikel ini, saya akan bahas tentang E2E testing pake sebuah framework yang bernama The Intern. Ada beberapa framework yang bisa kita pake selain The Intern, antara lain: Cypress, Nightwatch, TestCafe, dan yang paling tua, Selenium. Berdasarkan pengalaman saya, The Intern adalah yang paling seimbang antara fitur & tingkat kerumitannya.

Continue reading →

Cara Mudah Pakai Environment Variable dengan Webpack

Misalnya kita punya project web dengan konfigurasi environment yang beda antara dev & production (seperti normalnya projek web) kayak gini:

DEV PRODUCTION
DB 192.168.0.99 192.168.0.100
Assets dev.assets.com live.assets.com
API server1.api.com server2.api.com

Ada beberapa cara untuk pake variabel-variabel itu di aplikasi kita antara lain:

  1. Pake HtmlWebpackPlugin untuk injeksi file dev.env.js atau prod.env.js ke file HTML dalam bentuk tag <script>
  2. Bikin satu file env.js yang isinya bisa dev atau production vars tergantung di direktori mana dia dibuat. File ini nanti dimuat oleh aplikasi pake <script>.
  3. Ada juga yang pake JSON.

Untuk projek yang pake ES6 & Webpack, ada cara yang menurut saya lebih sip. Intinya environment vars kita bikin sebagai modul ES6, jadi bisa diimpor kayak modul ES6 biasa.

Kita bikin dua file, satu untuk masing-masing env:

//file: dev.env.js
export default {
    type:'dev',
    db:'192.168.0.99',
    assets:'dev.assets.com',
    api:'server1.api.com'
}

Satu lagi untuk production:

//file: production.env.js
export default {
    type:'production',
    db:'192.168.0.100',
    assets:'live.assets.com',
    api:'server2.api.com'
}

Di file index.js & semua file yang butuh baca environment vars:

//file: index.js

//import pake nama alias, jadi modul ini (index)
//nggak perlu tau itu file dev.env.js atau prod.env.js.
import CONFIG from 'env-config';

console.log('CONFIG',CONFIG);

Gimana caranya supaya skrip *.env.js bisa dipake sebagai modul kayak di atas?

Continue reading →

ReactJS : Higher Order Component

Higher-order Component (HOC) adalah teknik untuk bikin komponen ReactJS baru dari komponen yang udah ada. Jadi kita bisa bikin komponen baru yang punya fitur atau fungsi tambahan dengan cara komposisi yaitu satu atau lebih komponen digabung & dibungkus komponen lain.

Kalo di bahasa OOP, ini cocok sama prinsip: Favor composition over inheritance

Misalnya kita punya komponen A & B. Kita bisa pake HOC untuk bikin komponen baru C yang isinya A & B plus fitur-fitur & komponen/elemen DOM yang lain. Jadi komponen C kurang lebih bisa digambarin kayak begini. Dua komponen yang lain tetep bisa dipake sendirian:

Contoh implementasi HOC antara lain di React-Redux, di mana kalo kita mau bikin komponen yang bisa merespon update di Store & kirim objek Action kita tulis kode begini:

Continue reading →

Manajemen State dengan Redux (tanpa React)

Redux adalah library untuk manajemen state aplikasi JavaScript. Library ini memang lebih sering dipake bareng React, tapi sebenernya bersifat framework agnostic. Jadi bisa dipake dengan atau tanpa framework. Mau pake VueJS, bisa. Pake Angular, ok. Pake Pure JS, boleh.

Dalam tutorial ini saya akan bahas contoh pemakaian Redux dalam aplikasi ES6.

Tapi sebelumnya, apa itu State?

Secara harfiah, state artinya kondisi/keadaan. Jadi yang dimaksud Application State kurang lebih adalah semua informasi/data yang bisa menggambarkan kondisi aplikasi pada suatu waktu.

Redux

Implementasi Redux bisa digambarin pake diagram berikut:

Continue reading →

Bikin Project JavaScript (Webpack) dengan Poi

Yang udah pernah bikin project pake Webpack, Babel, dll. pasti setuju kalo initial setup-nya agak ribet. Kadang rasanya terlalu ribet kalo cuma untuk bikin project-2 kecil.

Ini ada tool namanya Poi yang bisa bantu setup Webpack dkk secara “otomatis”.

Kalo untuk project beneran saya masih lebih sreg pake manual setup. Utamanya karena saya kurang suka kalo ada tambahan layer lagi krn biasanya malah bikin susah. Tapi kalo untuk project kecil buat tutorial atau eksperimen, bolehlah pake Poi.

Instalasi

Karena tujuannya pake Poi buat bantu bikin project, baiknya instal secara global aja.

$ yarn global add poi
#atau
$ npm install -g poi

Continue reading →