@testgorilla/tgo-coding-test 0.0.1

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

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

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

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

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

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

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

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

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