@testgorilla/tgo-coding-test 0.0.1

package/src/lib/components/tgo-coding-test-candidate-view/tgo-coding-test-candidate-view.component.ts

@@ -0,0 +1,575 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  signal,
+  ViewEncapsulation,
+  computed,
+  inject,
+} from '@angular/core';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { translate, TRANSLOCO_SCOPE, TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import {
+  ApplicationTheme,
+  ConfirmDialogComponent,
+  DialogComponentModule,
+  DialogService,
+  SnackbarComponentModule,
+} from '@testgorilla/tgo-ui';
+import {
+  ApiService,
+  Assessment,
+  EnvironmentService,
+  getAvailableLangs,
+  IAntiCheatingState,
+  IConfigurationState,
+  INavigationButtonState,
+  IQuestionDataContract,
+  ISubmissionState,
+  MixpanelService,
+  Question,
+  TestResultRead,
+  ThemeService,
+  TranslocoLazyModuleUtils,
+} from '@testgorilla/tgo-test-shared';
+import { GuidedTourModule, GuidedTourService } from 'ngx-guided-tour';
+import { interval, Observable, Subscription } from 'rxjs';
+import { switchMap, take, tap } from 'rxjs/operators';
+
+import { CodingTestsResultsModel } from '../../models/coderunner-execution-results';
+import { PasteData } from '../../models/paste-data';
+import {
+  ProgrammingLanguage,
+  ProgrammingLanguageVersioned,
+} from '../../models/programming-language';
+import { ExampleTestCase, SqlTestCase } from '../../models/test-cases';
+import { ROOT_TRANSLATIONS_SCOPE } from '../../models/translations';
+import {
+  CodingTestTourMode,
+  CodingTestTourService,
+  CodingTestService,
+  CandidatureApiService,
+  CoderunnerApiService,
+} from '../../services/candidate-coding-test-services';
+import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
+import { Modes } from '../../models/mode';
+import { Themes } from '../../models/theme';
+import { LATLanguages } from '../../models/lat-languages';
+import { ViewMode } from '../../models/view-mode';
+import { TgoCodingTestComponent } from '../tgo-coding-test/tgo-coding-test.component';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { CodingTestConfigService } from '../../services/coding-test-config.service';
+
+@UntilDestroy()
+@Component({
+  standalone: true,
+  selector: 'tgo-coding-test-candidate-view',
+  templateUrl: './tgo-coding-test-candidate-view.component.html',
+  styleUrls: ['./tgo-coding-test-candidate-view.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    TranslocoModule,
+    DialogComponentModule,
+    SnackbarComponentModule,
+    TgoCodingTestComponent,
+    GuidedTourModule,
+    CommonModule,
+    RouterModule,
+  ],
+  providers: [
+    TranslocoLazyModuleUtils.getScopeProvider(
+      'tgo-coding-test',
+      getAvailableLangs(),
+      ROOT_TRANSLATIONS_SCOPE,
+      (lang: string) => import(`../../../assets/i18n/${lang}.json`)
+    ),
+    EnvironmentService,
+    CoderunnerApiService,
+    CodingTestService,
+    CodingTestTourService,
+    GuidedTourService,
+    ThemeService,
+    CandidatureApiService,
+    MixpanelService,
+
+    // use MockedApiService for local demo only
+    // { provide: ApiService, useClass: MockedApiService },
+    ApiService,
+  ],
+})
+export class TgoCodingTestCandidateViewComponent implements OnInit, IQuestionDataContract, OnDestroy {
+  private readonly dialogService = inject(DialogService);
+  private readonly translationScope = inject(TRANSLOCO_SCOPE);
+  private readonly candidatureApiService = inject(CandidatureApiService);
+  private readonly codingTestTourService = inject(CodingTestTourService);
+  private readonly libCodingTestService = inject(LibCodingTestService);
+  private readonly environmentService = inject(EnvironmentService);
+  private readonly codingTestService = inject(CodingTestService);
+  private readonly translocoService = inject(TranslocoService);
+  private readonly themeService = inject(ThemeService);
+  private readonly apiService = inject(ApiService);
+  private readonly route = inject(ActivatedRoute);
+  private readonly codingTestConfigService = inject(CodingTestConfigService);
+
+  @Input() assessment?: Assessment;
+  @Input({ required: true }) question!: Question;
+  @Input({ required: true }) test!: TestResultRead;
+  @Input() expirationObservable?: Observable<void>;
+  @Input() completeObservable?: Observable<void>;
+  @Input() isDemo?: boolean;
+
+  @Output() validationStatusChanged = new EventEmitter<any>(); // eslint-disable-line @typescript-eslint/no-explicit-any
+  @Output() antiCheatingConfigurationChanged = new EventEmitter<IAntiCheatingState | null>();
+  @Output() fullscreenChanged = new EventEmitter<boolean>();
+  @Output() themeChanged = new EventEmitter<ApplicationTheme>();
+  @Output() codingFullscreenChanged = new EventEmitter<boolean>();
+  @Output() navigationButtonStateChanged = new EventEmitter<INavigationButtonState | null>();
+  @Output() configurationStateChanged = new EventEmitter<IConfigurationState | null>();
+  @Output() submissionStateChanged = new EventEmitter<ISubmissionState | null>();
+  @Output() loadingStateChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @HostBinding('class') hostClass = 'micro-question-code';
+
+  private readonly subscription: Subscription = new Subscription();
+
+  initCode = '';
+  viewModes = ViewMode;
+  mode: Modes = Modes.Running;
+  companyColor = this.themeService.getCompanyColor();
+  initCodesMap = new Map<CodeEditorLanguages, string>();
+  languages = signal<LATLanguages>([]);
+  codingLibTranslations = signal<{ [key: string]: string }>({});
+  rawLanguages: ProgrammingLanguage[] = [];
+  currentLanguage?: string;
+  isSQL = false;
+  isLAT = true;
+  code = '';
+  codingTestResults?: CodingTestsResultsModel;
+  testResultsLoading = computed(() => this.codingTestService.isTestResultsLoading());
+  exampleTestCases: ExampleTestCase[] = [];
+  activeGuidedTourId$ = this.codingTestTourService.activeGuidedTourId$;
+  firstTestRunComplete = false;
+  canopyUiTheme: ApplicationTheme = 'light';
+
+  private wasTourShown = false;
+
+  ngOnDestroy(): void {
+    if (!this.test?.is_preview_mode) {
+      this.antiCheatingConfigurationChanged.emit({
+        fullscreenTracking: false,
+        mouseEventTracking: false,
+        snapshotsTracking: false,
+      });
+    }
+
+    this.subscription.unsubscribe();
+  }
+
+  ngOnInit() {
+    this.setupState();
+    this.handleGuidedTour();
+
+    if (!this.test?.is_preview_mode) {
+      this.antiCheatingConfigurationChanged.emit({
+        fullscreenTracking: true,
+        mouseEventTracking: true,
+        snapshotsTracking: true,
+      });
+
+      this.setupAutosaveEvent();
+    }
+
+    const isNextQuestionDisabled = !this.test?.is_preview_mode;
+
+    this.configurationStateChanged.emit({
+      isSavingQuestionDisabled: isNextQuestionDisabled,
+    });
+
+    this.navigationButtonStateChanged.emit({
+      disabled: isNextQuestionDisabled,
+    });
+
+    this.subscription.add(
+      this.expirationObservable?.subscribe(() => {
+        this.clearSavedCode();
+        if (!this.test?.is_preview_mode) {
+          this.clearLastLanguageSelected();
+          this.submitCode();
+          this.enableNextButton();
+        }
+      })
+    );
+
+    this.subscription.add(
+      this.completeObservable?.subscribe(() => {
+        if (!this.test?.is_preview_mode) {
+          this.openSaveDialog();
+        } else {
+          this.clearSavedCode();
+        }
+      })
+    );
+
+    if (!this.isSQL) {
+      this.loadAvailableLanguages();
+      this.setTestCases();
+    } else {
+      this.setSqlTestCases();
+      this.setSqlLang();
+      this.setSqlInitCode();
+      this.loadingStateChanged.emit(false);
+    }
+    this.setListeners();
+  }
+
+  openSaveDialog(): void {
+    const dialogRef = this.dialogService.open(ConfirmDialogComponent, {
+      applicationTheme: this.canopyUiTheme,
+      size: 'small',
+      panelClass: '',
+      extraData: {
+        title: translate('CODING_QUESTION.MODALS.FINISH_TEST.TITLE') ?? '',
+        message: translate('CODING_QUESTION.MODALS.FINISH_TEST.MESSAGE') ?? '',
+        confirmButtonText: translate('CODING_QUESTION.MODALS.FINISH_TEST.SUBMIT') ?? '',
+        cancelButtonText: translate('CODING_QUESTION.MODALS.FINISH_TEST.CANCEL') ?? '',
+        color: this.companyColor,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (!result) {
+        return;
+      }
+
+      this.clearSavedCode();
+      this.clearLastLanguageSelected();
+      this.submitCode();
+      this.enableNextButton();
+    });
+  }
+
+  private clearLastLanguageSelected(): void {
+    this.libCodingTestService.clearLastLanguageSelected();
+  }
+
+  private clearSavedCode() {
+    this.libCodingTestService.triggerClearSavedCode();
+  }
+
+  private submitCode() {
+    if (this.code) {
+      this.submissionStateChanged?.emit({
+        text: this.code,
+        language: this.getVersionedLanguage(),
+      });
+    }
+  }
+
+  private getVersionedLanguage(): string | undefined {
+    const language = this.currentLanguage;
+
+    if (!language) {
+      return;
+    }
+
+    if (this.isSQL) {
+      return ProgrammingLanguageVersioned.SQLite;
+    }
+
+    return `${language}-${this.libCodingTestService.getVersion()}`;
+  }
+
+  private enableNextButton(): void {
+    this.configurationStateChanged.emit({
+      isSavingQuestionDisabled: false,
+    });
+  }
+
+  languageChange(selectedLangName: CodeEditorLanguages) {
+    const selectedLang = this.rawLanguages.filter(
+      language => language.name === selectedLangName
+    )[0];
+    this.codingTestService.handleLanguageChangeModal(
+      this.question.id,
+      selectedLang,
+      this.canopyUiTheme,
+      this.companyColor
+    );
+  }
+
+  updateCode(code: string): void {
+    this.code = code;
+  }
+
+  runTest(): void {
+    this.codingTestService.runTest(
+      this.question.id,
+      this.code,
+      this.isLAT,
+      this.isSQL,
+      false,
+      !!this.test.is_preview_mode,
+      this.question.question_id,
+      this.test.id,
+      this.test
+    );
+
+    if (!this.firstTestRunComplete) {
+      this.navigationButtonStateChanged.emit({
+        disabled: false,
+      });
+
+      this.firstTestRunComplete = true;
+    }
+  }
+
+  screenshotPaste(event: PasteData): void {
+    if (event.type !== 'paste') {
+      return;
+    }
+
+    this.codingTestService
+      .sendCopypasteEvent$(this.code, event.data, this.question.id)
+      .pipe(take(1))
+      .subscribe();
+  }
+
+  private setupAutosaveEvent(): void {
+    this.subscription.add(
+      interval(5000)
+        .pipe(
+          untilDestroyed(this),
+          switchMap(() => this.codingTestService.sendAutosaveEvent$(this.code, this.question.id))
+        )
+        .subscribe()
+    );
+  }
+
+  private setupState(): void {
+    this.setApiParams();
+    this.setCodingLibTranslations();
+    this.setIsSQL();
+    this.setIsLat();
+    this.setMode();
+  }
+
+  private setCodingLibTranslations() {
+    // TRANSLOCO_SCOPE is passed here to make sure that translation scope is resolved by the library
+    this.translocoService
+      .selectTranslateObject(`CODING_LIB`, {}, this.translationScope as string)
+      .pipe(take(1))
+      .subscribe(translations => {
+        this.codingLibTranslations.set(translations);
+      });
+  }
+
+  private setApiParams(): void {
+    const invitationUuid = this.route.snapshot.firstChild?.url[0].path || '';
+    const contentLanguage = this.assessment?.locale ?? 'en';
+    const apiUrl = this.codingTestConfigService.getApiUrl();
+
+    this.apiService.setParams(invitationUuid, contentLanguage, ROOT_TRANSLATIONS_SCOPE, apiUrl);
+  }
+
+  private setIsSQL(): void {
+    this.isSQL = this.question?.context.code_language === 'sql';
+    this.codingTestService.setIsSQLTest(this.isSQL);
+  }
+
+  private setSqlInitCode(): void {
+    this.initCode = this.question?.context.initial_code;
+  }
+
+  private setSqlLang(): void {
+    const sqlLanguage = this.question?.context.code_language as CodeEditorLanguages;
+    this.languages.set([
+      {
+        label: 'nonLAT',
+        value: sqlLanguage,
+      },
+    ]);
+    this.currentLanguage = sqlLanguage;
+  }
+
+  private setIsLat(): void {
+    // todo: add response field if possible ?
+    // this.isLAT = this.test?.is_language_agnostic_test ?? false;
+    this.isLAT = !this.isSQL;
+  }
+
+  private setMode(): void {
+    this.mode = this.test?.is_preview_mode ? Modes.Preview : Modes.Running;
+  }
+
+  private listenGuidedTourStart(): void {
+    this.libCodingTestService.startGuidedTour$.pipe(untilDestroyed(this)).subscribe(() => {
+      const guidedTourMode = this.test?.is_preview_mode
+        ? CodingTestTourMode.PracticeQuestion
+        : CodingTestTourMode.RealQuestion;
+
+      this.codingTestTourService.init(guidedTourMode);
+    });
+  }
+
+  private handleGuidedTour() {
+    if (!this.environmentService.isMobile && !this.wasTourShown && this.test?.is_preview_mode) {
+      const delayForGuidedTour = 1500;
+      setTimeout(() => {
+        this.codingTestTourService.init(CodingTestTourMode.PracticeQuestion);
+        this.wasTourShown = true;
+      }, delayForGuidedTour);
+    }
+  }
+
+  private getAllLanguages(): ProgrammingLanguage[] {
+    const boilerplates = this.question?.context.boilerplates ?? [];
+    return boilerplates.map(({ programming_language }) => programming_language);
+  }
+
+  private loadAvailableLanguages(): void {
+    this.candidatureApiService
+      .getAvailableLanguages$()
+      .pipe(
+        take(1),
+        tap(availableLangsIds => {
+          const languages = this.getAllLanguages();
+          const areAllLangsAvailable = availableLangsIds.length === 0;
+
+          this.rawLanguages = areAllLangsAvailable
+            ? languages
+            : languages.filter(({ id }) => id !== undefined && availableLangsIds.includes(id));
+          this.languages.set(
+            this.rawLanguages.map(language => ({
+              label:
+                typeof language.name === 'string' && language.name.length > 0
+                  ? language.name.charAt(0).toUpperCase() + language.name.slice(1)
+                  : 'Unknown',
+              value: language.name as CodeEditorLanguages,
+              version: language.version,
+            }))
+          );
+        }),
+        tap(() => {
+          this.loadingStateChanged.emit(false);
+        }),
+        tap(() => {
+          const boilerplates = this.question?.context.boilerplates ?? [];
+          boilerplates.forEach(boilerplate => {
+            if (boilerplate.programming_language.name) {
+              this.initCodesMap.set(
+                boilerplate.programming_language.name as CodeEditorLanguages,
+                boilerplate.code
+              );
+            }
+          });
+        }),
+        switchMap(() => this.libCodingTestService.currentLanguage$),
+        tap((language: CodeEditorLanguages) => {
+          const currentLang = this.rawLanguages.find(x => x.name === language);
+          if (currentLang) {
+            this.codingTestService.setCurrentLanguageLAT(currentLang);
+          }
+          const initCode = this.initCodesMap.get(language);
+          if (initCode) {
+            this.initCode = initCode;
+            this.updateCode(this.initCode);
+          }
+        })
+      )
+      .subscribe(() => {
+        this.libCodingTestService.setBoilerplateLoadingStatus(false);
+      });
+  }
+
+  private listenThemeChange(): void {
+    this.libCodingTestService.themeChanged$.pipe(untilDestroyed(this)).subscribe(theme => {
+      this.canopyUiTheme = theme === Themes.Dark ? 'dark' : 'light';
+      this.themeChanged.emit(this.canopyUiTheme);
+    });
+  }
+
+  private listenFullscreenChange(): void {
+    this.libCodingTestService.isFullscreen$
+      .pipe(untilDestroyed(this))
+      .subscribe(isFullscreen => this.fullscreenChanged.emit(isFullscreen));
+  }
+
+  private listenDeleteCustomTestCases(): void {
+    this.codingTestService
+      .listenDeleteCustomTestCases()
+      .pipe(untilDestroyed(this))
+      .subscribe(({ index }) => {
+        this.codingTestService.handleDeleteTestCaseModal(
+          index,
+          this.canopyUiTheme,
+          this.companyColor
+        );
+      });
+  }
+
+  private listenLanguageChange(): void {
+    this.libCodingTestService.currentLanguage$
+      .pipe(untilDestroyed(this))
+      .subscribe((language: CodeEditorLanguages) => {
+        this.currentLanguage = language;
+        const code = this.initCodesMap.get(language);
+        if (code) {
+          this.initCode = code;
+        } else {
+          this.initCode = '';
+          console.warn(`No initial code found for language: ${language}`);
+        }
+      });
+  }
+
+  private listenResetCode(): void {
+    this.codingTestService
+      .listenCodingTestChanges()
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        this.codingTestService.handleResetCodeModal(this.canopyUiTheme, this.companyColor);
+      });
+  }
+
+  private listenTestResults(): void {
+    this.codingTestService.codingTestResults$.pipe(untilDestroyed(this)).subscribe(results => {
+      this.codingTestResults = results;
+    });
+  }
+
+  private setSqlTestCases(): void {
+    const testCases = this.question?.context?.sql_testcases.map(testCase => ({
+      ...testCase,
+      post_sql: testCase.post_sql || '',
+      initial_sql: this.question?.context?.initial_sql || '',
+    })) as SqlTestCase[];
+    this.codingTestService.setSqlTestCases(testCases);
+    this.exampleTestCases = testCases.map(this.codingTestService.transformToExampleSQLTestCase);
+  }
+
+  private setTestCases(): void {
+    this.exampleTestCases = this.question?.context?.testcases?.map(
+      this.codingTestService.transformToExampleLATtestCase
+    );
+  }
+
+  private setListeners(): void {
+    this.listenGuidedTourStart();
+    this.listenFullscreenChange();
+    this.listenThemeChange();
+    this.listenResetCode();
+    this.codingTestService.trackConfigChanged(!!this.test?.is_preview_mode);
+    this.listenTestResults();
+    if (this.isLAT) {
+      this.listenDeleteCustomTestCases();
+      this.listenLanguageChange();
+    }
+  }
+}
+

package/src/lib/config/index.ts

@@ -0,0 +1,3 @@
+export { TgoCodingTestConfig } from './tgo-coding-test.config';
+export { provideTgoCodingTest } from './tgo-coding-test.provider';
+

package/src/lib/config/tgo-coding-test.config.ts

@@ -0,0 +1,26 @@
+/**
+ * Configuration interface for the TGO Coding Test library.
+ * 
+ * This interface defines the runtime configuration that must be provided
+ * by the consuming application. The library does not hold environment
+ * variables itself; instead, it receives them from the host application
+ * through dependency injection.
+ */
+export interface TgoCodingTestConfig {
+  /**
+   * The base URL for the main API endpoint.
+   * This is required for the library to communicate with the main API service.
+   * 
+   * Example: 'https://api-talent-staging.testgorilla.com/api/'
+   */
+  apiUrl: string;
+
+  /**
+   * The base URL for the CodeRunner V2 API endpoint.
+   * This is required for the library to communicate with the code execution service.
+   * 
+   * Example: 'https://cr-v2-staging.testgorilla.com'
+   */
+  coderunnerV2Endpoint: string;
+}
+

package/src/lib/config/tgo-coding-test.provider.ts

@@ -0,0 +1,38 @@
+import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+import { TGO_CODING_TEST_CONFIG } from './tgo-coding-test.token';
+import { TgoCodingTestConfig } from './tgo-coding-test.config';
+
+/**
+ * Provides the TGO Coding Test library configuration.
+ * 
+ * This function should be called in the consuming application's
+ * app.config.ts (for standalone apps) or module providers.
+ * 
+ * @param config - The configuration object containing required settings
+ * @returns EnvironmentProviders that can be added to the application providers
+ * 
+ * @example
+ * ```typescript
+ * import { provideTgoCodingTest } from '@testgorilla/tgo-coding-test';
+ * import { environment } from './environments/environment';
+ * 
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideTgoCodingTest({
+ *       coderunnerV2Endpoint: environment.coderunnerV2Endpoint,
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+export function provideTgoCodingTest(
+  config: TgoCodingTestConfig
+): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    {
+      provide: TGO_CODING_TEST_CONFIG,
+      useValue: config,
+    },
+  ]);
+}
+

package/src/lib/config/tgo-coding-test.token.ts

@@ -0,0 +1,21 @@
+import { InjectionToken } from '@angular/core';
+import { TgoCodingTestConfig } from './tgo-coding-test.config';
+
+/**
+ * Injection token for the TGO Coding Test library configuration.
+ * 
+ * This token is used to inject the runtime configuration provided
+ * by the consuming application into library services.
+ */
+export const TGO_CODING_TEST_CONFIG = new InjectionToken<TgoCodingTestConfig>(
+  'TGO_CODING_TEST_CONFIG',
+  {
+    providedIn: 'root',
+    factory: () => {
+      throw new Error(
+        'TGO_CODING_TEST_CONFIG must be provided. Use provideTgoCodingTest() in your app.config.ts or component providers.'
+      );
+    },
+  }
+);
+