Πείτε μας για την εμπειρία σας με δοκιμές σε έργα…

Στα έργα μου χρησιμοποίησα διάφορους τύπους δοκιμών για την εξασφάλιση της ποιότητας του frontend:

Μονάδες δοκιμών: Με τη χρήση Jest και React Testing Library για απομόνωση και έλεγχο μεμονωμένων στοιχείων, λειτουργιών και modules. Αυτό βοηθά στην ταχεία ανίχνευση λογικών σφαλμάτων σε μικρά, ανεξάρτητα τμήματα κώδικα.

// Παράδειγμα μονάδας δοκιμής για το στοιχείο Button με Jest και React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('απεικονίζει το κουμπί με σωστό κείμενο', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Ολοκληρωμένες δοκιμές: Για τον έλεγχο της αλληλεπίδρασης μεταξύ πολλαπλών στοιχείων ή modules. Αυτό διασφαλίζει ότι διαφορετικά μέρη του συστήματος λειτουργούν σωστά μαζί. Χρησιμοποίησα επίσης React Testing Library για αυτό.

// Παράδειγμα ολοκληρωμένης δοκιμής φόρμας και κουμπιού υποβολής
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('η υποβολή της φόρμας καλεί το onSubmit με τα σωστά δεδομένα', () => {
  const mockSubmit = jest.fn();
  render(<Form onSubmit={mockSubmit} />);

  const input = screen.getByLabelText(/Username:/i);
  const submitButton = screen.getByRole('button', { name: /Submit/i });

  fireEvent.change(input, { target: { value: 'testuser' } });
  fireEvent.click(submitButton);

  expect(mockSubmit).toHaveBeenCalledWith({ username: 'testuser' });
});

E2E δοκιμές: Σε ορισμένα έργα χρησιμοποίησα Cypress ή Playwright για δοκιμές σεναρίων χρήστη από την αρχή μέχρι το τέλος σε πραγματικό browser. Αυτό βοηθά να ελεγχθεί ότι η εφαρμογή λειτουργεί σωστά συνολικά για τον τελικό χρήστη.

// Παράδειγμα E2E δοκιμής με Cypress
// cypress/integration/todo.spec.js
περιγράφει('Todo App', () => {
  it('θα προσθέσει ένα νέο αντικείμενο todo', () => {
    cy.visit('/'); // Μετάβαση στη σελίδα της εφαρμογής

    cy.get('.new-todo').type('Buy milk{enter}'); // Εισαγωγή κειμένου και πάτημα Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Έλεγχος αριθμού στοιχείων
      .first()
      .should('have.text', 'Buy milk'); // Έλεγχος κειμένου του πρώτου στοιχείου
  });
});

Στιγμιότυπα (Snapshot) δοκιμές: Με το Jest για την καταγραφή της δομής του στοιχείου και τον εντοπισμό μη προγραμματισμένων αλλαγών στη δομή (π.χ. μετά από refactoring).

// Παράδειγμα Snapshot δοκιμής για το στοιχείο Card με Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Το Card εμφανίζεται σωστά', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Σύγκριση με αποθηκευμένο snapshot
});

Πιστεύω ότι η δοκιμή είναι σημαντικό μέρος της διαδικασίας ανάπτυξης, καθώς βοηθά στη διατήρηση της ποιότητας του κώδικα, διευκολύνει το refactoring και μειώνει την πιθανότητα σφαλμάτων στην παραγωγή. Πρακτικά γράφω δοκιμές παράλληλα με το νέο λειτουργικό κώδικα ή πριν από την διόρθωση σφαλμάτων (TDD προσέγγιση, όπου εφαρμόζεται).

Πείτε μας για την εμπειρία σας με δοκιμές σε έργα.