@testgorilla/tgo-coding-test 0.0.1 → 1.0.0

package/project.json

@@ -1,36 +0,0 @@
-{
-  "name": "tgo-coding-test",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/tgo-coding-test/src",
-  "prefix": "tgo",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:package",
-      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
-      "options": {
-        "project": "packages/tgo-coding-test/ng-package.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "packages/tgo-coding-test/tsconfig.lib.prod.json"
-        },
-        "development": {
-          "tsConfig": "packages/tgo-coding-test/tsconfig.lib.json"
-        }
-      },
-      "defaultConfiguration": "production"
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
-      "options": {
-        "jestConfig": "packages/tgo-coding-test/jest.config.ts"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    }
-  }
-}

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

@@ -1,10 +0,0 @@
-<div class="container notranslate" translate="no">
-  <ngx-monaco-editor
-    #editor
-    class="editor"
-    [options]="editorOptions"
-    [(ngModel)]="code"
-    (ngModelChange)="publishCode($event)"
-    (onInit)="initEditor($event)"
-  ></ngx-monaco-editor>
-</div>

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

@@ -1,21 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.container {
-  height: 100%;
-  background-color: var(--code-editor-background);
-}
-
-.editor {
-  height: 100%;
-
-  ::ng-deep {
-    .copy-pasted-code {
-      background-color: yellow;
-    }
-  }
-}

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

@@ -1,136 +0,0 @@
-import { NO_ERRORS_SCHEMA, SimpleChange, SimpleChanges } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MockProvider } from 'ng-mocks';
-import { Observable, ReplaySubject } from 'rxjs';
-
-import { LibCodingTestService } from '../../services/lib-coding-test.service';
-import { StorageCodingService } from '../../services/storage.service';
-import { CodeEditorComponent } from './code-editor.component';
-import { editorMock, functionParamsMock, initCodeMock } from './code-editor.mocks';
-import { CodeEditorService } from './code-editor.service';
-import { CodeEditorLanguages } from './helpers/code-editor-helper.model';
-import { CONFIGURATIONS_SERVICE_MOCK } from '../../services/configurations.service.mocks';
-import { ConfigurationsService } from '../../services/configurations.service';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
-
-describe('CodeEditorComponent', () => {
-  let component: CodeEditorComponent;
-  let fixture: ComponentFixture<CodeEditorComponent>;
-
-  let codeEditorService: CodeEditorService;
-  let libCodingTestService: LibCodingTestService;
-
-  let setHelperSpy: jest.SpyInstance;
-  let getEditorLangSpy: jest.SpyInstance;
-  let getInitCodeSpy: jest.SpyInstance;
-  let codeChangeSpy: jest.SpyInstance;
-  let pasteEventSpy: jest.SpyInstance;
-
-  const currentLanguage = CodeEditorLanguages.Python;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [CodeEditorComponent, MonacoEditorModule.forRoot(), NoopAnimationsModule],
-      schemas: [NO_ERRORS_SCHEMA],
-      providers: [
-        MockProvider(CodeEditorService, {
-          getEditorLang: () => currentLanguage,
-        }),
-        MockProvider(LibCodingTestService, {
-          codeReset$: new Observable(),
-          currentLanguage$: new ReplaySubject(1),
-          changeCurrentLanguage(value: CodeEditorLanguages): void {
-            this.currentLanguage$.next(value);
-          },
-        }),
-        MockProvider(ConfigurationsService, CONFIGURATIONS_SERVICE_MOCK),
-        MockProvider(StorageCodingService),
-      ],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CodeEditorComponent);
-    component = fixture.componentInstance;
-    component.functionParams = [...functionParamsMock];
-    component.functionName = 'mockFunction';
-    component.returnType = 'boolean';
-    component.hasCodingConfigPanel = true;
-    component.isReadonly = false;
-    component.initCode = initCodeMock;
-    component.shouldGenerateInitCode = true;
-
-    codeEditorService = TestBed.inject(CodeEditorService);
-    libCodingTestService = TestBed.inject(LibCodingTestService);
-    setHelperSpy = jest.spyOn(codeEditorService, 'setHelper');
-    getEditorLangSpy = jest.spyOn(codeEditorService, 'getEditorLang');
-    getInitCodeSpy = jest.spyOn(codeEditorService, 'getInitCode');
-    codeChangeSpy = jest.spyOn(component.codeChange, 'emit');
-
-    libCodingTestService.changeCurrentLanguage(currentLanguage);
-    fixture.detectChanges();
-  });
-
-  describe('when initialized', () => {
-    beforeEach(() => {
-      component.editor = editorMock;
-      pasteEventSpy = jest.spyOn(component.editor, 'onDidPaste');
-      component.initEditor(editorMock);
-    });
-
-    it('should set configurations', () => {
-      const params = {
-        params: component.functionParams,
-        name: component.functionName,
-        returnType: component.returnType,
-      };
-
-      expect(setHelperSpy).toBeCalledWith(currentLanguage, params);
-      expect(getEditorLangSpy).toBeCalled();
-      expect(component.editorOptions.language).toEqual(currentLanguage);
-      expect(component.editorOptions.readOnly).toEqual(component.isReadonly);
-    });
-
-    describe('and has initCode passed', () => {
-      it('should set passed init code to local code', () => {
-        expect(component.code).toEqual(initCodeMock);
-      });
-    });
-
-    describe('and has NO initCode passed and has shouldGenerateInitCode = true', () => {
-      beforeEach(() => {
-        component.initCode = '';
-        component.shouldGenerateInitCode = true;
-        component.ngOnInit();
-      });
-
-      it('should get init code from service', () => {
-        expect(getInitCodeSpy).toBeCalled();
-      });
-    });
-
-    it('should publish updated init code', () => {
-      expect(component.codePublished).toEqual(component.code);
-      expect(codeChangeSpy).toBeCalledWith(component.codePublished);
-    });
-
-    it('should listen to paste editor event', () => {
-      expect(pasteEventSpy).toHaveBeenCalled();
-    });
-  });
-
-  describe('when initCode changes', () => {
-    it('should update code passed to the editor', () => {
-      const oldInitCode = component.initCode;
-      const newInitCode = 'sample java code';
-      component.initCode = newInitCode;
-      const changes: SimpleChanges = {
-        initCode: new SimpleChange(oldInitCode, newInitCode, false),
-      };
-      component.ngOnChanges(changes);
-
-      expect(component.code).toEqual(newInitCode);
-    });
-  });
-});

package/src/lib/components/code-editor/code-editor.component.ts

@@ -1,369 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { editor, IDisposable } from 'monaco-editor';
-import { combineLatest, distinctUntilChanged, filter, first, interval, map, take } from 'rxjs';
-import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
-
-import { erlangLanguage } from '../../utils/additional-languages/erlang';
-import { CodingAssistanceOptions, Config, FormattingOptions } from '../../models/configs';
-import { Themes } from '../../models/theme';
-import { ConfigurationsService } from '../../services/configurations.service';
-import { LibCodingTestService, ResetCodeAction } from '../../services/lib-coding-test.service';
-import { StorageCodingService } from '../../services/storage.service';
-import { CodeEditorService } from './code-editor.service';
-import { CodeEditorFuncParam, CodeEditorLanguages, CodeEditorTypesMap } from './helpers/code-editor-helper.model';
-import { MonacoColorTheme, PasteData } from './models/code-editor.model';
-import { CodingSnapshot } from './models/coding-snapshot.model';
-
-@UntilDestroy()
-@Component({
-  standalone: true,
-  selector: 'tgo-code-editor',
-  templateUrl: './code-editor.component.html',
-  styleUrls: ['./code-editor.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, FormsModule, MonacoEditorModule],
-})
-export class CodeEditorComponent implements OnInit, OnDestroy, OnChanges {
-  private readonly libCodingTestService = inject(LibCodingTestService);
-  private readonly configurationsService = inject(ConfigurationsService);
-  private readonly codeEditorService = inject(CodeEditorService);
-  private readonly changeDetectorRef = inject(ChangeDetectorRef);
-  private readonly StorageCodingService = inject(StorageCodingService);
-
-  @Input() initCode: string;
-  @Input() functionParams: CodeEditorFuncParam[];
-  @Input() functionName: string;
-  @Input() returnType: keyof CodeEditorTypesMap;
-  @Input() hasCodingConfigPanel: boolean;
-  @Input() isReadonly: boolean;
-  @Input() autoHeight: boolean;
-  @Input() shouldGenerateInitCode: boolean;
-
-  @Input() set snapshot(snap: CodingSnapshot) {
-    if (snap) {
-      this.currentSnapshot = snap;
-      this.handleSnapshot(snap.text);
-    }
-  }
-
-  @Output() pasteEvent = new EventEmitter<PasteData>();
-  @Output() codeChange = new EventEmitter<string>();
-
-  @ViewChild('editor', { read: ElementRef }) codeEditorElRef: ElementRef;
-
-  code = '';
-  codePublished = '';
-  codeLanguage = '';
-  editorOptions: { [key: string]: any } = {
-    theme: MonacoColorTheme.Dark,
-    fontSize: '14',
-    scrollBeyondLastLine: false,
-    minimap: { enabled: false },
-    fixedOverflowWidgets: true,
-    insertSpaces: false,
-    detectIndentation: false,
-    automaticLayout: true,
-  };
-
-  editor: editor.ICodeEditor;
-  previousConfig = this.StorageCodingService.getSavedConfig();
-
-  currentSnapshot: CodingSnapshot;
-  previousMonacoDecoration: editor.IEditorDecorationsCollection;
-
-  private pasteListener: IDisposable;
-  private contentChangedSub: IDisposable;
-
-  ngOnInit(): void {
-    if (!this.previousConfig) {
-      this.previousConfig = this.configurationsService.getInitialConfig();
-    }
-
-    if (this.hasCodingConfigPanel) {
-      this.updateIDEConfig();
-    }
-    this.listenUpdates();
-
-    this.setupConfigs();
-    this.setupCode();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (typeof changes.initCode?.currentValue === 'string') {
-      this.code = changes.initCode.currentValue;
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.contentChangedSub?.dispose();
-    this.pasteListener?.dispose();
-  }
-
-  initEditor(editor: editor.ICodeEditor): void {
-    this.editor = editor;
-
-    this.pasteListener = this.editor.onDidPaste(event => this.catchEvent(event));
-
-    if (this.currentSnapshot) {
-      this.handleSnapshot(this.currentSnapshot.text);
-    }
-
-    if (this.autoHeight) {
-      this.listenContentHeight(editor);
-    }
-  }
-
-  private catchEvent(event: editor.IPasteEvent): void {
-    const data = this.editor.getModel()?.getValueInRange(event.range);
-    if (data) {
-      this.pasteEvent.emit({ type: 'paste', data });
-    }
-  }
-
-  publishCode(code): void {
-    if (code !== this.codePublished) {
-      this.codePublished = code;
-      this.codeChange.emit(this.codePublished);
-    }
-  }
-
-  private updateIDEConfig(): void {
-    this.configurationsService.config$
-      .pipe(distinctUntilChanged(), untilDestroyed(this))
-      .subscribe((config: Config) => {
-        let configObject = {};
-        // eslint-disable-next-line guard-for-in
-        for (const key in config) {
-          if (config[key] !== this.previousConfig[key]) {
-            switch (key as FormattingOptions | CodingAssistanceOptions) {
-              case FormattingOptions.ColorTheme:
-                configObject = {
-                  theme:
-                    config[FormattingOptions.ColorTheme] === Themes.Default
-                      ? MonacoColorTheme.Light
-                      : MonacoColorTheme.Dark,
-                };
-
-                break;
-              case CodingAssistanceOptions.AutoComplete:
-                configObject = {
-                  quickSuggestions: {
-                    other: config[CodingAssistanceOptions.AutoComplete],
-                  },
-                };
-
-                break;
-              case CodingAssistanceOptions.AutoBrackets:
-                configObject = {
-                  autoClosingBrackets: config[CodingAssistanceOptions.AutoBrackets] ? 'always' : 'never',
-                };
-
-                break;
-              case FormattingOptions.TabSize:
-                configObject = {
-                  tabSize: config[FormattingOptions.TabSize],
-                };
-
-                break;
-              case FormattingOptions.FontSize:
-                configObject = {
-                  fontSize: config[FormattingOptions.FontSize],
-                };
-
-                break;
-              case CodingAssistanceOptions.ErrorHighlighting:
-                this.libCodingTestService.currentLanguage$.pipe(take(1)).subscribe(language => {
-                  if (language === CodeEditorLanguages.Javascript) {
-                    window['monaco'].languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-                      noSemanticValidation: !config[CodingAssistanceOptions.ErrorHighlighting],
-                      noSyntaxValidation: !config[CodingAssistanceOptions.ErrorHighlighting],
-                    });
-                  } else if (language === CodeEditorLanguages.Typescript) {
-                    window['monaco'].languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-                      noSemanticValidation: !config[CodingAssistanceOptions.ErrorHighlighting],
-                      noSyntaxValidation: !config[CodingAssistanceOptions.ErrorHighlighting],
-                    });
-                  }
-                });
-                break;
-            }
-            this.editorOptions = Object.assign({}, this.editorOptions, configObject);
-          }
-        }
-        this.changeDetectorRef.detectChanges();
-        this.previousConfig = config;
-      });
-
-    this.editorOptions = Object.assign({}, this.editorOptions, {
-      automaticLayout: true,
-    });
-  }
-
-  private listenContentHeight(editor: editor.ICodeEditor): void {
-    const updateHeight = () => {
-      window.requestAnimationFrame(() => {
-        const { width } = this.codeEditorElRef.nativeElement.getBoundingClientRect();
-        const contentHeight = Math.min(1000, editor.getContentHeight());
-        this.codeEditorElRef.nativeElement.style.height = `${contentHeight}px`;
-        editor.layout({ width, height: contentHeight });
-      });
-    };
-
-    this.contentChangedSub = editor.onDidContentSizeChange(updateHeight);
-    updateHeight();
-  }
-
-  private setupConfigs(): void {
-    const { functionParams: params, functionName: name, returnType } = this;
-
-    const config = this.previousConfig;
-
-    const wordWrap = this.currentSnapshot ? 'on' : 'off';
-    const theme = this.getInitialColorTheme(config, this.currentSnapshot);
-
-    this.libCodingTestService.currentLanguage$.pipe(untilDestroyed(this)).subscribe((language: CodeEditorLanguages) => {
-      if (this.shouldGenerateInitCode) {
-        this.codeEditorService.setHelper(language, { params, name, returnType });
-        this.codeLanguage = this.codeEditorService.getEditorLang();
-      } else {
-        if (language === CodeEditorLanguages.Cpp) {
-          this.codeLanguage = CodeEditorLanguages.CppEditor;
-        } else if (language === CodeEditorLanguages.CSharp || language === CodeEditorLanguages.CSharpLegacy) {
-          this.codeLanguage = CodeEditorLanguages.CSharpEditor;
-        } else if (language === CodeEditorLanguages.Sqlite) {
-          this.codeLanguage = CodeEditorLanguages.Sql;
-        } else {
-          this.codeLanguage = language;
-        }
-      }
-      this.editorOptions = Object.assign({}, this.editorOptions, {
-        language: this.codeLanguage,
-      });
-    });
-
-    this.editorOptions = Object.assign({}, this.editorOptions, {
-      readOnly: this.isReadonly,
-      quickSuggestions: {
-        other: config[CodingAssistanceOptions.AutoComplete],
-      },
-      autoClosingBrackets: config[CodingAssistanceOptions.AutoBrackets] ? 'always' : 'never',
-      tabSize: config[FormattingOptions.TabSize],
-      fontSize: config[FormattingOptions.FontSize],
-      theme,
-      wordWrap,
-    });
-    const monacoLibraryReady$ = interval(100).pipe(
-      map(() => window.monaco),
-      filter(Boolean),
-      first()
-    );
-    combineLatest({
-      monaco: monacoLibraryReady$,
-      language: this.libCodingTestService.currentLanguage$,
-    })
-      .pipe(take(1))
-      .subscribe(result => {
-        if (result.language === CodeEditorLanguages.Javascript) {
-          result.monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-            noSemanticValidation: !config[CodingAssistanceOptions.ErrorHighlighting],
-            noSyntaxValidation: !config[CodingAssistanceOptions.ErrorHighlighting],
-          });
-        } else if (result.language === CodeEditorLanguages.Typescript) {
-          result.monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-            noSemanticValidation: !config[CodingAssistanceOptions.ErrorHighlighting],
-            noSyntaxValidation: !config[CodingAssistanceOptions.ErrorHighlighting],
-          });
-        }
-        result.monaco.languages.register({ id: CodeEditorLanguages.Erlang });
-        result.monaco.languages.setMonarchTokensProvider(CodeEditorLanguages.Erlang, erlangLanguage);
-      });
-  }
-
-  private getInitialColorTheme(config: Config, snapshot: CodingSnapshot): string {
-    let theme: MonacoColorTheme;
-
-    if (snapshot) {
-      theme = MonacoColorTheme.Dark;
-    } else {
-      theme = config[FormattingOptions.ColorTheme] === Themes.Default ? MonacoColorTheme.Light : MonacoColorTheme.Dark;
-    }
-
-    return theme;
-  }
-
-  private setupCode(calledFromReset = false) {
-    this.handleInitCode(calledFromReset);
-    this.publishCode(this.code);
-  }
-
-  private handleInitCode(calledFromReset = false): void {
-    if (calledFromReset) {
-      this.code = this.libCodingTestService.getInitCode();
-    } else if (this.initCode) {
-      this.code = this.initCode;
-    } else if (this.currentSnapshot) {
-      return;
-    } else if (this.shouldGenerateInitCode) {
-      this.code = this.codeEditorService.getInitCode();
-    }
-  }
-
-  private listenUpdates(): void {
-    this.libCodingTestService.codeReset$
-      .pipe(
-        filter(val => val === ResetCodeAction.Confirm),
-        untilDestroyed(this)
-      )
-      .subscribe(() => {
-        this.setupCode(true);
-      });
-  }
-
-  private handleSnapshot(code: string): void {
-    this.code = code;
-
-    if (!this.editor) {
-      return;
-    }
-
-    this.editor.setValue(code); // make sure editor model has the latest value of the code
-
-    if (this.previousMonacoDecoration) {
-      this.previousMonacoDecoration.clear();
-    }
-
-    if (this.currentSnapshot.copied_text) {
-      // if the snapshot contains copyPasted code, find it's range in monaco
-      const matches = this.editor
-        .getModel()
-        .findMatches(this.currentSnapshot.copied_text, false, false, true, null, true);
-
-      if (matches.length) {
-        // if the range is found in editor model, decorate it with additional class to highlight on the ui
-        this.previousMonacoDecoration = this.editor.createDecorationsCollection([
-          {
-            range: matches[0].range,
-            options: { inlineClassName: 'copy-pasted-code' },
-          },
-        ]);
-      }
-    }
-  }
-}

package/src/lib/components/code-editor/code-editor.mocks.ts

@@ -1,28 +0,0 @@
-import { CodeEditorFuncParam } from './helpers/code-editor-helper.model';
-import { editor } from 'monaco-editor';
-
-export const functionParamsMock: CodeEditorFuncParam[] = [
-  {
-    name: 'param1',
-    type: 'boolean',
-  },
-  {
-    name: 'param2',
-    type: 'int',
-  },
-];
-
-export const initCodeMock = 'export function mock(param1, param2) { return param1; }';
-
-export const editorMock = {
-  onDidPaste: () => ({
-    dispose: () => {
-      // Mock implementation - no-op
-    },
-  }),
-} as unknown as editor.ICodeEditor;
-
-export const pasteEventMock = {
-  type: 'paste',
-  data: 'text',
-};