Belajar Quality Engineer - Frontend Quality Engineering

#Pendahuluan

Setelah di episode 5 kita mempelajari API & microservices quality, pada episode ini kita mempelajari frontend quality engineering — bagaimana menguji frontend secara komprehensif. Frontend testing harus cover component behavior, visual appearance, accessibility, dan user experience.

Mengapa frontend quality engineering penting? Karena frontend adalah apa yang dilihat dan digunakan pengguna. Bug di frontend langsung terlihat dan mempengaruhi user experience secara signifikan.

#Component Testing

#Component Test Strategy

text

Component Testing:
├── Unit Component Tests:
│   ├── Test component behavior
│   ├── Mock props & events
│   ├── Fast execution
│   └── High coverage
├── Integration Component Tests:
│   ├── Test component interactions
│   ├── Real DOM manipulation
│   └── Event handling
└── Snapshot Tests:
    ├── Visual regression
    ├── HTML structure
    └── CSS changes

#Contoh Component Test

typescript

// Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';
 
describe('Button', () => {
  it('renders with text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });
 
  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);
    fireEvent.click(screen.getByText('Click me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
 
  it('is disabled when disabled prop is true', () => {
    render(<Button disabled>Click me</Button>);
    expect(screen.getByText('Click me')).toBeDisabled();
  });
});

#Visual Regression Testing

#Tools

text

Visual Regression Tools:
├── Percy:
│   ├── BrowserStack product
│   ├── Visual diff
│   └── CI integration
├── Chromatic:
│   ├── Storybook integration
│   ├── Visual review
│   └── UI review workflow
├── Playwright:
│   ├── Screenshot comparison
│   ├── Built-in
│   └── Custom thresholds
└── Applitools:
    ├── AI-powered
    ├── Visual AI
    └── Cross-browser

#Contoh Visual Test

typescript

// visual.spec.ts
import { test, expect } from '@playwright/test';
 
test('homepage visual regression', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png');
});
 
test('button visual states', async ({ page }) => {
  await page.goto('/');
  const button = page.locator('#submit-button');
  await expect(button).toHaveScreenshot('button-default.png');
  await button.hover();
  await expect(button).toHaveScreenshot('button-hover.png');
  await button.click();
  await expect(button).toHaveScreenshot('button-clicked.png');
});

Note

Visual regression testing menghasilkan banyak false positives karena rendering bisa berbeda sedikit di berbagai environment. Gunakan threshold yang tepat dan review manual untuk membedakan perubahan yang disengaja dari regression.

#Accessibility Testing

text

Frontend A11y Testing:
├── Automated:
│   ├── axe-core
│   ├── Lighthouse
│   └── jest-axe
├── Manual:
│   ├── Keyboard navigation
│   ├── Screen reader testing
│   └── Color contrast
└── Integration:
    ├── CI/CD integration
    ├── PR checks
    └── Regression prevention

#Practical: Frontend Quality Checklist

yaml

frontend_quality:
  component_testing:
    - unit_tests: "per component"
    - integration_tests: "component interactions"
    - snapshot_tests: "visual regression"
  accessibility:
    - automated_scan: "axe-core"
    - manual_keyboard: "tab navigation"
    - screen_reader: "NVDA/VoiceOver"
  visual:
    - screenshot_comparison: "per page"
    - responsive_test: "breakpoints"
    - cross_browser: "Chrome, Firefox, Safari"
  performance:
    - lighthouse_score: "> 90"
    - bundle_size: "< threshold"
    - lazy_loading: "implemented"

Tip

Frontend quality engineering harus balance antara automated dan manual testing. Automated testing menangkap regression, tapi manual testing diperlukan untuk usability dan accessibility.

#Penutup

Pada episode 6 ini, kalian telah mempelajari frontend quality engineering.

Inti yang harus dibawa pulang:

Component testing: unit, integration, snapshot tests.
Visual regression: Percy, Chromatic, Playwright screenshots.
Accessibility: automated (axe) + manual (keyboard, screen reader).
Balance antara automated dan manual testing.

Di episode 7 selanjutnya, kita akan membahas backend & data quality — bagaimana menguji backend logic, database, dan data quality. Sampai jumpa di episode 7!