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.
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.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.