@testgorilla/tgo-coding-test 2.0.0 → 2.0.1

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

@@ -1,41 +0,0 @@
-<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

@@ -1,173 +0,0 @@
-.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%;
-
-    @supports (-moz-appearance: none) {
-      // Firefox-specific override - fix table collapsed width
-      width: auto;
-    }
-
-    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

@@ -1,106 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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({
-    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

@@ -1,19 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-.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

@@ -1,40 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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({
-    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

@@ -1,75 +0,0 @@
-<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>