@testgorilla/tgo-coding-test 0.0.1

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

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

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

@@ -0,0 +1,155 @@
+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({
+  standalone: true,
+  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;
+    }
+  }
+}