Piramid Ujian Depan: Cara Memikirkan Semula Ujian Anda

Sekiranya anda menguji aplikasi hujung depan, anda harus mengetahui mengenai piramid ujian bahagian depan .

Dalam artikel ini kita akan melihat apa itu piramid ujian depan, dan bagaimana menggunakannya untuk membuat rangkaian ujian komprehensif.

Piramid ujian bahagian depan

Piramid ujian front-end adalah gambaran bagaimana suite ujian akhir harus disusun.

Suite ujian yang ideal terdiri daripada ujian unit, beberapa ujian snapshot, dan beberapa ujian akhir ke akhir (e2e).

Ini adalah versi piramid ujian yang diperbaharui, yang khusus untuk menguji aplikasi front-end.

Dalam artikel ini kita akan melihat bagaimana setiap jenis ujian ini. Untuk melakukannya, kami akan membuat suite ujian untuk aplikasi contoh.

Aplikasi itu

Untuk mengetahui mengenai piramid ujian bahagian depan secara terperinci, kami akan melihat cara menguji aplikasi web.

Aplikasi ini adalah aplikasi mod sederhana. Mengklik butang akan membuka modal, dan mengklik butang OK pada modal menutup modal.

Kami akan membina aplikasi dari kerangka berdasarkan komponen. Jangan risau tentang spesifiknya - kami akan mengekalkan tahap tinggi ini.

Aplikasi ini dibuat daripada tiga komponen - Buttonkomponen, Modalkomponen dan Appkomponen.

Ujian pertama yang akan kami tulis adalah ujian unit. Dalam piramid ujian depan, sebahagian besar ujian kami adalah ujian unit.

Ujian unit

Unit menguji unit ujian pangkalan kod.

Mereka memanggil fungsi - atau unit - secara langsung dan memastikan mereka mengembalikan hasil yang betul.

Dalam aplikasi kami, komponen kami adalah unit. Oleh itu, kami akan menulis ujian unit untuk Button dan Modal. Tidak perlu menulis ujian untuk Appkomponen kami kerana tidak ada logik di dalamnya.

Ujian unit akan menjadikan komponen cetek dan menegaskan bahawa mereka berkelakuan betul semasa kita berinteraksi dengannya.

Rendering cetek bermaksud kita menjadikan komponen satu tahap lebih dalam. Dengan cara ini kita dapat memastikan bahawa kita hanya menguji komponen, unit kita, dan bukan komponen anak beberapa tahap ke bawah.

Dalam ujian kami, kami akan mencetuskan tindakan pada komponen dan memeriksa apakah komponen tersebut berperilaku seperti yang diharapkan.

Kami tidak akan melihat kodnya. Tetapi spesifikasi untuk komponen kami kelihatan seperti ini:

  • Modal mempunyai kelas aktif apabila displayModal benar
  • Modal tidak mempunyai kelas aktif apabila displayModal salah
  • Modal memanggil toggleModal apabila butang kejayaan diklik
  • Modal memanggil toggleModal apabila butang hapus diklik
  • Butang memanggil toggleModal apabila butang diklik

Ujian kami akan menjadikan komponennya cetek dan kemudian memeriksa setiap spesifikasi berfungsi.

Terdapat beberapa sebab mengapa ujian unit merangkumi sebahagian besar rangkaian ujian kami:

Ujian unit cepat.

Rangkaian ujian beratus unit berjalan dalam beberapa saat.

Ini menjadikan ujian unit berguna untuk pembangunan. Semasa memfaktur semula kod, kita dapat mengubah kodnya, dan menjalankan ujian unit untuk memeriksa perubahan tidak memecahkan komponen. Kami akan mengetahui dalam beberapa saat jika kami melanggar apa-apa, kerana salah satu ujian akan gagal.

Ujian unit adalah berbutir

Dengan kata lain, mereka sangat spesifik.

Sekiranya ujian unit gagal, ujian yang rosak akan memberitahu kita bagaimana dan mengapa ia gagal.

Ujian unit bagus untuk memeriksa perincian bagaimana aplikasi kita berfungsi. Mereka adalah alat terbaik untuk digunakan ketika membangun, terutamanya jika anda mengikuti pengembangan yang didorong oleh ujian.

Tetapi mereka tidak dapat menguji semuanya.

Untuk memastikan kita memberikan gaya yang betul, kita perlu menggunakan ujian snapshot.

Ujian snapshot

Ujian snapshot adalah ujian yang mengambil gambar komponen yang anda berikan dan membandingkannya dengan gambar komponen anda sebelumnya.

Cara terbaik untuk menulis ujian snapshot dalam JavaScript adalah dengan Jest.

Daripada mengambil gambar komponen yang diberikan, Jest mengambil gambar tanda komponen yang diberikan. Ini menjadikan ujian snapshot Jest jauh lebih pantas daripada ujian snapshot tradisional.

Untuk mendaftarkan ujian snapshot di Jest, anda perlu menambahkan sesuatu seperti kod di bawah:

const renderedMarkup = renderToString(ModalComponent)expect(renderedMarkup).toMatchSnapshot()

Sebaik sahaja anda mendaftarkan gambar, Jest akan menguruskan semua perkara lain. Setiap kali ujian unit dijalankan, ia menghasilkan semula snapshot dan membandingkannya dengan snapshot sebelumnya.

Sekiranya kodnya berubah, Jest melemparkan ralat dan memberi amaran bahawa markup telah berubah. Pembangun kemudian dapat memeriksa secara manual bahawa tidak ada kelas yang dihapus secara tidak sengaja.

Dalam ujian di bawah, seseorang telah memadamkan modal-card-footkelas dari er>.

Snapshot tests are a way of checking nothing has changed about the style or markup of a component.

If the snapshot tests pass, we know our code change didn’t affect the display of our components.

If the tests fail, then we know that we did affect the render of the components and can check manually that the style is still correct.

You should have at least 1 snapshot test per component. A typical snapshot test renders the component with some state to check it renders correctly.

Now we have unit tests and snapshot tests, it’s time to look at end to end (e2e) tests.

End to end tests

End to end (e2e) tests are high-level tests.

They perform the same actions as we would if we tested an App manually.

In our app we have a user journey. When the user clicks on the button the modal will open, when they click the button in the modal the modal closes.

We can write an end to end test that runs through this journey. The test will open the browser, navigate to the webpage, and run through each action to make sure the app is behaving correctly.

These tests tell us that our units are working together correctly. It gives us high confidence that the main functionality of the app is working.

There are a few ways to write end to end tests for JavaScript applications. There are programs like test cafe that record you performing actions in a browser and replay them as tests.

There are also projects like nightwatch that let you write the tests in JavaScript. I would recommend using a library like nightwatch. It’s easy to pick up, and the tests run faster than recorded tests.

That said, nightwatch tests are still relatively slow. A suite of 200 unit tests takes seconds to run, a suite of 200 end to end tests takes minutes to run.

The other problem with end to end tests is that they are difficult to debug. When a test fails, it’s hard to find out why it failed, because the tests cover a lot of functionality.

Conclusion

To test front-end component based web apps effectively, you need to three types of tests. Unit tests, snapshot tests, and e2e tests.

You should have multiple unit tests for each component, one or two snapshot tests per component, and one or two end to end tests that test multiple components connected together.

Overall unit test will make up the bulk of your tests, you’ll have some snapshot tests, and a few e2e tests.

If you follow the front-end testing pyramid, you’ll create maintainable web apps with killer test suites.

You can see an example repository of the app with snapshot tests, unit tests, and end to end tests on GitHub.