@testgorilla/tgo-coding-test 2.0.0 → 2.0.1

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

@@ -1,578 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  computed,
-  EventEmitter,
-  HostBinding,
-  inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  signal,
-  ViewEncapsulation,
-} 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 {
-  ApiService,
-  Assessment,
-  EnvironmentService,
-  getAvailableLangs,
-  IAntiCheatingState,
-  IConfigurationState,
-  INavigationButtonState,
-  IQuestionDataContract,
-  ISubmissionState,
-  MixpanelService,
-  Question,
-  TestResultRead,
-  ThemeService,
-  TranslocoLazyModuleUtils,
-} from '@testgorilla/tgo-test-shared';
-import {
-  ApplicationTheme,
-  ConfirmDialogComponent,
-  DialogComponentModule,
-  DialogService,
-  SnackbarComponentModule,
-} from '@testgorilla/tgo-ui';
-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 { LATLanguages } from '../../models/lat-languages';
-import { Modes } from '../../models/mode';
-import { PasteData } from '../../models/paste-data';
-import {
-  ProgrammingLanguage,
-  ProgrammingLanguageVersioned,
-} from '../../models/programming-language';
-import { ExampleTestCase, SqlTestCase } from '../../models/test-cases';
-import { Themes } from '../../models/theme';
-import { ROOT_TRANSLATIONS_SCOPE } from '../../models/translations';
-import { ViewMode } from '../../models/view-mode';
-import {
-  CandidatureApiService,
-  CoderunnerApiService,
-  CodingTestService,
-  CodingTestTourMode,
-  CodingTestTourService,
-} from '../../services/candidate-coding-test-services';
-import { CodingTestConfigService } from '../../services/coding-test-config.service';
-import { LibCodingTestService } from '../../services/lib-coding-test.service';
-import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
-import { TgoCodingTestComponent } from '../tgo-coding-test/tgo-coding-test.component';
-
-@UntilDestroy()
-@Component({
-  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) => {
-        // Fetch from app assets; demo app copies the library assets to
-        // /assets/tgo-coding-test via project.json.
-        const url = new URL(`assets/tgo-coding-test/i18n/${lang}.json`, document.baseURI).href;
-        return fetch(url).then(res => res.json());
-      }
-    ),
-    EnvironmentService,
-    CoderunnerApiService,
-    CodingTestService,
-    CodingTestTourService,
-    GuidedTourService,
-    ThemeService,
-    CandidatureApiService,
-    MixpanelService,
-    // use MockedApiService for local demo ONLY
-    ApiService, //{ provide: ApiService, useClass: MockedApiService },
-  ],
-})
-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/tgo-coding-test.config.ts

@@ -1,26 +0,0 @@
-/**
- * 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.token.ts

@@ -1,21 +0,0 @@
-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.'
-      );
-    },
-  }
-);
-

package/src/lib/models/auto-saved-data.ts

@@ -1,51 +0,0 @@
-import { CodeEditorLanguages } from '../components/code-editor/helpers/code-editor-helper.model';
-import { Config } from './configs';
-import { CustomTestCase, ExampleTestCase } from './test-cases';
-
-export type TestData = {
-  code: {
-    [key in CodeEditorLanguages]?: string;
-  };
-  testCasesLAT?: (CustomTestCase | ExampleTestCase)[];
-  lastModified?: number; // timestamp when this entry was last modified
-};
-
-// For v2 schema
-export type QuestionData = {
-  preview?: TestData;
-  actual?: TestData;
-  lastModified?: number;
-};
-
-// Version 1 schema - original
-export type AutoSavedDataV1 = {
-  config: Config;
-  isFullscreen: boolean;
-  assessments: {
-    [key: string]: TestData;
-  };
-  lastLanguageLAT?: {
-    value: CodeEditorLanguages;
-    version: string;
-  };
-};
-
-// Version 2 schema - separated by questionId
-export type AutoSavedDataV2 = {
-  version: 2;
-  config: Config;
-  isFullscreen: boolean;
-  assessments: {
-    [assessmentId: string]: {
-      [questionId: string]: QuestionData;
-    };
-  };
-  lastLanguageLAT?: {
-    value: CodeEditorLanguages;
-    version: string;
-  } | null;
-  lastModified: number;
-};
-
-// Current version
-export type AutoSavedData = AutoSavedDataV2;

package/src/lib/models/code-event.ts

@@ -1,17 +0,0 @@
-export interface CodeEvent {
-  language: string;
-  code: string;
-  extra_payload: string;
-  event_type: CodeEventTypeEnum;
-  attempt_id: string | null;
-  question_result_id: number;
-}
-
-export interface CodeEventResponse extends CodeEvent {
-  id: string;
-  created_at: string;
-  updated_at: string;
-}
-
-type CodeEventTypeEnum =
-  'AUTOSAVE' | 'SWITCH' | 'COPYPASTE' | 'ATTEMPT';