Dapatkan Cakupan Tes Front-End dengan Cypress

API7.ai

March 2, 2021

Technology

Latar Belakang

Dalam artikel "Stable Product Delivery with Cypress", kami membahas mengapa kami memilih Cypress sebagai framework pengujian E2E kami. Setelah menghabiskan hampir dua bulan untuk menyempurnakan kasus uji, kami memerlukan cakupan pengujian untuk mengukur apakah cakupan pengujian sudah cukup. Artikel ini akan menjelaskan cara mendapatkan cakupan E2E front-end APISIX Dashboard menggunakan Cypress.

Apa itu cakupan kode

Cakupan kode adalah metrik dalam pengujian perangkat lunak yang menggambarkan proporsi dan sejauh mana kode sumber dalam suatu program diuji, dan proporsi yang dihasilkan disebut cakupan kode. Cakupan kode pengujian mencerminkan kesehatan kode hingga batas tertentu.

Instalasi Dependensi & Konfigurasi

Untuk mengumpulkan data cakupan pengujian, kita perlu menempatkan beberapa probe dalam kode bisnis asli agar Cypress dapat mengumpulkan data tersebut.

Cypress secara resmi merekomendasikan dua pendekatan, yang pertama adalah menghasilkan direktori sementara melalui nyc dan menjalankan kode yang telah ditulis ke probe untuk mengumpulkan data cakupan pengujian. Cara kedua adalah melakukan konversi kode secara real-time melalui pipeline konversi kode, yang menghilangkan kerumitan folder sementara dan membuat pengumpulan data cakupan pengujian relatif lebih mudah. Kami memilih cara kedua untuk mengumpulkan cakupan E2E front-end.

  1. Menginstal Dependensi
yarn add  babel-plugin-istanbul --dev
  1. Menginstal plugin cypress
yarn add  @cypress/code-coverage --dev
  1. Mengonfigurasi babel
// web/config/config.ts
extraBabelPlugins: [
    ['babel-plugin-istanbul',  {
      "exclude": ["**/.umi", "**/locales"]
    }],
  ],
  1. Mengonfigurasi plugin cakupan kode Cypress
// web/cypress/plugins/index.js
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  return config;
};

// web/cypress/support/index.js
import '@cypress/code-coverage/support';
  1. Mendapatkan Cakupan Pengujian

Setelah konfigurasi selesai, kita perlu menjalankan kasus uji. Setelah kasus uji dijalankan, Cypress akan menghasilkan folder coverage dan .nyc_output, yang berisi laporan cakupan pengujian.

1.png

Informasi cakupan pengujian akan muncul di konsol setelah menjalankan perintah berikut.

npx nyc report --reporter=text-summary

2.png

Di bawah direktori coverage, akan tersedia laporan halaman yang lebih detail, seperti yang ditunjukkan di sini.

3.png

  • Statements menunjukkan apakah setiap pernyataan dieksekusi
  • Branchs menunjukkan apakah setiap blok if dieksekusi
  • Functions menunjukkan apakah setiap fungsi dipanggil
  • Lines menunjukkan apakah setiap baris dieksekusi

Ringkasan

Tingkat cakupan pengujian mencerminkan kualitas proyek hingga batas tertentu. Saat ini, cakupan E2E front-end APISIX Dashboard telah mencapai 71,57%. Kami akan terus bekerja sama dengan komunitas untuk meningkatkan tingkat cakupan pengujian dan menyediakan produk yang lebih andal dan stabil bagi pengguna.

Tags:
APISIX Basics
Testing
Plugin