@testgorilla/tgo-coding-test 0.0.1 → 1.0.0

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

@@ -1,103 +0,0 @@
-.test-cases-content {
-  padding: 16px;
-  font-size: 14px;
-  font-weight: 400;
-
-  &-tests-run {
-    padding-bottom: 50px;
-  }
-
-  @media screen and (min-width: 1920px) {
-    max-width: 800px;
-  }
-}
-
-.custom-tests-log-header, .custom-tests-info {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 400;
-}
-
-.custom-tests-log-heading {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0;
-}
-
-.custom-tests-log-content {
-  padding: 4px 12px;
-  margin: 4px 0;
-  background-color: var(--status-bg-color);
-}
-
-.custom-tests-log-row, .custom-tests-hint-container, .custom-tests-info-indented {
-  margin-bottom: 16px;
-}
-
-.custom-tests-log-row-cols {
-  display: flex;
-  gap: 16px;
-
-  @media screen and (max-width: 599px) {
-    flex-direction: column;
-  }
-}
-
-.custom-tests-log-col {
-  @media screen and (min-width: 600px) {
-    flex: 1 1 50%;
-    max-width: 50%;
-  }
-
-  &-expected-query {
-    order: 2;
-
-    @media screen and (min-width: 600px) {
-      order: unset;
-    }
-  }
-}
-
-.custom-tests-hint-container {
-  padding: 12px 16px;
-  background-color: #F0D6BB;
-  border-radius: 4px;
-  color: #000;
-}
-
-.custom-tests-inputs-container {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  @media screen and (min-width: 600px) {
-    gap: 16px;
-
-    .custom-tests-input {
-      min-width: 135px;
-    }
-  }
-}
-
-.custom-tests-input {
-  flex: 1;
-  font-size: 14px;
-}
-
-::ng-deep{
-  .custom-tests-input.mat-focused {
-    .mat-form-field-outline-thick,.mat-form-field-label {
-      color: var(--company-color, --petrol-text-color) !important;
-    }
-    .mat-input-element {
-      caret-color: var(--company-color, --petrol-text-color) !important;
-    }
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-  }
-  .custom-tests-input:hover .mat-form-field-outline-thick {
-    color: var(--company-color, --petrol-text-color) !important;
-  }
-} 

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

@@ -1,122 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormBuilder } from '@angular/forms';
-import { NO_ERRORS_SCHEMA, SimpleChanges } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-import { TestCasesContentComponent } from './test-cases-content.component';
-import { CustomTestCase, ExampleTestCase, TestCaseStatus } from '../../../models/test-cases';
-import { MemoizeFuncPipe } from '../../../pipes/memoize-func.pipe';
-
-describe('TestCasesContentComponent', () => {
-  let component: TestCasesContentComponent;
-  let fixture: ComponentFixture<TestCasesContentComponent>;
-  const testCase: ExampleTestCase | CustomTestCase = {
-    input: 'new input',
-    expectedOutput: 'new expected output',
-    preloaded: false,
-    name: 'some name',
-  };
-  let changes: SimpleChanges;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestCasesContentComponent, MemoizeFuncPipe, NoopAnimationsModule],
-      schemas: [NO_ERRORS_SCHEMA],
-      providers: [FormBuilder],
-    })
-    .overrideComponent(TestCasesContentComponent, {
-      set: {
-        template: '',
-      },
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(TestCasesContentComponent);
-    component = fixture.componentInstance;
-    component.translations = {};
-
-    component.testCase = { ...testCase };
-    changes = { testCase: { currentValue: {} } } as unknown as SimpleChanges;
-    fixture.detectChanges();
-  });
-
-  describe('when the component is initialized', () => {
-    it('should patch form with input and expected output values when they exist in the testCase object', () => {
-      const input = 'test input';
-      const expectedOutput = 'test output';
-      component.testCase = { ...component.testCase, input, expectedOutput };
-      component.ngOnInit();
-
-      expect(component.form.value.input).toEqual(input);
-      expect(component.form.value.expectedOutput).toEqual(expectedOutput);
-    });
-
-    it('should disable form when testCase is preloaded', () => {
-      component.testCase.preloaded = true;
-      component.ngOnInit();
-
-      expect(component.form.disabled).toBe(true);
-    });
-
-    it('should enable form when testCase is NOT preloaded', () => {
-      component.testCase.preloaded = false;
-      component.ngOnInit();
-
-      expect(component.form.enabled).toBe(true);
-    });
-  });
-
-  describe('when the ngOnChanges is called', () => {
-    it('should update form values when testCase currentValue changes', () => {
-      component.ngOnChanges(changes);
-
-      expect(component.form.value.input).toEqual('new input');
-      expect(component.form.value.expectedOutput).toEqual('new expected output');
-    });
-
-    it('should enable form if test case is NOT preloaded', () => {
-      component.ngOnChanges(changes);
-
-      expect(component.form.enabled).toBe(true);
-    });
-
-    it('should disable form if test case is preloaded', () => {
-      component.testCase.preloaded = true;
-      component.ngOnChanges(changes);
-
-      expect(component.form.disabled).toBe(true);
-    });
-
-    it('should set isCustomTestCase to true if testCase is a CustomTestCase', () => {
-      component.ngOnChanges(changes);
-
-      expect(component.isCustomTestCase).toBe(true);
-    });
-
-    it('should emit valueChange event when form values change', () => {
-      const emittedValue = {
-        input: 'new input',
-        expectedOutput: 'new expected output',
-      };
-      const valueChangeSpy = jest.spyOn(component.valueChange, 'emit');
-
-      component.ngOnChanges(changes);
-
-      expect(valueChangeSpy).toHaveBeenCalledWith(emittedValue);
-    });
-  });
-
-  describe('when isEmptyTestCase is called', () => {
-    it('should return true when the status is TestCaseStatus.Empty', () => {
-      const status = TestCaseStatus.Empty;
-
-      expect(component.isEmptyTestCase(status)).toBe(true);
-    });
-
-    it('should return false when the status is NOT TestCaseStatus.Empty', () => {
-      const status = TestCaseStatus.Passed;
-
-      expect(component.isEmptyTestCase(status)).toBe(false);
-    });
-  });
-});

package/src/lib/components/tests/test-cases-content/test-cases-content.component.ts

@@ -1,102 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  inject,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { ApplicationTheme, FieldComponentModule } from '@testgorilla/tgo-ui';
-import {
-  AllowedModificationFields,
-  CustomTestCase,
-  ExampleTestCase,
-  TestCaseResult,
-  TestCaseStatus,
-} from '../../../models/test-cases';
-import { MemoizeFuncPipe } from '../../../pipes/memoize-func.pipe';
-import { TruncatedTextComponent } from '../../common/truncated-text/truncated-text.component';
-import { TestCasesStatusComponent } from '../test-cases-status/test-cases-status.component';
-
-@UntilDestroy()
-@Component({
-  standalone: true,
-  selector: 'tgo-test-cases-content',
-  templateUrl: './test-cases-content.component.html',
-  styleUrls: ['./test-cases-content.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    FieldComponentModule,
-    MemoizeFuncPipe,
-    TruncatedTextComponent,
-    TestCasesStatusComponent,
-  ],
-})
-export class TestCasesContentComponent implements OnInit, OnChanges {
-  private readonly fb = inject(FormBuilder);
-  
-  @Input() testCase: ExampleTestCase | CustomTestCase;
-  @Input() testCaseResult: TestCaseResult;
-  @Input() areTestsRun: boolean;
-  @Input() translations: Record<string, unknown>;
-  @Input() applicationTheme: ApplicationTheme;
-  @Input() isSQL: boolean;
-
-  @Output() valueChange = new EventEmitter<AllowedModificationFields>();
-
-  isCustomTestCase: boolean;
-  // todo: add validators when backend implements validation on their side
-  form = this.fb.group({
-    input: new FormControl<string>(''),
-    expectedOutput: new FormControl<string>(''),
-  });
-
-  ngOnInit(): void {
-    if (this.testCase?.input && this.testCase?.expectedOutput) {
-      this.form.patchValue({
-        input: this.testCase.input,
-        expectedOutput: this.testCase.expectedOutput,
-      });
-    }
-
-    if (this.testCase?.preloaded) {
-      this.form.disable();
-    }
-
-    this.listenFormChanges();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.testCase?.currentValue) {
-      this.form.patchValue({
-        input: this.testCase.input,
-        expectedOutput: this.testCase.expectedOutput,
-      });
-      if (this.testCase.preloaded) {
-        this.form.disable();
-      } else {
-        this.form.enable();
-      }
-
-      this.isCustomTestCase = !this.testCase.preloaded;
-    }
-  }
-
-  isEmptyTestCase(status: TestCaseStatus): boolean {
-    return status === TestCaseStatus.Empty;
-  }
-
-  private listenFormChanges(): void {
-    this.form.valueChanges.pipe(untilDestroyed(this)).subscribe((value: AllowedModificationFields) => {
-      this.valueChange.emit(value);
-    });
-  }
-}

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

@@ -1,16 +0,0 @@
-@switch (status) { @case (TestCaseStatus.Passed) {
-<div class="test-case-status test-case-status-passed">
-  <ui-icon-label class="label-icon" [iconName]="'Check'" [iconSize]="'16'" [text]="translations['PASSED']">
-  </ui-icon-label>
-</div>
-} @case (TestCaseStatus.Error) {
-<div class="test-case-status test-case-status-error">
-  <ui-icon-label class="label-icon" [iconName]="'Close'" [iconSize]="'16'" [text]="translations['ERROR']">
-  </ui-icon-label>
-</div>
-} @case (TestCaseStatus.Empty) {
-<div class="test-case-status test-case-status-empty">
-  <ui-icon-label class="label-icon" [iconName]="'Help'" [iconSize]="'16'" [text]="translations['EMPTY']">
-  </ui-icon-label>
-</div>
-} }

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

@@ -1,49 +0,0 @@
-:host {
-  display: flex;
-}
-
-.test-case-status {
-  display: flex;
-  align-items: center;
-
-  &-passed {
-    color: var(--petrol-text-color);
-    ::ng-deep {
-      mat-icon svg {
-        color: var(--petrol-text-color);;
-      }
-    }
-  }
-
-  &-error {
-    color: #CB7B7A;
-    ::ng-deep {
-      mat-icon svg {
-        color: #CB7B7A;
-      }
-    }
-  }
-
-  &-empty {
-    color: var(--status-empty-color);
-
-    ::ng-deep {
-      mat-icon svg {
-        color: var(--status-empty-color);
-      }
-    }
-  }
-
-  .label-icon {
-    ::ng-deep {
-      mat-icon {
-        font-size: 16px;
-        width: 16px;
-        height: 16px;
-        min-width: 16px;
-        min-height: 16px;
-        line-height: 16px;
-      }
-    }
-  }
-}

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

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TestCasesStatusComponent } from './test-cases-status.component';
-
-describe('TestCasesStatusComponent', () => {
-  let component: TestCasesStatusComponent;
-  let fixture: ComponentFixture<TestCasesStatusComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestCasesStatusComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestCasesStatusComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/tests/test-cases-status/test-cases-status.component.ts

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IconLabelComponentModule } from '@testgorilla/tgo-ui';
-import { TestCaseStatus } from '../../../models/test-cases';
-
-@Component({
-  standalone: true,
-  selector: 'tgo-test-cases-status',
-  templateUrl: './test-cases-status.component.html',
-  styleUrls: ['./test-cases-status.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [IconLabelComponentModule],
-})
-export class TestCasesStatusComponent {
-  @Input() status: TestCaseStatus;
-  @Input() translations: Record<string, unknown>;
-
-  readonly TestCaseStatus = TestCaseStatus;
-}

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

@@ -1,119 +0,0 @@
-<div class="test-output" [class.test-output-lat]="isLAT">
-  <div>
-    <div class="barra">
-      <h3 class="barra-title">{{ translations['HEADINGS']['TESTS'] }}</h3>
-      <ui-button
-        [size]="'small'"
-        [variant]="'primary'"
-        [label]="translations['TEST_RESULTS']['RUN_TESTS']"
-        [iconPosition]="'left'"
-        [iconName]="'Play-filled'"
-        [companyColor]="companyColor ? companyColor : '#46a997'"
-        [disabled]="this.loading || (disableRun$ | async)"
-        (buttonClickEvent)="runTest()"
-        class="run-test-btn"
-      ></ui-button>
-    </div>
-    @if (showTestCases && loading) {
-    <ui-progress-bar [mode]="'query'" class="progress-bar"></ui-progress-bar>
-    }
-  </div>
-  @if (!showTestCases) {
-  <div class="html">
-    @if (!this.loading) { @if (runTestResponse.length !== 0) {
-    <div>
-      <!--          todo: remove legacy non-testcase view after sunsetting of the old flow -->
-      @if (isSQL) {
-      <div class="response-message">
-        <span>{{ runTestResponse[0]['response_msg'] }}</span>
-      </div>
-      @for (returnTest of runTestResponse; track trackByFunction($index, returnTest); let isLast = $last) {
-      <div class="test-case-block">
-        @if (returnTest.content) {
-        <div class="test-validation">
-          <span class="title">{{ translations['TEST_RESULTS']['TEST_CASES']['TEST_VALIDATION'] }}</span>
-          <span class="result">{{ returnTest.content }}</span>
-        </div>
-        }
-        <div class="sql-stdout" [class.no-border]="isLast">
-          <span class="title">{{ translations['TEST_RESULTS']['TEST_CASES']['RESULT'] }}</span>
-          <span
-            [ngClass]="{
-              result: true,
-              passed: returnTest.test_result === 'OK',
-              error: returnTest.test_result !== 'OK' || returnTest.stderr
-            }"
-            >{{ returnTest.stderr ? returnTest.stderr : returnTest.stdout[0] }}</span
-          >
-          @if (returnTest.test_result === 'OK') {
-          <span class="result passed">OK</span>
-          } @else {
-          <span class="title error">{{ translations['TEST_RESULTS']['TEST_CASES']['EXPECTED'] }}</span>
-          <span class="result">{{ returnTest.test_result }}</span>
-          }
-        </div>
-      </div>
-      } } @else { @for (returnTest of runTestResponse; track returnTest) {
-      <div>
-        <span>{{ returnTest['response_msg'] }}</span>
-        <br />
-        <span>{{ returnTest['stderr'] }}</span>
-        <br />
-        @for (item of returnTest['stdout']; track item; let j = $index) {
-        <div class="stdout">
-          @if (item?.includes('@@')) {
-          <span class="result">{{ item.replace('@@', '').replace('@@', '').trim() }}</span>
-          } @if (item?.includes('##')) {
-          <span class="passed">{{ item.replace('##', '').replace('##', '').trim() }}</span>
-          } @if (item?.includes('$$')) {
-          <span class="error">{{ item.replace('$$', '').replace('$$', '').trim() }}</span>
-          } @if (!item?.includes('~~') && !item?.includes('@@') && !item?.includes('##') && !item?.includes('$$')) {
-          <span class="info">{{ item?.trim() }}</span>
-          }
-        </div>
-        }
-        <br />
-      </div>
-      } }
-    </div>
-    } @else {
-    <span>
-      {{
-        this.loading ? translations['TEST_RESULTS']['TESTS_RUNNING'] : translations['TEST_RESULTS']['TESTS_CHECK']
-      }}</span
-    >
-    } } @else {
-    <ui-progress-bar class="progress-bar" [mode]="'query'"></ui-progress-bar>
-    }
-  </div>
-  } @else { @if (!loading) {
-  <div class="LAT-tests" [class.LAT-tests-with-status]="runTestFirstClick">
-    <tgo-test-cases
-      [exampleTestCases]="exampleTestCases"
-      [testCases]="[canAddCustomTestCases, loading] | memoizeFunc: getTestCases : this"
-      [apiTestCasesResult]="runTestResponse"
-      [testCasesStatus]="testCasesStatus"
-      [translations]="translations"
-      [areTestsRun]="runTestFirstClick"
-      [canAddCustomTestCases]="canAddCustomTestCases"
-      [applicationTheme]="applicationTheme"
-      [isSQL]="isSQL"
-    ></tgo-test-cases>
-  </div>
-  } }
-  <div class="status">
-    @if (runTestFirstClick) {
-    <div @slideInOut class="status-child">
-      @if (testCasesStatus) {
-      <p class="passed">
-        {{ translations['TEST_RESULTS']['PASSED'] + testCasesStatus['ok'] }}
-      </p>
-      <p class="error">
-        {{ translations['TEST_RESULTS']['ERROR'] + testCasesStatus['error'] }}
-      </p>
-      <p>{{ translations['TEST_RESULTS']['TOTAL'] + testCasesStatus['total'] }}</p>
-      }
-    </div>
-    }
-  </div>
-</div>