@testgorilla/tgo-coding-test 2.0.0 → 2.0.1

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

@@ -1,55 +0,0 @@
-@import "../../styles/mixins";
-
-@include as-split-styles();
-
-:host {
-  display: block;
-  height: 100%;
-
-  @media screen and (max-width: 959px) {
-    flex: 1 0 600px;
-    height: auto;
-  }
-}
-
-.ide {
-  &-split-area {
-    // prevents resizing to 0, set threshold
-    min-height: 65px;
-  }
-
-  &-container {
-    height: 100%;
-  }
-}
-
-.tests {
-  height: 100%;
-
-  &-lat {
-    overflow: hidden;
-
-    @media screen and (max-width: 959px) {
-      flex: 1 0 60vh;
-    }
-  }
-}
-
-.coding-section {
-  display: block;
-  height: 100%;
-}
-
-.container-mobile {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .ide-container {
-    max-height: 60vh;
-  }
-
-  .tests {
-    max-height: 60vh;
-  }
-}

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

@@ -1,124 +0,0 @@
-import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
-
-import { ChangeDetectorRef, ElementRef, NO_ERRORS_SCHEMA } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MockProvider } from 'ng-mocks';
-import { BehaviorSubject, of, Subject } from 'rxjs';
-import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
-import { RunnableEditorComponent } from './runnable-editor.component';
-import { LibCodingTestService } from '../../services/lib-coding-test.service';
-import { ConfigurationsService } from '../../services/configurations.service';
-import { StorageCodingService } from '../../services/storage.service';
-import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
-import { CONFIGURATIONS_SERVICE_MOCK } from '../../services/configurations.service.mocks';
-
-jest.mock('../../utils/resize-element', () => ({
-  resizeElement: jest.fn(el => of(el)),
-}));
-
-describe('RunnableEditorComponent', () => {
-  let component: RunnableEditorComponent;
-  let fixture: ComponentFixture<RunnableEditorComponent>;
-  const codingTestsSplitRefMock = {
-    nativeElement: {
-      offsetHeight: 200,
-      contentRect: { height: 250 },
-    },
-  };
-  const testsSplitAreaRefMock = {
-    nativeElement: {
-      offsetHeight: 50,
-    },
-  };
-  jest.useFakeTimers();
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [RunnableEditorComponent, MonacoEditorModule.forRoot(), NoopAnimationsModule],
-      schemas: [NO_ERRORS_SCHEMA],
-      providers: [
-        MockProvider(ChangeDetectorRef),
-        MockProvider(LibCodingTestService, {
-          codeChange$: new Subject(),
-          isBoilerplateLoading$: new Subject(),
-          languageChange$: new Subject(),
-          codeReset$: new Subject(),
-          currentLanguage$: new BehaviorSubject<CodeEditorLanguages>(CodeEditorLanguages.Javascript),
-        }),
-        MockProvider(ConfigurationsService, CONFIGURATIONS_SERVICE_MOCK),
-        MockProvider(StorageCodingService),
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(RunnableEditorComponent);
-    component = fixture.componentInstance;
-    component.isMobile = true;
-    component.translations = {
-      HEADINGS: {},
-      TOOLTIPS: { RESET_CODE: '' },
-      TEST_RESULTS: {
-        RUN_TESTS: '',
-        TEST_CASES: {},
-      },
-      MODALS: { RESET_CODE: {} },
-    }; // Provide translations to prevent template errors
-    component.codingTestsSplitRef = { ...codingTestsSplitRefMock } as ElementRef;
-    component.testsSplitAreaRef = { ...testsSplitAreaRefMock } as ElementRef;
-  });
-
-  describe('when the view is initialized', () => {
-    describe('and isMobile === true', () => {
-      it('should NOT set up minTestsSplitHeight', () => {
-        expect(component.minTestsSplitHeight).toBeFalsy();
-      });
-    });
-
-    describe('and isMobile === false', () => {
-      beforeEach(() => {
-        component.isMobile = false;
-      });
-
-      describe('and isFullViewMode === true', () => {
-        beforeEach(() => {
-          component.isFullViewMode = true;
-          component.ngAfterViewInit();
-        });
-
-        it('should set minTestsSplitHeight according to codingTestsSplitRef height', fakeAsync(() => {
-          tick();
-          jest.runAllTimers();
-          expect(component.minTestsSplitHeight).toEqual(47.6);
-          flush();
-          discardPeriodicTasks();
-        }));
-
-        it('should set currentTestsSplitHeight according to testsPercentHeight', fakeAsync(() => {
-          tick();
-          jest.runAllTimers();
-
-          expect(component.currentTestsSplitHeight).toEqual(47.6);
-          flush();
-          discardPeriodicTasks();
-        }));
-
-        it('should set currentIdeSplitHeight according to currentTestsSplitHeight', fakeAsync(() => {
-          tick();
-          jest.runAllTimers();
-          expect(component.currentIdeSplitHeight).toEqual(52.4);
-          flush();
-          discardPeriodicTasks();
-        }));
-      });
-
-      describe('and isFullViewMode === false', () => {
-        beforeEach(() => {
-          component.ngAfterViewInit();
-        });
-
-        it('should set minTestsSplitHeight according to codingTestsSplitRef height', () => {
-          expect(component.minTestsSplitHeight).toEqual(59.5);
-        });
-      });
-    });
-  });
-});

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

@@ -1,154 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import {
-  animationFrameScheduler,
-  concat,
-  debounceTime,
-  distinctUntilChanged,
-  map,
-  Observable,
-  observeOn,
-  of,
-} from 'rxjs';
-import { AngularSplitModule } from 'angular-split';
-import { ApplicationTheme } from '@testgorilla/tgo-ui';
-
-import { LATLanguages } from '../../models/lat-languages';
-import { ExampleTestCase } from '../../models/test-cases';
-import { resizeElement } from '../../utils/resize-element';
-import {
-  CodeEditorFuncParam,
-  CodeEditorLanguages,
-  CodeEditorTypesMap,
-} from '../code-editor/helpers/code-editor-helper.model';
-import { PasteData } from '../code-editor/models/code-editor.model';
-import { CodingSectionComponent } from '../coding-section/coding-section.component';
-import { ConfigurationsComponent } from '../configurations/configurations.component';
-import { TestResultsComponent } from '../tests/test-results.component';
-
-@UntilDestroy()
-@Component({
-    selector: 'tgo-runnable-editor',
-    templateUrl: './runnable-editor.component.html',
-    styleUrls: ['./runnable-editor.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-        CommonModule,
-        AngularSplitModule,
-        CodingSectionComponent,
-        ConfigurationsComponent,
-        TestResultsComponent,
-    ]
-})
-export class RunnableEditorComponent implements AfterViewInit {
-  @Input() initCode: string;
-  @Input() functionParams: CodeEditorFuncParam[];
-  @Input() functionName: string;
-  @Input() returnType: keyof CodeEditorTypesMap;
-  @Input() isFullViewMode: boolean;
-  @Input() isLAT: boolean;
-  @Input() isSQL: boolean;
-  @Input() canAddCustomTestCases: boolean;
-  @Input() hideTestCases: boolean;
-  @Input() languages: LATLanguages;
-  @Input() shouldGenerateInitCode: boolean;
-  @Input() autoHeight: boolean;
-  @Input() translations: Record<string, unknown>;
-  @Input() questionText: string;
-  @Input() companyColor: string;
-  @Input() testCasesStatus: any;
-  @Input() loading: boolean;
-  @Input() runTestResponse = [];
-  @Input() exampleTestCases: ExampleTestCase[];
-  @Input() isRunnableWithLangSelector: boolean;
-  @Input() applicationTheme: ApplicationTheme;
-
-  @Output() pasteEvent = new EventEmitter<PasteData>();
-  @Output() codeChange = new EventEmitter<string>();
-  @Output() runTestClick = new EventEmitter<boolean>();
-  @Output() languageChange = new EventEmitter<CodeEditorLanguages>();
-
-  @ViewChild('codingTestsSplit', { read: ElementRef }) codingTestsSplitRef: ElementRef;
-  @ViewChild('testsSplitArea', { read: ElementRef }) testsSplitAreaRef: ElementRef;
-
-  minTestsSplitHeight: number;
-  currentIdeSplitHeight = 55;
-  currentTestsSplitHeight = 45;
-
-  MIN_TESTS_HEIGHT_PX = 119;
-  MIN_LAT_TESTS_HEIGHT_PX = 202;
-  GUTTER_SIZE = 1;
-
-  isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-
-  constructor(private changeDetectorRef: ChangeDetectorRef) {}
-
-  ngAfterViewInit(): void {
-    if (this.isMobile) {
-      return;
-    }
-
-    if (this.isFullViewMode) {
-      this.setCodingSplitListener();
-    } else {
-      const { offsetHeight: height } = this.codingTestsSplitRef.nativeElement;
-      this.minTestsSplitHeight = this.getMinTestsPercentHeight(height);
-    }
-  }
-
-  /* listens to area height changes and calculates the maximum % size of coding window area */
-  private setCodingSplitListener(): void {
-    concat(this.getInitialMaxHeight$(), resizeElement(this.codingTestsSplitRef.nativeElement))
-      .pipe(
-        observeOn(animationFrameScheduler),
-        debounceTime(300),
-        map(({ contentRect: { height } }) => height),
-        distinctUntilChanged(),
-        untilDestroyed(this)
-      )
-      .subscribe(height => {
-        this.calculateCurrentHeights(height);
-
-        this.changeDetectorRef.detectChanges();
-      });
-  }
-
-  private calculateCurrentHeights(fullHeight: number): void {
-    const { offsetHeight: testsSplitHeight } = this.testsSplitAreaRef.nativeElement;
-    this.minTestsSplitHeight = this.getMinTestsPercentHeight(fullHeight);
-
-    let testsPercentHeight = this.getPercentHeightFromWhole(fullHeight, testsSplitHeight);
-
-    if (testsPercentHeight < this.minTestsSplitHeight) {
-      testsPercentHeight = this.minTestsSplitHeight;
-    }
-
-    this.currentTestsSplitHeight = testsPercentHeight;
-    this.currentIdeSplitHeight = 100 - this.currentTestsSplitHeight;
-  }
-
-  private getInitialMaxHeight$(): Observable<any> {
-    const { offsetHeight: height } = this.codingTestsSplitRef.nativeElement;
-    return of({ contentRect: { height: this.getMinTestsPercentHeight(height) } });
-  }
-
-  private getPercentHeightFromWhole(fullHeight: number, areaHeight: number): number {
-    return (areaHeight * 100) / (fullHeight - this.GUTTER_SIZE * 2);
-  }
-
-  private getMinTestsPercentHeight(height: number): number {
-    const minTestsHeightPx = this.isLAT ? this.MIN_LAT_TESTS_HEIGHT_PX : this.MIN_TESTS_HEIGHT_PX;
-    return (minTestsHeightPx * 100) / height;
-  }
-}

package/src/lib/components/tests/test-cases/test-cases.component.html

@@ -1,135 +0,0 @@
-<div class="test-case-container">
-  <div
-    id="test-cases"
-    class="test-case-tabs-wrapper"
-    [ngClass]="{
-      'test-case-tabs-wrapper-tests-run': areTestsRun,
-      'test-case-tabs-wrapper-mobile': isMobile,
-      'test-case-tabs-wrapper-hidden': isContentViewOpened
-    }"
-  >
-    @if (!isMobile) {
-    <mat-tab-group
-      #tabGroup
-      class="test-cases-tabs"
-      [selectedIndex]="activeTestCaseIndex"
-      (selectedIndexChange)="setActiveTestCaseIndex($event)"
-    >
-      @for (testCase of testCases; track testCase; let index = $index) {
-      <mat-tab label="{{ testCase.name }}">
-        <ng-template mat-tab-label>
-          <div class="tab-label-wrapper">
-            <ng-container
-              [ngTemplateOutlet]="testCaseHeading"
-              [ngTemplateOutletContext]="{ testCase: testCase, index: index }"
-            ></ng-container>
-          </div>
-        </ng-template>
-      </mat-tab>
-      }
-    </mat-tab-group>
-    } @else {
-    <div class="test-cases-tabs test-cases-tabs-mobile">
-      @for (testCase of testCases; track testCase; let index = $index) {
-      <div class="tab-label-wrapper" (click)="setActiveTestCaseIndex(index)">
-        <div class="test-case-name-status-wrapper">
-          <ng-container
-            [ngTemplateOutlet]="testCaseHeading"
-            [ngTemplateOutletContext]="{ testCase: testCase, index: index }"
-          ></ng-container>
-        </div>
-        @if (isMobile) {
-        <ui-icon [name]="'Arrow-chevron-right-filled'" [size]="'24'" class="themed-button"></ui-icon>
-        }
-      </div>
-      }
-    </div>
-    } @if (canAddCustomTestCases) {
-    <ui-button
-      class="add-test-case themed-button"
-      [variant]="'tertiary'"
-      [iconName]="'Plus'"
-      [iconPosition]="'left'"
-      [disabled]="!isAddTestCasesDisabled"
-      [fullWidth]="true"
-      [tooltip]="!isAddTestCasesDisabled ? translations['TOOLTIPS']['CANT_ADD_TEST_CASE'] : null"
-      [label]="
-        translations['TEST_RESULTS']['TEST_CASES']['ADD_TEST_CASE'] +
-        ' (' +
-        (testCases?.length - exampleTestCases?.length) +
-        '/' +
-        maxTestCasesAllowed +
-        ')'
-      "
-      (buttonClickEvent)="addTestCase()"
-    >
-    </ui-button>
-    }
-  </div>
-
-  @if (!isMobile) {
-  <div class="test-case-content-wrapper">
-    <ng-container [ngTemplateOutlet]="testCasesContentTpl"></ng-container>
-  </div>
-  } @if (isMobile && isContentViewOpened) {
-  <div class="test-case-content-wrapper-mobile">
-    <div class="test-case-mobile-name-wrapper">
-      <ui-button
-        [variant]="'icon-button'"
-        [iconName]="'Arrow-chevron-left-filled'"
-        [tooltip]="''"
-        [size]="'small'"
-        (buttonClickEvent)="closeTestCaseMobileView()"
-        class="themed-button"
-      >
-      </ui-button>
-      <ng-container
-        [ngTemplateOutlet]="testCaseHeading"
-        [ngTemplateOutletContext]="{
-          testCase: testCases[activeTestCaseIndex],
-          index: activeTestCaseIndex,
-          hideStatus: true
-        }"
-      ></ng-container>
-    </div>
-    <ng-container [ngTemplateOutlet]="testCasesContentTpl"></ng-container>
-  </div>
-  }
-</div>
-
-<ng-template #testCaseHeading let-testCase="testCase" let-index="index" let-hideStatus="hideStatus">
-  <div class="tab-label">
-    @if (testCase.preloaded) {
-    <ui-icon [name]="'Lock'" class="preloaded-icon"></ui-icon>
-    }
-    <span class="tab-label-value">{{ testCase.name }}</span>
-  </div>
-
-  @if (!hideStatus && testCasesResult?.length) {
-  <tgo-test-cases-status
-    [status]="testCasesResult?.[index]?.status"
-    [translations]="translations['TEST_RESULTS']['TEST_CASES']['STATUSES']"
-  ></tgo-test-cases-status>
-  } @if (!testCase.preloaded) {
-  <ui-button
-    [variant]="'icon-button'"
-    [iconName]="'Delete'"
-    [tooltip]="translations['TOOLTIPS']['DELETE_TEST_CASE'] || ''"
-    (buttonClickEvent)="removeTestCase(index)"
-    class="delete-test-case themed-button"
-  >
-  </ui-button>
-  }
-</ng-template>
-
-<ng-template #testCasesContentTpl>
-  <tgo-test-cases-content
-    [testCase]="testCases[activeTestCaseIndex]"
-    [testCaseResult]="testCasesResult?.[activeTestCaseIndex]"
-    [areTestsRun]="areTestsRun"
-    [translations]="translations['TEST_RESULTS']['TEST_CASES']"
-    [isSQL]="isSQL"
-    [applicationTheme]="applicationTheme"
-    (valueChange)="modifyTestCase(activeTestCaseIndex, $event)"
-  ></tgo-test-cases-content>
-</ng-template>

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

@@ -1,220 +0,0 @@
-@import '@testgorilla/tgo-ui/projects/tgo-canopy-ui/theme/variables';
-
-//todo: fix powered by testgorilla logo position on mobile in scope of https://testgorilla.atlassian.net/browse/CODE-367
-.test-case-container {
-  display: flex;
-  height: 100%;
-
-  .test-case-tabs-wrapper {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    overflow-y: auto;
-    border-right: 1px solid var(--border-bg-color);
-    height: 100%;
-    min-width: 230px;
-
-    &-mobile {
-      flex: 1;
-
-      &.test-case-tabs-wrapper-hidden {
-        display: none;
-      }
-    }
-
-    &:not(&-mobile) {
-      ::ng-deep {
-        .mat-mdc-tab {
-          .mdc-tab-indicator {
-            width: 3px;
-
-            .mdc-tab-indicator__content {
-              border-left: 3px solid transparent;
-              height: 100%;
-            }
-          }
-
-          &:hover .delete-test-case {
-            display: block;
-          }
-
-          &.mdc-tab--active {
-            .tab-label-value {
-              font-weight: 600;
-            }
-
-            .mdc-tab-indicator__content {
-              border-left-color: var(--company-color, $brand-50);
-            }
-          }
-        }
-      }
-    }
-
-    .test-cases-tabs {
-      flex-direction: row;
-      flex-grow: 1;
-
-      ::ng-deep {
-        .mdc-tab__content {
-          justify-content: flex-start;
-          padding: 14px 16px;
-          width: 100%;
-
-          .mdc-tab__text-label {
-            flex-grow: 1;
-          }
-
-          .tab-label-wrapper {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-          }
-        }
-
-        .mat-mdc-tab-labels {
-          flex-direction: column;
-        }
-
-        .mat-mdc-tab-header {
-          width: 100%;
-          border-bottom: none;
-        }
-
-        .mdc-tab {
-          height: 48px;
-          padding: 0;
-          border-bottom: 1px solid var(--border-bg-color);
-          color: var(--secondary-text-color);
-
-          &__text-label {
-            width: 100%;
-          }
-        }
-      }
-
-      &.mat-mdc-tab-group.mat-primary {
-        ::ng-deep {
-          .mat-ink-bar {
-            background-color: transparent;
-          }
-        }
-      }
-
-      &-mobile {
-        .test-case-name-status-wrapper {
-          display: flex;
-          justify-content: space-between;
-          flex: 1;
-        }
-
-        .tab-label-wrapper {
-          display: flex;
-          padding: 14px 16px;
-          cursor: pointer;
-          border-bottom: 1px solid var(--border-bg-color);
-        }
-      }
-    }
-
-    .add-test-case {
-      position: sticky;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      border-top: 1px solid var(--border-bg-color);
-      border-radius: 0;
-      z-index: 1;
-
-      ::ng-deep {
-        mat-icon {
-          color: var(--company-color, $brand-50);
-        }
-
-        .mdc-button {
-          justify-content: flex-start;
-          background-color: var(--bg-mat-card);
-
-          &:disabled {
-            opacity: 1;
-
-            .mdc-button__label {
-              opacity: .75;
-            }
-          }
-
-          span {
-            color: var(--company-theme-specific-color, $brand-50) !important;
-          }
-        }
-      }
-    }
-  }
-
-  .delete-test-case {
-    display: none;
-    position: absolute;
-    right: 16px;
-    cursor: pointer;
-
-    ::ng-deep {
-      .icon-button:not(:hover) {
-        background-color: var(--bg-mat-card) !important;
-      }
-
-      svg {
-        color: var(--icon-bg-color);
-      }
-    }
-  }
-
-  ::ng-deep .mat-tab-label.cdk-program-focused .delete-test-case svg rect {
-    fill: #484c4d00;
-  }
-
-  .test-case-content-wrapper {
-    flex-grow: 1;
-    overflow-y: auto;
-  }
-
-  .preloaded-icon {
-    margin-right: 4px;
-
-    ::ng-deep {
-      mat-icon {
-        svg {
-          color: var(--icon-secondary-bg-color);
-        }
-      }
-    }
-  }
-
-  .tab-label {
-    display: flex;
-    align-items: center;
-    color: var(--main-text-color);
-  }
-
-  .chevron-icon {
-    margin-left: 8px;
-  }
-
-  .test-case-content-wrapper-mobile {
-    overflow: auto;
-  }
-
-  .test-case-mobile-name-wrapper {
-    display: flex;
-    position: relative;
-    padding: 14px 16px 0;
-
-    .chevron-icon {
-      margin: 0 4px 0 0;
-    }
-
-    .delete-test-case {
-      display: block;
-    }
-  }
-}