# Frontend Testing {#frontend-testing}


Testing strategies for the Angular frontend.


## Testing Stack {#testing-stack}


| Tool                | Purpose                 |
| ------------------- | ----------------------- |
| **Jest**            | Unit test runner        |
| **Angular TestBed** | Component testing       |
| **Spectator**       | Test helpers (optional) |
| **Cypress**         | E2E testing             |


## Unit Tests {#unit-tests}



### Component Testing {#component-testing}


```typescript
describe("DashboardComponent", () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [DashboardComponent],
      imports: [HttpClientTestingModule, TranslateModule.forRoot()],
      providers: [
        { provide: EmployeesService, useValue: mockEmployeesService },
      ],
    }).compileComponents();

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

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


### Service Testing {#service-testing}


```typescript
describe("EmployeesService", () => {
  let service: EmployeesService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [EmployeesService],
    });
    service = TestBed.inject(EmployeesService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it("should fetch employees", () => {
    service.getAll().subscribe((result) => {
      expect(result.items.length).toBe(2);
    });

    const req = httpMock.expectOne("/api/employee");
    expect(req.request.method).toBe("GET");
    req.flush({ items: [{}, {}], total: 2 });
  });
});
```


## Running Tests {#running-tests}


```bash
# Run all tests
yarn test

# Run specific project tests
npx nx test gauzy

# Run with coverage
npx nx test gauzy --coverage

# Watch mode
npx nx test gauzy --watch
```


## E2E Tests {#e2e-tests}


```bash
# Run Cypress
npx nx e2e gauzy-e2e
```


## Related Pages {#related-pages}


- [Frontend Overview](https://sourcey-gauzy.pages.dev/frontend/frontend-overview/index.md)
- [Development Guide](https://sourcey-gauzy.pages.dev/development/testing/index.md) — backend testing