Angular Testing In Depth (Signals Edition)

Explore why vitest powers angular tests, delivering faster jsdom-based runs than Karma and Jasmine, plus batteries-included tooling, jest-compatible assertions, and module mocking.

Write your first hello world test in VTest by testing a calculator's add function. Create a calculator.spec.ts, use describe and it with expect to verify the result is 5.

Learn to skip and selectively run tests in VTest using it.skip, describe.skip, and it.only, with skipIf in CI or browser contexts before introducing mocks and spies.

Learn how Vitest spies observe a function by wrapping an object's method, allowing assertions on call count and arguments without changing the underlying add function.

Understand mocking and spying in vitest, learn to replace a function with a mock return value to test in isolation and avoid real http calls.

Explore pure VTEST mocks to replace dependencies entirely, creating a fake implementation that always returns 10. Learn to reset mocks between tests to ensure isolation and reliable assertions.

Learn how mock clearing resets a mock's state between assertions, using a spy on a calculator add method to demonstrate clearing call history with mockClear.

Learn how Vitest mock resetting clears mock history and restores default behavior for spies and pure mocks, then distinguishes reset from clearing and restoration of original function or undefined.

Learn how mock restoring disconnects a spy from the original calculator add function, and how clear and reset revert mocking behavior back to calling the real implementation.

Discover how to guarantee test isolation by clearing, resetting, and restoring mocks and spies before each test, and optionally configure the v test setup to keep specs independent.

Learn fundamentals of angular component testing by building a hello world component test from scratch, using the test bed, fixture, and debug element to verify dom rendering and change detection.

Debug Angular tests by running ng test --debug, setting breakpoints, and attaching a debugger like WebStorm to inspect variables and evaluate expressions.

Dive into testing signal-based angular components with the tabs component, showcasing tab data model, signal inputs, outputs, and a writable active tab model that synchronizes active state with the parent.

Set up the initial Angular test suite for the tabs component with mock tabs (beginner and advanced), wire the tab change signal, and verify component creation.

Demonstrates how to add a functional test to verify the tabs component renders tab buttons from input signal and checks beginner and advanced labels.

Learn the correct folder for the tab component specs in Angular testing, name the spec after the component, and place it with the component in the same folder.

Test the tabs component to ensure the Active CSS class highlights the selected tab, specifically the Advanced tab, by emitting the value and asserting the class on the button.

Test the active tab model by simulating a tab click to emit a new value, verifying the active tab signal outputs 'advanced' and validating the tab changed event.

Test the tabs component to ensure a tab click emits the tab changed output, using vtest spy on emit and verifying advanced emits once.

Test a purely presentational Angular component, the courses card list, by supplying mock course list, handling edit events through a dialogue, and validating display with a test bed and fixture.

Write the first test for the CoursesCardList component to ensure two mock courses render as two CourseCard elements in the DOM, with the first card header showing beginner course.

Test the CoursesCardList component to ensure the NoCoursesFound message appears with an empty courses array. Use the NoCourses selector and verify the text in the DOM.

Angular testing in depth (signals edition) demonstrates testing the interaction between the course card list component and the edit course dialog by simulating a click and verifying the dialog appears.

Learn to test a top-level Angular container component by mocking http requests for the courses service, verify data flows from the all courses signal to the dom.

Review the test suite skeleton for the courses component, set up a module with the http client testing module and http testing controller to mock requests.

Learn to mock http requests in Angular tests with the http testing controller, verify a component loads courses from a service, and validate dom with flush and when stable.

Validate that clicking the advanced tab displays only the advanced courses in the DOM via a mocked HTTP response. Confirm no extra HTTP requests occur after the interaction.

Test a complex signal-based component with pagination and a courses service using mocks and fake timers. Explore resource-driven loading, RxJS debouncing, and router-provided course data for robust tests.

Develop a test suite for the course page component using a pure mock of the courses service and a static activated route, to verify loading lessons and signal-based updates.

Explain how to write the first test for the course page component, validating initial load of three lessons via ngOnInit, triggering data fetch, and asserting correct parameters and DOM output.

Test the loading indicator logic by verifying the loading spinner appears while fetching, using resource.isLoading, triggering change detection after init, querying the DOM, and asserting the loading flag emits true.

Explore testing the pagination logic in an Angular component by clicking the next button to load the second page, using a mock courses service.

Test the previous page navigation by simulating a click on the previous button from page two, then verify it loads page one with the lessons using a mock sequence.

Test the sorting logic of a paginated table component in angular by loading the first page, toggling the sort direction, and verifying ascending and descending orders with mock lessons.

Test the page size logic of a paginated component by selecting 10 items per page, loading new data, and asserting the component stays on the first page with ten lessons.

Learn to test debounced search logic with vtest fake timers, ensuring no backend request until 400 milliseconds of input stability, using rxjs debounceTime and toObservable/toSignal transitions.

Test debouncing logic with fake timers in angular testing. Load the initial lessons page, trigger changes synchronously, advance timers, and verify DOM rendering and data loading.

Learn to test Angular HTTP services with the HTTP testing controller by building a skeleton for the Courses service, including in-memory state, reloadAllCourses, and saveCourse workflows.

Learn to test loading courses in angular using the httpTestingController to mock http get requests to /api/courses, flush mock data, and verify results and in-memory state.

Learn how to test the findCourseById method, asserting a backend get for id 1 returns a promise and yields a course with id 1 and the description 'beginner course'.

Test the courses service findLessons method by asserting that provided parameters are sent as http query parameters to the backend api /api/lessons, and that the response payload matches mock data.

Test the save course method in the Angular courses service by issuing a put to /api/courses/{id} with changes in the body and verify in-memory updates for the targeted course only.

Learn to test an angular pipe, the duration format pipe, by instantiating its pure function class and verifying outputs like 5 hours and 30 minutes, including null and undefined inputs.

Explore testing Angular attribute directives with a practical demo of the app highlight directive, covering hover behavior, default and custom colors, and test host setup for fixtures and dom queries.

Test the highlight directive’s reaction to mouse enter and mouse leave, validating background color changes to green on hover and resets on exit using dom events.

Finish the test suite for the highlight directive, validating default behavior, applying a custom color, and ensuring no highlight on non-directive elements while introducing forms testing.

learn how to test angular signal forms by building a test suite for the courses dialog component, mocking services and dialog data, validating required fields and save flows.

Set up the test suite for the courses dialog by creating a mock courses service and a mock dialog reference, then configure the test bed with providers.

Assert that the dialog form initializes from the injected course data, populating description, category, long description, and released at field. Verify the form's validity with signals and change detection.

Test the description field's error handling by setting it empty, marking it touched, and verifying the 'description is required' message and save button disabled, with refactoring for all fields.

Refactors form field error tests into a reusable test field error function, parameterized by field state, selector, and expected message, then applies it to all fields before saving.

illustrate testing the save course flow with vitest objectContaining to assert partial changes passed to the courses service and confirm the dialogue closes.

Test Angular routing logic by validating the integration between the course resolver, router activated route, and course page, using the router testing harness for focused integration tests.

Set up skeleton of the test suite for course resolver by mocking the courses service with a pure vtest mock, then use a router testing harness to test resolver.

Learn to test a router resolver by mocking a courses service, navigating by url, and asserting correct component rendering, data flow via activated route, and final dom output.