Front-end testa piramīda: kā pārdomāt testēšanu

Ja pārbaudāt priekšējās lietotnes, jums jāzina par priekšgala testa piramīdu .

Šajā rakstā mēs apskatīsim, kas ir priekšējās daļas testa piramīda un kā to izmantot, lai izveidotu visaptverošus testa komplektus.

Priekšējā testa piramīda

Front-end testa piramīda ir priekšstats par to, kā būtu jā strukturē front end test suite.

Ideālais testu komplekts sastāv no vienības testiem, dažiem momentuzņēmumu testiem un dažiem gala (e2e) testiem.

Šī ir testa piramīdas atjaunotā versija, kas īpaši paredzēta front-end lietojumprogrammu testēšanai.

Šajā rakstā mēs izskatīsim, kā izskatās katrs no šiem testa veidiem. Lai to izdarītu, mēs izveidosim testa komplektu lietotnei.

Lietotne

Lai detalizēti uzzinātu par priekšgala testa piramīdu, apskatīsim, kā pārbaudīt tīmekļa lietotni.

Lietotne ir vienkārša modāla lietotne. Noklikšķinot uz pogas, modāls tiek atvērts, un, noklikšķinot uz pogas Labi, modāls tiek aizvērts.

Mēs izveidosim lietotni, izmantojot komponentu sistēmu. Neuztraucieties par specifiku - mēs saglabāsim šo augsto līmeni.

Lietotne ir izgatavota no trim komponentiem - Buttonkomponenta, Modalkomponenta un Appkomponenta.

Pirmie testi, kurus mēs rakstīsim, ir vienības testi. Priekšējā testa piramīdā lielākā daļa mūsu testu ir vienības testi.

Vienības testi

Vienība pārbauda koda bāzes vienības.

Viņi tieši izsauc funkcijas - vai vienības - un pārliecinās, ka tās atgriež pareizo rezultātu.

Mūsu lietotnē mūsu sastāvdaļas ir vienības. Tātad mēs rakstīsim pogas un modāla vienības testus. Mūsu Appkomponentam nav jāraksta testi, jo tajā nav loģikas.

Vienības testi seklā atveido komponentus un apgalvo, ka tie uzvedas pareizi, kad mēs ar tiem mijiedarbojamies.

Sekla renderēšana nozīmē, ka mēs komponentu padarām par vienu līmeni dziļu. Tādā veidā mēs varam pārliecināties, ka mēs testējam tikai komponentu, mūsu vienību, nevis bērnu komponentu vairākos līmeņos uz leju.

Veicot testus, mēs aktivizēsim darbības ar komponentiem un pārbaudīsim, vai komponenti darbojas kā paredzēts.

Mēs kodu neizskatīsim. Bet mūsu komponentu specifikācijas izskatās šādi:

  • Modal ir klase ir aktīva, ja displayModal ir taisnība
  • Modal nav klases is-active, ja displayModal ir nepatiesa
  • Kad tiek noklikšķināts uz pogas Veiksme, pārslēdziet modālos zvanus
  • Kad tiek noklikšķināts uz pogas Dzēst, tiek pārslēgti modālie zvani
  • Noklikšķinot uz pogas, pogas zvani toggleModal

Mūsu testi lēnām atveidos komponentus un pēc tam pārbaudīs, vai darbojas katra specifikācija.

Ir daži iemesli, kāpēc vienības testiem vajadzētu veidot lielāko daļu mūsu testu komplekta:

Vienību testi ir ātri.

Dažu sekunžu laikā darbojas simtiem vienību testu komplekts.

Tas padara vienības testus noderīgus izstrādei. Pārstrādājot kodu, mēs varam mainīt kodu un veikt vienības testus, lai pārbaudītu, vai izmaiņas nesabojāja komponentu. Dažu sekunžu laikā mēs uzzināsim, vai kaut ko pārkāpām, jo ​​viens no testiem neizdosies.

Vienības testi ir granulēti

Citiem vārdiem sakot, tie ir ļoti specifiski.

Ja vienības pārbaude neizdodas, sadalītais tests mums pateiks, kā un kāpēc tas neizdodas.

Vienības testi ir labi, lai pārbaudītu sīkāku informāciju par mūsu lietojumprogrammas darbību. Tie ir labākais rīks, ko izmantot, izstrādājot, it īpaši, ja sekojat izstrādei, kuras pamatā ir tests.

Bet viņi nevar visu pārbaudīt.

Lai pārliecinātos, ka mēs atveidojam pareizo stilu, mums jāizmanto momentuzņēmumu testi.

Momentuzņēmuma testi

Momentuzņēmuma testi ir testi, kas nofotografē jūsu renderēto komponentu un salīdzina to ar iepriekšējo komponenta attēlu.

Labākais veids, kā uzrakstīt momentuzņēmuma testus JavaScript, ir Jest.

Tā vietā, lai nofotografētu atveidoto komponentu, Jests uzņem momentu no atveidotā komponenta marķējuma. Tas padara Jesta momentuzņēmumu testus daudz ātrāk nekā tradicionālie momentuzņēmumu testi.

Lai reģistrētu momentuzņēmuma testu Jest, jums jāpievieno kaut kas līdzīgs zemāk redzamajam kodam:

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

Kad esat reģistrējis momentuzņēmumu, Jests rūpējas par visu pārējo. Katru reizi, kad tiek veikti vienības testi, tas atjauno momentuzņēmumu un salīdzina to ar iepriekšējo momentuzņēmumu.

Ja kods mainās, Jests uzmet kļūdu un brīdina, ka marķējums ir mainījies. Pēc tam izstrādātājs var manuāli pārbaudīt, vai neviena klase nav nejauši izdzēsta.

Turpmākajā testā kāds ir izdzēsis modal-card-footmācību priekšmetu no 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.