@testgorilla/tgo-coding-test 0.0.1

package/src/lib/components/code-editor/helpers/sql-helper.spec.ts

@@ -0,0 +1,87 @@
+import { CodeEditorFuncOptions, CodeEditorSqlOperations } from './code-editor-helper.model';
+import { CodeEditorSqlHelper } from './sql-helper';
+
+describe('CodeEditorSqlHelper', () => {
+  let helper: CodeEditorSqlHelper;
+
+  const defaultParams: CodeEditorFuncOptions = { name: CodeEditorSqlOperations.Select };
+  const correctFuncOpening = 'SELECT\n';
+  const correctSelectInitCode = `${correctFuncOpening}## FROM ## WHERE ##;\n`;
+
+  beforeEach(() => {
+    helper = new CodeEditorSqlHelper(defaultParams);
+  });
+
+  describe('when getting init code', () => {
+    let result: string;
+
+    beforeEach(() => {
+      result = helper.getInitCode();
+    });
+
+    describe('and operation is SELECT', () => {
+      it('should return proper init code', () => {
+        expect(result).toEqual(correctSelectInitCode);
+      });
+    });
+
+    describe('and operation is UPDATE', () => {
+      it('should return proper init code', () => {
+        const correctInitCode = 'UPDATE\n## SET ## WHERE ##;\n';
+        helper = new CodeEditorSqlHelper({ name: CodeEditorSqlOperations.Update });
+        result = helper.getInitCode();
+        expect(result).toEqual(correctInitCode);
+      });
+    });
+
+    describe('and operation is INSERT', () => {
+      it('should return proper init code', () => {
+        const correctInitCode = 'INSERT\nINTO ## WHERE ##;\n';
+        helper = new CodeEditorSqlHelper({ name: CodeEditorSqlOperations.Insert });
+        result = helper.getInitCode();
+        expect(result).toEqual(correctInitCode);
+      });
+    });
+
+    describe('and operation is DELETE', () => {
+      it('should return proper init code', () => {
+        const correctInitCode = 'DELETE\n## FROM ## WHERE ##;\n';
+        helper = new CodeEditorSqlHelper({ name: CodeEditorSqlOperations.Delete });
+        result = helper.getInitCode();
+        expect(result).toEqual(correctInitCode);
+      });
+    });
+
+    describe('and operation is CREATE TABLE', () => {
+      it('should return proper init code', () => {
+        const correctInitCode = 'CREATE TABLE\n## VALUES ##;\n';
+        helper = new CodeEditorSqlHelper({ name: CodeEditorSqlOperations.CreateTable });
+        result = helper.getInitCode();
+        expect(result).toEqual(correctInitCode);
+      });
+    });
+
+    describe('and operation is unknown', () => {
+      it('should throw error', () => {
+        helper = new CodeEditorSqlHelper({ name: 'anything' });
+        try {
+          result = helper.getInitCode();
+        } catch (e) {
+          expect(e.message).toEqual('wrong sql operation');
+        }
+      });
+    });
+  });
+
+  describe('when getting func opening', () => {
+    let result: string;
+
+    beforeEach(() => {
+      result = helper.getFunctionOpening();
+    });
+
+    it('should return proper func opening', () => {
+      expect(result).toEqual(correctFuncOpening);
+    });
+  });
+});

package/src/lib/components/code-editor/helpers/sql-helper.ts

@@ -0,0 +1,44 @@
+import { CodeEditorHelperBase } from './code-editor-helper.base';
+import {
+  CodeEditorFuncOptions,
+  CodeEditorHelper,
+  CodeEditorLanguages,
+  CodeEditorSqlOperations,
+} from './code-editor-helper.model';
+
+export class CodeEditorSqlHelper extends CodeEditorHelperBase implements CodeEditorHelper {
+  language = CodeEditorLanguages.Sql;
+
+  constructor(private functionOptions: CodeEditorFuncOptions) {
+    super();
+  }
+
+  getInitCode(): string {
+    return `${this.getFunctionOpening()}${this.getOperationCode()}`;
+  }
+
+  getFunctionOpening(): string {
+    const { name: funcName } = this.functionOptions;
+
+    return `${funcName || ''}\n`;
+  }
+
+  private getOperationCode(): string {
+    const { name: funcName } = this.functionOptions;
+
+    switch (funcName) {
+      case CodeEditorSqlOperations.Select:
+        return '## FROM ## WHERE ##;\n';
+      case CodeEditorSqlOperations.Update:
+        return '## SET ## WHERE ##;\n';
+      case CodeEditorSqlOperations.Insert:
+        return 'INTO ## WHERE ##;\n';
+      case CodeEditorSqlOperations.Delete:
+        return '## FROM ## WHERE ##;\n';
+      case CodeEditorSqlOperations.CreateTable:
+        return '## VALUES ##;\n';
+      default:
+        return '';
+    }
+  }
+}

package/src/lib/components/code-editor/helpers/swift-helper.spec.ts

@@ -0,0 +1,40 @@
+import { defaultFuncParams } from './code-editor-helper.mocks';
+import { CodeEditorSwiftHelper } from './swift-helper';
+
+describe('CodeEditorSwiftHelper', () => {
+  let helper: CodeEditorSwiftHelper;
+
+  const defaultParams = { ...defaultFuncParams };
+  const paramsList =
+    '_ param1: Bool, _ param2: Int, _ param3: Double, _ param4: Float, _ param5: String, _ param6: [Bool], _ param7: [Int], _ param8: [Float]';
+  const correctFuncOpening = `func mockFunction(${paramsList}) -> Bool {\n`;
+  const correctInitCode = `${correctFuncOpening}\t //Insert your code here \n}`;
+
+  beforeEach(() => {
+    helper = new CodeEditorSwiftHelper(defaultParams);
+  });
+
+  describe('when getting init code', () => {
+    let result: string;
+
+    beforeEach(() => {
+      result = helper.getInitCode();
+    });
+
+    it('should return proper init code', () => {
+      expect(result).toEqual(correctInitCode);
+    });
+  });
+
+  describe('when getting func opening', () => {
+    let result: string;
+
+    beforeEach(() => {
+      result = helper.getFunctionOpening();
+    });
+
+    it('should return proper func opening', () => {
+      expect(result).toEqual(correctFuncOpening);
+    });
+  });
+});

package/src/lib/components/code-editor/helpers/swift-helper.ts

@@ -0,0 +1,51 @@
+import { CodeEditorHelperBase } from './code-editor-helper.base';
+import {
+  CodeEditorFuncOptions,
+  CodeEditorHelper,
+  CodeEditorLanguages,
+  CodeEditorTypesMap,
+} from './code-editor-helper.model';
+
+export class CodeEditorSwiftHelper extends CodeEditorHelperBase implements CodeEditorHelper {
+  language = CodeEditorLanguages.Swift;
+  typesMap: CodeEditorTypesMap = {
+    boolean: 'Bool',
+    int: 'Int',
+    double: 'Double',
+    float: 'Float',
+    str: 'String',
+    array_boolean: '[Bool]',
+    array_int: '[Int]',
+    array_float: '[Float]',
+    array_double: '[Double]',
+    array_str: '[String]',
+  };
+
+  constructor(private functionOptions: CodeEditorFuncOptions) {
+    super();
+  }
+
+  getInitCode(): string {
+    return `${this.getFunctionOpening()}\t //Insert your code here \n}`;
+  }
+
+  getFunctionOpening(): string {
+    const { name: funcName, returnType } = this.functionOptions;
+    const params = this.getParamsString();
+    const showingReturnType = this.parseType(returnType);
+
+    return `func ${funcName}(${params}) -> ${showingReturnType} {\n`;
+  }
+
+  private getParamsString(): string {
+    const { params } = this.functionOptions;
+    let paramsString = '';
+
+    if (params && params.length > 0) {
+      params.forEach(values => (paramsString += `_ ${values.name}: ${this.parseType(values.type)}, `));
+      paramsString = paramsString.slice(0, -2);
+    }
+
+    return paramsString;
+  }
+}

package/src/lib/components/code-editor/helpers/typescript-helper.spec.ts

@@ -0,0 +1,40 @@
+import { defaultFuncParams } from './code-editor-helper.mocks';
+import { CodeEditorTypescriptHelper } from './typescript-helper';
+
+describe('CodeEditorTypescriptHelper', () => {
+  let helper: CodeEditorTypescriptHelper;
+
+  const defaultParams = { ...defaultFuncParams };
+  const paramsList =
+    'param1: boolean, param2: number, param3: number, param4: number, param5: string, param6: Array<boolean>, param7: Array<number>, param8: Array<number>';
+  const correctFuncOpening = `export default function mockFunction(${paramsList}): boolean {\n`;
+  const correctInitCode = `${correctFuncOpening}\t //Insert your code here \n}`;
+
+  beforeEach(() => {
+    helper = new CodeEditorTypescriptHelper(defaultParams);
+  });
+
+  describe('when getting init code', () => {
+    let result: string;
+
+    beforeEach(() => {
+      result = helper.getInitCode();
+    });
+
+    it('should return proper init code', () => {
+      expect(result).toEqual(correctInitCode);
+    });
+  });
+
+  describe('when getting func opening', () => {
+    let result: string;
+
+    beforeEach(() => {
+      result = helper.getFunctionOpening();
+    });
+
+    it('should return proper func opening', () => {
+      expect(result).toEqual(correctFuncOpening);
+    });
+  });
+});

package/src/lib/components/code-editor/helpers/typescript-helper.ts

@@ -0,0 +1,52 @@
+import { CodeEditorHelperBase } from './code-editor-helper.base';
+import {
+  CodeEditorFuncOptions,
+  CodeEditorHelper,
+  CodeEditorLanguages,
+  CodeEditorTypesMap,
+} from './code-editor-helper.model';
+
+export class CodeEditorTypescriptHelper extends CodeEditorHelperBase implements CodeEditorHelper {
+  language = CodeEditorLanguages.Typescript;
+  typesMap: CodeEditorTypesMap = {
+    boolean: 'boolean',
+    int: 'number',
+    number: 'number',
+    double: 'number',
+    float: 'number',
+    str: 'string',
+    array_boolean: 'Array<boolean>',
+    array_int: 'Array<number>',
+    array_float: 'Array<number>',
+    array_double: 'Array<number>',
+    array_str: 'Array<string>',
+  };
+
+  constructor(private functionOptions: CodeEditorFuncOptions) {
+    super();
+  }
+
+  getInitCode(): string {
+    return `${this.getFunctionOpening()}\t //Insert your code here \n}`;
+  }
+
+  getFunctionOpening(): string {
+    const { name: funcName, returnType } = this.functionOptions;
+    const params = this.getParamsString();
+    const showingReturnType = this.parseType(returnType);
+
+    return `export default function ${funcName}(${params}): ${showingReturnType} {\n`;
+  }
+
+  private getParamsString(): string {
+    const { params } = this.functionOptions;
+    let paramsString = '';
+
+    if (params && params.length > 0) {
+      params.forEach(values => (paramsString += `${values.name}: ${this.parseType(values.type)}, `));
+      paramsString = paramsString.slice(0, -2);
+    }
+
+    return paramsString;
+  }
+}

package/src/lib/components/code-editor/models/code-editor.model.ts

@@ -0,0 +1,9 @@
+export interface PasteData {
+  type: string;
+  data: string;
+}
+
+export const enum MonacoColorTheme {
+  Light = 'vs',
+  Dark = 'vs-dark',
+}

package/src/lib/components/code-editor/models/coding-snapshot.model.ts

@@ -0,0 +1,4 @@
+export interface CodingSnapshot {
+  text: string;
+  copied_text?: string;
+}

package/src/lib/components/coding-question/coding-question.component.html

@@ -0,0 +1,78 @@
+<div
+  *ngIf="!isMobile; else mobileTpl"
+  class="main-container"
+  [ngClass]="{ 'main-container-fullscreen': isFullscreenMode }"
+>
+  <mat-card appearance="outlined" class="main-card">
+    <as-split class="as-split" direction="horizontal" [useTransition]="true" [gutterSize]="GUTTER_SIZE">
+      <as-split-area size="38" minSize="24">
+        <ng-container [ngTemplateOutlet]="instructions"></ng-container>
+      </as-split-area>
+      <as-split-area size="62" minSize="30">
+        <ng-container [ngTemplateOutlet]="runnableIde"></ng-container>
+      </as-split-area>
+    </as-split>
+
+    <ui-button
+      *ngIf="!isFullscreenMode"
+      class="fullscreen-btn themed-button"
+      [variant]="'secondary'"
+      [iconName]="'Full-screen'"
+      [justIcon]="true"
+      [size]="'big'"
+      [applicationTheme]="applicationTheme"
+      [tooltip]="translations['TOOLTIPS']['MAXIMISE']"
+      [tooltipPosition]="'left'"
+      (buttonClickEvent)="enableFullScreenMode()"
+    >
+    </ui-button>
+  </mat-card>
+</div>
+
+<ng-template #mobileTpl>
+  <div class="main-container main-container-mobile">
+    <mat-card appearance="outlined" class="main-card main-card-mobile">
+      <ng-container [ngTemplateOutlet]="instructions"></ng-container>
+      <ng-container [ngTemplateOutlet]="runnableIde"></ng-container>
+    </mat-card>
+  </div>
+</ng-template>
+
+<ng-template #instructions>
+  <tgo-code-instructions
+    [mode]="mode"
+    [isLAT]="isLAT"
+    [questionText]="questionText"
+    [translations]="translations"
+    [isDarkTheme]="isDarkTheme$ | async"
+  ></tgo-code-instructions>
+</ng-template>
+<ng-template #runnableIde>
+  <tgo-runnable-editor
+    [initCode]="initCode"
+    [functionParams]="functionParams"
+    [functionName]="functionName"
+    [returnType]="returnType"
+    [isFullViewMode]="true"
+    [shouldGenerateInitCode]="false"
+    [isLAT]="isLAT"
+    [isSQL]="isSQL"
+    [canAddCustomTestCases]="canAddCustomTestCases"
+    [languages]="languages"
+    [autoHeight]="autoHeight"
+    [translations]="translations"
+    [questionText]="questionText"
+    [companyColor]="companyColor"
+    [testCasesStatus]="testCasesStatus"
+    [loading]="loading"
+    [runTestResponse]="runTestResponse"
+    [exampleTestCases]="exampleTestCases"
+    [hideTestCases]="hideTestCases"
+    [applicationTheme]="applicationTheme"
+    (pasteEvent)="pasteEvent.emit($event)"
+    (codeChange)="codeChange.emit($event)"
+    (runTestClick)="runTestClick.emit($event)"
+    (languageChange)="languageChange.emit($event)"
+  >
+  </tgo-runnable-editor>
+</ng-template>

package/src/lib/components/coding-question/coding-question.component.scss

@@ -0,0 +1,76 @@
+@import "../../styles/mixins";
+
+@include as-split-styles();
+
+:host {
+  display: block;
+  height: 100%;
+}
+
+.main-container {
+  $base: &;
+  height: 100%;
+  padding: 32px 50px 40px 50px;
+  display: flex;
+  justify-content: center;
+
+  &#{$base}-fullscreen {
+    padding: 0;
+
+    .main-card {
+      max-height: calc(100vh - 80px);
+      max-width: 100vw;
+    }
+  }
+
+  &-mobile {
+    padding: 20px 16px 0;
+  }
+
+  .main-card {
+    flex: 1 0 100%;
+    height: 100%;
+    max-height: 750px;
+    max-width: 1280px;
+    padding: 0!important;
+    box-shadow: 0 8px 24px 4px rgba(0, 0, 0, 0.08);
+    background-color: var(--bg-mat-card) !important;
+
+    &-mobile {
+      display: flex;
+      flex-direction: column;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
+
+.fullscreen-btn {
+  position: absolute;
+  top: 0;
+  right: -50px;
+
+  &.themed-button {
+    ::ng-deep {
+      .mat-mdc-unelevated-button.secondary {
+        background-color: var(--button-bg-color);
+      }
+    }
+  }
+
+  @media screen and (min-width: 1400px) {
+    right: -72px;
+  }
+
+  .fullscreen-icon {
+    width: 18px;
+    height: 18px;
+    min-width: auto;
+    min-height: auto;
+    font-size: 18px;
+
+    ::ng-deep svg {
+      fill: var(--icon-bg-color);
+    }
+  }
+}

package/src/lib/components/coding-question/coding-question.component.spec.ts

@@ -0,0 +1,85 @@
+import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { MockModule, MockProvider } from 'ng-mocks';
+import { Subject } from 'rxjs';
+import { Themes } from '../../models/theme';
+import { ConfigurationsService } from '../../services/configurations.service';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { CodingQuestionComponent } from './coding-question.component';
+import { CONFIGURATIONS_SERVICE_MOCK } from '../../services/configurations.service.mocks';
+import { AngularSplitModule } from 'angular-split';
+import { MatCardModule } from '@angular/material/card';
+import { ButtonComponentModule } from '@testgorilla/tgo-ui';
+
+describe('CodingQuestionComponent', () => {
+  let component: CodingQuestionComponent;
+  let fixture: ComponentFixture<CodingQuestionComponent>;
+  let configurationsService: ConfigurationsService;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        CodingQuestionComponent,
+        MockModule(AngularSplitModule),
+        MockModule(MatCardModule),
+        MockModule(ButtonComponentModule),
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        MockProvider(ChangeDetectorRef),
+        MockProvider(LibCodingTestService, {
+          isFullscreen$: new Subject(),
+          setFullscreen(val) {
+            this.isFullscreen$.next(val);
+          },
+        }),
+        MockProvider(ConfigurationsService, CONFIGURATIONS_SERVICE_MOCK),
+      ],
+    })
+    .overrideComponent(CodingQuestionComponent, {
+      set: {
+        template: '',
+      },
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodingQuestionComponent);
+    configurationsService = TestBed.inject(ConfigurationsService);
+    component = fixture.componentInstance;
+    component.translations = { TOOLTIPS: {} };
+
+    fixture.detectChanges();
+  });
+
+  describe('when the fullscreen mode is enabled', () => {
+    beforeEach(() => {
+      component.enableFullScreenMode();
+    });
+
+    it('should turn on fullscreen mode', () => {
+      expect(component.isFullscreenMode).toBeTruthy();
+    });
+  });
+
+  describe('when the component is destroyed', () => {
+    let setCodeComponentDestroyedSpy: jest.SpyInstance;
+    let setColorThemeSpy: jest.SpyInstance;
+    let closeConfigPanelSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      setCodeComponentDestroyedSpy = jest.spyOn(configurationsService, 'setCodeComponentDestroyed');
+      setColorThemeSpy = jest.spyOn(configurationsService, 'setColorTheme');
+      closeConfigPanelSpy = jest.spyOn(configurationsService, 'closeConfigPanel');
+      component.ngOnDestroy();
+    });
+
+    it('should call configurationsService methods', () => {
+      expect(setCodeComponentDestroyedSpy).toHaveBeenCalledWith(true);
+      expect(setColorThemeSpy).toHaveBeenCalledWith(Themes.Default);
+      expect(closeConfigPanelSpy).toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/components/coding-question/coding-question.component.ts

@@ -0,0 +1,102 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { map } from 'rxjs';
+import { MatCardModule } from '@angular/material/card';
+import { AngularSplitModule } from 'angular-split';
+import { ApplicationTheme, ButtonComponentModule } from '@testgorilla/tgo-ui';
+import { LATLanguages } from '../../models/lat-languages';
+import { Modes } from '../../models/mode';
+import { ExampleTestCase } from '../../models/test-cases';
+import { Themes } from '../../models/theme';
+import { ConfigurationsService } from '../../services/configurations.service';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import {
+  CodeEditorFuncParam,
+  CodeEditorLanguages,
+  CodeEditorTypesMap,
+} from '../code-editor/helpers/code-editor-helper.model';
+import { PasteData } from '../code-editor/models/code-editor.model';
+import { InstructionsComponent } from '../instructions/instructions.component';
+import { RunnableEditorComponent } from '../runnable-editor/runnable-editor.component';
+
+@UntilDestroy()
+@Component({
+  standalone: true,
+  selector: 'tgo-coding-question',
+  templateUrl: './coding-question.component.html',
+  styleUrls: ['./coding-question.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    AngularSplitModule,
+    ButtonComponentModule,
+    InstructionsComponent,
+    RunnableEditorComponent,
+  ],
+})
+export class CodingQuestionComponent implements OnInit, OnDestroy {
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+  private readonly libCodingTestService = inject(LibCodingTestService);
+  private readonly configurationsService = inject(ConfigurationsService);
+  
+  @Input() initCode: string;
+  @Input() functionParams: CodeEditorFuncParam[];
+  @Input() functionName: string;
+  @Input() returnType: keyof CodeEditorTypesMap;
+  @Input() isLAT: boolean;
+  @Input() isSQL: boolean;
+  @Input() canAddCustomTestCases: boolean;
+  @Input() languages: LATLanguages;
+  @Input() autoHeight: boolean;
+  @Input() translations: Record<string, unknown>;
+  @Input() questionText: string;
+  @Input() mode: Modes;
+  @Input() companyColor: string;
+  @Input() testCasesStatus: any;
+  @Input() loading: boolean;
+  @Input() hideTestCases: boolean;
+  @Input() runTestResponse = [];
+  @Input() exampleTestCases: ExampleTestCase[];
+  @Input() applicationTheme: ApplicationTheme;
+
+  @Output() pasteEvent = new EventEmitter<PasteData>();
+  @Output() codeChange = new EventEmitter<string>();
+  @Output() runTestClick = new EventEmitter<boolean>();
+  @Output() languageChange = new EventEmitter<CodeEditorLanguages>();
+
+  isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+  isFullscreenMode: boolean;
+
+  GUTTER_SIZE = 1;
+
+  isDarkTheme$ = this.configurationsService.colorTheme$.pipe(map(theme => theme === Themes.Dark));
+
+  ngOnInit(): void {
+    this.libCodingTestService.isFullscreen$.pipe(untilDestroyed(this)).subscribe(isFullscreen => {
+      this.isFullscreenMode = isFullscreen;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.configurationsService.setCodeComponentDestroyed(true);
+    this.configurationsService.setColorTheme(Themes.Default);
+    this.configurationsService.closeConfigPanel();
+  }
+
+  enableFullScreenMode(): void {
+    this.libCodingTestService.setFullscreen(true);
+  }
+}