DEV Community

Test Driven Development in an Angular World

Catalin Ciubotaru on April 26, 2019

Wait! What is TDD? So, you keep hearing about this TDD thing and want to start using it but have no idea why. Don’t worry, the internet ...
Collapse
 
didirare profile image
didi-rare

Hi Catalin,

Great article you put up here, i am quite new to TDD and your article helped clarify somethings.

However in the farouriteMovieService test section there is the "jest" variable you used, and i was wondering how you got it. Is it from a library you added to the project?

Collapse
 
cthulhu profile image
Catalin Ciubotaru

Hello didi-rare!

Glad to hear that it’s helpful!
So, jest is an alternative to karma. It’s a test suite.
The variable comes from the “jest” package.
Let me knowing you need more info.

Collapse
 
didirare profile image
didi-rare

Hi,

Thanks for your reply, I figured Jest is a test suite when i did some research, i had installed and configured it following their guide, however the test fails when i run it. I get this error message "error TS2304: Cannot find name 'jest'."

I had installed the jest package, @types/jest, jest-preset-angular and added jest in types [] in all tsconfig.*.json files and i still get the same error.

Do you have any pointers?

I use Webstorm IDE.

Thread Thread
 
cthulhu profile image
Catalin Ciubotaru

So, all I have it this in my tsconfig.spec.json:

"types": ["jest", "node"]

Keep in mind they are not needed in all the others tsconfig.*.json files.

Also make sure you also install jest, not just jest-preset-angular.
So, you need jest, @types/jest and jest-preset-angular; then add the "jest" types to tsconfig.spec.json and that should be it.

Sorry for the late answer. Holiday more :)

Collapse
 
siddrc profile image
Siddharth Roychoudhury

You have not spoken about e2e, which actually is the place where TDD originates from in-case of front-end, where e2e tests the entire page , where page is filled with components.
So we start by writing the spec for the entire page, and then slice out the spec into much smaller pieces and draw out the unit tests/spec for each component.
After writing one e2e spec, we see it fail, then move on to individual component unit tests one by one in the same flow as you mentioned.Once the unit tests pass, we then check e2e is passing or not. Unit tests check the component in isolation, e2e check entire pages or user flows from page to page and test entire frontend application.May be I will add a link here for E2E Testing in Angular using TDD approach.

Collapse
 
muhammedmoussa profile image
Moussa

I think e2e doesn't mean exactly fronted only, this case suits should cover case from the user interaction in the UI to server request till server response also.
Another point discussed tests can be considered as an integration test not only unit test which is one of its goals handle integration between components logic and template.

Collapse
 
cthulhu profile image
Catalin Ciubotaru

The concept is the same. It applies to unit tests, e2e tests etc.
This was mainly to show a simple approach to TDD and to demystify the difficulty of it.

Collapse
 
muhammedmoussa profile image
Moussa

Cool, thank you!

Collapse
 
ruslangonzalez profile image
Ruslan Gonzalez

Great article. Thanks!!

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Thank you

Collapse
 
ciglesiasweb profile image
Carlos Iglesias

Uaoooo!