Skip to main content

Smoke Tests

In product management, a smoke test is a quick and simple way to check whether a new product or feature is working as intended. It is a type of acceptance testing that is performed before a more comprehensive testing process is carried out.

The term "smoke test" comes from the idea of turning on a new electronic device and checking if it starts up without emitting smoke, which would indicate a serious problem. In software development, a smoke test is a basic test that checks whether the application can be launched and performs its most critical functions without crashing or malfunctioning.

Typically, a smoke test involves a series of simple tests that cover the most important features and functions of the product or feature. For example, in a new mobile app, a smoke test might include verifying that the app can be installed and launched, that the user can log in, that basic functionality like search and navigation are working, and that the app does not crash or freeze.

Smoke testing is a useful way to quickly identify major issues with a new product or feature before investing more time and resources in testing and development. If a smoke test reveals significant problems, the product team can take corrective action before more comprehensive testing is carried out. Conversely, if the smoke test is successful, the team can proceed with more detailed testing and development.

app boots, basic UI renders, nav works, services load.

Goal: Verify app bootstraps, routes navigate correctly, core services instantiate, and basic UI elements render without crashes.

Constraints:

  • Use RouterTestingHarness for navigation; await navigateByUrl asynchronously. Avoid fakeAsync or tick.
  • Assert route success by checking resolved component class and router.url.
  • For UI integrity, verify only global elements: logo in home/about subcomponents, icon in header, and navigation button presence/functionality across pages.
  • Services (AuthService, AnalyticsService) are providedIn: 'root'; inject and assert they are defined.
  • No brittle CSS selectors; use component-specific checks.
  • Include unit tests for shared components (e.g., breadcrumb) ensuring inputs/outputs work.
  • For each page, add unit tests verifying sub-components (e.g., hero, sections) render.

Structure:

  1. Imports/Setup: Import necessary modules/providers: TestBed, RouterTestingHarness, provideRouter(routes), provideHttpClient(). Import routes, components, services.
  2. Smoke Tests:
    • Describe block for app bootstrap.
    • Iterate through all routes in a loop for navigation tests: navigate, assert component mounted and unique element present.
  3. UI Integrity: Post-navigation, assert global branding (logo, icon, nav button) on each page.
  4. Services: Inject and assert instantiation.
  5. Unit Tests: Separate describes for shared components (input/output assertions) and per-page sub-components (render checks).

Use Vitest syntax (describe, it, expect). Keep tests high-level and standalone.