@testgorilla/tgo-coding-test 1.0.0 → 2.0.0

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

@@ -0,0 +1,278 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { take } from 'rxjs';
+import { ApplicationTheme } from '@testgorilla/tgo-ui';
+
+import {
+  CodeEditorFuncParam,
+  CodeEditorLanguages,
+  CodeEditorTypesMap,
+} from '../code-editor/helpers/code-editor-helper.model';
+import { PasteData } from '../code-editor/models/code-editor.model';
+import { CodingSnapshot } from '../code-editor/models/coding-snapshot.model';
+import { AssessmentIdPreview, LATLanguage, LATLanguages } from '../../models/lat-languages';
+import { Modes } from '../../models/mode';
+import { ExampleTestCase } from '../../models/test-cases';
+import { ViewMode } from '../../models/view-mode';
+import { ConfigurationsService } from '../../services/configurations.service';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { StorageCodingService } from '../../services/storage.service';
+import { TestCasesService } from '../../services/test-cases.service';
+import { ThemeService } from '../../services/theme.service';
+import { timeToMs } from '../../utils/time-to-ms.util';
+import { CodeEditorComponent } from '../code-editor/code-editor.component';
+import { CodingQuestionComponent } from '../coding-question/coding-question.component';
+import { RunnableEditorComponent } from '../runnable-editor/runnable-editor.component';
+
+@UntilDestroy()
+@Component({
+    selector: 'tgo-coding-test[languages]',
+    templateUrl: './tgo-coding-test.component.html',
+    styleUrl: './tgo-coding-test.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    imports: [
+        CommonModule,
+        CodeEditorComponent,
+        CodingQuestionComponent,
+        RunnableEditorComponent,
+    ]
+})
+export class TgoCodingTestComponent implements OnInit, OnChanges {
+
+  private readonly configurationsService = inject(ConfigurationsService);
+  private readonly libCodingTestService = inject(LibCodingTestService);
+  private readonly testCasesService = inject(TestCasesService);
+  private readonly StorageCodingService = inject(StorageCodingService);
+  private readonly themeService = inject(ThemeService);
+
+  @Input() initCode: string;
+  @Input() snapshot: CodingSnapshot;
+  @Input() functionParams: CodeEditorFuncParam[];
+  @Input() functionName: string;
+  @Input() returnType: keyof CodeEditorTypesMap;
+  @Input() isLAT: boolean;
+  @Input() isSQL: boolean;
+  @Input() shouldGenerateInitCode = true;
+  @Input() canAddCustomTestCases = true;
+
+  @Input() selectedProgrammingLanguage: LATLanguage;
+
+  @Input()
+  set languages(value: LATLanguages) {
+    if (!value.length) {
+      throw new Error('At least one language is required');
+    } else {
+      Object.defineProperty(this, 'languages', {
+        value,
+        writable: true,
+      });
+      this.updateLanguage();
+    }
+  }
+
+  @Input() isReadonly: boolean;
+  @Input() autoHeight: boolean;
+  @Input() translations: Record<string, unknown>;
+  @Input() questionText: string;
+  @Input() mode: Modes;
+  @Input() assessmentId: string;
+  @Input() companyColor: string;
+  @Input() testCasesStatus: any;
+  @Input() loading: boolean;
+  @Input() runTestResponse = [];
+  @Input() viewMode: ViewMode;
+  @Input() exampleTestCases: ExampleTestCase[];
+  // todo: remove this property from everywhere after sunsetting of the old flow
+  @Input() hideTestCases: boolean;
+  @Input() applicationTheme: ApplicationTheme = 'light';
+  @Input() questionId: number;
+
+  @Output() pasteEvent = new EventEmitter<PasteData>();
+  @Output() codeChange = new EventEmitter<string>();
+  @Output() runTestClick = new EventEmitter<boolean>();
+  @Output() languageChange = new EventEmitter<CodeEditorLanguages>();
+
+  colorTheme$ = this.configurationsService.colorTheme$;
+  isFullscreenMode$ = this.libCodingTestService.isFullscreen$;
+
+  isFullViewMode: boolean;
+  ViewModes = ViewMode;
+  themeSpecificColor: string;
+
+  ngOnInit() {
+    this.setIsFullViewMode();
+    this.setCompanyColor();
+    this.libCodingTestService.setInitCode(this.initCode);
+
+    // Local Data should be maintained only for candidate environment
+    if (this.isFullViewMode) {
+      // Perform periodic storage maintenance
+      this.performPeriodicMaintenance();
+
+      const storageAssessmentId =
+        this.isLAT && this.mode === Modes.NonAssessmentPreview
+          ? AssessmentIdPreview
+          : this.assessmentId;
+      const storageCodeEnable =
+        this.isLAT && (this.mode === Modes.Preview || this.mode === Modes.NonAssessmentPreview)
+          ? true
+          : this.mode === Modes.Running;
+      const storageTestCasesEnable = this.mode === Modes.Running && this.isLAT;
+      const storageQuestionId = Number.isInteger(this.questionId)
+        ? String(this.questionId)
+        : 'default-question-id';
+
+      this.libCodingTestService.currentLanguage$.pipe(take(1)).subscribe(language => {
+        this.StorageCodingService.setupAutoSavedData(
+          language,
+          storageAssessmentId,
+          storageQuestionId,
+          storageCodeEnable,
+          storageTestCasesEnable,
+          this.isLAT,
+          this.mode
+        );
+        if (storageTestCasesEnable) {
+          this.updateTestCases();
+        }
+        this.configurationsService.setCodeComponentDestroyed(false);
+        this.updateInitCode(this.initCode);
+        this.StorageCodingService.initializeSaving();
+      });
+
+      if (this.mode !== Modes.NonAssessmentPreview || this.isLAT) {
+        this.libCodingTestService.clearSavedCode$.pipe(untilDestroyed(this)).subscribe(() => {
+          this.StorageCodingService.clearSavedCode();
+          if (this.isLAT) {
+            this.StorageCodingService.clearSavedTestCases();
+          }
+        });
+
+        if (this.isLAT) {
+          this.libCodingTestService.clearLastLang$.pipe(untilDestroyed(this)).subscribe(() => {
+            this.StorageCodingService.clearLastLang();
+          });
+        }
+      }
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes.initCode?.firstChange && typeof changes.initCode?.currentValue === 'string') {
+      this.libCodingTestService.currentLanguage$.pipe(take(1)).subscribe(language => {
+        this.StorageCodingService.changeLanguage(language);
+        this.libCodingTestService.setInitCode(this.initCode);
+        this.updateInitCode(changes.initCode.currentValue);
+      });
+    }
+    if (changes.companyColor && changes.companyColor?.currentValue) {
+      this.themeService.companyColor = changes.companyColor.currentValue;
+    }
+  }
+
+  updateInitCode(code: string) {
+    const savedCode = this.StorageCodingService.getSavedCode();
+    this.initCode = savedCode ? savedCode : code;
+  }
+
+  private updateLanguage() {
+    const lastLanguageLAT = this.StorageCodingService.getLastLanguageLAT();
+    if (this.isLAT && this.isSavedLangRelevant(lastLanguageLAT)) {
+      this.libCodingTestService.changeCurrentLanguage(lastLanguageLAT.value);
+      const langVersion = this.getRelevantLangVersion(lastLanguageLAT);
+
+      if (langVersion) {
+        this.libCodingTestService.setVersion(langVersion);
+      }
+    } else {
+      const language = this.selectedProgrammingLanguage || this.languages[0];
+      this.libCodingTestService.changeCurrentLanguage(language.value);
+      if (language.version) {
+        this.libCodingTestService.setVersion(language.version);
+      }
+    }
+  }
+
+  private isSavedLangRelevant(lastLanguageLAT: {
+    value: CodeEditorLanguages;
+    version: string;
+  }): boolean {
+    return !!lastLanguageLAT && this.languages.some(({ value }) => value === lastLanguageLAT.value);
+  }
+
+  private getRelevantLangVersion(lastLang: {
+    value: CodeEditorLanguages;
+    version: string;
+  }): string {
+    const relevantLang = this.languages.find(({ value }) => value === lastLang?.value);
+
+    return relevantLang ? relevantLang.version : lastLang.version;
+  }
+
+  private updateTestCases() {
+    if (this.isLAT || (this.isSQL && !this.hideTestCases)) {
+      const testCases = this.StorageCodingService.getSavedTestCases();
+      if (testCases?.length) {
+        this.libCodingTestService.updateTestCases([...testCases]);
+        this.StorageCodingService.updateTestCases([...testCases]);
+        if (testCases[testCases.length - 1].localId) {
+          this.testCasesService.updateTestCaseLocalId(testCases[testCases.length - 1].localId);
+        }
+      } else {
+        this.libCodingTestService.updateTestCases([]);
+        this.StorageCodingService.updateTestCases([]);
+        this.testCasesService.resetLastTestCaseLocalId();
+      }
+    }
+  }
+
+  private setIsFullViewMode(): void {
+    this.isFullViewMode = this.viewMode === ViewMode.Full;
+  }
+
+  private setCompanyColor(): void {
+    this.themeService.themeColors$
+      .pipe(untilDestroyed(this))
+      .subscribe(({ companyColor, themeSpecificColor }) => {
+        this.companyColor = companyColor;
+        this.themeSpecificColor = themeSpecificColor;
+      });
+  }
+
+  /**
+   * Performs periodic maintenance on localStorage data
+   * This is done with a random chance to distribute cleanup over time
+   * and prevent all users from cleaning up storage at the same time.
+   */
+  private performPeriodicMaintenance(): void {
+    // Check the last time maintenance was done (stored in a separate key)
+    const maintenanceKey = 'lastCodingTestStorageMaintenance';
+    const lastMaintenance = localStorage.getItem(maintenanceKey);
+    const now = Date.now();
+    const isDoneLaterThanDay = now - parseInt(lastMaintenance, 10) > timeToMs(1);
+
+    // If maintenance was never done or was done more than a day ago,
+    // perform it with a 20% chance to distribute load
+    if (!lastMaintenance || isDoneLaterThanDay) {
+      // Perform maintenance with 20% probability to distribute load
+      if (Math.random() < 0.2) {
+        // Perform the cleanup silently
+        this.StorageCodingService.performMaintenanceAndCleanup();
+        localStorage.setItem(maintenanceKey, now.toString());
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+<ng-container *transloco="let t; read: 'CODING_QUESTION'">
+  @if (languages()?.length && codingLibTranslations()) {
+    <tgo-coding-test
+      class="coding-lib"
+      [assessmentId]="assessment!.uuid!"
+      [questionId]="question!.question_id!"
+      [isLAT]="isLAT"
+      [canAddCustomTestCases]="isLAT"
+      [isSQL]="isSQL"
+      [languages]="languages()"
+      [initCode]="initCode"
+      [mode]="mode"
+      [viewMode]="viewModes.Full"
+      [loading]="testResultsLoading()"
+      [companyColor]="companyColor"
+      [questionText]="question.text"
+      [testCasesStatus]="codingTestResults?.resume"
+      [runTestResponse]="codingTestResults?.listResponse!"
+      [exampleTestCases]="exampleTestCases"
+      [applicationTheme]="canopyUiTheme"
+      [translations]="codingLibTranslations()"
+      (codeChange)="updateCode($event)"
+      (runTestClick)="runTest()"
+      (languageChange)="languageChange($event)"
+      (pasteEvent)="screenshotPaste($event)"
+    >
+    </tgo-coding-test>
+  }
+</ng-container>
+
+<ngx-guided-tour
+  [ngClass]="activeGuidedTourId$ | async"
+  [ngStyle]="{ '--company-color': companyColor }"
+  [class.dark]="canopyUiTheme === 'dark'"
+></ngx-guided-tour>
+

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

@@ -0,0 +1,183 @@
+@import 'ngx-guided-tour/scss/guided-tour-base-theme';
+@import '@testgorilla/tgo-ui/projects/tgo-canopy-ui/theme/variables';
+
+body.tour-open {
+  ngx-guided-tour {
+    --guided-tour-background-color: #{$tgo-white};
+    --guided-tour-text-color: #{$tgo-black};
+    $legacy-secondary-black: #2d2d2d;
+
+    &.dark {
+      --guided-tour-background-color: #{$legacy-secondary-black};
+      --guided-tour-text-color: #{$tgo-white};
+    }
+
+    .tour-step {
+      &.hidden {
+        display: none;
+      }
+
+      h2.tour-title,
+      h3.tour-title {
+        font-size: 20px;
+        padding-bottom: 0;
+        margin-top: 0;
+      }
+
+      .tour-block {
+        color: var(--guided-tour-text-color);
+        background-color: var(--guided-tour-background-color);
+        border-radius: 5px;
+        padding: 37px;
+        box-shadow: 0 0 13px #bbb;
+      }
+
+      .tour-buttons {
+        button {
+          text-align: center;
+          border-radius: 5px;
+          width: 45%;
+          height: 48px;
+          padding: 0;
+          font-weight: 600;
+        }
+
+        button.skip-button {
+          background: #e2e2e2;
+        }
+
+        button.next-button {
+          color: $tgo-white;
+          background-color: $tgo-teal-default;
+        }
+
+        button.back-button {
+          display: none;
+        }
+      }
+
+      &.tour-bottom .tour-arrow::before {
+        border-bottom: 1rem solid var(--guided-tour-background-color);
+      }
+
+      &.tour-top .tour-arrow::before {
+        border-top: 1rem solid var(--guided-tour-background-color);
+      }
+
+      &.tour-left .tour-arrow::before {
+        border-left: 1rem solid var(--guided-tour-background-color);
+      }
+
+      &.tour-right .tour-arrow::before {
+        border-right: 1rem solid var(--guided-tour-background-color);
+      }
+
+      &.tour-bottom-right .tour-arrow::before {
+        border-bottom-color: var(--guided-tour-background-color);
+      }
+
+      .tour-content {
+        text-align: center;
+        font-size: 14px;
+      }
+
+      h2.tour-title {
+        text-align: center;
+      }
+
+      h3.tour-title {
+        text-align: center;
+      }
+    }
+
+    .guided-tour-spotlight-overlay {
+      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3),
+        0 0 1.5rem rgba(0, 0, 0, 0.15);
+      border-radius: 5px;
+    }
+
+    &.lat-coding-tour {
+      h3.tour-title,
+      h2.tour-title,
+      .tour-content {
+        text-align: left;
+      }
+
+      .tour-content {
+        padding-bottom: 24px;
+      }
+    }
+
+    &.lat-coding-tour {
+      .tour-buttons {
+        button.skip-button {
+          background: $tgo-white;
+          border: 1px solid $tgo-black;
+        }
+
+        button.next-button {
+          background-color: var(--company-color, $brand-50);
+        }
+      }
+    }
+  }
+
+  &[theme='dark'] {
+    ngx-guided-tour {
+      .tour-step .tour-block {
+        box-shadow: none;
+      }
+
+      .guided-tour-spotlight-overlay {
+        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65),
+          0 0 1.5rem rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+      }
+    }
+  }
+}
+
+body.theme-dark ngx-guided-tour {
+  .tour-step .tour-block {
+    box-shadow: none;
+  }
+
+  .guided-tour-spotlight-overlay {
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65), 0 0 1.5rem rgba(0, 0, 0, 0.5);
+    border-radius: 5px;
+  }
+}
+
+body {
+  .tgo-test-code {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+
+    tgo-question,
+    tgo-micro-test-library-shell-container {
+      display: flex;
+    }
+  }
+
+  &[theme='dark'] {
+    .micro-question-code .coding-lib {
+      ui-dropdown,
+      ui-field {
+        .mat-mdc-text-field-wrapper {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}
+
+.micro-question-code {
+  display: flex;
+
+  .coding-lib {
+    display: block;
+    height: 100%;
+  }
+}
+