@testgorilla/tgo-coding-test 1.0.0 → 2.0.0

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

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

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

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