Bab 8: Testing Front-End

8.1 Pengantar Testing Front-End

Pengujian (testing) adalah proses penting dalam pengembangan perangkat lunak untuk memastikan bahwa kode yang ditulis berfungsi sesuai harapan dan bebas dari bug. Pengujian front-end fokus pada validasi tampilan dan interaksi antarmuka pengguna, memastikan bahwa elemen-elemen UI berfungsi dengan benar dan memberikan pengalaman yang diharapkan kepada pengguna.

Mengapa Pengujian Penting?

• Mencegah Bug: Membantu menemukan bug sebelum aplikasi dirilis.
• Meningkatkan Kualitas: Memastikan bahwa aplikasi berfungsi dengan benar di berbagai skenario dan perangkat.
• Mempercepat Pengembangan: Dengan otomatisasi pengujian, tim dapat merilis pembaruan dengan cepat dan percaya diri.
• Dokumentasi Kode: Pengujian juga berfungsi sebagai dokumentasi yang membantu pengembang memahami fungsionalitas kode.

8.2 Jenis-jenis Pengujian

Ada beberapa jenis pengujian yang digunakan dalam pengembangan front-end:

Unit Testing

Unit testing menguji bagian terkecil dari aplikasi, biasanya fungsi atau komponen individual, untuk memastikan mereka bekerja dengan benar.

Integration Testing

Integration testing menguji bagaimana berbagai unit atau komponen bekerja bersama untuk memastikan mereka berfungsi dengan benar saat digabungkan.

End-to-End (E2E) Testing

End-to-end testing menguji seluruh aplikasi dari awal hingga akhir untuk memastikan semua bagian bekerja bersama dengan baik. Pengujian ini mensimulasikan interaksi pengguna sebenarnya.

Snapshot Testing

Snapshot testing adalah teknik di mana UI komponen atau halaman disimpan sebagai snapshot dan dibandingkan dengan versi saat ini untuk mendeteksi perubahan yang tidak diinginkan.

8.3 Alat Pengujian

Berbagai alat pengujian tersedia untuk membantu pengujian front-end. Berikut adalah beberapa alat yang umum digunakan:

Jest

Jest adalah framework pengujian JavaScript yang sering digunakan untuk unit dan integration testing. Jest mudah digunakan dan mendukung snapshot testing.

Contoh Penggunaan Jest

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Enzyme

Enzyme adalah library pengujian untuk React yang memungkinkan Anda untuk menguji komponen React secara mendalam.

Contoh Penggunaan Enzyme

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

test('renders without crashing', () => {
  shallow(<App />);
});

Cypress

Cypress adalah alat pengujian end-to-end yang kuat dan modern untuk aplikasi web. Cypress memungkinkan Anda untuk menulis pengujian yang sangat mendekati interaksi pengguna sebenarnya.

Contoh Penggunaan Cypress

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io');
    cy.contains('type').click();
    cy.url().should('include', '/commands/actions');
    cy.get('.action-email').type('fake@email.com')
      .should('have.value', 'fake@email.com');
  });
});

Selenium

Selenium adalah alat pengujian yang memungkinkan Anda untuk menulis pengujian end-to-end yang bekerja di berbagai browser dan platform.

Contoh Penggunaan Selenium

const { Builder, By, until } = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser('firefox').build();
  try {
    await driver.get('http://www.google.com');
    await driver.findElement(By.name('q')).sendKeys('webdriver');
    await driver.findElement(By.name('btnK')).click();
    await driver.wait(until.titleIs('webdriver - Google Search'), 1000);
  } finally {
    await driver.quit();
  }
})();

8.4 Menulis Tes yang Efektif

Menulis tes yang efektif memerlukan pemahaman yang baik tentang apa yang harus diuji dan bagaimana cara menulis tes yang dapat diandalkan.

Best Practices untuk Menulis Tes

• Tulis Tes yang Terisolasi: Setiap tes harus independen dan tidak bergantung pada tes lainnya.
• Gunakan Mocking dan Stubbing: Gunakan mocking untuk mengisolasi unit yang diuji dari dependensinya.
• Uji Skenario Positif dan Negatif: Uji tidak hanya skenario yang diharapkan (positif) tetapi juga skenario yang tidak diharapkan (negatif).
• Tetapkan Asersi yang Jelas: Gunakan asersi yang jelas untuk mendefinisikan harapan Anda.
• Perbarui Tes Secara Teratur: Tes harus diperbarui setiap kali ada perubahan signifikan pada kode.

Contoh Menulis Tes yang Baik

Tes Unit

// calculator.js
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = { add, subtract };

// calculator.test.js
const { add, subtract } = require('./calculator');

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('subtracts 5 - 2 to equal 3', () => {
  expect(subtract(5, 2)).toBe(3);
});

Tes Integration

// api.js
async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

module.exports = fetchData;

// api.test.js
const fetchData = require('./api');

test('fetches data from an API', async () => {
  const data = await fetchData('https://jsonplaceholder.typicode.com/todos/1');
  expect(data).toHaveProperty('id', 1);
});

8.5 Mengintegrasikan Pengujian dengan CI/CD

Continuous Integration (CI) dan Continuous Deployment (CD) adalah praktik penting dalam DevOps yang mengotomatisasi pengujian dan deployment aplikasi. Mengintegrasikan pengujian dengan CI/CD memastikan bahwa setiap perubahan kode diuji sebelum diterapkan ke produksi.

Menggunakan GitHub Actions untuk CI/CD

GitHub Actions memungkinkan Anda untuk mengotomatiskan alur kerja pengembangan, termasuk pengujian dan deployment.

Contoh Konfigurasi GitHub Actions

name: Node.js CI

on: [push, pull_request]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install
    - run: npm test

8.6 Alat dan Praktik untuk Monitoring Kualitas Kode

Menggunakan alat untuk monitoring kualitas kode membantu dalam menjaga standar kode yang tinggi dan memastikan bahwa kode tetap sehat dan terjaga.

Linting

Linting adalah proses menggunakan alat untuk menganalisis kode sumber untuk menemukan masalah potensial. ESLint adalah salah satu alat linting yang paling populer untuk JavaScript.

Konfigurasi Dasar ESLint

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

Prettier

Prettier adalah code formatter yang memastikan kode Anda memiliki gaya konsisten.

Konfigurasi Dasar Prettier

// .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2
}

Integrasi Linting dan Formatting dengan CI

Mengintegrasikan linting dan formatting ke dalam CI/CD memastikan bahwa semua kode yang digabungkan ke basis kode mengikuti standar yang ditetapkan.

Contoh Konfigurasi GitHub Actions untuk Linting

name: Lint

on: [push, pull_request]

jobs:
  lint:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - run: npm install
    - run: npx eslint . --ext .js,.jsx,.ts,.tsx

Kesimpulan

Pengujian front-end adalah komponen vital dalam pengembangan aplikasi web modern. Dengan memahami berbagai jenis pengujian, menggunakan alat pengujian yang tepat, menulis tes yang efektif, dan mengintegrasikan pengujian ke dalam CI/CD, Anda dapat memastikan bahwa aplikasi Anda berfungsi dengan baik dan bebas dari bug. Bab berikutnya akan membahas cara menjaga dan meningkatkan keterampilan Anda sebagai front-end developer melalui pembelajaran berkelanjutan dan keterlibatan dalam komunitas pengembang.