Pengenalan

Selamat datang di kursus “Testing Aplikasi Pertama Anda”. Dalam kursus ini, kita akan belajar cara menginstal Cypress, menulis tes end-to-end, dan beberapa praktik terbaik sepanjang perjalanan.

:::info
Sebelum kita mulai, konten ini ditulis dengan asumsi bahwa Anda sudah mengetahui dasar-dasar HTML, CSS, dan JavaScript/TypeScript. Tidak masalah jika Anda belum pernah menggunakan Cypress sebelumnya. Kami akan mengajarkan segala sesuatu yang perlu Anda ketahui.
:::

Menginstal Aplikasi

Anda perlu mengunduh atau mengkloning salinan aplikasi ke komputer Anda untuk mengikuti kursus ini.

Ada beberapa cara berbeda yang bisa Anda lakukan.

Mengkloning dengan Git

Jika Anda sudah familiar dengan Git dan sudah menginstalnya, cara termudah untuk mengkloning repositori ini adalah dengan menjalankan perintah ini di terminal Anda.

git clone https://github.com/cypress-io/cypress-realworld-testing-course-app.git

Mengunduh file zip

Jika Anda tidak familiar dengan Git atau tidak memilikinya, Anda dapat dengan mudah mengunduh file zip dari repositori di sini.

:::tip
Anda bisa mengklik gambar untuk memperbesarnya.
:::

Selanjutnya, klik tombol hijau “Code” dan kemudian klik “Download ZIP.” Ini akan mengunduh file zip dari repositori ke komputer Anda yang kemudian perlu Anda ekstrak.

Menginstal Aplikasi

Setelah Anda mengkloning repositori atau mengunduhnya, Anda perlu menginstal semua paket npm dan dependensi. Anda perlu menginstal Node.js jika belum terinstal di komputer Anda. Pastikan Anda mengunduh versi “LTS” Node dan bukan versi “Current”.

Repositori ini akan diperbarui secara berkala untuk mendukung hanya versi LTS terbaru.

VSCode

Sekarang kita telah menginstal Node, kita perlu membuka repositori di editor teks. Dalam tutorial ini, kita akan menggunakan VSCode. Anda bebas menggunakan editor teks apa saja yang Anda suka, tetapi kami sangat merekomendasikan menggunakan VSCode.

Di dalam VSCode, Anda bisa membuka repositori melalui File > Open Folder

Setelah Anda membuka aplikasi di dalam VSCode, kita bisa menggunakan terminal bawaan untuk menginstal paket npm kita.

Anda bisa membuka terminal melalui Terminal > New Terminal

Menginstal Dependensi npm

Sebelum kita menginstal dependensi kita, mari pastikan kita menjalankan versi Node.js yang benar.

Di terminal, ketik perintah berikut dan tekan enter:

node -v

Terminal akan menampilkan versi Node.js LTS yang Anda unduh.

Kemudian ketik perintah berikut untuk menginstal semua dependensi npm kita.

npm install

Memulai Aplikasi

Setelah semua dependensi aplikasi kita terinstal, kita bisa memulai aplikasi dengan perintah berikut.

npm run dev

Kemudian Anda bisa membuka peramban web Anda dan memasukkan localhost:3000 di bilah alamat untuk melihat aplikasi.

Ikhtisar Aplikasi

Aplikasi yang akan kita uji adalah aplikasi kursus. Perilaku dan fungsionalitasnya hampir identik dengan situs resmi Real World Testing with Cypress yang sedang Anda baca ini.

Sebelum kita mulai menulis tes untuk aplikasi ini, ada baiknya untuk memiliki pemahaman dasar tentang halaman dan fungsionalitasnya.

Halaman Utama

Halaman utama adalah halaman pendaratan dasar yang menampilkan tiga kursus aplikasi kami. Setiap kursus tercantum dengan pelajaran yang terdapat dalam setiap kursus dan juga tombol “Mulai”. Mengklik tombol ini akan membawa Anda ke halaman pendaratan kursus.

Halaman Kursus

Halaman kursus memberikan informasi tambahan dan detail tentang kursus tertentu dan juga mencantumkan semua pelajaran yang terdapat di dalamnya di sisi kiri. Lingkaran kecil di sebelah kiri setiap pelajaran menunjukkan apakah pelajaran tersebut telah selesai atau belum. Ketika sebuah pelajaran telah selesai, lingkaran akan terisi, seperti ini:

Anda akan melihat pada tangkapan layar ini bahwa teks tombol kita telah berubah dari “Mulai Kursus” menjadi “Pelajaran Berikutnya” karena kita telah menyelesaikan pelajaran pertama. Tombol ini bersifat dinamis dan akan memperbarui teks serta tautan ke pelajaran berikutnya secara otomatis. Mengklik tombol ini akan membawa Anda ke halaman pelajaran.

Halaman Pelajaran

Halaman pelajaran berisi konten pelajaran di bagian tengah. Di sisi kiri adalah tabel konten untuk pelajaran yang merupakan tautan yang ketika diklik akan melompat ke bagian tersebut di dalam konten. Di sisi kanan adalah indikator kemajuan yang menunjukkan berapa banyak pelajaran dalam kursus yang telah selesai atau belum selesai.

Di bagian bawah setiap pelajaran terdapat kuis. Dalam aplikasi ini, jawaban yang benar selalu “True”. Setelah mengklik jawaban yang benar, tombol “Pelajaran Berikutnya” akan muncul dan pelajaran tersebut akan ditandai sebagai selesai di indikator kemajuan di sebelah kanan.

Penutup

Dalam pelajaran ini, Anda telah belajar cara menginstal aplikasi kursus baik melalui Git atau dengan mengunduh file zip. Selanjutnya, Anda belajar cara menginstal Node.js, VSCode, dan dependensi aplikasi melalui npm. Setelah menginstal semuanya, Anda belajar cara meluncurkan server dev aplikasi di localhost:3000.

Terakhir, Anda belajar berbagai halaman dan fungsionalitas aplikasi. Anda sekarang seharusnya memiliki pemahaman dasar tentang apa itu aplikasi, bagaimana cara kerjanya, beberapa fungsionalitas intinya, dll.

Dalam pelajaran berikutnya, Anda akan belajar cara menginstal Cypress dan menulis tes untuk aplikasi kursus ini.

Sumber