@testgorilla/tgo-coding-test 0.0.1 → 1.0.0

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

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

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

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

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

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