@testgorilla/tgo-coding-test

Coding test component for TestGorilla assessments.

Installation

npm install @testgorilla/tgo-coding-test

Configuration

The library requires runtime configuration to be provided by the consuming application. This follows the Dependency Injection pattern for NPM libraries, where the library artifact is immutable and configuration is provided at runtime.

Setup

In your application's app.config.ts (for standalone apps) or module providers:

import { ApplicationConfig } from '@angular/core';
import { TGO_CODING_TEST_CONFIG } from '@testgorilla/tgo-coding-test';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    // Provide TGO Coding Test library configuration
    {
      provide: TGO_CODING_TEST_CONFIG,
      useValue: {
        apiUrl: environment.apiUrl,
        coderunnerV2Endpoint: environment.coderunnerV2Endpoint,
      }
    },
    // ... other providers
  ],
};

Configuration Interface

interface TgoCodingTestConfig {
  /**
   * The base URL for the main API endpoint.
   * Example: 'https://api-talent-staging.testgorilla.com/api/'
   */
  apiUrl: string;

  /**
   * The base URL for the CodeRunner V2 API endpoint.
   * Example: 'https://cr-v2-staging.testgorilla.com'
   */
  coderunnerV2Endpoint: string;
}

Note: The configuration must be provided at the application level. If you're using TgoCodingTestCandidateViewComponent in a demo or test environment, you can provide the configuration directly in the component's providers array, but this is not recommended for production use.

Usage

TgoCodingTestComponent

The core coding test component for rendering code editors and test cases.

import { TgoCodingTestComponent } from '@testgorilla/tgo-coding-test';

@Component({
  imports: [TgoCodingTestComponent],
  template: `
    <tgo-coding-test
      [languages]="languages"
      [initCode]="initCode"
      [questionText]="questionText"
      [mode]="mode"
      [viewMode]="viewMode"
      [isLAT]="isLAT"
      [isSQL]="isSQL"
      [applicationTheme]="applicationTheme"
      (codeChange)="onCodeChange($event)"
      (languageChange)="onLanguageChange($event)"
      (runTestClick)="onRunTestClick($event)"
      (pasteEvent)="onPasteEvent($event)"
    ></tgo-coding-test>
  `,
})
export class MyComponent {}

TgoCodingTestCandidateViewComponent

The candidate view component that wraps TgoCodingTestComponent with full test management, API integration, and anti-cheating features.

import { TgoCodingTestCandidateViewComponent } from '@testgorilla/tgo-coding-test';

@Component({
  imports: [TgoCodingTestCandidateViewComponent],
  template: `
    <tgo-coding-test-candidate-view
      [question]="question"
      [test]="test"
      [assessment]="assessment"
      [expirationObservable]="expirationObservable"
      [completeObservable]="completeObservable"
      (submissionStateChanged)="onSubmissionStateChanged($event)"
      (loadingStateChanged)="onLoadingStateChanged($event)"
      (antiCheatingConfigurationChanged)="onAntiCheatingConfigurationChanged($event)"
      (fullscreenChanged)="onFullscreenChanged($event)"
      (themeChanged)="onThemeChanged($event)"
      (navigationButtonStateChanged)="onNavigationButtonStateChanged($event)"
      (configurationStateChanged)="onConfigurationStateChanged($event)"
    ></tgo-coding-test-candidate-view>
  `,
})
export class MyComponent {}

Assets (translations)

This package ships its translations under assets/i18n. Consumer apps must copy these assets into their build output so Transloco can load them at runtime.

• Angular CLI / Nx: add an assets entry pointing at the package:

{
  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "node_modules/@testgorilla/tgo-coding-test/assets",
      "output": "assets/tgo-coding-test"
    }
  ]
}

If you develop inside this repo (consuming the workspace sources), also include the local path:

{
  "glob": "**/*",
  "input": "packages/tgo-coding-test/src/assets",
  "output": "assets/tgo-coding-test"
}

After adding the asset entries, rebuild/re-serve your app so /assets/tgo-coding-test/i18n/en.json is available.

Mocking ApiService for demo/local runs

The candidate view includes a mocked API service for demos. To use it:

1. In tgo-coding-test-candidate-view.component.ts, uncomment the mock provider and comment the real one:

// use MockedApiService for local demo only
{ provide: ApiService, useClass: MockedApiService },
// ApiService,

2. Ensure MockedApiService is imported at the top of the file.

This lets the component run without live backend calls when serving the demo app.

API

TgoCodingTestComponent

Inputs

| Name | Type | Required | Default | Description | | --------------------------- | --------------------------- | -------- | ------- | ---------------------------------------------------------------- | | languages | LATLanguages | Yes | - | Array of available programming languages | | initCode | string | No | - | Initial code to display in the editor | | snapshot | CodingSnapshot | No | - | Snapshot of coding state for restoration | | functionParams | CodeEditorFuncParam[] | No | - | Function parameters for function-based questions | | functionName | string | No | - | Function name for function-based questions | | returnType | keyof CodeEditorTypesMap | No | - | Return type for function-based questions | | isLAT | boolean | No | - | Whether this is a Language-Agnostic Test | | isSQL | boolean | No | - | Whether this is an SQL test | | shouldGenerateInitCode | boolean | No | true | Whether to generate initial code automatically | | canAddCustomTestCases | boolean | No | true | Whether users can add custom test cases | | selectedProgrammingLanguage | LATLanguage | No | - | Pre-selected programming language | | isReadonly | boolean | No | - | Whether the editor is in read-only mode | | autoHeight | boolean | No | - | Whether the editor should auto-adjust height | | translations | Record<string, unknown> | No | - | Translation object for UI text | | questionText | string | No | - | Question text to display | | mode | Modes | No | - | Test mode (Running, Preview, NonAssessmentPreview) | | assessmentId | string | No | - | Assessment ID for storage and tracking | | companyColor | string | No | - | Company brand color for theming | | testCasesStatus | any | No | - | Status of test case execution | | loading | boolean | No | - | Loading state indicator | | runTestResponse | any[] | No | [] | Response from test execution | | viewMode | ViewMode | No | - | View mode (Full, Compact) | | exampleTestCases | ExampleTestCase[] | No | - | Example test cases to display | | hideTestCases | boolean | No | - | Whether to hide test cases UI (legacy property) | | applicationTheme | ApplicationTheme | No | 'light' | Application theme (light/dark) | | questionId | number | No | - | Question ID for storage and tracking |

Outputs

| Name | Type | Description | | -------------- | --------------------------------- | ---------------------------------------------- | | pasteEvent | EventEmitter<PasteData> | Emits when paste event is detected | | codeChange | EventEmitter<string> | Emits when code content changes | | runTestClick | EventEmitter<boolean> | Emits when run test button is clicked | | languageChange | EventEmitter<CodeEditorLanguages> | Emits when programming language is changed |

TgoCodingTestCandidateViewComponent

Inputs

| Name | Type | Required | Default | Description | | -------------------- | ---------------------- | -------- | ------- | ------------------------------------------------ | | question | Question | Yes | - | Question data containing coding test context | | test | TestResultRead | Yes | - | Test configuration and metadata | | assessment | Assessment | No | - | Assessment context | | expirationObservable | Observable<void> | No | - | Observable to trigger test expiration externally | | completeObservable | Observable<void> | No | - | Observable to trigger test completion externally |

Outputs

| Name | Type | Description | | ------------------------------ | ---------------------------------------- | ----------------------------------------------- | | submissionStateChanged | EventEmitter<ISubmissionState | null> | Emits submission state when answer is submitted | | loadingStateChanged | EventEmitter<boolean> | Emits loading state changes | | antiCheatingConfigurationChanged | EventEmitter<IAntiCheatingState | null> | Emits anti-cheating configuration changes | | fullscreenChanged | EventEmitter<boolean> | Emits when fullscreen state changes | | themeChanged | EventEmitter<ApplicationTheme> | Emits when application theme changes | | codingFullscreenChanged | EventEmitter<boolean> | Emits when coding editor fullscreen changes | | navigationButtonStateChanged | EventEmitter<INavigationButtonState | null> | Emits navigation button state changes | | configurationStateChanged | EventEmitter<IConfigurationState | null> | Emits configuration state changes | | validationStatusChanged | EventEmitter<any> | Emits validation status changes |

Peer Dependencies

This library requires the following peer dependencies:

• @angular/common ^18.2.13
• @angular/core ^18.2.13
• @angular/animations ^18.2.13
• @angular/forms ^18.2.13
• @angular/material 18.2.14
• @angular/router ^18.2.13
• @ngneat/transloco ~4.3.0
• @ngneat/until-destroy 10.0.0
• @testgorilla/tgo-ui ^3.0.0
• angular-split ^18.0.0
• monaco-editor 0.50.0
• ngx-guided-tour ^2.0.1
• ngx-monaco-editor-v2 ^18.1.0
• ngx-quill ^26.0.10
• ngx-webstorage ^18.0.0
• quill ^2.0.3
• rxjs ~7.8.1

Internal Dependencies

All required services, models, and components are included within this library:

• LibCodingTestService - Manages coding test state, language selection, and code management
• StorageCodingService - Handles localStorage persistence for code and test cases
• CodingTestService - Handles test execution, API calls, and test case management
• CandidatureApiService - API service for candidate-related operations
• CoderunnerApiService - API service for code execution
• CodingTestConfigService - Provides access to library configuration (injects configuration token internally)
• ThemeService - Provides theme/company color configuration
• Question, TestResultRead, Assessment, ISubmissionState - Type definitions (bundled from shared code)
• CodeEditorComponent, CodingQuestionComponent, RunnableEditorComponent - UI components
• TranslocoLazyModuleUtils, getAvailableLangs - Translation utilities

Accessing Configuration

If you need to access the library configuration in your services or components, inject CodingTestConfigService:

import { CodingTestConfigService } from '@testgorilla/tgo-coding-test';

@Injectable()
export class MyService {
  private readonly configService = inject(CodingTestConfigService);
  
  doSomething() {
    const endpoint = this.configService.getCoderunnerV2Endpoint();
    // Use endpoint...
  }
}

Features

• Multi-language code editor support (Language-Agnostic Tests)
• SQL test support
• Custom test case creation and management
• Code auto-save and restoration
• Test execution with real-time results
• Fullscreen mode support
• Theme support (light/dark)
• Guided tour for new users
• Anti-cheating configuration
• Translation support via Transloco
• Preview mode support
• Code paste detection and tracking
• Periodic storage maintenance