@testgorilla/tgo-coding-test 1.0.0 → 2.0.0

package/src/lib/components/coding-section/coding-section.component.spec.ts

@@ -0,0 +1,257 @@
+import { NO_ERRORS_SCHEMA, SimpleChange, SimpleChanges } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+
+import { MockProvider } from 'ng-mocks';
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
+import { CodingSectionComponent } from './coding-section.component';
+import { ConfigurationsService } from '../../services/configurations.service';
+import { CONFIGURATIONS_SERVICE_MOCK } from '../../services/configurations.service.mocks';
+import { FormBuilder } from '@angular/forms';
+import { StorageCodingService } from '../../services/storage.service';
+import { LanguageChangeAction } from '../../models/language-change-action';
+
+describe('CodingSectionComponent', () => {
+  let component: CodingSectionComponent;
+  let fixture: ComponentFixture<CodingSectionComponent>;
+  let libCodingTestService: LibCodingTestService;
+  let configurationsService: ConfigurationsService;
+  let changeCurrentCodeSpy: jest.SpyInstance;
+  const initCode = 'init code';
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [CodingSectionComponent, MonacoEditorModule.forRoot(), MemoizeFuncPipe],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        MockProvider(LibCodingTestService, {
+          codeChange$: new Subject(),
+          changeCurrentCode(code: string) {
+            this.codeChange$.next(code);
+          },
+          isBoilerplateLoading$: new Subject(),
+          setBoilerplateLoadingStatus(value: boolean) {
+            this.isBoilerplateLoading$.next(value);
+          },
+          languageChange$: new Subject(),
+          codeReset$: new Subject(),
+          getInitCode: () => initCode,
+          currentLanguage$: new BehaviorSubject<CodeEditorLanguages>(CodeEditorLanguages.Javascript),
+        }),
+        MockProvider(ConfigurationsService, CONFIGURATIONS_SERVICE_MOCK),
+        FormBuilder,
+        MockProvider(StorageCodingService),
+      ],
+    })
+    .overrideComponent(CodingSectionComponent, {
+      set: {
+        template: '',
+      },
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodingSectionComponent);
+    component = fixture.componentInstance;
+    component.translations = {
+      HEADINGS: {},
+      TOOLTIPS: {},
+    };
+    component.languages = [
+      {
+        value: CodeEditorLanguages.Python,
+        label: 'python',
+        version: '1',
+      },
+    ];
+    component.initCode = 'sample python code';
+    libCodingTestService = TestBed.inject(LibCodingTestService);
+    configurationsService = TestBed.inject(ConfigurationsService);
+    changeCurrentCodeSpy = jest.spyOn(libCodingTestService, 'changeCurrentCode');
+
+    fixture.detectChanges();
+  });
+
+  describe('when the component is initialized', () => {
+    describe('and when isLAT is true', () => {
+      beforeEach(() => {
+        component.isLAT = true;
+      });
+
+      it('should initialize header form when isLAT is true', () => {
+        component.ngOnInit();
+
+        expect(component.headerForm).toBeDefined();
+        expect(component.headerForm.get('language')).toBeDefined();
+        expect(component.headerForm.get('language').value).toBe(CodeEditorLanguages.Javascript);
+        expect(component.headerForm.get('language').disabled).toBe(true);
+      });
+
+      it('should NOT disable language control of headerForm', () => {
+        component.languages = [
+          ...component.languages,
+          {
+            value: CodeEditorLanguages.Java,
+            label: 'java',
+          },
+        ];
+
+        component.ngOnInit();
+
+        expect(component.headerForm).toBeDefined();
+        expect(component.headerForm.get('language').enabled).toBe(true);
+      });
+
+      it('should set previousLanguage to languageControl value', () => {
+        component.ngOnInit();
+
+        expect(component.previousLanguage).toBe(CodeEditorLanguages.Javascript);
+      });
+
+      it('should emit languageChange value when language form value is changed', fakeAsync(() => {
+        const languageChangeEmitSpy = jest.spyOn(component.languageChange, 'emit');
+
+        component.ngOnInit();
+        component.language.patchValue(CodeEditorLanguages.Cpp);
+        tick();
+
+        expect(languageChangeEmitSpy).toHaveBeenCalledWith(CodeEditorLanguages.Cpp);
+      }));
+
+      it('should set language control value to previousLang if LanguageChangeAction.Cancel', fakeAsync(() => {
+        component.ngOnInit();
+        component.previousLanguage = CodeEditorLanguages.Php;
+        (libCodingTestService.languageChange$ as Subject<LanguageChangeAction>).next(LanguageChangeAction.Cancel);
+        tick();
+
+        expect(component.language.value).toBe(CodeEditorLanguages.Php);
+      }));
+
+      describe('and when LanguageChangeAction.Confirm is emitted', () => {
+        it('should set prevLanguage to language control value and changeCurrentLanguage is called', fakeAsync(() => {
+          const changeCurrentLanguageSpy = jest.spyOn(libCodingTestService, 'changeCurrentLanguage');
+
+          component.ngOnInit();
+          component.previousLanguage = CodeEditorLanguages.Php;
+          component.language.patchValue(CodeEditorLanguages.Python);
+          (libCodingTestService.languageChange$ as Subject<LanguageChangeAction>).next(LanguageChangeAction.Confirm);
+          tick();
+
+          expect(component.previousLanguage).toBe(CodeEditorLanguages.Python);
+          expect(changeCurrentLanguageSpy).toHaveBeenCalledWith(CodeEditorLanguages.Python);
+        }));
+      });
+    });
+  });
+
+  describe('when initCode changes', () => {
+    it('should call the necessary setters', () => {
+      const codeChangeSpy = jest.spyOn(component.codeChange, 'emit');
+      const oldInitCode = component.initCode;
+      const newInitCode = 'sample java code';
+      component.initCode = newInitCode;
+      const changes: SimpleChanges = {
+        initCode: new SimpleChange(oldInitCode, newInitCode, false),
+      };
+      component.ngOnChanges(changes);
+
+      expect(codeChangeSpy).toBeCalledWith(newInitCode);
+      expect(changeCurrentCodeSpy).toBeCalledWith(newInitCode);
+    });
+  });
+
+  describe('when parseCodeChange is called', () => {
+    it('should emit code change event with new code string', () => {
+      const code = 'new code';
+      const emitSpy = jest.spyOn(component.codeChange, 'emit');
+
+      component.parseCodeChange(code);
+
+      expect(emitSpy).toHaveBeenCalledWith(code);
+      expect(changeCurrentCodeSpy).toHaveBeenCalledWith(code);
+    });
+
+    it('should set hasNoCodeChanges to false if code is different from initial code', () => {
+      const code = 'new code';
+
+      component.parseCodeChange(code);
+
+      expect(component.hasNoCodeChanges).toBe(false);
+    });
+
+    it('should set hasNoCodeChanges to true if code is the same as initial code', () => {
+      const code = initCode;
+
+      component.parseCodeChange(code);
+
+      expect(component.hasNoCodeChanges).toBe(true);
+    });
+  });
+
+  describe('when the code is reset', () => {
+    let resetCodeSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      resetCodeSpy = jest.spyOn(libCodingTestService, 'resetCode');
+      component.resetCode();
+    });
+
+    it('should call service reset code method', () => {
+      expect(resetCodeSpy).toBeCalled();
+    });
+  });
+
+  describe('when the guided tour is triggered', () => {
+    let startGuidedTourSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      startGuidedTourSpy = jest.spyOn(libCodingTestService, 'startGuidedTour');
+      component.startGuidedTour();
+    });
+
+    it('should call service reset code method', () => {
+      expect(startGuidedTourSpy).toBeCalled();
+    });
+  });
+
+  describe('when disableFullscreen is called', () => {
+    it('should call setFullscreen method with false', () => {
+      const setFullScreenSpy = jest.spyOn(libCodingTestService, 'setFullscreen');
+      component.disableFullscreen();
+
+      expect(setFullScreenSpy).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('when openConfigPanel is called', () => {
+    it('should call openConfigPanel method of ConfigurationsService', () => {
+      const openConfigPanelSpy = jest.spyOn(configurationsService, 'openConfigPanel');
+      component.openConfigPanel();
+
+      expect(openConfigPanelSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('when isCodeLoading$ is called', () => {
+    it('should return false observable if test is NOT LAT', done => {
+      component.isLAT = false;
+      component.isCodeLoading$(component.isLAT).subscribe(val => {
+        expect(val).toEqual(false);
+        done();
+      });
+    });
+    it('should return boilerplate loading status if test is LAT', done => {
+      component.isLAT = true;
+      const boilerplateLoadingStatus = true;
+      component.isCodeLoading$(component.isLAT).subscribe(val => {
+        expect(val).toEqual(boilerplateLoadingStatus);
+        done();
+      });
+      libCodingTestService.setBoilerplateLoadingStatus(boilerplateLoadingStatus);
+    });
+  });
+});

package/src/lib/components/coding-section/coding-section.component.ts

@@ -0,0 +1,186 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AbstractControl, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { distinctUntilChanged, Observable, of, take, tap } from 'rxjs';
+import {
+  ApplicationTheme,
+  OptionType,
+  TooltipComponentModule,
+  DropdownComponentModule,
+  ButtonComponentModule,
+  SpinnerComponentModule,
+} from '@testgorilla/tgo-ui';
+
+import { LanguageChangeAction } from '../../models/language-change-action';
+import { LATLanguages } from '../../models/lat-languages';
+import { ConfigurationsService } from '../../services/configurations.service';
+import { LibCodingTestService } from '../../services/lib-coding-test.service';
+import { StorageCodingService } from '../../services/storage.service';
+import {
+  CodeEditorFuncParam,
+  CodeEditorLanguages,
+  CodeEditorTypesMap,
+} from '../code-editor/helpers/code-editor-helper.model';
+import { PasteData } from '../code-editor/models/code-editor.model';
+import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
+import { CodeEditorComponent } from '../code-editor/code-editor.component';
+
+@UntilDestroy()
+@Component({
+    selector: 'tgo-coding-section',
+    templateUrl: './coding-section.component.html',
+    styleUrls: ['./coding-section.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        TooltipComponentModule,
+        DropdownComponentModule,
+        ButtonComponentModule,
+        SpinnerComponentModule,
+        MemoizeFuncPipe,
+        CodeEditorComponent,
+    ]
+})
+export class CodingSectionComponent implements OnInit, OnChanges {
+  private readonly configurationsService = inject(ConfigurationsService);
+  private readonly libCodingTestService = inject(LibCodingTestService);
+  private readonly StorageCodingService = inject(StorageCodingService);
+  private readonly fb = inject(FormBuilder);
+
+  @Input() initCode: string;
+  @Input() functionParams: CodeEditorFuncParam[];
+  @Input() functionName: string;
+  @Input() returnType: keyof CodeEditorTypesMap;
+  @Input() isLAT = false;
+  @Input() languages: LATLanguages;
+  @Input() isFullViewMode: boolean;
+  @Input() shouldGenerateInitCode: boolean;
+  @Input() isRunnableWithLangSelector: boolean;
+  @Input() autoHeight: boolean;
+  @Input() translations: Record<string, unknown>;
+  @Input() isMobile: boolean;
+  @Input() applicationTheme: ApplicationTheme;
+
+  @Output() pasteEvent = new EventEmitter<PasteData>();
+  @Output() codeChange = new EventEmitter<string>();
+  @Output() languageChange = new EventEmitter<CodeEditorLanguages>();
+
+  headerForm: FormGroup;
+  isFullscreenMode$ = this.libCodingTestService.isFullscreen$;
+  previousLanguage: CodeEditorLanguages;
+  code: string;
+
+  languagesFormattedList: OptionType[];
+
+  ngOnInit() {
+    if (this.isLAT) {
+      this.createHeaderForm().subscribe(() => {
+        this.initializeLanguage();
+        this.listenLanguageDropdownChanges();
+        this.handleLanguageChangeModal();
+      });
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (typeof changes.initCode?.currentValue === 'string') {
+      this.codeChange.emit(changes.initCode.currentValue);
+      this.libCodingTestService.changeCurrentCode(changes.initCode.currentValue);
+    }
+    if (changes.languages?.currentValue) {
+      this.languagesFormattedList = this.languages.map(({ value, label }) => ({
+        value,
+        displayValue: label,
+      }));
+    }
+  }
+
+  private createHeaderForm(): Observable<CodeEditorLanguages> {
+    return this.libCodingTestService.currentLanguage$.pipe(
+      take(1),
+      tap(lastLanguage => {
+        this.headerForm = this.fb.group({
+          language: lastLanguage ? lastLanguage : this.languages[0].value,
+        });
+        if (this.languages.length === 1) {
+          this.language.disable();
+        }
+      })
+    );
+  }
+
+  private initializeLanguage() {
+    this.previousLanguage = this.language.value as CodeEditorLanguages;
+  }
+
+  private listenLanguageDropdownChanges() {
+    this.language.valueChanges
+      .pipe(untilDestroyed(this), distinctUntilChanged())
+      .subscribe((value: CodeEditorLanguages) => {
+        if (value !== this.previousLanguage) {
+          this.languageChange.emit(value);
+        }
+      });
+  }
+
+  private handleLanguageChangeModal() {
+    this.libCodingTestService.languageChange$.pipe(untilDestroyed(this)).subscribe(value => {
+      if (value === LanguageChangeAction.Cancel) {
+        // Revert language to previous selection if user cancels
+        this.language.setValue(this.previousLanguage);
+      } else if (value === LanguageChangeAction.Confirm) {
+        this.previousLanguage = this.language.value as CodeEditorLanguages;
+        // Update current language if user confirms the new selection
+        this.libCodingTestService.changeCurrentLanguage(this.language.value as CodeEditorLanguages);
+        this.setVersion();
+      }
+    });
+  }
+
+  parseCodeChange(code: string): void {
+    this.codeChange.emit(code);
+    this.libCodingTestService.changeCurrentCode(code);
+    this.code = code;
+  }
+
+  get hasNoCodeChanges(): boolean {
+    return this.code === this.libCodingTestService.getInitCode();
+  }
+
+  resetCode(): void {
+    this.libCodingTestService.resetCode();
+  }
+
+  startGuidedTour(): void {
+    this.libCodingTestService.startGuidedTour();
+  }
+
+  disableFullscreen(): void {
+    this.libCodingTestService.setFullscreen(false);
+  }
+
+  openConfigPanel(): void {
+    this.configurationsService.openConfigPanel();
+  }
+
+  isCodeLoading$(isLAT: boolean): Observable<boolean> {
+    if (isLAT) {
+      return this.libCodingTestService.isBoilerplateLoading$;
+    }
+    return of(false);
+  }
+
+  get language(): AbstractControl {
+    return this.headerForm.controls.language;
+  }
+
+  private setVersion() {
+    const version = this.languages.find(x => x.value === this.language.value).version;
+    this.libCodingTestService.setVersion(version);
+    if (this.isFullViewMode) {
+      this.StorageCodingService.updateVersion(version);
+    }
+  }
+}

package/src/lib/components/coding-test.module.ts

@@ -0,0 +1,124 @@
+import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { AngularSplitModule } from 'angular-split';
+import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor-v2';
+import { QuillModule } from 'ngx-quill';
+import { MatSidenavModule } from '@angular/material/sidenav';
+// import { provideNgxWebstorage, StrategyIndex, withLocalStorage } from 'ngx-webstorage';
+import { provideNgxWebstorage } from 'ngx-webstorage';
+import { TgoCodingTestComponent } from './tgo-coding-test/tgo-coding-test.component';
+import { CodeEditorComponent } from './code-editor/code-editor.component';
+import { CodingQuestionComponent } from './coding-question/coding-question.component';
+import { CodingSectionComponent } from './coding-section/coding-section.component';
+import { ConfigurationsComponent } from './configurations/configurations.component';
+import { InstructionsComponent } from './instructions/instructions.component';
+import { PanelComponent } from './panel/panel.component';
+import { RunnableEditorComponent } from './runnable-editor/runnable-editor.component';
+import { TestCasesComponent } from './tests/test-cases/test-cases.component';
+import { TestResultsComponent } from './tests/test-results.component';
+import { MemoizeFuncPipe } from '../pipes/memoize-func.pipe';
+import { LibCodingTestService } from '../services/lib-coding-test.service';
+import { TestCasesStatusComponent } from './tests/test-cases-status/test-cases-status.component';
+import { TruncatedTextComponent } from './common/truncated-text/truncated-text.component';
+import { TestCasesContentComponent } from './tests/test-cases-content/test-cases-content.component';
+import {
+  ButtonComponentModule,
+  ToggleComponentModule,
+  ProgressBarComponentModule,
+  IconComponentModule,
+  IconLabelComponentModule,
+  SpinnerComponentModule,
+  DropdownComponentModule,
+  FieldComponentModule,
+  TooltipComponentModule,
+  DividerComponentModule,
+  CardComponentModule,
+} from '@testgorilla/tgo-ui';
+// import { CodeEditorService } from './code-editor/code-editor.service';
+// import { ConfigurationsService } from '../services/configurations.service';
+// import { TestCasesService } from '../services/test-cases.service';
+// import { ThemeService } from '../services/theme.service';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+// import { StorageCodingService } from '../services/storage.service';
+
+const monacoConfig: NgxMonacoEditorConfig = {
+  baseUrl: 'assets/libs/monaco/min/vs',
+};
+
+@NgModule({
+  declarations: [
+    // TgoCodingTestComponent,
+    // CodeEditorComponent,
+    // CodingQuestionComponent,
+    // InstructionsComponent,
+    // CodingSectionComponent,
+    // TestResultsComponent,
+    // TestCasesComponent,
+    // PanelComponent,
+    // ConfigurationsComponent,
+    // RunnableEditorComponent,
+    // MemoizeFuncPipe,
+    // TestCasesContentComponent,
+    // TestCasesStatusComponent,
+    // TruncatedTextComponent,
+  ],
+  // imports: [
+  //   FormsModule,
+  //   CommonModule,
+  //   MonacoEditorModule.forRoot(monacoConfig),
+  //   AngularSplitModule,
+  //   ReactiveFormsModule,
+  //   MatCardModule,
+  //   FieldComponentModule,
+  //   MatIconModule,
+  //   MatSidenavModule,
+  //   MatTabsModule,
+  //   QuillModule.forRoot({
+  //     modules: {
+  //       syntax: true,
+  //       toolbar: [
+  //         ['bold', 'italic', 'underline'],
+  //         [{ list: 'ordered' }, { list: 'bullet' }],
+  //       ],
+  //     },
+  //   }),
+  //   ButtonComponentModule,
+  //   ToggleComponentModule,
+  //   ProgressBarComponentModule,
+  //   IconComponentModule,
+  //   IconLabelComponentModule,
+  //   SpinnerComponentModule,
+  //   DropdownComponentModule,
+  //   TooltipComponentModule,
+  //   DividerComponentModule,
+  //   CardComponentModule,
+  // ],
+  providers: [
+    // todo: [migration] this was changed
+    // LibCodingTestService,
+    // StrategyIndex,
+    // CodeEditorService,
+    // ConfigurationsService,
+    // TestCasesService,
+    // ThemeService,
+    // provideNgxWebstorage(withLocalStorage()),
+    // provideNgxWebstorage(),
+    // todo: it was renamed
+    // StorageCodingService,
+  ],
+  exports: [TgoCodingTestComponent],
+})
+export class CodingTestModule {
+  // static forRoot(): ModuleWithProviders<CodingTestModule> {
+  //   return {
+  //     ngModule: CodingTestModule,
+  //     providers: [
+  //       LibCodingTestService,
+  //       // StorageCodingService,
+  //     ],
+  //   };
+  // }
+}

package/src/lib/components/common/truncated-text/truncated-text.component.html

@@ -0,0 +1,6 @@
+<div class="text-container" [class.text-container-word-wrap]="isWordWrap">
+  <span class="text" [class.expanded]="!isTruncated"
+    >{{ [isTruncated, text] | memoizeFunc: getShownText : this
+    }}<a class="show-more-link" *ngIf="isTruncated" (click)="toggleTruncation()">Show more</a></span
+  >
+</div>

package/src/lib/components/common/truncated-text/truncated-text.component.scss

@@ -0,0 +1,18 @@
+.text-container {
+  .text {
+    white-space: pre-wrap;
+  }
+
+  &-word-wrap {
+    .text {
+      overflow-wrap: break-word;
+    }
+  }
+
+  .show-more-link {
+    font-size: 14px;
+    color: var(--main-text-color);
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}

package/src/lib/components/common/truncated-text/truncated-text.component.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TruncatedTextComponent } from './truncated-text.component';
+import { SimpleChanges } from '@angular/core';
+import { MemoizeFuncPipe } from '../../../pipes/memoize-func.pipe';
+
+describe('TruncatedTextComponent', () => {
+  let component: TruncatedTextComponent;
+  let fixture: ComponentFixture<TruncatedTextComponent>;
+  const loremText =
+    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias aliquid et facere, in inventore ipsum iste itaque maiores nesciunt numquam obcaecati odio odit perferendis quasi quis quo, soluta totam!';
+  const truncatedLoremText =
+    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias aliquid et facere, in inventore ipsum iste itaque maiores nesciunt nu... ';
+  let textSimpleChanges: SimpleChanges;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TruncatedTextComponent, MemoizeFuncPipe],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TruncatedTextComponent);
+    component = fixture.componentInstance;
+    textSimpleChanges = {
+      text: {
+        firstChange: true,
+        currentValue: 'text',
+        previousValue: '',
+        isFirstChange: () => true,
+      },
+    } as SimpleChanges;
+    component.text = loremText;
+
+    fixture.detectChanges();
+  });
+
+  describe('when [text] input value is changed', () => {
+    describe('and text is longer than DEFAULT_MAX_CHARACTERS', () => {
+      it('should set isTruncated to true', () => {
+        component.isTruncated = false;
+        textSimpleChanges.text.firstChange = true;
+        textSimpleChanges.text.currentValue = loremText;
+        component.ngOnChanges(textSimpleChanges);
+        expect(component.isTruncated).toEqual(true);
+      });
+    });
+
+    describe("and it's NOT firstChange", () => {
+      it('should NOT update isTruncated value', () => {
+        component.isTruncated = true;
+        textSimpleChanges.text.firstChange = false;
+        component.ngOnChanges(textSimpleChanges);
+        expect(component.isTruncated).toEqual(true);
+      });
+    });
+
+    describe('when getShownText is called', () => {
+      describe('when getShownText is called', () => {
+        describe('and isTruncated is false', () => {
+          it('should return full text', () => {
+            const isTruncated = false;
+            expect(component.getShownText([isTruncated, loremText])).toEqual(loremText);
+          });
+        });
+
+        describe('and isTruncated is true', () => {
+          it('should return truncated text', () => {
+            const isTruncated = true;
+            expect(component.getShownText([isTruncated, loremText])).toEqual(truncatedLoremText);
+          });
+        });
+      });
+    });
+
+    describe('when toggleTruncation is called', () => {
+      it('should toggle isTruncated value', () => {
+        component.isTruncated = false;
+        component.toggleTruncation();
+        expect(component.isTruncated).toEqual(true);
+        component.toggleTruncation();
+        expect(component.isTruncated).toEqual(false);
+      });
+    });
+  });
+});