@testgorilla/tgo-coding-test 0.0.1

package/src/lib/components/instructions/instructions.component.html

@@ -0,0 +1,41 @@
+<ng-container *ngIf="language$ | async as language">
+  <section *ngIf="questionText" class="question" id="question-section">
+    <header class="question-header">
+      <h2 class="question-heading">{{ translations['HEADINGS']['INSTRUCTIONS'] }}</h2>
+    </header>
+    <div class="question-content">
+      <ng-container *ngIf="mode === PreviewMode">
+        <div class="tips">
+          <ui-tooltip [message]="translations['PRACTICE_QUESTIONS_STAGE']['INFO']" class="tips-icon">
+            <ui-icon [name]="'Info'" [size]="'24'"></ui-icon>
+          </ui-tooltip>
+          <p class="tips-panel-text">
+            {{ translations['PRACTICE_QUESTIONS_STAGE']['QUESTIONS_INDEXING_AS_LAST'] }}
+          </p>
+        </div>
+        <p class="tips-text" [innerHTML]="translations['CODE_QUESTION']['PRACTICE_INTRODUCTION']"></p>
+        <ui-divider class="divider" [size]="'small'"></ui-divider>
+      </ng-container>
+
+      <quill-view
+        #quill
+        class="disable-text-selection question-text"
+        [class.question-text-dark]="isDarkTheme"
+        theme="snow"
+        [content]="questionText"
+      ></quill-view>
+      <div [ngSwitch]="language">
+        <span class="mr-4">{{ translations['CODE_QUESTION']['LANGUAGE_USING'] }}&nbsp;</span>
+        <ng-container *ngFor="let item of languages | keyvalue">
+          <span *ngSwitchCase="item.key">
+            <span class="bold mr-4">{{ item.value + ' ' + ([isLAT, item.key] | memoizeFunc: getVersion : this) }}</span>
+          </span>
+        </ng-container>
+        <span *ngIf="mode === RunningMode || mode === NonAssessmentPreview">
+          <br />
+          <span>{{ translations['CODE_QUESTION']['ADD_COMMENTS'] }}</span>
+        </span>
+      </div>
+    </div>
+  </section>
+</ng-container>

package/src/lib/components/instructions/instructions.component.scss

@@ -0,0 +1,167 @@
+.tips {
+  border-radius: 5px;
+  display: flex;
+  flex-direction: row;
+  place-content: center flex-start;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 16px;
+  background-color: var(--info-panel-color);
+
+  &-panel-text {
+    color: #000;
+  }
+
+  &-panel-text, &-text {
+    font-size: 16px;
+  }
+
+  &-icon {
+    margin-right: 8px;
+  }
+}
+
+.testgorilla-petrol-light {
+  background: #C8D7DE;
+}
+
+.question-text {
+  display: block;
+  margin-bottom: 32px;
+}
+
+.question-text-dark {
+  ::ng-deep .ql-snow .ql-editor {
+    *[style] { // to override copypasted styles in quill editor and make it usable for dark theme
+      color: var(--main-text-color) !important;
+      background-color: inherit !important;
+    }
+  }
+}
+
+.disable-text-selection { // Taken from style.scss
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.question {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  @media screen and (max-width: 959px) {
+    height: auto;
+  }
+
+  &.long_answer_list {
+    padding-bottom: 0;
+  }
+
+  ::ng-deep {
+    .ql-editor,
+    .ql-container {
+      max-height: 100%;
+    }
+  }
+
+  &-content {
+    padding: 16px 40px 30px;
+    height: 100%;
+    overflow-y: auto;
+
+    .divider {
+      display: block;
+      margin: 12px 0;
+    }
+  }
+}
+
+.question-header {
+  padding: 18px 0 18px 40px;
+  border-bottom: 1px solid #E0E0E0;
+
+  .question-heading {
+    margin: 0;
+  }
+}
+
+:host {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+
+  @media screen and (max-width: 959px) {
+    height: auto;
+    flex: 1 0 auto;
+  }
+
+  ::ng-deep p {
+    margin: 0;
+    position: relative;
+  }
+
+  ::ng-deep img {
+    border-radius: 5px;
+  }
+
+  .bold {
+    font-weight: bold;
+  }
+
+  .medium-size {
+    font-size: medium;
+  }
+
+  .image {
+    border-radius: 6px;
+    overflow: hidden;
+    transform: translateZ(0px);
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
+::ng-deep .ql-editor {
+  height: auto;
+  .table-q {
+    width: 100%;
+    border-collapse: collapse;
+    border-radius: 5px;
+    table-layout: fixed;
+    overflow: hidden;
+    white-space: nowrap;
+
+    .tr-q:first-of-type {
+      background-color: var(--main-text-color) !important;
+      color: white;
+    }
+
+    .tr-q:nth-of-type(even) {
+      background-color: var(--tertiary-background-color);
+    }
+
+    .tr-q:nth-of-type(odd) {
+      background-color: var(--grey-background);
+    }
+
+    .td-q {
+      border: 4px solid var(--secondary-border-color);
+      border-radius: 10px;
+      padding: 2px 5px;
+      height: 25px;
+      vertical-align: top;
+      text-align: center;
+      white-space: normal;
+    }
+  }
+
+  &.ql-blank::before {
+    color: var(--secondary-text-color);
+  }
+}

package/src/lib/components/instructions/instructions.component.spec.ts

@@ -0,0 +1,106 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MockProvider } from 'ng-mocks';
+import { ReplaySubject } from 'rxjs';
+import Quill from 'quill';
+
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
+import { InstructionsComponent } from './instructions.component';
+
+jest.mock('quill', () => {
+  const mockRegister = jest.fn();
+  return {
+    __esModule: true,
+    default: {
+      register: mockRegister,
+    },
+  };
+});
+
+jest.mock('quill/formats/table', () => ({
+  TableCell: class TableCell {},
+  TableContainer: class TableContainer {},
+  TableRow: class TableRow {},
+}));
+
+describe('InstructionsComponent', () => {
+  let component: InstructionsComponent;
+  let fixture: ComponentFixture<InstructionsComponent>;
+
+  let libCodingTestService: LibCodingTestService;
+
+  let getVersionSpy: jest.SpyInstance;
+
+  const backendVersion = '1.23';
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [InstructionsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        MockProvider(LibCodingTestService, {
+          getVersion() {
+            return backendVersion;
+          },
+          currentLanguage$: new ReplaySubject(1),
+          changeCurrentLanguage(value: CodeEditorLanguages): void {
+            this.currentLanguage$.next(value);
+          },
+        }),
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InstructionsComponent);
+    component = fixture.componentInstance;
+    component.languagesVersion = {
+      c: '10',
+      'c#': '3.1.300',
+      'c#_legacy': '3.1.300',
+      'c++': '10',
+      java: '12',
+      python: '3.8',
+      javascript: '13',
+      php: '7.4',
+      sql: '3.31.1',
+      typescript: '4.3.4',
+      ruby: '3',
+      go: '1.16',
+      r: '4.1.0',
+      scala: '2.11',
+      kotlin: '',
+      swift: '',
+    };
+
+    libCodingTestService = TestBed.inject(LibCodingTestService);
+    getVersionSpy = jest.spyOn(libCodingTestService, 'getVersion');
+
+    fixture.detectChanges();
+  });
+
+  describe('when test is LAT', () => {
+    it('getVersion should return versions sent from backend', () => {
+      component.isLAT = true;
+
+      expect(component.getVersion([component.isLAT, CodeEditorLanguages.Go])).toEqual(backendVersion);
+      expect(getVersionSpy).toBeCalled();
+    });
+  });
+
+  describe('when test is NOT LAT', () => {
+    it('getVersion should return hardcoded version from frontend', () => {
+      component.isLAT = false;
+
+      expect(component.getVersion([component.isLAT, CodeEditorLanguages.Go])).toEqual(component.languagesVersion.go);
+    });
+  });
+
+  it('should register Quill formats on init', () => {
+    jest.clearAllMocks();
+    const registerSpy = jest.spyOn(Quill, 'register');
+    component.ngOnInit();
+    expect(registerSpy).toHaveBeenCalledTimes(3);
+  });
+});

package/src/lib/components/instructions/instructions.component.ts

@@ -0,0 +1,138 @@
+import { Component, ElementRef, inject, Input, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import Quill from 'quill';
+import { TableCell, TableContainer, TableRow } from 'quill/formats/table';
+import { asyncScheduler, observeOn, of, take } from 'rxjs';
+import { QuillModule } from 'ngx-quill';
+import { TooltipComponentModule, IconComponentModule, DividerComponentModule } from '@testgorilla/tgo-ui';
+
+import { Modes } from '../../models/mode';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+
+class TGOTableCell extends TableCell {
+  public static className = 'td-q';
+}
+
+class TGOTableRow extends TableRow {
+  public static className = 'tr-q';
+}
+
+class TGOTableContainer extends TableContainer {
+  public static className = 'table-q';
+}
+
+@Component({
+  standalone: true,
+  selector: 'tgo-code-instructions',
+  templateUrl: 'instructions.component.html',
+  styleUrls: ['instructions.component.scss'],
+  imports: [
+    CommonModule,
+    QuillModule,
+    TooltipComponentModule,
+    IconComponentModule,
+    DividerComponentModule,
+    MemoizeFuncPipe,
+  ],
+})
+export class InstructionsComponent implements OnInit {
+  private readonly libCodingTestService = inject(LibCodingTestService);
+
+  readonly PreviewMode = Modes.Preview;
+  readonly RunningMode = Modes.Running;
+  readonly NonAssessmentPreview = Modes.NonAssessmentPreview;
+  @Input() mode = Modes.Preview;
+  @Input() questionText: string;
+  @Input() translations: Record<string, unknown>;
+  @Input() isDarkTheme: boolean;
+  @Input() isLAT = false;
+  language$ = this.libCodingTestService.currentLanguage$;
+
+  @ViewChild('quill', { read: ElementRef }) set QuillElement(quill: ElementRef) {
+    if (!quill) {
+      return;
+    }
+
+    this.manualHighlight(quill.nativeElement);
+  }
+
+  languages = {
+    c: 'C GCC',
+    'c#': 'C# SDK',
+    'c#_legacy': 'C# SDK',
+    'c++': 'C++ G++',
+    java: 'Java OpenJDK',
+    python: 'Python',
+    javascript: 'JavaScript Node',
+    php: 'PHP',
+    sql: 'SQL SQLite',
+    typescript: 'Typescript',
+    ruby: 'Ruby',
+    go: 'Go',
+    r: 'R',
+    kotlin: 'Kotlin',
+    elixir: 'Elixir',
+    rust: 'Rust',
+    dart: 'Dart',
+    erlang: 'Erlang',
+    julia: 'Julia',
+    perl: 'Perl',
+    swift: 'Swift',
+    scala: 'Scala',
+  };
+  languagesVersion: { [key: string]: string } = {
+    c: '10',
+    'c#': '3.1.300',
+    'c#_legacy': '3.1.300',
+    'c++': '10',
+    java: '12',
+    python: '3.8',
+    javascript: '13',
+    php: '7.4',
+    sql: '3.31.1',
+    typescript: '4.3.4',
+    ruby: '3',
+    go: '1.16',
+    r: '4.1.0',
+    kotlin: '',
+    elixir: '',
+    rust: '',
+    dart: '',
+    erlang: '',
+    julia: '',
+    perl: '',
+    swift: '',
+    scala: '2.11',
+  };
+
+  private manualHighlight(quillElement: HTMLElement): void {
+    const codeElements = quillElement.getElementsByTagName('pre');
+
+    if (!codeElements.length) {
+      return;
+    }
+
+    of(Array.from(codeElements))
+      .pipe(observeOn(asyncScheduler), take(1))
+      .subscribe((codeElements: HTMLPreElement[]) => {
+        if (!window.hljs) {
+          return;
+        }
+
+        codeElements.forEach(el => {
+          window.hljs.highlightBlock(el);
+        });
+      });
+  }
+
+  ngOnInit(): void {
+    Quill.register(TGOTableCell, true);
+    Quill.register(TGOTableRow, true);
+    Quill.register(TGOTableContainer, true);
+  }
+
+  getVersion([isLAT, key]: [boolean, string]): string {
+    return isLAT ? this.libCodingTestService.getVersion() : this.languagesVersion[key];
+  }
+}

package/src/lib/components/panel/panel.component.html

@@ -0,0 +1,19 @@
+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav #sidenav position="end" (closedStart)="closeEvent.emit(true)">
+    <div class="container">
+      <div class="header">
+        <h2 class="heading">{{ heading }}</h2>
+        <ui-button
+          [variant]="'icon-button'"
+          [iconName]="'Close'"
+          [tooltip]="'Close'"
+          (buttonClickEvent)="sidenav.close()"
+          class="themed-button"
+        ></ui-button>
+      </div>
+      <div>
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </mat-sidenav>
+</mat-sidenav-container>

package/src/lib/components/panel/panel.component.scss

@@ -0,0 +1,41 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 32px 24px 32px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+  }
+
+  .heading {
+    margin: 0;
+  }
+}
+
+.close-icon {
+  fill: var(--icon-bg-color);
+}
+
+.sidenav-container {
+  z-index: 36;
+
+  mat-sidenav {
+    width: 100%;
+    max-width: 600px;
+    background-color: var(--drawer-bg-color)!important;
+  }
+
+  .mat-sidenav.mat-drawer-opened {
+    position: fixed;
+  }
+
+  ::ng-deep {
+    .mat-drawer-backdrop.mat-drawer-shown {
+      background-color: transparent;
+      position: fixed;
+    }
+  }
+}

package/src/lib/components/panel/panel.component.spec.ts

@@ -0,0 +1,40 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { PanelComponent } from './panel.component';
+import { NO_ERRORS_SCHEMA, SimpleChanges } from '@angular/core';
+
+describe('PanelComponent', () => {
+  let component: PanelComponent;
+  let fixture: ComponentFixture<PanelComponent>;
+  let changesObj: SimpleChanges;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PanelComponent, NoopAnimationsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PanelComponent);
+    component = fixture.componentInstance;
+    component.sidenav = { open: jest.fn() } as any;
+    changesObj = { openPanel: { currentValue: true } } as unknown as SimpleChanges;
+
+    fixture.detectChanges();
+  });
+
+  describe('when ngOnChanges is called', () => {
+    it('should open sidenav when openPanel changes to true', () => {
+      component.ngOnChanges(changesObj);
+      expect(component.sidenav.open).toHaveBeenCalled();
+    });
+
+    it('should NOT open sidenav when openPanel value is falsy', () => {
+      const localChanges = { ...changesObj };
+      localChanges.openPanel.currentValue = null;
+
+      component.ngOnChanges(localChanges);
+
+      expect(component.sidenav.open).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/components/panel/panel.component.ts

@@ -0,0 +1,34 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { CommonModule } from '@angular/common';
+import { ButtonComponentModule } from '@testgorilla/tgo-ui';
+
+@Component({
+  standalone: true,
+  selector: 'tgo-code-panel',
+  templateUrl: 'panel.component.html',
+  styleUrls: ['panel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, MatSidenavModule, ButtonComponentModule],
+})
+export class PanelComponent implements OnChanges {
+  @Input() heading: string;
+  @Input() openPanel: boolean;
+  @Output() closeEvent = new EventEmitter<boolean>();
+  @ViewChild('sidenav', { static: true }) sidenav: MatSidenav;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.openPanel.currentValue) {
+      this.sidenav.open();
+    }
+  }
+}

package/src/lib/components/runnable-editor/runnable-editor.component.html

@@ -0,0 +1,75 @@
+<as-split
+  *ngIf="!isMobile; else mobileTpl"
+  #codingTestsSplit
+  class="as-split"
+  direction="vertical"
+  restrictMove="true"
+  [gutterSize]="GUTTER_SIZE"
+>
+  <as-split-area class="ide-split-area" [size]="currentIdeSplitHeight">
+    <ng-container [ngTemplateOutlet]="ide"></ng-container>
+  </as-split-area>
+  <as-split-area #testsSplitArea [size]="currentTestsSplitHeight" [minSize]="minTestsSplitHeight">
+    <ng-container [ngTemplateOutlet]="tests"></ng-container>
+  </as-split-area>
+</as-split>
+
+<ng-template #mobileTpl>
+  <div class="container-mobile">
+    <ng-container [ngTemplateOutlet]="ide"></ng-container>
+    <ng-container [ngTemplateOutlet]="tests"></ng-container>
+  </div>
+</ng-template>
+
+<ng-template #ide>
+  <div class="ide-container">
+    <tgo-coding-section
+      class="coding-section"
+      [initCode]="initCode"
+      [functionParams]="functionParams"
+      [functionName]="functionName"
+      [returnType]="returnType"
+      [isFullViewMode]="isFullViewMode"
+      [isRunnableWithLangSelector]="isRunnableWithLangSelector"
+      [shouldGenerateInitCode]="shouldGenerateInitCode"
+      [isLAT]="isLAT"
+      [languages]="languages"
+      [autoHeight]="autoHeight"
+      [translations]="translations"
+      [isMobile]="isMobile"
+      [applicationTheme]="applicationTheme"
+      (pasteEvent)="pasteEvent.emit($event)"
+      (codeChange)="codeChange.emit($event)"
+      (languageChange)="languageChange.emit($event)"
+    ></tgo-coding-section>
+
+    <tgo-code-configurations
+      *ngIf="isFullViewMode"
+      [translations]="translations"
+      [companyColor]="companyColor"
+      [applicationTheme]="applicationTheme"
+    >
+    </tgo-code-configurations>
+  </div>
+</ng-template>
+
+<ng-template #tests>
+  <div class="tests" [class.tests-lat]="isLAT">
+    <tgo-code-test-results
+      [companyColor]="companyColor"
+      [testCasesStatus]="testCasesStatus"
+      [loading]="loading"
+      [isLAT]="isLAT"
+      [isSQL]="isSQL"
+      [runTestResponse]="runTestResponse"
+      [translations]="translations"
+      [exampleTestCases]="exampleTestCases"
+      [canChangeProgrammingLang]="languages?.length > 1"
+      [showTestCases]="isLAT || (isSQL && !hideTestCases)"
+      [canAddCustomTestCases]="canAddCustomTestCases"
+      [applicationTheme]="applicationTheme"
+      (runTestClick)="runTestClick.emit($event)"
+    >
+    </tgo-code-test-results>
+  </div>
+</ng-template>