Mengapa anda perlu mula menguji aplikasi anda pada Front-End?

Tetapi untuk apa ujian itu?

Bayangkan anda sedang membuat kek coklat dan hanya selepas ia siap anda sedar bahawa anda terlupa memasukkan gula ke dalam doh, bagaimana sekarang?! Fikirkan aplikasi anda seperti adunan kek ini, tanpa menguji ia mungkin berfungsi dengan baik pada mulanya, tetapi pada satu ketika semasa ia dicuba sesuatu mungkin tidak menjadi seperti yang diharapkan. Dan siapa yang menjamin bahawa masalah ini tidak akan berlaku?!

Berdasarkan contoh ini, ujian adalah bukti jisim kod anda, ia memastikan semuanya berada di tempat yang betul, walaupun apabila anda memutuskan untuk menambah lapisan baharu atau liputan fungsi.

Secara amnya, ujian automatik pada asasnya ialah kod yang dibina untuk menguji kod lain, memastikan aplikasi berfungsi dengan kualiti.
Memandangkan kualiti ialah kata kunci, adalah penting bahawa dalam pasukan kejuruteraan dan produk semua orang menyedari kepentingan dan nilai yang dijana oleh ujian, supaya mereka boleh disepadukan ke dalam penghantaran secara semula jadi.

Mengapa saya perlu menguji?

Saya bawa ke sini beberapa sebab untuk meyakinkan anda supaya mula melaksanakan ujian dalam kod anda sekarang:

Kod selamat gagal: Ujian membantu memastikan kod anda akan berfungsi tanpa pepijat, walaupun selepas anda menambah ciri baharu atau membuat perubahan.

Perubahan tanpa rasa takut: Penyelenggaraan aplikasi akan menjadi lebih selamat kerana anda akan dapat memfaktorkan semula atau mengemas kini kod anda tanpa perlu risau tentang memecahkan sesuatu kerana ujian memberi amaran kepada anda jika ada kesilapan.

Pembetulan lebih pantas: Dengan ujian automatik anda akan dapat menyelesaikan masalah dengan lebih mudah, menjimatkan lebih banyak masa

Kurang kejutan apabila menggunakan: Bolehkah anda bayangkan baru sahaja melakukan penempatan dan sudah menerima panggilan daripada pengguna yang mengalami ralat dalam sesuatu yang boleh diramalkan?! Ujian datang untuk membantu dengan tepat dengan pencegahan ini

Membantu anda dan rakan sekerja QA anda: Adakah anda tahu apabila anda menyelesaikan ciri itu dan menyerahkannya kepada QA untuk ujian dan dia memberi anda laporan semula dengan 357 perkara untuk diperbaiki? Masalah ini juga akan dikurangkan kerana anda akan meramalkan kebanyakan ralat yang mungkin akan dihadapinya

Apakah jenis ujian?

Terdapat banyak jenis ujian untuk dibangunkan pada bahagian hadapan, tetapi hari ini saya akan memfokuskan kepada tiga daripadanya: Ujian Antaramuka Pengguna (UI), Ujian Fungsian (Hujung-ke-Hujung) dan Ujian Pengesahan dan untuk Kepada contohi setiap daripada mereka, saya akan membuat ujian untuk skrin log masuk mudah dalam aplikasi dalam React.js menggunakan Perpustakaan Pengujian.

Ujian Antara Muka Pengguna (UI)

Ujian Antara Muka Pengguna (UI) menyemak sama ada komponen sedang dipaparkan seperti yang diharapkan dan, selain berdasarkan pemaparan, mereka menyemak kewujudan elemen penting, seperti medan borang, butang dan label.

it('should render login form', () => {
  render(<LoginForm  />);
  expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
  expect(screen.getByLabelText(/senha/i)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
});

Apa yang sedang diuji: Ujian ini memastikan bahawa komponen LoginForm memaparkan elemen antara muka yang penting: medan e-mel dan kata laluan serta butang log masuk. screen.getByLabelText mencari elemen mengikut label yang berkaitan dan screen.getByRole mencari butang mengikut teks dan fungsinya.

Ujian Fungsian (Hujung-ke-Hujung)

Ujian Fungsian atau ujian Hujung ke Hujung (E2E), sahkan keseluruhan fungsi aplikasi dari sudut pandangan pengguna, simulasi interaksi sebenar dengan antara muka, seperti mengisi borang dan mengklik butang, dan menilai sama ada Aplikasi bertindak balas kepada interaksi seperti yang diharapkan.

it('should call onLogin with the username and password when submitted', async () => {
  const handleLogin = jest.fn();
  render(<LoginForm onLogin={handleLogin} />);

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: 'larissa.tardivo@email.com.br' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123456' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledWith({
      email: 'larissa.tardivo@email.com.br',
      password: '123456'
    })
  })

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledTimes(1)
  })

});

Apa yang sedang diuji: Di sini, interaksi pengguna dengan borang log masuk disimulasikan dengan mengisi medan e-mel dan kata laluan, dan kemudian mengklik butang log masuk. Ujian ini juga menyemak bahawa fungsi onLogin dipanggil dengan data yang betul dan ia dipanggil tepat sekali.

Ujian Pengesahan

Ujian Pengesahan memastikan aplikasi mengesahkan input yang tidak sah dan memaparkan mesej ralat yang sesuai. Ujian ini penting untuk mengesahkan bahawa borang mengendalikan data yang salah dengan berkesan dan memberikan maklum balas yang mencukupi kepada pengguna.

test('should show error messages for invalid inputs', async () => {
  render(<LoginForm onLogin={jest.fn()} />);

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: 'invalid-email' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  expect(await screen.findByText(/Email inválido/i)).toBeInTheDocument();
  expect(await screen.findByText(/A senha deve ter pelo menos 6 caracteres/i)).toBeInTheDocument();
});

O que está sendo testado: Aqui verificamos se o formulário está exibindo mensagens de erro adequadas quando os campos de e-mail e senha forem preenchidos com dados inválidos. Fazemos a simulação da entrada de valores incorretos verificando se as mensagens de erro esperadas são exibidas.

Entendeu por que você deve testar?

Em um mundo onde a experiência do usuário e a qualidade do software são prioridade, os testes no front-end desempenham um papel fundamental em garantir que nossas aplicações não apenas funcionem corretamente, mas também proporcionem uma experiência fluida e sem bugs.

Ao integrar esses testes no seu fluxo de desenvolvimento, você está não apenas prevenindo problemas antes que eles se tornem grandes dores de cabeça, mas também construindo uma base de código mais confiável e resistente. Cada tipo de teste tem uma camada diferente de verificação, e juntos, eles formam uma grande camada de segurança que ajuda a garantir a qualidade e a funcionalidade de sua aplicação.

Lembre-se, assim como em uma receita de bolo onde cada ingrediente tem seu papel crucial, cada tipo de teste tem sua função específica no processo de desenvolvimento e desenvolver uma combinação equilibrada de testes vai além de uma prática recomendada, é uma necessidade para qualquer equipe que se empenha em entregar um software de alta qualidade.

Então, da próxima vez que você estiver desenvolvendo um novo recurso ou corrigindo um bug, pense nos testes como seus aliados indispensáveis. Eles são a chave para uma aplicação mais robusta, confiável e, acima de tudo, mais satisfatória para seus usuários.

Atas ialah kandungan terperinci Mengapa anda perlu mula menguji aplikasi anda pada Front-End?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!