Add tests for search services and components

Refs #190

ng2-components/ng2-alfresco-search/src/assets/alfresco-search.service.mock.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { provide } from '@angular/core';
+import { AlfrescoSearchService } from '../services/alfresco-search.service';
+import { Observable } from 'rxjs/Rx';
+
+export class SearchServiceMock {
+
+    public getLiveSearchResults(term: string): Observable<any> {
+        if (term.length > 3) {
+            return Observable.of({
+                entries: [
+                    {
+                        entry: {
+                            id: '123'
+                        }
+                    }
+                ]
+            });
+        } else {
+            return Observable.throw('Fake server error');
+        }
+    }
+
+    getProviders(): Array<any> {
+        return [provide(AlfrescoSearchService, {useValue: this})];
+    }
+}

ng2-components/ng2-alfresco-search/src/assets/translation.service.mock.ts

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Observable } from 'rxjs/Rx';
+import { EventEmitter } from '@angular/core';
+
+export interface LangChangeEvent {
+    lang: string;
+    translations: any;
+}
+
+export class TranslationMock {
+
+    public onLangChange: EventEmitter<LangChangeEvent> = new EventEmitter<LangChangeEvent>();
+
+    public get(key: string|Array<string>, interpolateParams?: Object): Observable<string|any> {
+        return Observable.of(key);
+    }
+
+    addTranslationFolder() {
+
+    }
+}

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.html

@@ -1,6 +1,6 @@
 <table data-automation-id="autocomplete_results" *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
     <tbody>
-    <tr *ngFor="let result of results; let idx = index" (click)="_onItemClick(result, $event)"
+    <tr *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)"
         attr.data-automation-id="autocomplete_result_for_{{result.entry.name}}" >
         <td class="img-td"><img src="{{_getMimeTypeIcon(result)}}" /></td>
         <td><div class="truncate" ><b>{{result.entry.name}}</b></div><div class="truncate">{{result.entry.createdByUser.displayName}}</div></td>

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts

@@ -15,11 +15,41 @@
  * limitations under the License.
  */
 
-import { it, describe } from '@angular/core/testing';
+import { provide } from '@angular/core';
+import {
+    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
+} from '@angular/platform-browser-dynamic/testing';
+import { it, describe, expect, inject, beforeEachProviders, setBaseTestProviders } from '@angular/core/testing';
+import { TestComponentBuilder } from '@angular/compiler/testing';
 import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component';
+import { SearchServiceMock } from './../assets/alfresco-search.service.mock';
+import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
+import {
+    AlfrescoSettingsService,
+    AlfrescoAuthenticationService,
+    AlfrescoContentService,
+    AlfrescoTranslationService } from 'ng2-alfresco-core';
 
 describe('AlfrescoSearchAutocompleteComponent', () => {
 
+    let searchService;
+
+    setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+
+    beforeEachProviders(() => {
+        searchService = new SearchServiceMock();
+
+        return [
+            searchService.getProviders(),
+            provide(AlfrescoThumbnailService, {}),
+            provide(AlfrescoTranslationService, {}),
+            provide(AlfrescoSettingsService, {}),
+            provide(AlfrescoAuthenticationService, {}),
+            provide(AlfrescoContentService, {})
+        ];
+    });
+
     it('should setup i18n folder', () => {
 
         let translation = jasmine.createSpyObj('AlfrescoTranslationService', [
@@ -30,4 +60,96 @@ describe('AlfrescoSearchAutocompleteComponent', () => {
 
     });
 
+    it('should display search results when a search term is provided',
+        inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(AlfrescoSearchAutocompleteComponent)
+                .then((fixture) => {
+                    let componentInstance = fixture.componentInstance,
+                        searchTerm = 'customSearchTerm';
+                    spyOn(componentInstance, 'displaySearchResults').and.stub();
+                    componentInstance.searchTerm = searchTerm;
+                    componentInstance.ngOnChanges({
+                        searchTerm: searchTerm
+                    });
+                    fixture.detectChanges();
+                    expect(componentInstance.displaySearchResults).toHaveBeenCalledWith(searchTerm);
+
+                });
+        }));
+
+    it('should display the returned search results',
+        inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(AlfrescoSearchAutocompleteComponent)
+                .then((fixture) => {
+                    let componentInstance = fixture.componentInstance;
+                    componentInstance.results = [{
+                        entry: {
+                            id: '123',
+                            name: 'MyDoc',
+                            content: {
+                                mimetype: 'text/plain'
+                            }
+                        }
+                    }];
+
+                    fixture.detectChanges();
+
+                    let element = fixture.nativeElement;
+                    expect(element.querySelectorAll('table tr').length).toBe(1);
+
+                });
+        }));
+
+    it('should emit preview when file item clicked',
+        inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(AlfrescoSearchAutocompleteComponent)
+                .then((fixture) => {
+                    let componentInstance = fixture.componentInstance;
+                    componentInstance.results = [{
+                        entry: {
+                            id: '123',
+                            name: 'MyDoc',
+                            content: {
+                                mimetype: 'text/plain'
+                            },
+                            isFile: true
+                        }
+                    }];
+                    fixture.detectChanges(componentInstance.results[0]);
+                    componentInstance.preview.subscribe(e => {
+                        expect(e.value).toBe(componentInstance.results[0]);
+                    });
+                    componentInstance.onItemClick();
+
+                });
+        }));
+
+    it('should not emit preview when non-file item clicked',
+        inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(AlfrescoSearchAutocompleteComponent)
+                .then((fixture) => {
+                    let componentInstance = fixture.componentInstance;
+                    componentInstance.results = [{
+                        entry: {
+                            id: '123',
+                            name: 'MyDoc',
+                            content: {
+                                mimetype: 'text/plain'
+                            },
+                            isFile: true
+                        }
+                    }];
+                    fixture.detectChanges(componentInstance.results[0]);
+                    componentInstance.preview.subscribe(e => {
+                        expect(e.value).toBe(componentInstance.results[0]);
+                    });
+                    componentInstance.onItemClick();
+
+                });
+        }));
+
 });

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts

@@ -56,13 +56,15 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
     constructor(private _alfrescoSearchService: AlfrescoSearchService,
                 private translate: AlfrescoTranslationService,
                 private _alfrescoThumbnailService: AlfrescoThumbnailService) {
-        translate.addTranslationFolder('node_modules/ng2-alfresco-search');
+        if (translate) {
+            translate.addTranslationFolder('node_modules/ng2-alfresco-search');
+        }
         this.results = null;
     }
 
     ngOnChanges(changes): void {
         if (changes.searchTerm) {
-            this._displaySearchResults(this.searchTerm);
+            this.displaySearchResults(this.searchTerm);
         }
     }
 
@@ -70,7 +72,7 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
      * Loads and displays search results
      * @param searchTerm Search query entered by user
      */
-    private _displaySearchResults(searchTerm) {
+    public displaySearchResults(searchTerm) {
         if (searchTerm !== null && searchTerm !== '') {
             this._alfrescoSearchService
                 .getLiveSearchResults(searchTerm)
@@ -99,7 +101,7 @@ export class AlfrescoSearchAutocompleteComponent implements OnChanges {
         }
     }
 
-    _onItemClick(node, event?: Event): void {
+    onItemClick(node, event?: Event): void {
         if (event) {
             event.preventDefault();
         }

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html

@@ -1,15 +1,15 @@
-<form (submit)="_onSearch($event)">
+<form (submit)="onSearch($event)">
-    <div [class]="_getTextFieldClassName()">
+    <div [class]="getTextFieldClassName()">
         <label *ngIf="expandable" class="mdl-button mdl-js-button mdl-button--icon" for="searchControl">
             <i class="material-icons">search</i>
         </label>
-        <div [class]="_getTextFieldHolderClassName()">
+        <div [class]="getTextFieldHolderClassName()">
-            <input class="mdl-textfield__input" [type]="inputType" [autocomplete]="_getAutoComplete()" data-automation-id="search_input"
+            <input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()" data-automation-id="search_input"
-                   id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="_onFocus($event)"
+                   id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus($event)"
-                   (blur)="_onBlur($event)">
+                   (blur)="onBlur($event)">
             <label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
         </div>
     </div>
 </form>
 <alfresco-search-autocomplete [searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"
-                              (preview)="_onFileClicked($event)"></alfresco-search-autocomplete>
+                              (preview)="onFileClicked($event)"></alfresco-search-autocomplete>

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts

@@ -15,11 +15,18 @@
  * limitations under the License.
  */
 
-import { it, describe } from '@angular/core/testing';
+import {
+    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
+} from '@angular/platform-browser-dynamic/testing';
+import { it, describe, expect, inject, setBaseTestProviders } from '@angular/core/testing';
+import { TestComponentBuilder } from '@angular/compiler/testing';
 import { AlfrescoSearchControlComponent } from './alfresco-search-control.component';
 
 describe('AlfrescoSearchControlComponent', () => {
 
+    setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+
     it('should setup i18n folder', () => {
 
         let translation = jasmine.createSpyObj('AlfrescoTranslationService', [
@@ -30,4 +37,76 @@ describe('AlfrescoSearchControlComponent', () => {
         expect(alfrescoSearchControlComponent).toBeDefined();
 
     });
+
+    it('should emit searchChange when search term changed',
+        inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb.createAsync(AlfrescoSearchControlComponent).then((componentFixture) => {
+                componentFixture.componentInstance.searchTerm = 'customSearchTerm';
+                componentFixture.detectChanges();
+                componentFixture.componentInstance.searchChange.subscribe(e => {
+                    expect(e.value).toBe('customSearchTerm');
+                });
+            });
+        }));
+
+    describe('Component rendering', () => {
+
+        it('should display a text input field by default',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb.createAsync(AlfrescoSearchControlComponent).then((componentFixture) => {
+                    const element = componentFixture.nativeElement;
+                    expect(element.querySelectorAll('input[type="text"]').length).toBe(1);
+                });
+        }));
+
+        it('should display a search input field when specified',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb.createAsync(AlfrescoSearchControlComponent).then((componentFixture) => {
+                    const element = componentFixture.nativeElement;
+                    componentFixture.componentInstance.inputType = 'search';
+                    componentFixture.detectChanges();
+                    expect(element.querySelectorAll('input[type="search"]').length).toBe(1);
+                });
+            }));
+
+        it('should set browser autocomplete to off by default',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb.createAsync(AlfrescoSearchControlComponent).then((componentFixture) => {
+                    const element = componentFixture.nativeElement;
+                    expect(element.querySelectorAll('input[type="text"]')[0].getAttribute('autocomplete'))
+                        .toBe('off');
+                });
+            }));
+
+        it('should set browser autocomplete to on when configured',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb.createAsync(AlfrescoSearchControlComponent).then((componentFixture) => {
+                    const element = componentFixture.nativeElement;
+                    componentFixture.componentInstance.autocomplete = true;
+                    componentFixture.detectChanges();
+                    expect(element.querySelectorAll('input[type="text"]')[0].getAttribute('autocomplete'))
+                        .toBe('on');
+                });
+            }));
+
+        it('should show an expanding control by default',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb.createAsync(AlfrescoSearchControlComponent).then((componentFixture) => {
+                    const element = componentFixture.nativeElement;
+                    expect(element.querySelectorAll('div.mdl-textfield--expandable').length).toBe(1);
+                    expect(element.querySelectorAll('div.mdl-textfield__expandable-holder').length).toBe(1);
+                });
+            }));
+
+        it('should show a normal non-expanding control when configured',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb.createAsync(AlfrescoSearchControlComponent).then((componentFixture) => {
+                    const element = componentFixture.nativeElement;
+                    componentFixture.componentInstance.expandable = true;
+                    componentFixture.detectChanges();
+                    expect(element.querySelectorAll('div.mdl-textfield--expandable').length).toBe(0);
+                    expect(element.querySelectorAll('div.mdl-textfield__expandable-holder').length).toBe(0);
+                });
+            }));
+    });
 });

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts

@@ -86,15 +86,15 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
         }
     }
 
-    _getTextFieldClassName(): string {
+    getTextFieldClassName(): string {
         return 'mdl-textfield mdl-js-textfield' + (this.expandable ? ' mdl-textfield--expandable' : '');
     }
 
-    _getTextFieldHolderClassName(): string {
+    getTextFieldHolderClassName(): string {
         return this.expandable ? 'search-field mdl-textfield__expandable-holder' : 'search-field';
     }
 
-    _getAutoComplete(): string {
+    getAutoComplete(): string {
         return this.autocomplete ? 'on' : 'off';
     }
 
@@ -103,7 +103,7 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
      *
      * @param event Submit event that was fired
      */
-    _onSearch(event): void {
+    onSearch(event): void {
         if (event) {
             event.preventDefault();
         }
@@ -115,17 +115,17 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
         }
     }
 
-    _onFileClicked(event): void {
+    onFileClicked(event): void {
         this.preview.emit({
             value: event.value
         });
     }
 
-    _onFocus(): void {
+    onFocus(): void {
         this.searchActive = true;
     }
 
-    _onBlur(): void {
+    onBlur(): void {
         window.setTimeout(() => {
             this.searchActive = false;
         }, 200);

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html

@@ -20,7 +20,7 @@
     <tbody>
 
     <tr *ngFor="let result of results; let idx = index">
-        <td><img src="{{_getMimeTypeIcon(result)}}" /></td>
+        <td><img src="{{getMimeTypeIcon(result)}}" /></td>
         <td attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
         <td attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}} >{{result.entry.modifiedByUser
             .displayName}}</td>

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts

@@ -15,11 +15,58 @@
  * limitations under the License.
  */
 
-import { it, describe } from '@angular/core/testing';
+import { provide } from '@angular/core';
+import {
+    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
+} from '@angular/platform-browser-dynamic/testing';
+import { it, describe, expect, inject, beforeEachProviders, setBaseTestProviders } from '@angular/core/testing';
+import { TestComponentBuilder } from '@angular/compiler/testing';
+import { RouteParams } from '@angular/router-deprecated';
 import { AlfrescoSearchComponent } from './alfresco-search.component';
+import { SearchServiceMock } from './../assets/alfresco-search.service.mock';
+import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
+import {
+    AlfrescoSettingsService,
+    AlfrescoAuthenticationService,
+    AlfrescoContentService,
+    AlfrescoTranslationService } from 'ng2-alfresco-core';
 
 describe('AlfrescoSearchComponent', () => {
 
+    let searchService;
+
+    setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+
+    beforeEachProviders(() => {
+        searchService = new SearchServiceMock();
+
+        return [
+            searchService.getProviders(),
+            provide(AlfrescoThumbnailService, {}),
+            provide(AlfrescoTranslationService, {}),
+            provide(AlfrescoSettingsService, {}),
+            provide(AlfrescoAuthenticationService, {}),
+            provide(AlfrescoContentService, {})
+        ];
+    });
+
+    it('should not have a search term by default', () => {
+        let search = new AlfrescoSearchComponent(null, null, null, null);
+        expect(search).toBeDefined();
+        expect(search.searchTerm).toBe('');
+    });
+
+    it('should take the provided search term from query param provided via RouteParams', () => {
+        let search = new AlfrescoSearchComponent(null, null, null, new RouteParams({ q: 'exampleTerm692' }));
+        expect(search.searchTerm).toBe('exampleTerm692');
+    });
+
+    it('should have a null search term if no query param provided via RouteParams', () => {
+        let search = new AlfrescoSearchComponent(null, null, null, new RouteParams({}));
+        expect(search.searchTerm).toBeNull();
+    });
+
     it('should setup i18n folder', () => {
 
         let translation = jasmine.createSpyObj('AlfrescoTranslationService', [
@@ -31,4 +78,49 @@ describe('AlfrescoSearchComponent', () => {
         expect(translation.addTranslationFolder).toHaveBeenCalledWith('node_modules/ng2-alfresco-search');
     });
 
+    describe('Rendering search results', () => {
+
+        it('should display search results when a search term is provided',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb
+                    .createAsync(AlfrescoSearchComponent)
+                    .then((fixture) => {
+                        let componentInstance = fixture.componentInstance,
+                            searchTerm = 'customSearchTerm';
+                        spyOn(componentInstance, 'displaySearchResults').and.stub();
+                        componentInstance.searchTerm = searchTerm;
+                        componentInstance.ngOnChanges();
+                        fixture.detectChanges();
+                        expect(componentInstance.displaySearchResults).toHaveBeenCalledWith(searchTerm);
+
+                    });
+            }));
+
+        it('should display the returned search results',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb
+                    .createAsync(AlfrescoSearchComponent)
+                    .then((fixture) => {
+                        let componentInstance = fixture.componentInstance;
+                        componentInstance.results = [{
+                            entry: {
+                                id: '123',
+                                name: 'MyDoc',
+                                content: {
+                                    mimetype: 'text/plain'
+                                }
+                            }
+                        }];
+
+                        componentInstance.ngOnChanges();
+                        fixture.detectChanges();
+
+                        let element = fixture.nativeElement;
+                        expect(element.querySelectorAll('table tbody tr').length).toBe(1);
+
+                    });
+            }));
+
+    });
+
 });

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts

@@ -48,7 +48,10 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
                 private translate: AlfrescoTranslationService,
                 private _alfrescoThumbnailService: AlfrescoThumbnailService,
                 @Optional() params: RouteParams) {
-        translate.addTranslationFolder('node_modules/ng2-alfresco-search');
+
+        if (translate !== null) {
+            translate.addTranslationFolder('node_modules/ng2-alfresco-search');
+        }
 
         this.results = null;
         if (params) {
@@ -57,11 +60,11 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
     }
 
     ngOnInit(): void {
-        this._displaySearchResults(this.searchTerm);
+        this.displaySearchResults(this.searchTerm);
     }
 
     ngOnChanges(changes): void {
-        this._displaySearchResults(this.searchTerm);
+        this.displaySearchResults(this.searchTerm);
     }
 
     /**
@@ -69,7 +72,7 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
      * @param node Node to get URL for.
      * @returns {string} URL address.
      */
-    _getMimeTypeIcon(node: any): string {
+    getMimeTypeIcon(node: any): string {
         if (node.entry.content && node.entry.content.mimeType) {
             let icon = this._alfrescoThumbnailService.getMimeTypeIcon(node.entry.content.mimeType);
             return `${this.baseComponentPath}/img/${icon}`;
@@ -80,7 +83,7 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
      * Loads and displays search results
      * @param searchTerm Search query entered by user
      */
-    private _displaySearchResults(searchTerm): void {
+    public displaySearchResults(searchTerm): void {
         if (searchTerm !== null) {
             this._alfrescoSearchService
                 .getLiveSearchResults(searchTerm)

ng2-components/ng2-alfresco-search/src/services/alfresco-thumbnail.service.spec.ts

@@ -28,4 +28,21 @@ describe('AlfrescoThumbnailService', () => {
     beforeEach(() => {
         service = new AlfrescoThumbnailService(null);
     });
+
+    it('should return the correct icon for a plain text file', () => {
+        expect(service.getMimeTypeIcon('text/plain')).toBe('ft_ic_document.svg');
+    });
+
+    it('should return the correct icon for a PNG file', () => {
+        expect(service.getMimeTypeIcon('image/png')).toBe('ft_ic_raster_image.svg');
+    });
+
+    it('should return the correct icon for a MP4 video file', () => {
+        expect(service.getMimeTypeIcon('video/mp4')).toBe('ft_ic_video.svg');
+    });
+
+    it('should return a generic icon for an unknown file', () => {
+        expect(service.getMimeTypeIcon('x-unknown/yyy')).toBe('ft_ic_miscellaneous.svg');
+    });
+
 });