@testgorilla/tgo-coding-test 1.0.0 → 2.0.0

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,137 @@
+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

@@ -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,33 @@
+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

@@ -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>

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

@@ -0,0 +1,55 @@
+@import "../../styles/mixins";
+
+@include as-split-styles();
+
+:host {
+  display: block;
+  height: 100%;
+
+  @media screen and (max-width: 959px) {
+    flex: 1 0 600px;
+    height: auto;
+  }
+}
+
+.ide {
+  &-split-area {
+    // prevents resizing to 0, set threshold
+    min-height: 65px;
+  }
+
+  &-container {
+    height: 100%;
+  }
+}
+
+.tests {
+  height: 100%;
+
+  &-lat {
+    overflow: hidden;
+
+    @media screen and (max-width: 959px) {
+      flex: 1 0 60vh;
+    }
+  }
+}
+
+.coding-section {
+  display: block;
+  height: 100%;
+}
+
+.container-mobile {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .ide-container {
+    max-height: 60vh;
+  }
+
+  .tests {
+    max-height: 60vh;
+  }
+}

package/src/lib/components/runnable-editor/runnable-editor.component.spec.ts

@@ -0,0 +1,124 @@
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+
+import { ChangeDetectorRef, ElementRef, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MockProvider } from 'ng-mocks';
+import { BehaviorSubject, of, Subject } from 'rxjs';
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
+import { RunnableEditorComponent } from './runnable-editor.component';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { ConfigurationsService } from '../../services/configurations.service';
+import { StorageCodingService } from '../../services/storage.service';
+import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
+import { CONFIGURATIONS_SERVICE_MOCK } from '../../services/configurations.service.mocks';
+
+jest.mock('../../utils/resize-element', () => ({
+  resizeElement: jest.fn(el => of(el)),
+}));
+
+describe('RunnableEditorComponent', () => {
+  let component: RunnableEditorComponent;
+  let fixture: ComponentFixture<RunnableEditorComponent>;
+  const codingTestsSplitRefMock = {
+    nativeElement: {
+      offsetHeight: 200,
+      contentRect: { height: 250 },
+    },
+  };
+  const testsSplitAreaRefMock = {
+    nativeElement: {
+      offsetHeight: 50,
+    },
+  };
+  jest.useFakeTimers();
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RunnableEditorComponent, MonacoEditorModule.forRoot(), NoopAnimationsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        MockProvider(ChangeDetectorRef),
+        MockProvider(LibCodingTestService, {
+          codeChange$: new Subject(),
+          isBoilerplateLoading$: new Subject(),
+          languageChange$: new Subject(),
+          codeReset$: new Subject(),
+          currentLanguage$: new BehaviorSubject<CodeEditorLanguages>(CodeEditorLanguages.Javascript),
+        }),
+        MockProvider(ConfigurationsService, CONFIGURATIONS_SERVICE_MOCK),
+        MockProvider(StorageCodingService),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RunnableEditorComponent);
+    component = fixture.componentInstance;
+    component.isMobile = true;
+    component.translations = {
+      HEADINGS: {},
+      TOOLTIPS: { RESET_CODE: '' },
+      TEST_RESULTS: {
+        RUN_TESTS: '',
+        TEST_CASES: {},
+      },
+      MODALS: { RESET_CODE: {} },
+    }; // Provide translations to prevent template errors
+    component.codingTestsSplitRef = { ...codingTestsSplitRefMock } as ElementRef;
+    component.testsSplitAreaRef = { ...testsSplitAreaRefMock } as ElementRef;
+  });
+
+  describe('when the view is initialized', () => {
+    describe('and isMobile === true', () => {
+      it('should NOT set up minTestsSplitHeight', () => {
+        expect(component.minTestsSplitHeight).toBeFalsy();
+      });
+    });
+
+    describe('and isMobile === false', () => {
+      beforeEach(() => {
+        component.isMobile = false;
+      });
+
+      describe('and isFullViewMode === true', () => {
+        beforeEach(() => {
+          component.isFullViewMode = true;
+          component.ngAfterViewInit();
+        });
+
+        it('should set minTestsSplitHeight according to codingTestsSplitRef height', fakeAsync(() => {
+          tick();
+          jest.runAllTimers();
+          expect(component.minTestsSplitHeight).toEqual(47.6);
+          flush();
+          discardPeriodicTasks();
+        }));
+
+        it('should set currentTestsSplitHeight according to testsPercentHeight', fakeAsync(() => {
+          tick();
+          jest.runAllTimers();
+
+          expect(component.currentTestsSplitHeight).toEqual(47.6);
+          flush();
+          discardPeriodicTasks();
+        }));
+
+        it('should set currentIdeSplitHeight according to currentTestsSplitHeight', fakeAsync(() => {
+          tick();
+          jest.runAllTimers();
+          expect(component.currentIdeSplitHeight).toEqual(52.4);
+          flush();
+          discardPeriodicTasks();
+        }));
+      });
+
+      describe('and isFullViewMode === false', () => {
+        beforeEach(() => {
+          component.ngAfterViewInit();
+        });
+
+        it('should set minTestsSplitHeight according to codingTestsSplitRef height', () => {
+          expect(component.minTestsSplitHeight).toEqual(59.5);
+        });
+      });
+    });
+  });
+});