Testing

Comprehensive testing guide for the Syneo/Barcoding web applications.

Overview

The project uses two main testing frameworks:

• Jest - Unit and integration tests
• Playwright - End-to-end (E2E) tests

Unit Testing with Jest

Running Tests

cd web

# Run all tests
yarn test

# Watch mode
yarn test:watch

# Coverage report
yarn test:coverage

# Test specific file
yarn test <filename>

# Test with pattern
yarn test --testNamePattern="should create"

Test Structure

import { TestBed } from '@angular/core/testing';
import { MyService } from './my.service';

describe('MyService', () => {
  let service: MyService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [MyService]
    });
    service = TestBed.inject(MyService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should calculate sum', () => {
    const result = service.add(2, 3);
    expect(result).toBe(5);
  });
});

Testing Components

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({
      declarations: [MyComponent]
    }).compileComponents();

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

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

E2E Testing with Playwright

Running E2E Tests

cd web

# Run all E2E tests
yarn test:e2e

# Run with UI
yarn test:e2e:headed

# Debug mode
yarn test:e2e:debug

# Test specific app
yarn test:e2e:backend
yarn test:e2e:front
yarn test:e2e:dashboard

# Test specific browser
yarn test:e2e:chromium
yarn test:e2e:firefox
yarn test:e2e:webkit

E2E Test Structure

import { test, expect } from '@playwright/test';

test.describe('Login Flow', () => {
  test('should login successfully', async ({ page }) => {
    await page.goto('http://localhost:4200');

    await page.fill('input[name="username"]', 'testuser');
    await page.fill('input[name="password"]', 'password');
    await page.click('button[type="submit"]');

    await expect(page).toHaveURL(/.*dashboard/);
    await expect(page.locator('.user-name')).toContainText('Test User');
  });
});

Testing NGXS Stores

import { TestBed } from '@angular/core/testing';
import { NgxsModule, Store } from '@ngxs/store';
import { TicketStore } from './ticket.store';
import { LoadTickets } from './ticket.actions';

describe('TicketStore', () => {
  let store: Store;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [NgxsModule.forRoot([TicketStore])]
    });
    store = TestBed.inject(Store);
  });

  it('should load tickets', () => {
    store.dispatch(new LoadTickets());
    const tickets = store.selectSnapshot(TicketStore.tickets);
    expect(tickets).toBeDefined();
  });
});

Testing with SDK

Mock SDK services:

import { TestBed } from '@angular/core/testing';
import { TicketControllerService } from '@barcoding/sdk';
import { of } from 'rxjs';

describe('MyComponent', () => {
  let mockTicketService: jest.Mocked<TicketControllerService>;

  beforeEach(() => {
    mockTicketService = {
      ticketControllerFind: jest.fn().mockReturnValue(of([]))
    } as any;

    TestBed.configureTestingModule({
      providers: [
        { provide: TicketControllerService, useValue: mockTicketService }
      ]
    });
  });

  it('should load tickets', () => {
    // Test implementation
  });
});

Coming Soon

This page is under construction. More details will be added about:

• Test coverage requirements
• Mocking strategies
• Integration testing
• Visual regression testing
• Performance testing
• CI/CD integration

For now, refer to:

• Development Commands
• Web Overview