[brandyscarney]

What This Does

Rewrites the Angular testing guide for the tools Angular apps from ionic start now use: Vitest for unit tests and Playwright for end-to-end tests. The guide still described Jasmine, Karma, and Protractor.

New Behavior

The Angular testing guide now:

• Lists the generated test scripts (test, test:unit, test:unit:watch, test:e2e) and the test setup files (src/test-setup.ts, vitest.config.mts).
• Teaches mocking with Vitest (vi.fn(), vi.spyOn()) instead of Jasmine spies.
• Shows how to test standalone components, services that use inject(), and HttpClient with provideHttpClient() and provideHttpClientTesting().
• Documents the end-to-end setup that ships with the starters (Playwright config, e2e/ folder, page objects, test environment, cleanup).

Changes

• Intro: describes the Vitest (@angular/build:unit-test) and Playwright setup, with a scripts table and a note to run npx playwright install. Links now point to angular.dev.
• Using Mocks: the Jasmine sections are replaced with vi.fn() and vi.spyOn().
• Pages and Components:
  • Shows the spec ionic generate page now creates, and how to fix the generated files' lint errors.
  • Adds a standalone TestBed example with providers.
• Waiting for Components: updated for Ionic 9. @ionic/angular is the custom elements build, and only @ionic/angular/lazy has el.componentOnReady(). The wording now matches the React and Vue pages.
• Services:
  • Uses TestBed.inject with a mocked dependency, plus a vi.spyOn alternative that relies on providedIn: 'root'.
  • The HTTP example uses provideHttpClient(), provideHttpClientTesting(), and TestBed.inject. These replace HttpClientTestingModule and the removed TestBed.get.
• Pipes: fixed toBeEqual, which isn't a real matcher, to toBe.
• End-to-end testing:
  • The Protractor content is replaced with Playwright: test structure, a page object, and a test script for the tabs starter.
  • Explains why Ionic's hidden pages need filter({ visible: true }).
  • The test environment uses an e2e Angular configuration served on port 4300, so Playwright never reuses a running dev server.
  • Cleanup uses a Playwright global teardown.
• Kept: "Testing Principles" is unchanged apart from grammar fixes. Most section anchors are kept.

Notes

• Preview: https://ionic-docs-git-fw-7709-angular-testing-ionic1.vercel.app/docs/angular/testing
• Stacked on docs: align tutorial, quickstart, and testing pages with the updated starters #4805; depends on the Angular starters PR (chore(angular): use Ionic lint and Prettier configs and add Playwright e2e tests starters#1916), which adds the Playwright setup this page describes.
• Every example was run in a newly generated Angular tabs app: unit tests, Playwright tests, and lint all pass.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-docs	Ready	Preview	Oct 23, 2026 8:24pm UTC