@cauca-911/material 21.0.1-beta.4 → 21.0.1-beta.5

package/src/lib/components/layout/menu-expandable-panel/menu-expandable-panel.component.spec.ts

@@ -0,0 +1,144 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuExpandablePanelComponent } from './menu-expandable-panel.component';
+import { MockComponent, MockModule, MockPipe, ngMocks } from 'ng-mocks';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { MenuExpandablePanelItemComponent } from '../menu-expandable-panel-item/menu-expandable-panel-item.component';
+
+describe('MenuExpandablePanelComponent', () => {
+  let component: MenuExpandablePanelComponent;
+  let fixture: ComponentFixture<MenuExpandablePanelComponent>;
+  let router: any;
+
+  beforeEach(async () => {
+    router = jasmine.createSpyObj('Router', ['navigate']);
+
+    await TestBed.configureTestingModule({
+      imports: [MenuExpandablePanelComponent,
+        MockModule(TranslateModule),
+        MockComponent(MenuExpandablePanelItemComponent),
+      ],
+      declarations: [
+        MockPipe(TranslatePipe, value => value)
+      ],
+      providers: [
+        { provide: Router, useValue: router }
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(MenuExpandablePanelComponent);
+    fixture.componentRef.setInput('caption', 'someTitle');
+    fixture.componentRef.setInput('menuIcon', 'someIcon');
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show expansion icon when show expansion icon is true', () => {
+    const icons = ngMocks.findAll(MatIcon);
+    const icon = icons[1]; 
+
+    expect(icon).toBeTruthy();
+    expect(icon.nativeElement.textContent).toBe('arrow_forward_ios');
+    expect(icons.length).toBe(2);
+  });
+
+  it('should not show expansion icon when show expansion icon is false', () => {
+    fixture.componentRef.setInput('showExpansionIcon', false);
+    fixture.detectChanges();
+
+    const icons = ngMocks.findAll(MatIcon);
+    const icon = icons[0];
+
+    expect(icons.length).toBe(1);
+    expect(icon.nativeElement.textContent).not.toBe('arrow_forward_ios');
+  });
+
+  it('should show menu icon', () => {
+    fixture.componentRef.setInput('showExpansionIcon', false);
+    fixture.detectChanges();
+
+    const icons = ngMocks.findAll(MatIcon);
+    const icon = icons[0];
+
+    expect(icons.length).toBe(1);
+    expect(icon.nativeElement.textContent).toBe('someIcon');
+  });
+
+  it('should show menu title', () => {
+    const someTitle = 'A menu title';
+    fixture.componentRef.setInput('caption', someTitle);
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('.subtitle1')).nativeElement.textContent).toBe(someTitle);
+  });
+
+  it('should show menu subtitle', () => {
+    const someSubtitle = 'A menu subtitle';
+    fixture.componentRef.setInput('subCaption', someSubtitle);
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('.body2')).nativeElement.textContent).toBe(someSubtitle);
+  });
+
+  it('should show not menu subtitle when input is empty', () => {
+    fixture.componentRef.setInput('subCaption', '');
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('.body2'))).toBeFalsy();
+  });
+
+  it('should navigate to route when no menu items are present and menu is clicked', () => {
+    const route = ['someRoute', 'route'];
+    fixture.componentRef.setInput('route', route);
+    const section = fixture.debugElement.query(By.css('section'));
+
+    section.triggerEventHandler('click', null);
+    fixture.detectChanges();
+
+    expect(router.navigate).toHaveBeenCalledWith(route);
+  });
+
+  it('should not show menu items when menu items are present and menu is not open', () => { 
+    const items = [
+      { icon: 'icon1', text: 'text1', route: ['route1'] },
+      { icon: 'icon2', text: 'text2', route: ['route2'] }
+    ];
+    fixture.componentRef.setInput('items', items);
+
+    fixture.detectChanges();
+
+    expect(ngMocks.findAll(MenuExpandablePanelItemComponent).length).toBe(0);
+  });
+
+  it('should show menu items when menu items are present and there is not route when menu is clicked', () => {
+    const items = [
+      { icon: 'icon1', title: 'text1', route: ['route1'] },
+      { icon: 'icon2', title: 'text2', route: ['route2'] }
+    ];
+    fixture.componentRef.setInput('items', items);
+    
+    component.handleClick();
+    fixture.detectChanges();
+
+    const item1 = ngMocks.findAll(MenuExpandablePanelItemComponent)[0];
+    const item2 = ngMocks.findAll(MenuExpandablePanelItemComponent)[1];
+    expect(ngMocks.findAll(MenuExpandablePanelItemComponent).length).toBe(2);
+    expect(item1.componentInstance.icon).toBe('icon1');
+    expect(item1.componentInstance.caption).toBe('text1');
+    expect(item1.componentInstance.route).toEqual(['route1']);
+    expect(item2.componentInstance.icon).toBe('icon2');
+    expect(item2.componentInstance.caption).toBe('text2');
+    expect(item2.componentInstance.route).toEqual(['route2']);
+  });
+});

package/src/lib/components/layout/menu-expandable-panel/menu-expandable-panel.component.ts

@@ -0,0 +1,52 @@
+import { Component, HostBinding, inject, input, InputSignal, signal, WritableSignal } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { Router } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MenuExpandablePanelItemComponent } from '../menu-expandable-panel-item/menu-expandable-panel-item.component';
+import { NgClass } from '@angular/common';
+@Component({
+    selector: 'cauca-menu-expandable-panel',
+    imports: [MatIconModule, TranslatePipe, MenuExpandablePanelItemComponent, NgClass],
+    templateUrl: './menu-expandable-panel.component.html',
+    styleUrl: './menu-expandable-panel.component.scss',
+})
+export class MenuExpandablePanelComponent {
+  public caption: InputSignal<string> = input();
+  public isSubItem: InputSignal<boolean> = input(false);
+  public subCaption: InputSignal<string> = input();
+  public menuIcon: InputSignal<string> = input();
+  public showExpansionIcon: InputSignal<boolean> = input(true);
+  public addTopBorderRadius: InputSignal<boolean> = input(false);
+  public bottomBorder: InputSignal<boolean> = input(false);
+  public addBottomBorderRadius: InputSignal<boolean> = input(false);
+  public route: InputSignal<string[]> = input([]);
+  public items: InputSignal<{ icon: string, title: string, route?: string[], action?: () => void }[]> = input([]);
+
+  public opened: WritableSignal<boolean> = signal(false);
+
+  private readonly router = inject(Router);
+
+  @HostBinding('style.border-top-left-radius') public get topLeftRadius(): string {
+    return this.addTopBorderRadius() ? '12px' : '0px';
+  }
+  @HostBinding('style.border-top-right-radius') public get topRightRadius(): string {
+    return this.addTopBorderRadius() ? '12px' : '0px';
+  }
+  @HostBinding('style.border-bottom-left-radius') public get bottomLeftRadius(): string {
+    return this.addBottomBorderRadius() ? '12px' : '0px';
+  }
+  @HostBinding('style.border-bottom-right-radius') public get bottomRightRadius(): string {
+    return this.addBottomBorderRadius() ? '12px' : '0px';
+  }
+  @HostBinding('class.bottom-border') public get bottomBorderClass(): boolean {
+    return this.bottomBorder();
+  }
+
+  public handleClick(): void {
+    if (this.route().length > 0 && this.items().length === 0) {
+      this.router.navigate(this.route());
+    } else {
+      this.opened.set(!this.opened());
+    }
+  }
+}

package/src/lib/components/layout/menu-expandable-panel-item/menu-expandable-panel-item.component.html

@@ -0,0 +1,4 @@
+<section (click)="openRoute()" [class.sub-item]="isSubItem()">
+    <mat-icon>{{icon()}}</mat-icon>
+    <div [class]="isSubItem() ? 'subtitle2' : 'subtitle1'">{{caption() | translate}}</div>
+</section>

package/src/lib/components/layout/menu-expandable-panel-item/menu-expandable-panel-item.component.scss

@@ -0,0 +1,10 @@
+section {
+    display: flex;
+    gap: 16px;
+    padding: 16px 24px;
+}
+
+.sub-item {
+    background-color: whitesmoke;
+    border-top: 1px solid white;
+}

package/src/lib/components/layout/menu-expandable-panel-item/menu-expandable-panel-item.component.spec.ts

@@ -0,0 +1,80 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuExpandablePanelItemComponent } from './menu-expandable-panel-item.component';
+import { MockModule, MockPipe, ngMocks } from 'ng-mocks';
+import { MatIcon } from '@angular/material/icon';
+import { By } from '@angular/platform-browser';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { Router } from '@angular/router';
+
+describe('MenuExpandablePanelItemComponent', () => {
+  let component: MenuExpandablePanelItemComponent;
+  let fixture: ComponentFixture<MenuExpandablePanelItemComponent>;
+  let router: any;
+
+  beforeEach(async () => {
+    router = jasmine.createSpyObj('Router', ['navigate']);
+
+    await TestBed.configureTestingModule({
+      imports: [MenuExpandablePanelItemComponent,
+        MockModule(TranslateModule)
+      ],
+      declarations: [
+        MockPipe(TranslatePipe, value => value)
+      ],
+      providers: [
+        { provide: Router, useValue: router }
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(MenuExpandablePanelItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show menu icon', () => {
+    fixture.componentRef.setInput('icon', 'someIcon');
+    fixture.detectChanges();
+
+    const icons = ngMocks.findAll(MatIcon);
+    const icon = icons[0];
+
+    expect(icons.length).toBe(1);
+    expect(icon.nativeElement.textContent).toBe('someIcon');
+  });
+
+  it('should show title', () => {
+    fixture.componentRef.setInput('caption', 'someTitle');
+    fixture.detectChanges();
+
+    const title = fixture.debugElement.query(By.css('.subtitle1'));
+
+    expect(title.nativeElement.textContent).toBe('someTitle');
+  });
+
+  it('should navigate to route when clicking on item', () => {
+    fixture.componentRef.setInput('route', ['someRoute']);
+    const item = fixture.debugElement.query(By.css('section'));
+
+    item.triggerEventHandler('click', null);
+    fixture.detectChanges();
+
+    expect(router.navigate).toHaveBeenCalledWith(['someRoute']);
+  });
+
+  it('should run action when one is provided', () => {
+    const action = jasmine.createSpy();
+    fixture.componentRef.setInput('action', action);
+    const item = fixture.debugElement.query(By.css('section'));
+
+    item.triggerEventHandler('click', null);
+    fixture.detectChanges();
+
+    expect(action).toHaveBeenCalledTimes(1);
+  });
+});

package/src/lib/components/layout/menu-expandable-panel-item/menu-expandable-panel-item.component.ts

@@ -0,0 +1,28 @@
+import { Component, inject, input, InputSignal } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'cauca-menu-expandable-panel-item',
+    imports: [MatIconModule, TranslateModule],
+    templateUrl: './menu-expandable-panel-item.component.html',
+    styleUrl: './menu-expandable-panel-item.component.scss'
+})
+export class MenuExpandablePanelItemComponent {
+  public icon: InputSignal<string> = input();
+  public caption: InputSignal<string> = input();
+  public route: InputSignal<string[]> = input();
+  public isSubItem: InputSignal<boolean> = input(false);
+  public action: InputSignal<() => void|null> = input(null);
+
+  private readonly router = inject(Router);
+
+  public openRoute(): void {
+    if (this.action()) {
+      this.action()();
+    } else {
+      this.router.navigate(this.route());
+    }
+  }
+}

package/src/lib/components/layout/page-title/page-title.component.html

@@ -0,0 +1,35 @@
+<div class="title-section">
+
+  <h4 class="title-label">{{caption() | translate }}</h4>
+
+  @if (displayBreadcrumb()) {
+    <div class="breadcrumb">
+
+      @if (baseCrumb()) {
+        <div class="basecrumb">{{baseCrumb()|translate}}</div>
+      }
+
+      @for(location of breadcrumbLocation(); track location) {
+        @if (breadcrumbLocation().length > 0 || currentBreadcrumb()) {
+          <span>/</span>
+        }
+        @if (location.link) {
+          <a class="basecrumb" [href]="location.link" [routerLink]="location.link">{{location.title| translate }}</a>
+        } @else if (location.action) {
+          <span class="basecrumb crumb-link" (click)="location.action()">{{ location.translate ? (location.title | translate) : location.title}}</span>
+        } @else {
+          <span class="basecrumb">{{location.title}}</span>
+        }
+        @if (!$last || currentBreadcrumb()) {
+          <span>/</span>
+        }
+      }
+
+      @if (currentBreadcrumb()) {
+        <span class="breadcrumb-current">{{ mustTranslateBreadcrumb() ? (currentBreadcrumb() | translate) : currentBreadcrumb() }}</span>
+      }
+
+    </div>
+  }
+
+</div>

package/src/lib/components/layout/page-title/page-title.component.scss

@@ -0,0 +1,40 @@
+.title-section {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  margin-bottom: 24px;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+h4 {
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:visited {
+  color: inherit;
+}
+
+.basecrumb {
+  color: rgba(18, 16, 20, 0.6);
+}
+
+.crumb-link {
+  cursor: pointer;
+}
+
+@media (max-width:500px) {
+  .title-section {
+      padding: 16px;
+  }
+}

package/src/lib/components/layout/page-title/page-title.component.spec.ts

@@ -0,0 +1,162 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageTitleComponent } from './page-title.component';
+import { MockModule, MockPipe } from 'ng-mocks';
+import { RouterModule } from '@angular/router';
+import { signal } from '@angular/core';
+import { BreadcrumbService } from '../../../core/breadcrumb.service';
+import { TranslatePipe } from '@ngx-translate/core';
+
+
+describe('PageTitleComponent with service', () => {
+  let component: PageTitleComponent;
+  let fixture: ComponentFixture<PageTitleComponent>;
+  let breadcrumbService: any;
+
+  beforeEach(async () => {
+    breadcrumbService = jasmine.createSpyObj('BreadcrumbService', ['show']);
+    breadcrumbService.showBreadcrumb = signal(true);
+    breadcrumbService.breadcrumb = signal('twidelidou');
+    breadcrumbService.location = signal([{ title: 'test', link: '/test' }]);
+    breadcrumbService.translateBreadcrumb = signal(false);
+
+    await TestBed.configureTestingModule({
+      imports: [PageTitleComponent, MockModule(RouterModule)],
+      declarations: [MockPipe(TranslatePipe, value => value),],
+      providers: [{ provide: BreadcrumbService, useValue: breadcrumbService }]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageTitleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the title', () => {
+    fixture.componentRef.setInput('caption', 'twidelidou');
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.title-label').textContent).toContain(component.caption());
+  });
+
+  it('should display the breadcrump when showBreadcrump is true', () => {
+    breadcrumbService.showBreadcrumb.set(true);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.breadcrumb').textContent).toContain(breadcrumbService.breadcrumb());
+  });
+
+  it('should contains an anchor for each of the locations', () => {
+    fixture.detectChanges();
+
+    const anchors = fixture.nativeElement.querySelectorAll('a');
+    expect(anchors.length).toBe(breadcrumbService.location().length);
+  });
+
+  it('should display the current location', () => {
+    breadcrumbService.location.set([{ title: 'test', link: '/test' }, { title: 'test2', link: '/test2' }]);
+
+    fixture.detectChanges();
+
+    const anchors = fixture.nativeElement.querySelectorAll('a');
+    expect(anchors[0].textContent).toContain(breadcrumbService.location()[0].title);
+    expect(anchors[1].textContent).toContain(breadcrumbService.location()[1].title);
+  });
+
+  it('should display the current breadcrumb', () => {
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.breadcrumb').textContent).toContain(breadcrumbService.breadcrumb());
+  });
+});
+
+describe('PageTitleComponent without service', () => {
+  let component: PageTitleComponent;
+  let fixture: ComponentFixture<PageTitleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PageTitleComponent, MockModule(RouterModule)],
+      declarations: [MockPipe(TranslatePipe, value => value),],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageTitleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create when used without service', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the title when used without service', () => {
+    fixture.componentRef.setInput('caption', 'twidelidou');
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.title-label').textContent).toContain('twidelidou');
+  });
+
+  it('should expose value from inputs when not use with service', () => {
+    fixture.componentRef.setInput('showBreadcrumb', true);
+    fixture.componentRef.setInput('location', [{ title: 'test', link: '/test' }]);
+    fixture.componentRef.setInput('breadcrumb', 'Some breadcrumb');
+
+    fixture.detectChanges();
+
+    expect(component.displayBreadcrumb()).toBe(true);
+    expect(component.breadcrumbLocation()).toEqual([{ title: 'test', link: '/test' }]);
+    expect(component.currentBreadcrumb()).toBe('Some breadcrumb');
+  });
+
+  it('should display the breadcrump when showBreadcrump is true when used without service', () => {
+    fixture.componentRef.setInput('showBreadcrumb', true);
+    fixture.componentRef.setInput('location', [{ title: 'test', link: '/test' }]);
+    fixture.componentRef.setInput('breadcrumb', 'Some breadcrumb');
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.breadcrumb').textContent).toContain('Some breadcrumb');
+  });
+
+  it('should contains an anchor for each of the locations when used without service', () => {
+    const fakeLocations = [{ title: 'test', link: '/test' }];
+    fixture.componentRef.setInput('showBreadcrumb', true);
+    fixture.componentRef.setInput('location', fakeLocations);
+    fixture.componentRef.setInput('breadcrumb', 'Some breadcrumb');
+
+    fixture.detectChanges();
+
+    const anchors = fixture.nativeElement.querySelectorAll('a');
+    expect(anchors.length).toBe(fakeLocations.length);
+  });
+
+  it('should display the current location when used without service', () => {
+    const fakeLocations = [{ title: 'test', link: '/test' }, { title: 'test2', link: '/test2' }];
+    fixture.componentRef.setInput('showBreadcrumb', true);
+    fixture.componentRef.setInput('location', fakeLocations);
+    fixture.componentRef.setInput('breadcrumb', 'Some breadcrumb');
+
+    fixture.detectChanges();
+
+    const anchors = fixture.nativeElement.querySelectorAll('a');
+    expect(anchors[0].textContent).toContain(fakeLocations[0].title);
+    expect(anchors[1].textContent).toContain(fakeLocations[1].title);
+  });
+
+  it('should display the current breadcrumb when used without service', () => {
+    const fakeLocations = [{ title: 'test', link: '/test' }];
+    fixture.componentRef.setInput('showBreadcrumb', true);
+    fixture.componentRef.setInput('location', fakeLocations);
+    fixture.componentRef.setInput('breadcrumb', 'Some breadcrumb');
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.breadcrumb').textContent).toContain('Some breadcrumb');
+  });
+});

package/src/lib/components/layout/page-title/page-title.component.ts

@@ -0,0 +1,28 @@
+
+import { Component, computed, inject, input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { BreadcrumbService } from '../../../core/breadcrumb.service';
+import { BreadcrumbLocation } from '../../../core/models/breadcrumb-location';
+@Component({
+    selector: 'cauca-page-title',
+    imports: [TranslateModule, RouterModule],
+    templateUrl: './page-title.component.html',
+    styleUrls: ['./page-title.component.scss']
+})
+export class PageTitleComponent {
+
+  public caption = input<string>('');
+  public showBreadcrumb = input<boolean>(false);
+  public location = input<BreadcrumbLocation[]>([]);
+  public breadcrumb = input<string>('');
+  public baseCrumb = input<string>('');
+  public translateBreadcrumb = input<boolean>(true);
+
+  public displayBreadcrumb = computed(() => this.showBreadcrumb() || this.breadcrumbService?.showBreadcrumb());
+  public breadcrumbLocation = computed(() => this.breadcrumbService?.location() || this.location() || []);
+  public currentBreadcrumb = computed(() => this.breadcrumbService?.breadcrumb() || this.breadcrumb() || '');
+  public mustTranslateBreadcrumb = computed(() => this.breadcrumbService?.translateBreadcrumb() || this.translateBreadcrumb());
+
+  private readonly breadcrumbService = inject(BreadcrumbService, { optional: true });
+}

package/src/lib/components/layout/sections/main-section/main-section.component.html

@@ -0,0 +1,6 @@
+<div class="section">
+    @if (title()) {
+        <div class="section-description subtitle1">{{title()|translate}}</div>
+    }
+    <div class="section-fields"><ng-content /></div>
+</div>

package/src/lib/components/layout/sections/main-section/main-section.component.scss

@@ -0,0 +1,27 @@
+.section {
+    display: flex;
+    padding: 24px 16px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    flex: 1 0 0;
+    max-width: 1200px;
+}
+
+.section-description {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    padding-bottom: 24px;
+}
+
+.section-fields {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+    & > * {
+        flex: 1 0 0;
+    }
+}

package/src/lib/components/layout/sections/main-section/main-section.component.spec.ts

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainSectionComponent } from './main-section.component';
+import { MockModule, MockPipe } from 'ng-mocks';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+
+describe('MainSectionComponent', () => {
+  let component: MainSectionComponent;
+  let fixture: ComponentFixture<MainSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MockPipe(TranslatePipe, value => value)],
+      imports: [MainSectionComponent, MockModule(TranslateModule)]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MainSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the specified translated title', () => {
+    const someTitle = 'someTitle';
+
+    fixture.componentRef.setInput('title', someTitle);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.section-description').textContent).toBe(someTitle);
+  });
+
+  it('should not display a title if none is provided', () => {
+    fixture.componentRef.setInput('title', '');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.section-description')).toBeNull();
+  });
+});