Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Vitest Browser Mode: Running Angular Tests in Real Chromium, Firefox and WebKit
Test layout-dependent behavior (IntersectionObserver, @defer on viewport, sticky positioning, appearance) in a real browser with Vitest browser mode, not in jsdom. On Bookstore we show an infinite scroll bug that loaded only 24 of 30 books on a wide screen while the jsdom test passed, with a separate test target, the MSW worker, toMatchScreenshot and Chromium and WebKit runs.
Component Harnesses: Using CDK Harnesses, Writing Your Own and Decoupling Tests from Markup
A component harness puts an API between the test and the DOM: when the markup changes, only the harness changes, not the tests. On Bookstore we show Angular Material's select and dialog harnesses, documentRootLoader and the animation setting, our own harness with HarnessPredicate for RatingInput, and when to choose a harness or Testing Library, all with real runs.
Faking Dependencies in Angular Tests: Provider Overrides, vi.fn, ng-mocks, MSW and RouterTestingHarness
Fake what leaves the process, such as HTTP, time and browser APIs, and keep cheap dependencies like CartStore and the router real: a test that mocked everything missed a bug that emptied the cart before placing the order. On Bookstore's checkout and order detail pages we show provider overrides, vi.fn, vi.spyOn, hand-written fakes, child components with ng-mocks, network-level fakes with MSW 3 and RouterTestingHarness tests with the real routes, all with real runs.
Testing Like a User with Angular Testing Library: render, Role Queries and user-event
Testing like a user means finding elements by role and label and interacting in the order a user does: the test written with fireEvent.input failed because it skipped the blur that marks the field as touched, while the user-event version passed. On Bookstore's Signal Forms checkout form we cover render(), query priority, error messages tied with aria-describedby, findBy for async content, navigation with routes and a comparison with the same TestBed test, all with real runs.
Angular Component Tests: setInput, outputs, whenStable in Zoneless Apps, @defer and Host Components
In Angular 22, old tests that assign through componentInstance and call detectChanges fail, because default OnPush and the zoneless fixture only process changes Angular is notified about; pass values with setInput and read the DOM after whenStable. With Bookstore's BookCard, QuantityInput, CartSummary and CatalogPage components we cover outputs, model(), content projection, @defer and getLastFixture, all with real runs.
Testing Services, Pipes, Signals and Resources in Angular: TestBed.inject, HttpTestingController and Fake Timers
httpResource reports loading right away but sends the request inside an effect; a test needs TestBed.tick() to see the request and whenStable() to read the value after the response. Using Bookstore's CatalogService, PricePipe and RecentlyViewed, we show runInInjectionContext, effect tests, cancellation and the error path with HttpTestingController, fake timers for debounced(), and the resource timing change in Angular 22, all with real runs.
Testing Infrastructure in Angular 22: Vitest, the unit-test Builder, jsdom and What to Test at Which Level
Angular 22's unit-test builder runs Vitest with isolation off, so state kept in a module can carry over between test files depending on the worker count, and a suite that is green locally turns red in CI. In this post we map the test levels for Bookstore's Angular client, set up the angular.json test target with setupFiles, providersFile and runnerConfig, measure jsdom against happy-dom, and run and debug single tests.
The Limits of TDD: The "Is TDD Dead?" Debate, Research, When Not to TDD and TDD with AI Agents
TDD is a trade-off, not a ritual: research shows a small quality gain and mixed productivity results, and suggests the benefit may come from short, steady steps more than from the test-first order. We cover the 2014 "Is TDD Dead?" debate, where TDD falls short (spikes, UI, performance), rules against AI coding agents' tendency to skip and loosen tests, and a CI step that catches it, with real output.
TDD for Bug Fixes and Legacy Code: Red Test First, Characterization and Sprouting New Code
When fixing a bug, TDD starts with a red test that reproduces it at the lowest right level; in legacy code without tests, characterization tests first record today's behavior, and a new rule is grown test-first in a separate sprout and wired in with one line. In an untested CheckoutService we see, with real output, why a characterization test that had recorded the bug turns red after the fix, and how the two kinds of test differ.
TDD in Angular: Building a Signal-Based Component Test-First with Vitest
Starting TDD in Angular from a plain TypeScript function instead of the component keeps tests fast and the component thin. With Angular 22 and Vitest we grow cart totals while catching a floating point surprise, a CartSummary component with signal inputs using whenStable and setInput, and an HttpClient service by writing the request first with provideHttpClientTesting; and we see with real output why fakeAsync fails in a zoneless project.
Outside-In TDD: The Double Loop, From Acceptance Test to Domain, and London vs Classical in Practice
Outside-in TDD builds an outer loop with an acceptance test that stays red until the feature is done, and an inner loop of unit tests that grow the pieces to make it pass. We start POST /api/cart/{id}/coupon as a walking skeleton with WebApplicationFactory, discover collaborators with mocks, test the same handler the classical way and compare, with real output, which tests break under a behavior-preserving refactoring.
Practicing TDD with Katas: String Calculator, Bowling Game and Deliberate Repetition
A kata is practicing the TDD rhythm through deliberate repetition, solving a small problem with a known answer many times; success means step quality, not finishing. We cover coding dojo, randori and ping-pong formats, and solve String Calculator with C# and xUnit v3 Theory and Bowling Game with TypeScript and Vitest, following the test list, the critical decision points and variations that make a kata harder, with real output.