Dockerized Device Labs for Angular 20 CI: Kiosk, Scanner, and Printer Emulation That Reproduces Defects 10x Faster

Why Angular Teams Need Dockerized Peripherals in 2025

Reference Architecture: Docker Device Bus + Emulators + Angular 20

// libs/device-events/src/lib/schema.ts
export type DeviceEventType = 'scan' | 'print' | 'status' | 'error';

export interface DeviceEventBase {
  id: string;            // uuid
  ts: number;            // epoch ms
  type: DeviceEventType;
  source: 'scanner' | 'printer' | 'kiosk-os';
  corr?: string;         // correlation id for test runs
  v: 1;                  // schema version
}

export interface ScanEvent extends DeviceEventBase {
  type: 'scan';
  payload: { symbology: 'QR' | 'CODE128'; data: string; quality: number };
}

export interface PrintEvent extends DeviceEventBase {
  type: 'print';
  payload: { template: 'boarding-pass' | 'receipt'; bytes: string /* base64 ESC/POS */ };
}

export interface StatusEvent extends DeviceEventBase {
  type: 'status';
  payload: { device: 'scanner' | 'printer'; state: 'ok' | 'paper-low' | 'offline' };
}

export type DeviceEvent = ScanEvent | PrintEvent | StatusEvent;

docker-compose for Scanner and Printer Emulation

# tools/docker/docker-compose.devices.yml
version: '3.9'
services:
  device-bus:
    image: ghcr.io/your-org/device-bus:1.2.0
    ports: ["8081:8081"]
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:8081/health"]
      interval: 5s
      timeout: 2s
      retries: 10

  scanner-emulator:
    image: ghcr.io/your-org/scanner-emulator:0.9.0
    environment:
      - BUS_URL=http://device-bus:8081
    depends_on: { device-bus: { condition: service_healthy } }

  printer-emulator:
    image: ghcr.io/your-org/printer-emulator:0.9.0
    environment:
      - BUS_URL=http://device-bus:8081
    depends_on: { device-bus: { condition: service_healthy } }

  app:
    build:
      context: ../../
      dockerfile: tools/docker/Dockerfile.web
    environment:
      - DEVICE_BUS_WS=ws://device-bus:8081
    ports: ["4200:4200"]
    depends_on: { device-bus: { condition: service_healthy } }

Angular 20 Integration: Signals + SignalStore for Device State

// libs/device-client/src/lib/device.store.ts
import { signalStore, withState, withMethods } from '@ngrx/signals';
import { signal } from '@angular/core';
import type { DeviceEvent } from '@device-events/schema';

interface DeviceState {
  status: Record<string, 'ok' | 'paper-low' | 'offline'>;
  lastScan?: string;
}

export const DeviceStore = signalStore(
  withState<DeviceState>({ status: {} }),
  withMethods((state) => {
    let ws: WebSocket | undefined;
    const endpoint = (globalThis as any).DEVICE_BUS_WS ?? 'ws://localhost:8081';

    const connect = () => {
      ws?.close();
      ws = new WebSocket(endpoint + '/ws');
      ws.onmessage = (e) => {
        const ev: DeviceEvent = JSON.parse(e.data);
        if (ev.type === 'scan') state.lastScan = ev.payload.data;
        if (ev.type === 'status') state.status[ev.payload.device] = ev.payload.state;
      };
      ws.onclose = () => setTimeout(connect, 1000); // naive backoff for brevity
    };

    const send = (ev: DeviceEvent) => ws?.readyState === 1 && ws.send(JSON.stringify(ev));

    return { connect, send, status: signal(state.status), lastScan: signal(state.lastScan) };
  })
);

Cypress: Driving Devices and Asserting Prints

// apps/e2e/support/commands.ts
Cypress.Commands.add('emitScan', (data: string) => {
  cy.request('POST', 'http://localhost:8081/emit/scan', { data, symbology: 'QR', corr: Cypress.env('RUN_ID') });
});

Cypress.Commands.add('setPaperLow', () => {
  cy.request('POST', 'http://localhost:8081/printer/state', { state: 'paper-low' });
});

Cypress.Commands.add('getLastPrint', () => {
  return cy.request('GET', 'http://localhost:8081/printer/last');
});

// apps/e2e/integration/kiosk.spec.ts
it('prints boarding pass after scan, handles paper-low gracefully', () => {
  cy.visit('/check-in');
  cy.emitScan('PAX:MATTHEW;FL:1234;SEAT:12A');
  cy.findByRole('button', { name: /print/i }).click();
  cy.setPaperLow();
  cy.contains('Printer paper is low').should('be.visible');
  cy.getLastPrint().then(({ body }) => {
    expect(body.template).to.eq('boarding-pass');
    expect(body.bytes).to.match(/^JVBERi0xLjc/); // base64 prefix for PDF or ESC/POS capture
  });
});

CI Integration: GitHub Actions, Jenkins, Azure DevOps

# .github/workflows/e2e.yml
name: e2e-device-lab
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    services:
      docker:
        image: docker:stable-dind
        privileged: true
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - name: Start device lab
        run: |
          docker compose -f tools/docker/docker-compose.devices.yml up -d --build
          for i in {1..30}; do curl -fsS http://localhost:8081/health && break || sleep 2; done
      - name: Run Cypress
        run: npx nx run kiosk-e2e:e2e --configuration=ci
        env:
          RUN_ID: ${{ github.run_id }}
      - name: Collect artifacts
        if: always()
        run: |
          docker logs $(docker ps -q --filter name=device-bus) > device-bus.log || true
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: device-logs
          path: |
            device-bus.log
            **/printer-outputs/**

Replay Field Defects with Typed Event Traces

# tools/replay.sh
jq -c '.events[]' traces/flight-checkin-2025-01-12.json > traces/run.jsonl
while read -r line; do
  curl -sS -X POST http://localhost:8081/replay --data "$line" \
    -H 'Content-Type: application/json'
  sleep 0.2
done < traces/run.jsonl

Device Safety, Accessibility, and UX Polish

When to Hire an Angular Developer for Legacy Rescue

What to Instrument Next