@testgorilla/tgo-coding-test 0.0.1

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

@@ -0,0 +1,401 @@
+import { ChangeDetectorRef, NO_ERRORS_SCHEMA, SimpleChanges } from '@angular/core';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MockProvider } from 'ng-mocks';
+import { Subject } from 'rxjs';
+import { TestCaseDeletionAction, TestCaseDeletionData, TestCaseStatus } from '../../../models/test-cases';
+import { LibCodingTestService } from '../../../services/lib-coding-test.service';
+import { StorageCodingService } from '../../../services/storage.service';
+import { TestCasesService } from '../../../services/test-cases.service';
+import { TestCasesComponent } from './test-cases.component';
+
+describe('TestCasesComponent', () => {
+  let component: TestCasesComponent;
+  let fixture: ComponentFixture<TestCasesComponent>;
+  let libCodingTestService: LibCodingTestService;
+  let testCasesService: TestCasesService;
+  let updateTestCasesSpy: jest.SpyInstance;
+  let setActiveTestCaseSpy: jest.SpyInstance;
+  const testCaseDeletionSubj$ = new Subject<TestCaseDeletionData>();
+  let lastTestCaseLocalId = 0;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestCasesComponent, NoopAnimationsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        MockProvider(LibCodingTestService, {
+          handleTestCaseDeletion: jest.fn(),
+          updateTestCases: jest.fn(),
+          testCaseDeletion$: testCaseDeletionSubj$.asObservable(),
+        }),
+        MockProvider(TestCasesService, {
+          activeTestCaseIndex$: new Subject(),
+          createTestCaseLocalId() {
+            return (lastTestCaseLocalId += 1);
+          },
+          setActiveTestCase(index) {
+            this.activeTestCaseIndex$.next(index);
+          },
+        }),
+        MockProvider(ChangeDetectorRef),
+        MockProvider(StorageCodingService),
+      ],
+    })
+    .overrideComponent(TestCasesComponent, {
+      set: {
+        template: '',
+      },
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TestCasesComponent);
+    component = fixture.componentInstance;
+    component.exampleTestCases = [
+      {
+        id: 1,
+        name: 'Example 1',
+        input: '1 2 3',
+        expectedOutput: '4',
+        preloaded: true,
+      },
+      {
+        id: 2,
+        name: 'Example 2',
+        input: '1 2 5',
+        expectedOutput: '5',
+        preloaded: true,
+      },
+    ];
+    component.testCases = [];
+    component.translations = {
+      TOOLTIPS: {
+        CANT_ADD_TEST_CASE: 'You cannot add more than 6 of your own tests.',
+      },
+      TEST_RESULTS: {
+        TEST_CASES: {
+          STATUSES: {
+            PASSED: 'Passed',
+            ERROR: 'Error',
+            EMPTY: 'Empty',
+          },
+          ADD_TEST_CASE: 'Add Test Case',
+        },
+      },
+    };
+    libCodingTestService = TestBed.inject(LibCodingTestService);
+    testCasesService = TestBed.inject(TestCasesService);
+    updateTestCasesSpy = jest.spyOn(libCodingTestService, 'updateTestCases');
+    setActiveTestCaseSpy = jest.spyOn(testCasesService, 'setActiveTestCase');
+    fixture.detectChanges();
+    // Mock tabGroup since template is overridden
+    component.tabGroup = { _groupId: '0' } as any;
+  });
+
+  describe('when component is initialized', () => {
+    it('should subscribe to activeTestCaseIndex$ and set activeTestCaseIndex with emitted value', fakeAsync(() => {
+      const activeIndex = 3;
+      component.ngOnInit();
+      testCasesService.setActiveTestCase(activeIndex);
+
+      tick();
+      expect(component.activeTestCaseIndex).toBe(activeIndex);
+    }));
+
+    describe('when testcases is empty array', () => {
+      it('should assign exampleTestCases to testCases and reset the index to 0', () => {
+        component.ngOnInit();
+        expect(component.testCases).toEqual(component.exampleTestCases);
+        expect(component.activeTestCaseIndex).toBe(0);
+      });
+    });
+
+    describe('when testcases is NOT empty array', () => {
+      it('should not modify testcases', () => {
+        const testCases = [
+          {
+            id: 1,
+            name: 'Example 1',
+            input: '1 2 3',
+            expectedOutput: '4',
+            preloaded: true,
+          },
+          {
+            id: 2,
+            name: 'Example 2',
+            input: '1 2 5',
+            expectedOutput: '5',
+            preloaded: true,
+          },
+          {
+            name: 'Test 1',
+            input: '1 2 5',
+            expectedOutput: '5',
+            preloaded: true,
+          },
+        ];
+        component.testCases = [...testCases];
+        component.ngOnInit();
+        expect(component.testCases).toEqual(testCases);
+      });
+    });
+
+    describe('and listenTestCaseDeletion is called', () => {
+      beforeEach(() => {
+        const testCases = [
+          {
+            id: 1,
+            name: 'Example 1',
+            input: '1 2 3',
+            expectedOutput: '4',
+            preloaded: true,
+          },
+          {
+            localId: 1,
+            name: 'Test 1',
+            input: '1 2 5',
+            expectedOutput: '5',
+            preloaded: true,
+          },
+        ];
+        component.testCases = [...testCases];
+        component.testCasesResult = [
+          {
+            actualOutput: 'something',
+            logs: 'something',
+            status: TestCaseStatus.Passed,
+          },
+          {
+            actualOutput: 'something 1',
+            logs: 'something 1',
+            status: TestCaseStatus.Passed,
+          },
+        ];
+        component.canAddCustomTestCases = true;
+      });
+
+      it('should NOT remove test case if action is NOT Confirm', fakeAsync(() => {
+        component.ngOnInit();
+        testCaseDeletionSubj$.next({ action: TestCaseDeletionAction.Try, index: 1 });
+
+        tick();
+        expect(component.testCases.length).toBe(2);
+        expect(component.testCasesResult.length).toBe(2);
+      }));
+
+      it('should remove test case if action is Confirm and call updateTestCases with testCases', fakeAsync(() => {
+        component.ngOnInit();
+        testCaseDeletionSubj$.next({ action: TestCaseDeletionAction.Confirm, index: 1 });
+
+        tick();
+        expect(component.testCases.length).toBe(1);
+        expect(component.testCasesResult.length).toBe(1);
+        expect(updateTestCasesSpy).toHaveBeenCalledWith(component.testCases);
+        discardPeriodicTasks();
+      }));
+
+      it('should call closeTestCaseMobileView if isMobile true', fakeAsync(() => {
+        const closeTestCaseMobileViewSpy = jest.spyOn(component, 'closeTestCaseMobileView');
+        component.isMobile = true;
+
+        component.ngOnInit();
+        testCaseDeletionSubj$.next({ action: TestCaseDeletionAction.Confirm, index: 1 });
+
+        tick();
+        expect(closeTestCaseMobileViewSpy).toHaveBeenCalled();
+        discardPeriodicTasks();
+      }));
+
+      it('should set activeTestCase to previous item', fakeAsync(() => {
+        component.ngOnInit();
+        testCaseDeletionSubj$.next({ action: TestCaseDeletionAction.Confirm, index: 1 });
+
+        tick();
+        expect(component.activeTestCaseIndex).toBe(0);
+        discardPeriodicTasks();
+      }));
+
+      it('should set isAddTestCasesDisabled with true if now testCases count is less then maxTests', fakeAsync(() => {
+        component.testCases = [];
+        for (let i = 0; i < component.maxTestCasesAllowed; i++) {
+          component.addTestCase();
+        }
+
+        component.ngOnInit();
+        testCaseDeletionSubj$.next({ action: TestCaseDeletionAction.Confirm, index: 1 });
+
+        tick();
+        expect(component.isAddTestCasesDisabled).toBe(true);
+        discardPeriodicTasks();
+      }));
+
+      it('should set isAddTestCasesDisabled with false if testCases count is equal or more then maxTests', fakeAsync(() => {
+        component.testCases = [];
+        for (let i = 0; i < component.maxTestCasesAllowed + 1; i++) {
+          component.addTestCase();
+        }
+
+        component.ngOnInit();
+        testCaseDeletionSubj$.next({ action: TestCaseDeletionAction.Confirm, index: 1 });
+
+        tick();
+        expect(component.isAddTestCasesDisabled).toBe(true);
+        discardPeriodicTasks();
+      }));
+    });
+  });
+
+  describe('when ngOnChanges is called', () => {
+    it('should NOT set testCasesResult property when apiTestCasesResult has falsy currentValue', () => {
+      const changes = { apiTestCasesResult: { currentValue: null } } as unknown as SimpleChanges;
+      component.testCasesResult = [];
+
+      component.ngOnChanges(changes);
+
+      expect(component.testCasesResult).toEqual([]);
+    });
+
+    it('should add TestCaseResult for empty testCase with Empty status', () => {
+      const changes = {
+        apiTestCasesResult: {
+          currentValue: [
+            {
+              actualOutput: 'something',
+              logs: 'something',
+              status: TestCaseStatus.Passed,
+            },
+            {
+              actualOutput: 'something',
+              logs: 'something',
+              status: TestCaseStatus.Passed,
+            },
+          ],
+        },
+      } as unknown as SimpleChanges;
+      component.apiTestCasesResult = [...changes.apiTestCasesResult.currentValue];
+      component.addTestCase();
+
+      component.ngOnChanges(changes);
+
+      expect(component.testCasesResult[component.testCases.length - 1]).toEqual({
+        actualOutput: null,
+        logs: null,
+        status: TestCaseStatus.Empty,
+      });
+    });
+  });
+
+  describe('when addTestCase is called', () => {
+    it('should add a new testcase in the array and call onTestCasesChanged', () => {
+      const newTestCase = {
+        localId: lastTestCaseLocalId + 1,
+        name: `Test ${lastTestCaseLocalId + 1}`,
+        input: '',
+        expectedOutput: '',
+        preloaded: false,
+      };
+
+      component.addTestCase();
+      expect(component.testCases[component.testCases.length - 1]).toEqual(newTestCase);
+      expect(updateTestCasesSpy).toHaveBeenCalledWith(component.testCases);
+    });
+
+    it('should set new test case as active, set isContentViewOpened', () => {
+      component.addTestCase();
+
+      expect(setActiveTestCaseSpy).toHaveBeenCalledWith(component.testCases.length - 1);
+      expect(component.isContentViewOpened).toBe(component.isMobile);
+    });
+
+    it('should update isAddTestCasesDisabled with true if less than maximum test cases number', () => {
+      component.addTestCase();
+
+      expect(component.isAddTestCasesDisabled).toBe(true);
+    });
+
+    it('should update isAddTestCasesDisabled with false if equal or more than maximum test cases number', () => {
+      for (let i = 0; i < component.maxTestCasesAllowed; i++) {
+        component.addTestCase();
+      }
+
+      expect(component.isAddTestCasesDisabled).toBe(false);
+    });
+  });
+
+  describe('when removeTestCase is called', () => {
+    it('should remove testcase in the array with the passed index and set the index to previous tab', () => {
+      const indexToRemove = 2;
+      const handleTestCaseDeletionSpy = jest.spyOn(libCodingTestService, 'handleTestCaseDeletion');
+
+      component.removeTestCase(indexToRemove);
+
+      expect(handleTestCaseDeletionSpy).toHaveBeenCalledWith(indexToRemove);
+    });
+  });
+
+  describe('when modifyTestCase is called', () => {
+    it('should modify the input and expectedOutput of a test case when not preloaded', () => {
+      component.testCases = [
+        { name: 'Test 1', input: 'Input 1', expectedOutput: 'Output 1', preloaded: false },
+        { name: 'Test 2', input: 'Input 2', expectedOutput: 'Output 2', preloaded: false },
+      ];
+      const indexToModify = 1;
+      const modifiedValue = { input: 'Modified Input', expectedOutput: 'Modified Output' };
+
+      component.modifyTestCase(indexToModify, modifiedValue);
+
+      expect(updateTestCasesSpy).toHaveBeenCalledWith(component.testCases);
+      expect(component.testCases[indexToModify].input).toBe('Modified Input');
+      expect(component.testCases[indexToModify].expectedOutput).toBe('Modified Output');
+    });
+    it('should not modify the input and expectedOutput when the test case is preloaded', () => {
+      component.testCases = [
+        { id: 1, name: 'Example 1', input: 'Input 1', expectedOutput: 'Output 1', preloaded: true },
+      ];
+      const indexToModify = 0; // Trying to modify a preloaded test case
+      const modifiedValue = { input: 'Modified Input', expectedOutput: 'Modified Output' };
+
+      component.modifyTestCase(indexToModify, modifiedValue);
+
+      expect(component.testCases[indexToModify].input).toBe('Input 1'); // Input should not be modified
+      expect(component.testCases[indexToModify].expectedOutput).toBe('Output 1'); // Output should not be modified
+    });
+  });
+
+  describe('when modifyTestCase is called', () => {
+    it('should set the active test case index to the provided index', () => {
+      const index = 1;
+
+      component.setActiveTestCaseIndex(index);
+
+      expect(setActiveTestCaseSpy).toHaveBeenCalledWith(index);
+    });
+
+    it('should set isContentViewOpened to true if isMobile true', () => {
+      component.isMobile = true;
+
+      component.setActiveTestCaseIndex(0);
+
+      expect(component.isContentViewOpened).toBe(true);
+    });
+
+    it('should set isContentViewOpened to false if isMobile false', () => {
+      component.isMobile = false;
+
+      component.setActiveTestCaseIndex(0);
+
+      expect(component.isContentViewOpened).toBe(false);
+    });
+  });
+
+  describe('when closeTestCaseMobileView is called', () => {
+    it('should set isContentViewOpened to false and reset activeTestCase', () => {
+      component.isContentViewOpened = true;
+
+      component.closeTestCaseMobileView();
+
+      expect(component.isContentViewOpened).toBe(false);
+      expect(setActiveTestCaseSpy).toHaveBeenCalledWith(null);
+    });
+  });
+});

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

@@ -0,0 +1,205 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatTabGroup, MatTabsModule } from '@angular/material/tabs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { filter } from 'rxjs';
+import { ApplicationTheme, IconComponentModule, ButtonComponentModule } from '@testgorilla/tgo-ui';
+import {
+  AllowedModificationFields,
+  CustomTestCase,
+  ExampleTestCase,
+  TestCaseDeletionAction,
+  TestCaseResult,
+  TestCaseStatus,
+} from '../../../models/test-cases';
+import { LibCodingTestService } from '../../../services/lib-coding-test.service';
+import { StorageCodingService } from '../../../services/storage.service';
+import { TestCasesService } from '../../../services/test-cases.service';
+import { TestCasesStatusComponent } from '../test-cases-status/test-cases-status.component';
+import { TestCasesContentComponent } from '../test-cases-content/test-cases-content.component';
+
+@UntilDestroy()
+@Component({
+  standalone: true,
+  selector: 'tgo-test-cases',
+  templateUrl: 'test-cases.component.html',
+  styleUrls: ['test-cases.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    MatTabsModule,
+    IconComponentModule,
+    ButtonComponentModule,
+    TestCasesStatusComponent,
+    TestCasesContentComponent,
+  ],
+})
+export class TestCasesComponent implements OnInit, OnChanges {
+  @Input() exampleTestCases: ExampleTestCase[];
+  @Input() apiTestCasesResult: TestCaseResult[];
+  @Input() testCasesStatus: any;
+  @Input() testCases: (CustomTestCase | ExampleTestCase)[];
+  @Input() translations: Record<string, unknown>;
+  @Input() areTestsRun: boolean;
+  @Input() applicationTheme: ApplicationTheme;
+  @Input() canAddCustomTestCases: boolean;
+  @Input() isSQL: boolean;
+
+  @ViewChild('tabGroup') tabGroup: MatTabGroup;
+
+  testCasesResult: TestCaseResult[];
+
+  activeTestCaseIndex: number | null;
+  maxTestCasesAllowed = 6; //Could be taken from backend
+
+  isAddTestCasesDisabled: boolean;
+  isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+  isContentViewOpened: boolean;
+
+  constructor(
+    private libCodingTestService: LibCodingTestService,
+    private changeDetectorRef: ChangeDetectorRef,
+    private testCasesService: TestCasesService,
+    private StorageCodingService: StorageCodingService
+  ) {}
+
+  ngOnInit() {
+    this.testCasesService.activeTestCaseIndex$.pipe(untilDestroyed(this)).subscribe(index => {
+      this.activeTestCaseIndex = index;
+    });
+
+    this.setDefaultTestCases();
+    if (this.canAddCustomTestCases) {
+      this.updateAddCustomTestCaseDisabled();
+      this.listenTestCaseDeletion();
+    }
+  }
+
+  ngOnChanges({ apiTestCasesResult }: SimpleChanges): void {
+    if (!apiTestCasesResult) {
+      return;
+    }
+    const apiTestCases: TestCaseResult[] = apiTestCasesResult.currentValue;
+
+    if (apiTestCases) {
+      this.testCasesResult = apiTestCases.length ? this.handleEmptyTestCases(apiTestCases) : [];
+    }
+  }
+
+  private setDefaultTestCases() {
+    if (!this.testCases.length) {
+      this.testCases = [...(this.exampleTestCases || [])];
+      this.onTestCasesChanged();
+      this.setActiveTestCaseIndex(this.isMobile ? null : 0);
+    }
+  }
+
+  addTestCase(): void {
+    const testCaseLocalId = this.testCasesService.createTestCaseLocalId();
+
+    this.testCases.push({
+      localId: testCaseLocalId,
+      name: `Test ${testCaseLocalId}`,
+      input: '',
+      expectedOutput: '',
+      preloaded: false,
+    });
+    this.onTestCasesChanged();
+    this.testCasesService.setActiveTestCase(this.testCases.length - 1);
+    this.isContentViewOpened = this.isMobile;
+    this.updateAddCustomTestCaseDisabled();
+
+    if (!this.isMobile) {
+      this.setFocus();
+    }
+  }
+
+  removeTestCase(index: number): void {
+    this.libCodingTestService.handleTestCaseDeletion(index);
+  }
+
+  modifyTestCase(index: number, modifiedValue: AllowedModificationFields): void {
+    if (!this.testCases[index].preloaded) {
+      this.testCases[index].input = modifiedValue.input;
+      this.testCases[index].expectedOutput = modifiedValue.expectedOutput;
+      this.onTestCasesChanged();
+    }
+  }
+
+  private setFocus() {
+    const tabHeaderId = `mat-tab-label-${this.tabGroup['_groupId']}-${this.activeTestCaseIndex}`;
+    const tabHeaderElement: HTMLElement = document.getElementById(tabHeaderId);
+    if (tabHeaderElement) {
+      tabHeaderElement.focus();
+    }
+  }
+
+  private onTestCasesChanged() {
+    this.libCodingTestService.updateTestCases([...this.testCases]);
+    this.StorageCodingService.updateTestCases([...this.testCases]);
+  }
+
+  setActiveTestCaseIndex(index: number): void {
+    this.testCasesService.setActiveTestCase(index);
+    this.isContentViewOpened = index !== null ? this.isMobile : false;
+  }
+
+  closeTestCaseMobileView(): void {
+    this.isContentViewOpened = false;
+    this.testCasesService.setActiveTestCase(null);
+  }
+
+  private listenTestCaseDeletion(): void {
+    this.libCodingTestService.testCaseDeletion$
+      .pipe(
+        filter(({ action }) => action === TestCaseDeletionAction.Confirm),
+        untilDestroyed(this)
+      )
+      .subscribe(({ index }) => {
+        this.testCases.splice(index, 1);
+        this.testCasesResult.splice(index, 1);
+        this.onTestCasesChanged();
+
+        if (this.isMobile) {
+          this.closeTestCaseMobileView();
+        } else {
+          this.testCasesService.setActiveTestCase(index - 1);
+        }
+
+        this.updateAddCustomTestCaseDisabled();
+        this.changeDetectorRef.detectChanges();
+      });
+  }
+
+  private handleEmptyTestCases(apiTestCasesResults: TestCaseResult[]): TestCaseResult[] {
+    const testCasesResult = [...apiTestCasesResults];
+
+    this.testCases.forEach(({ input, expectedOutput }, index) => {
+      const isEmpty = this.isSQL ? !expectedOutput : !input || !expectedOutput;
+      if (isEmpty) {
+        testCasesResult.splice(index, 0, {
+          actualOutput: null,
+          logs: null,
+          status: TestCaseStatus.Empty,
+        });
+      }
+    });
+
+    return testCasesResult;
+  }
+
+  private updateAddCustomTestCaseDisabled(): void {
+    const exampleTestCasesCount = this.exampleTestCases?.length || 0;
+    this.isAddTestCasesDisabled = this.testCases.length - exampleTestCasesCount < this.maxTestCasesAllowed;
+  }
+}

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

@@ -0,0 +1,94 @@
+@if (testCase) {
+<div class="test-cases-content" [class.test-cases-content-tests-run]="areTestsRun">
+  @if (areTestsRun && isCustomTestCase && (testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {
+  <div class="custom-tests-hint-container">
+    <p class="custom-tests-info">{{ translations['BOTH_FIELDS_MUST_BE_FILLED'] }}</p>
+  </div>
+  } @if (!isCustomTestCase && !areTestsRun) {
+  <p class="custom-tests-info custom-tests-info-indented">
+    {{ translations['EXAMPLE_TEST_CASE_INFO'] }}
+  </p>
+  } @if (isCustomTestCase && (!testCaseResult || (testCaseResult?.status | memoizeFunc: isEmptyTestCase))) {
+  <p class="custom-tests-info custom-tests-info-indented">
+    {{ translations['FILL_ALL_FIELDS'] }}
+  </p>
+  } @if (testCaseResult && !(testCaseResult?.status | memoizeFunc: isEmptyTestCase)) {
+  <div class="custom-tests-logs">
+    <div class="custom-tests-log-row">
+      <h4 class="custom-tests-log-header">{{ translations['LOG'] }}</h4>
+      <div class="custom-tests-log-content">
+        <tgo-truncated-text [text]="testCaseResult.logs" class="custom-tests-info"></tgo-truncated-text>
+      </div>
+    </div>
+    @if (isSQL) {
+    <div class="custom-tests-log-row custom-tests-log-row-cols">
+      <div class="custom-tests-log-col custom-tests-log-col-expected-query">
+        <div class="custom-tests-log-heading">
+          <h4 class="custom-tests-log-header">{{ translations['EXPECTED_QUERY'] }}</h4>
+        </div>
+        <div class="custom-tests-log-content">
+          <tgo-truncated-text
+            [text]="testCase.expectedOutput"
+            [isWordWrap]="true"
+            class="custom-tests-info"
+          ></tgo-truncated-text>
+        </div>
+      </div>
+      <div class="custom-tests-log-col">
+        <div class="custom-tests-log-heading">
+          <h4 class="custom-tests-log-header">{{ translations['QUERY_RESULT'] }}</h4>
+          <tgo-test-cases-status
+            [status]="testCaseResult.status"
+            [translations]="translations['STATUSES']"
+          ></tgo-test-cases-status>
+        </div>
+        <div class="custom-tests-log-content">
+          <tgo-truncated-text
+            [text]="testCaseResult.actualOutput"
+            [isWordWrap]="true"
+            class="custom-tests-info"
+          ></tgo-truncated-text>
+        </div>
+      </div>
+    </div>
+    } @else {
+    <div class="custom-tests-log-row">
+      <div class="custom-tests-log-heading">
+        <h4 class="custom-tests-log-header">{{ translations['OUTPUT'] }}</h4>
+        <tgo-test-cases-status
+          [status]="testCaseResult.status"
+          [translations]="translations['STATUSES']"
+        ></tgo-test-cases-status>
+      </div>
+      <div class="custom-tests-log-content">
+        <tgo-truncated-text [text]="testCaseResult.actualOutput" class="custom-tests-info"></tgo-truncated-text>
+      </div>
+    </div>
+    }
+  </div>
+  } @if (!isSQL) {
+  <form [formGroup]="form">
+    <div class="custom-tests-inputs-container">
+      <ui-field
+        class="custom-tests-input"
+        [label]="translations['INPUT']"
+        [type]="'multi-line'"
+        [disabled]="testCase.preloaded"
+        [maxRows]="3"
+        [applicationTheme]="applicationTheme"
+        formControlName="input"
+      ></ui-field>
+      <ui-field
+        class="custom-tests-input"
+        [label]="translations['EXPECTED_OUTPUT']"
+        [type]="'multi-line'"
+        [maxRows]="3"
+        [disabled]="testCase.preloaded"
+        [applicationTheme]="applicationTheme"
+        formControlName="expectedOutput"
+      ></ui-field>
+    </div>
+  </form>
+  }
+</div>
+}