@testgorilla/tgo-coding-test 1.0.0 → 2.0.0

package/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "tgo",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "tgo",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/prefer-standalone": "off"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"]
+          }
+        ]
+      }
+    }
+  ]
+}

package/jest.config.ts

@@ -0,0 +1,26 @@
+export default {
+  displayName: 'tgo-coding-test',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/packages/tgo-coding-test',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  moduleNameMapper: {
+    '^@testgorilla/tgo-test-shared$': '<rootDir>/src/shared/index.ts',
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!.*\\.mjs$|lodash-es|@testgorilla/tgo-ui|ng2-charts|quill|ngx-quill|parchment)',
+  ],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/tgo-coding-test",
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "./src/assets",
+      "output": "./assets"
+    }
+  ],
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -1,44 +1,28 @@
 {
   "name": "@testgorilla/tgo-coding-test",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "peerDependencies": {
-    "@angular/animations": "^18.2.13",
-    "@angular/common": "^18.2.13",
-    "@angular/core": "^18.2.13",
-    "@angular/forms": "^18.2.13",
-    "@angular/material": "18.2.14",
-    "@angular/router": "^18.2.13",
+    "@angular/animations": "^19.2.17",
+    "@angular/common": "^19.2.17",
+    "@angular/core": "^19.2.17",
+    "@angular/forms": "^19.2.17",
+    "@angular/material": "19.2.19",
+    "@angular/router": "^19.2.17",
     "@ngneat/transloco": "~4.3.0",
     "@ngneat/until-destroy": "10.0.0",
-    "@testgorilla/tgo-ui": "^3.0.0",
-    "angular-split": "^18.0.0",
-    "jest-preset-angular": "~14.2.4",
-    "monaco-editor": "0.50.0",
+    "@testgorilla/tgo-ui": "^4.0.0",
+    "angular-split": "^19.0.0",
+    "jest-preset-angular": "14.4.2",
+    "monaco-editor": "0.52.2",
     "ngx-guided-tour": "^2.0.1",
-    "ngx-monaco-editor-v2": "^18.1.0",
-    "ngx-quill": "^26.0.10",
-    "ngx-webstorage": "^18.0.0",
+    "ngx-monaco-editor-v2": "^19.0.2",
+    "ngx-quill": "^27.1.2",
+    "ngx-webstorage": "^19.0.1",
     "quill": "^2.0.3",
     "rxjs": "~7.8.1"
   },
   "sideEffects": false,
   "license": "PROPRIETARY",
   "displayName": "Coding test",
-  "description": "Coding test component",
-  "module": "fesm2022/testgorilla-tgo-coding-test.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/testgorilla-tgo-coding-test.mjs",
-      "esm": "./esm2022/testgorilla-tgo-coding-test.mjs",
-      "default": "./fesm2022/testgorilla-tgo-coding-test.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
+  "description": "Coding test component"
 }

package/project.json

@@ -0,0 +1,48 @@
+{
+  "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:run-commands",
+      "outputs": ["{workspaceRoot}/dist/packages/tgo-coding-test"],
+      "options": {
+        "commands": [
+          "nx run tgo-coding-test:package",
+          "node scripts/replace-shared-alias.js dist/packages/tgo-coding-test @testgorilla/tgo-test-shared"
+        ],
+        "parallel": false,
+        "forwardAllArgs": false
+      }
+    },
+    "package": {
+      "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/{index.d.ts → src/index.ts}

@@ -1,7 +1,19 @@
+/*
+ * Public API Surface of coding-test
+ */
+
 export { TgoCodingTestComponent } from './lib/components/tgo-coding-test/tgo-coding-test.component';
 export { TgoCodingTestCandidateViewComponent } from './lib/components/tgo-coding-test-candidate-view/tgo-coding-test-candidate-view.component';
+// Note: CodingTestModule is kept internal for now and not exposed in the public API
+// export * from './lib/components/coding-test.module';
 export { Config as LibCodingConfig } from './lib/models/configs';
-export { CustomTestCase, ExampleTestCase, TestCaseResult, TestCaseDeletionAction, TestCaseDeletionData, } from './lib/models/test-cases';
+export {
+  CustomTestCase,
+  ExampleTestCase,
+  TestCaseResult,
+  TestCaseDeletionAction,
+  TestCaseDeletionData,
+} from './lib/models/test-cases';
 export { Themes } from './lib/models/theme';
 export { ViewMode } from './lib/models/view-mode';
 export { LATLanguage, LATLanguages } from './lib/models/lat-languages';
@@ -10,4 +22,9 @@ export { Modes } from './lib/models/mode';
 export { LibCodingTestService, ResetCodeAction } from './lib/services/lib-coding-test.service';
 export { StorageCodingService } from './lib/services/storage.service';
 export { CodingTestConfigService } from './lib/services/coding-test-config.service';
-export { TgoCodingTestConfig, provideTgoCodingTest, } from './lib/config';
+
+// Configuration exports
+export {
+  TgoCodingTestConfig,
+  provideTgoCodingTest,
+} from './lib/config';

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

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

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

@@ -0,0 +1,136 @@
+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);
+    });
+  });
+});