@testgorilla/tgo-coding-test

@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:

• 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,

• 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