Skip to main content

​
Test Framework

The project uses Karma as the test runner and Jasmine as the testing framework. These are industry-standard tools for Angular application testing.

​
Testing Stack

  • Karma 6.4.0: Test runner that executes tests in real browsers
  • Jasmine 5.9.0: BDD-style testing framework
  • karma-chrome-launcher: Runs tests in Chrome/Chromium
  • karma-coverage: Generates code coverage reports
  • karma-jasmine-html-reporter: Pretty HTML test results

​
Running Tests

Execute the test suite using: 
npm test
This command:
  1. Compiles the application and test files
  2. Launches a Chrome browser window
  3. Runs all *.spec.ts files
  4. Watches for file changes and re-runs tests automatically
  5. Displays results in both terminal and browser
Tests run in watch mode by default. The test runner will automatically re-execute tests when you modify source or test files.

​
Test Configuration

​
angular.json

The test configuration is defined in the Angular workspace:
angular.json
{
  "test": {
    "builder": "@angular/build:karma",
    "options": {
      "tsConfig": "tsconfig.spec.json",
      "assets": [
        {
          "glob": "**/*",
          "input": "public"
        }
      ],
      "styles": [
        "src/styles.css"
      ]
    }
  }
}

​
tsconfig.spec.json

TypeScript configuration for test files:
tsconfig.spec.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jasmine"]
  },
  "include": ["src/**/*.ts"]
}
Key settings:
  • Extends base TypeScript configuration
  • Includes Jasmine type definitions
  • Compiles all .ts files in src/ directory
  • Outputs to out-tsc/spec/

​
Test Files

The project includes the following spec files:

​
Component Tests

  • src/app/components/about/about.spec.ts - About section tests
  • src/app/components/contact/contact.spec.ts - Contact form tests
  • src/app/components/footer/footer.spec.ts - Footer component tests
  • src/app/components/header/header.spec.ts - Header navigation tests
  • src/app/components/hero/hero.spec.ts - Hero section tests
  • src/app/components/projects/projects.spec.ts - Projects showcase tests

​
Application Tests

  • src/app/app.spec.ts - Root component tests
Each component has a corresponding .spec.ts file in the same directory, following Angular’s testing best practices.

​
Writing Tests

​
Basic Test Structure

Component tests typically follow this pattern: 
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my-component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MyComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should render title', () => {
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toContain('My Title');
  });
});

​
Test File Naming

All test files must:
  • End with .spec.ts extension
  • Be located alongside the component they test
  • Match the component filename (e.g., header.ts → header.spec.ts)

​
Test Output

​
Terminal Output

Test results are displayed in the terminal: 
Chrome Headless 120.0.0.0 (Windows 10): Executed 7 of 7 SUCCESS (0.234 secs / 0.189 secs)

​
Browser Output

A Chrome window opens showing:
  • Test suite hierarchy
  • Individual test results (pass/fail)
  • Failure details and stack traces
  • Ability to re-run specific tests

​
Coverage Reports

Code coverage reports are generated by karma-coverage and can be configured to output HTML reports showing:
  • Line coverage
  • Branch coverage
  • Function coverage
  • Statement coverage
Tests require Chrome or Chromium to be installed on your system. If you need to use a different browser, update the Karma configuration.

​
Test Commands

​
Single Run

Run tests once without watch mode (useful for CI/CD): 
ng test --watch=false

​
Specific Browser

Run tests in a specific browser: 
ng test --browsers=ChromeHeadless

​
Code Coverage

Generate code coverage report: 
ng test --code-coverage
Coverage reports are output to coverage/ directory.

​
Best Practices

  1. Test component creation: Always verify the component instantiates correctly
  2. Test user interactions: Simulate clicks, input changes, and form submissions
  3. Test rendering: Verify DOM elements display expected content
  4. Test business logic: Unit test component methods and calculations
  5. Mock dependencies: Use Jasmine spies to isolate component logic
  6. Keep tests focused: One test should verify one behavior
  7. Use descriptive test names: Test descriptions should explain what is being tested

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us