testing

Testing Guidelines

Unit Testing with Vitest

• Framework: Use Vitest
• Test Structure: Follow AAA pattern (Arrange, Act, Assert)
• Test File Naming: *.spec.ts (e.g., file-reader.component.spec.ts)

Imports and Setup

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {describe, it, expect, beforeEach, vi} from 'vitest';
import {Component} from '@angular/core';

Component Testing

• TestBed Configuration: Configure TestBed in beforeEach

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [YourComponent, ReactiveFormsModule],
      providers: [{provide: TranslationService, useClass: MockTranslationService}],
    });
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  

• Clarity Modals: When testing components containing a clr-modal, add the InteractivityChecker override to prevent the [cdkFocusInitial] is not focusable warning:

  import {InteractivityChecker} from '@angular/cdk/a11y';
  
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [YourModalComponent, ClarityModule],
    })
      .overrideProvider(InteractivityChecker, {
        useValue: {
          isFocusable: () => true, // avoid warning: Element matching '[cdkFocusInitial]' is not focusable
        },
      })
      .compileComponents();
  });
  

• Signal Inputs: Use fixture.componentRef.setInput() for signal inputs

  fixture.componentRef.setInput('name', 'John');
  fixture.componentRef.setInput('age', 30);
  fixture.detectChanges();
  

• ViewChild Signals: Access via component instance

  const fileElement = component.fileElement();
  

• Translation Service: Use MockTranslationService for components with translations

  providers: [{provide: TranslationService, useClass: MockTranslationService}];