@testgorilla/tgo-coding-test 0.0.1

package/src/lib/components/tests/test-results.component.scss

@@ -0,0 +1,189 @@
+.test-output {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 100%;
+  border: 1px solid rgba(221, 221, 221, 0);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  background: var(--bg-mat-card);
+
+  &-lat {
+    @media screen and (max-width: 959px) {
+      justify-content: space-between;
+    }
+  }
+
+  .html {
+    padding: 10px;
+    font-family: Courier;
+    overflow-y: auto;
+    white-space: pre-wrap;
+
+    @media screen and (max-width: 959px) {
+      min-height: 250px;
+      max-width: 100vw;
+    }
+
+    .response-message {
+      &:after {
+        content: "";
+        display: block;
+        border-bottom: 1px dashed;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        margin-right: 55%;
+      }
+    }
+    
+    .stdout {
+      .result {
+        font-weight: bolder;
+        margin-top: 10px;
+        display: block
+      }
+
+      .passed {
+        font-weight: bolder;
+        color: var(--petrol-text-color);
+      }
+
+      .error {
+        font-weight: bolder;
+        color: #cb7b7a
+      }
+
+      .info {
+        color: #aaa;
+      }
+    }
+
+   .test-case-block {
+    padding-bottom: 20px;
+
+    &:not(:last-child):after {
+      content: "";
+      display: block;
+      border-bottom: 1px dashed;
+      margin-top: 20px;
+      margin-right: 55%;
+    }
+
+    .test-validation, .sql-stdout {
+      span {
+        display: block;
+      }
+
+      .title {
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+
+      .result {
+        font-weight: bolder;
+        margin-bottom: 20px;
+      }
+
+      .passed {
+        color: var(--petrol-text-color);
+      }
+
+      .error {
+        color: #cb7b7a
+      }
+    }
+
+    .sql-stdout {
+      &:not(.no-border):after {
+        content: none;
+      }
+    }
+  }
+}
+
+  .LAT-tests {
+    max-height: calc(100% - 54px);
+    flex: 1 0 auto;
+    transition: max-height 500ms ease;
+
+    &-with-status {
+      max-height: calc(100% - 106px);
+    }
+  }
+
+  .status {
+    margin-top: auto;
+
+    @media screen and (max-width: 959px) {
+      margin: 0;
+    }
+
+    .status-child {
+      display: flex;
+      padding: 16px;
+      background-color: var(--status-bg-color);
+      justify-content: center;
+      min-height: 52px;
+
+      p {
+        margin: 0 2em 0 0;
+        font-weight: bolder;
+
+        &.passed {
+          color: var(--petrol-text-color);
+        }
+
+        &.error {
+          color: #cb7b7a;
+        }
+      }
+    }
+  }
+
+  .barra {
+    place-content: stretch space-between;
+    align-items: center;
+    flex-direction: row;
+    box-sizing: border-box;
+    display: flex;
+    position: sticky;
+    top: 0;
+    padding: 10px;
+    width: 100%;
+    height: 54px;
+    border-bottom: 1px solid var(--border-bg-color);
+  }
+
+  .run-test {
+    padding-left: 21px;
+
+    &-icon {
+      width: 15px;
+      height: 17px;
+      min-width: 15px;
+      min-height: 17px;
+      margin-right: 10px;
+      line-height: 10px;
+
+      ::ng-deep svg {
+        fill: currentColor;
+      }
+    }
+  }
+
+  .run-test-btn {
+    ::ng-deep {
+      .mat-mdc-unelevated-button.primary {
+        background-color: var(--color)!important;
+      }
+    }
+  }
+}
+
+.progress-bar {
+  ::ng-deep {
+    .mat-mdc-progress-bar {
+      overflow-y: hidden;
+    }
+  }
+}

package/src/lib/components/tests/test-results.component.spec.ts

@@ -0,0 +1,140 @@
+import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, TestBed, tick, waitForAsync } from '@angular/core/testing';
+
+import { MockProvider } from 'ng-mocks';
+import { Subject } from 'rxjs';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { TestResultsComponent } from './test-results.component';
+import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('TestResultsComponent', () => {
+  let component: TestResultsComponent;
+  let fixture: ComponentFixture<TestResultsComponent>;
+  let libCodingTestService: LibCodingTestService;
+  let runTestSpy: jest.SpyInstance;
+
+  const codeChangeMockOnlySpaces = '    ';
+  const codeChangeMockWithCode = `def lucky_8( a, b ) :
+  #Insert your code here python`;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [TestResultsComponent, MemoizeFuncPipe, NoopAnimationsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        MockProvider(ChangeDetectorRef),
+        MockProvider(LibCodingTestService, {
+          codeChange$: new Subject(),
+          changeCurrentCode(code: string) {
+            this.codeChange$.next(code);
+          },
+          currentLanguage$: new Subject(),
+          changeCurrentLanguage(lang) {
+            this.currentLanguage$.next(lang);
+          },
+        }),
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestResultsComponent);
+    component = fixture.componentInstance;
+    component.translations = {
+      TEST_RESULTS: {
+        PASSED: 'Passed: ',
+        ERROR: 'Error: ',
+        TOTAL: 'Total: ',
+        TEST_RUNNING: 'Running...',
+        TESTS_CHECK: 'Run tests to check your code',
+        RUN_TESTS: 'Run Tests',
+      },
+      HEADINGS: {
+        TESTS: 'Tests',
+      },
+    };
+    libCodingTestService = TestBed.inject(LibCodingTestService);
+    fixture.detectChanges();
+  });
+
+  describe('when initialized', () => {
+    it('should ensure first click check to be false', () => {
+      expect(component.runTestFirstClick).toBeFalsy();
+    });
+
+    describe('and isLAT === true', () => {
+      it('should listen to language change and reset runTestFirstClick & runTestResponse', fakeAsync(() => {
+        component.isLAT = true;
+        component.canChangeProgrammingLang = true;
+        component.runTestFirstClick = true;
+        component.runTestResponse = [{}, {}, {}];
+
+        component.ngOnInit();
+        libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.C);
+        tick();
+
+        expect(component.runTestFirstClick).toEqual(false);
+        expect(component.runTestResponse).toEqual([]);
+        flush();
+      }));
+    });
+  });
+
+  describe('when run test is clicked', () => {
+    beforeEach(() => {
+      runTestSpy = jest.spyOn(component.runTestClick, 'emit');
+      component.runTest();
+    });
+
+    it('should update first click check to true', () => {
+      expect(component.runTestFirstClick).toBeTruthy();
+      expect(runTestSpy).toBeCalledWith(true);
+    });
+  });
+
+  describe('when code is updated', () => {
+    describe('and LAT is true', () => {
+      beforeEach(() => {
+        component.isLAT = true;
+        component.ngOnInit();
+      });
+
+      it('should have disableRun falsy', done => {
+        component.disableRun$.subscribe(val => {
+          expect(val).toBeFalsy();
+          done();
+        });
+        libCodingTestService.changeCurrentCode(codeChangeMockWithCode);
+      });
+    });
+
+    describe('and it is not empty', () => {
+      beforeEach(() => {
+        component.isLAT = false;
+        component.ngOnInit();
+      });
+      it('should update disableRun to false', done => {
+        component.disableRun$.subscribe(val => {
+          expect(val).toBeFalsy();
+          done();
+        });
+        libCodingTestService.changeCurrentCode(codeChangeMockWithCode);
+      });
+    });
+    describe('and it is empty', () => {
+      beforeEach(() => {
+        component.isLAT = false;
+        component.ngOnInit();
+      });
+      it('should update disableRun to true', done => {
+        component.disableRun$.subscribe(val => {
+          expect(val).toBeTruthy();
+          done();
+        });
+        libCodingTestService.changeCurrentCode(codeChangeMockOnlySpaces);
+      });
+    });
+  });
+});

package/src/lib/components/tests/test-results.component.ts

@@ -0,0 +1,98 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { debounceTime, distinctUntilChanged, map, of } from 'rxjs';
+import { ApplicationTheme, ButtonComponentModule, ProgressBarComponentModule } from '@testgorilla/tgo-ui';
+import { CustomTestCase, ExampleTestCase } from '../../models/test-cases';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+import { TestCasesComponent } from './test-cases/test-cases.component';
+
+@UntilDestroy()
+@Component({
+  standalone: true,
+  selector: 'tgo-code-test-results',
+  templateUrl: 'test-results.component.html',
+  styleUrls: ['test-results.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    ButtonComponentModule,
+    ProgressBarComponentModule,
+    MemoizeFuncPipe,
+    TestCasesComponent,
+  ],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({ transform: 'translateY(100%)', opacity: '0' }),
+        animate('500ms ease', style({ transform: 'translateY(0)', opacity: '1' })),
+      ]),
+    ]),
+  ],
+})
+export class TestResultsComponent implements OnInit {
+  @Input() companyColor: string;
+  @Input() testCasesStatus: any;
+  @Input() loading: boolean;
+  @Input() runTestResponse = [];
+  @Input() translations: Record<string, unknown>;
+  @Input() isLAT = false;
+  @Input() isSQL = false;
+  @Input() exampleTestCases: ExampleTestCase[];
+  @Input() canChangeProgrammingLang: boolean;
+  @Input() showTestCases: boolean;
+  @Input() canAddCustomTestCases: boolean;
+  @Input() applicationTheme: ApplicationTheme;
+
+  @Output() runTestClick = new EventEmitter<boolean>();
+
+  runTestFirstClick = false;
+  emptySpaceRegex = /^\s*$/;
+  disableRun$ = of(false);
+
+  constructor(
+    private libCodingTestService: LibCodingTestService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {
+    if (this.isLAT) {
+      if (this.canChangeProgrammingLang) {
+        this.listenLanguageChange();
+      }
+    } else {
+      this.disableRun$ = this.libCodingTestService.codeChange$.pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        map(code => !!code.match(this.emptySpaceRegex)),
+        untilDestroyed(this)
+      );
+    }
+  }
+
+  trackByFunction(index: number, item: any): any {
+    return item;
+  }
+
+  runTest() {
+    this.runTestClick.emit(true);
+    if (!this.runTestFirstClick) {
+      this.runTestFirstClick = true;
+    }
+  }
+
+  getTestCases([canAddCustomTestCases]: [boolean]): (ExampleTestCase | CustomTestCase)[] {
+    const savedTestCases = this.libCodingTestService.getTestCases() ?? [];
+    return canAddCustomTestCases ? savedTestCases : [];
+  }
+
+  private listenLanguageChange(): void {
+    this.libCodingTestService.currentLanguage$.pipe(untilDestroyed(this)).subscribe(() => {
+      this.runTestFirstClick = false;
+      this.runTestResponse = [];
+      this.changeDetectorRef.detectChanges();
+    });
+  }
+}

package/src/lib/components/tgo-coding-test/tgo-coding-test.component.html

@@ -0,0 +1,96 @@
+@switch (viewMode) {
+  @case (ViewModes.Full) {
+    <tgo-coding-question
+      [ngClass]="[
+        'coding-question',
+        colorTheme$ | async,
+        (isFullscreenMode$ | async) ? 'coding-question-fullscreen' : '',
+      ]"
+      [ngStyle]="{
+        '--company-color': companyColor,
+        '--company-theme-specific-color': themeSpecificColor,
+      }"
+      [initCode]="initCode"
+      [functionParams]="functionParams"
+      [functionName]="functionName"
+      [returnType]="returnType"
+      [autoHeight]="autoHeight"
+      [questionText]="questionText"
+      [mode]="mode"
+      [isLAT]="isLAT"
+      [isSQL]="isSQL"
+      [canAddCustomTestCases]="canAddCustomTestCases"
+      [exampleTestCases]="exampleTestCases"
+      [languages]="languages"
+      (pasteEvent)="pasteEvent.emit($event)"
+      (codeChange)="codeChange.emit($event)"
+      (runTestClick)="runTestClick.emit($event)"
+      (languageChange)="languageChange.emit($event)"
+      [translations]="translations"
+      [companyColor]="companyColor"
+      [testCasesStatus]="testCasesStatus"
+      [loading]="loading"
+      [runTestResponse]="runTestResponse"
+      [applicationTheme]="applicationTheme"
+      [hideTestCases]="hideTestCases"
+    >
+    </tgo-coding-question>
+  }
+  @case (ViewModes.RunnableIde) {
+    <ng-container [ngTemplateOutlet]="runnableEditorTpl"></ng-container>
+  }
+  @case (ViewModes.RunnableIdeWithLangSelector) {
+    <ng-container [ngTemplateOutlet]="runnableEditorTpl"></ng-container>
+  }
+  @default {
+    <tgo-code-editor
+      [initCode]="initCode"
+      [snapshot]="snapshot"
+      [shouldGenerateInitCode]="!isFullViewMode && shouldGenerateInitCode"
+      [functionParams]="functionParams"
+      [functionName]="functionName"
+      [returnType]="returnType"
+      [hasCodingConfigPanel]="isFullViewMode"
+      [isReadonly]="isReadonly"
+      [autoHeight]="autoHeight"
+      (pasteEvent)="pasteEvent.emit($event)"
+      (codeChange)="codeChange.emit($event)"
+    >
+    </tgo-code-editor>
+  }
+}
+
+<ng-template #runnableEditorTpl>
+  <tgo-runnable-editor
+    [ngClass]="colorTheme$ | async"
+    [ngStyle]="{
+      '--company-color': companyColor,
+      '--company-theme-specific-color': themeSpecificColor,
+    }"
+    [initCode]="initCode"
+    [functionParams]="functionParams"
+    [functionName]="functionName"
+    [returnType]="returnType"
+    [isFullViewMode]="false"
+    [shouldGenerateInitCode]="shouldGenerateInitCode"
+    [isRunnableWithLangSelector]="viewMode === ViewModes.RunnableIdeWithLangSelector"
+    [isLAT]="isLAT"
+    [isSQL]="isSQL"
+    [canAddCustomTestCases]="canAddCustomTestCases"
+    [languages]="languages"
+    [autoHeight]="autoHeight"
+    [translations]="translations"
+    [questionText]="questionText"
+    [companyColor]="companyColor"
+    [testCasesStatus]="testCasesStatus"
+    [loading]="loading"
+    [runTestResponse]="runTestResponse"
+    [exampleTestCases]="exampleTestCases"
+    [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/tgo-coding-test/tgo-coding-test.component.scss

@@ -0,0 +1,6 @@
+@import "../../styles/styles";
+
+.coding-question {
+  background-color: var(--page-bg);
+  color: var(--main-text-color);
+}