diff --git a/client/src/app/instance/documentation/containers/dataset-list.component.ts b/client/src/app/instance/documentation/containers/dataset-list.component.ts
index 7e6ce3d2ba4839c741a891086d6e59a0e6515a67..058c704eb4dee808701c90b429f240bf567cb411 100644
--- a/client/src/app/instance/documentation/containers/dataset-list.component.ts
+++ b/client/src/app/instance/documentation/containers/dataset-list.component.ts
@@ -58,7 +58,7 @@ export class DatasetListComponent implements OnInit {
         this.datasetList = store.select(datasetSelector.selectAllDatasets);
     }
 
-    ngOnInit() {
+    ngOnInit(): void {
         this.store.dispatch(datasetActions.loadDatasetList());
     }
 }
diff --git a/client/src/app/instance/documentation/containers/documentation.component.ts b/client/src/app/instance/documentation/containers/documentation.component.ts
index 2500d92969939bacf0ad29c325655a90fbe32eef..8782bdb444a1e2ab8d8ae7c00fdaca82b2596a38 100644
--- a/client/src/app/instance/documentation/containers/documentation.component.ts
+++ b/client/src/app/instance/documentation/containers/documentation.component.ts
@@ -45,7 +45,7 @@ export class DocumentationComponent implements OnInit {
         this.attributeList = store.select(attributeSelector.selectAllAttributes);
     }
 
-    ngOnInit() {
+    ngOnInit(): void {
         this.store.dispatch(attributeActions.loadAttributeList());
     }
 
diff --git a/client/src/app/shared/components/navbar.component.spec.ts b/client/src/app/shared/components/navbar.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e130bac88362f0f9557a851a02d56802218cba83
--- /dev/null
+++ b/client/src/app/shared/components/navbar.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, ComponentFixture  } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { NavbarComponent } from './navbar.component';
+import { INSTANCE } from '../../../test-data';
+
+describe('[Shared][Component] NavbarComponent', () => {
+    let component: NavbarComponent;
+    let fixture: ComponentFixture<NavbarComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [NavbarComponent],
+            imports: [RouterTestingModule]
+
+        }).compileComponents();
+        fixture = TestBed.createComponent(NavbarComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create the component', () => {
+        expect(component).toBeDefined();
+    });
+
+    it('should return logo href', () => {
+        component.apiUrl = 'http://test.com';
+        component.instance = INSTANCE;
+        expect(component.getLogoHref()).toEqual('http://test.com/download-instance-file/myInstance/path/to/logo');
+        component.instance.config.design.design_logo = '';
+        expect(component.getLogoHref()).toEqual('assets/cesam_anis40.png');
+    });
+});
diff --git a/client/src/app/shared/components/navbar.component.ts b/client/src/app/shared/components/navbar.component.ts
index fcbb7457ba7d2b29291c36278c8d2781827c0f8e..6dd71ea2ad04614e4056163940b62c58a9807c77 100644
--- a/client/src/app/shared/components/navbar.component.ts
+++ b/client/src/app/shared/components/navbar.component.ts
@@ -12,6 +12,10 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 import { Instance } from 'src/app/metamodel/models';
 import { UserProfile } from 'src/app/auth/user-profile.model';
 
+/**
+ * @class
+ * @classdesc Navbar component.
+ */
 @Component({
     selector: 'app-navbar',
     templateUrl: 'navbar.component.html',
@@ -30,11 +34,15 @@ export class NavbarComponent {
     @Output() logout: EventEmitter<any> = new EventEmitter();
     @Output() openEditProfile: EventEmitter<any> = new EventEmitter();
 
-    getLogoHref() {
+    /**
+     * Returns logo href.
+     *
+     * @return  string
+     */
+    getLogoHref(): string {
         if (this.instance.config.design.design_logo) {
             return `${this.apiUrl}/download-instance-file/${this.instance.name}/${this.instance.config.design.design_logo}`;
-        } else {
-            return 'assets/cesam_anis40.png';
         }
+        return 'assets/cesam_anis40.png';
     }
 }
diff --git a/client/src/app/shared/components/spinner.component.spec.ts b/client/src/app/shared/components/spinner.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10123fef86799ca7efd2128f7ccf5a9cc163a99c
--- /dev/null
+++ b/client/src/app/shared/components/spinner.component.spec.ts
@@ -0,0 +1,21 @@
+import { TestBed, ComponentFixture  } from '@angular/core/testing';
+
+import { SpinnerComponent } from './spinner.component';
+
+describe('[Shared][Component] SpinnerComponent', () => {
+    let component: SpinnerComponent;
+    let fixture: ComponentFixture<SpinnerComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [SpinnerComponent]
+
+        }).compileComponents();
+        fixture = TestBed.createComponent(SpinnerComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create the component', () => {
+        expect(component).toBeDefined();
+    });
+});
diff --git a/client/src/app/shared/components/spinner.component.ts b/client/src/app/shared/components/spinner.component.ts
index e938fbed67c1bd87a14934083f27f69ce0888983..52483b87141f6e127fb28ac02d52cdd3aba6739f 100644
--- a/client/src/app/shared/components/spinner.component.ts
+++ b/client/src/app/shared/components/spinner.component.ts
@@ -9,9 +9,13 @@
 
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 
+/**
+ * @class
+ * @classdesc Spinner component.
+ */
 @Component({
     selector: 'app-spinner',
     templateUrl: 'spinner.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SpinnerComponent { }
\ No newline at end of file
+export class SpinnerComponent { }
diff --git a/client/src/app/shared/pipes/attribute-list-by-family.pipe.spec.ts b/client/src/app/shared/pipes/attribute-list-by-family.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..347e2a700102dcf52301b6d9381b54771911194f
--- /dev/null
+++ b/client/src/app/shared/pipes/attribute-list-by-family.pipe.spec.ts
@@ -0,0 +1,11 @@
+import { AttributeListByFamilyPipe } from './attribute-list-by-family.pipe';
+import { ATTRIBUTE_LIST } from '../../../test-data';
+
+describe('[Shared][Pipes] AttributeListByFamilyPipe', () => {
+    let pipe = new AttributeListByFamilyPipe();
+
+    it('should return attributes corresponding to the given criteria family ID', () => {
+        expect(pipe.transform(ATTRIBUTE_LIST, 1).length).toEqual(1);
+        expect(pipe.transform(ATTRIBUTE_LIST, 1)).toContain(ATTRIBUTE_LIST[0]);
+    });
+});
diff --git a/client/src/app/shared/pipes/attribute-list-by-family.pipe.ts b/client/src/app/shared/pipes/attribute-list-by-family.pipe.ts
index 880dfcce5d889428636fdad5d134d7ef3249cc7a..58685af64f63ae88edce2eeec9c5120d4154e246 100644
--- a/client/src/app/shared/pipes/attribute-list-by-family.pipe.ts
+++ b/client/src/app/shared/pipes/attribute-list-by-family.pipe.ts
@@ -11,7 +11,15 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { Attribute } from 'src/app/metamodel/models';
 
-@Pipe({name: 'attributeListByFamily'})
+/**
+ * @class
+ * @classdesc Returns attributes corresponding to the given criteria family ID.
+ *
+ * @example
+ * // returns attributes that matching with the criteria family ID among the attribute list
+ * {{ attributeList | attributesListByFamily:1 }}
+ */
+@Pipe({ name: 'attributeListByFamily' })
 export class AttributeListByFamilyPipe implements PipeTransform {
     transform(attributeList: Attribute[], idCriteriaFamily: number): Attribute[] {
         return attributeList.filter(attribute => attribute.id_criteria_family === idCriteriaFamily);
diff --git a/client/src/app/shared/pipes/dataset-by-name.pipe.spec.ts b/client/src/app/shared/pipes/dataset-by-name.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..27df27c9b455fb7022e31f3077686dd1f65ad6ac
--- /dev/null
+++ b/client/src/app/shared/pipes/dataset-by-name.pipe.spec.ts
@@ -0,0 +1,10 @@
+import { DatasetByNamePipe } from './dataset-by-name.pipe';
+import { DATASET_LIST } from '../../../test-data';
+
+describe('[Shared][Pipes] DatasetByNamePipe', () => {
+    let pipe = new DatasetByNamePipe();
+
+    it('should return dataset corresponding to the given name', () => {
+        expect(pipe.transform(DATASET_LIST, 'myDataset')).toEqual(DATASET_LIST[0]);
+    });
+});
diff --git a/client/src/app/shared/pipes/dataset-by-name.pipe.ts b/client/src/app/shared/pipes/dataset-by-name.pipe.ts
index 27292944e17c67bc7f9029a91d24addf580673c8..0aa3870f56a30c23fdbfc90e7ba72eaf1235c575 100644
--- a/client/src/app/shared/pipes/dataset-by-name.pipe.ts
+++ b/client/src/app/shared/pipes/dataset-by-name.pipe.ts
@@ -11,7 +11,15 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { Dataset } from 'src/app/metamodel/models';
 
-@Pipe({name: 'datasetByName'})
+/**
+ * @class
+ * @classdesc Returns dataset corresponding to the given name.
+ *
+ * @example
+ * // returns dataset object that matching with the 'myDataset' name among the dataset list
+ * {{ datasetList | datasetByName:'myDataset' }}
+ */
+@Pipe({ name: 'datasetByName' })
 export class DatasetByNamePipe implements PipeTransform {
     transform(datasetList: Dataset[], datasetName: string): Dataset {
         return datasetList.find(dataset => dataset.name === datasetName);
diff --git a/client/src/app/shared/pipes/dataset-list-by-family.pipe.spec.ts b/client/src/app/shared/pipes/dataset-list-by-family.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..911548768c59f6593b6cd3710d5a54cee537ffbd
--- /dev/null
+++ b/client/src/app/shared/pipes/dataset-list-by-family.pipe.spec.ts
@@ -0,0 +1,10 @@
+import { DatasetListByFamilyPipe } from './dataset-list-by-family.pipe';
+import { DATASET_LIST } from '../../../test-data';
+
+describe('[Shared][Pipes] DatasetListByFamilyPipe', () => {
+    let pipe = new DatasetListByFamilyPipe();
+
+    it('should return datasets corresponding to the given dataset family ID', () => {
+        expect(pipe.transform(DATASET_LIST, 1)).toEqual(DATASET_LIST);
+    });
+});
diff --git a/client/src/app/shared/pipes/dataset-list-by-family.pipe.ts b/client/src/app/shared/pipes/dataset-list-by-family.pipe.ts
index 27ccfbfdbf2eb1af50b1b5d900ce79a1e4aa0afa..ff131a7b049eacbe8a7e49f01e6ee7bfd442fc6a 100644
--- a/client/src/app/shared/pipes/dataset-list-by-family.pipe.ts
+++ b/client/src/app/shared/pipes/dataset-list-by-family.pipe.ts
@@ -11,7 +11,15 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { Dataset } from 'src/app/metamodel/models';
 
-@Pipe({name: 'datasetListByFamily'})
+/**
+ * @class
+ * @classdesc Returns datasets corresponding to the given dataset family ID.
+ *
+ * @example
+ * // returns datasets that matching with the dataset family ID among the dataset list
+ * {{ datasetList | datasetListByFamily:1 }}
+ */
+@Pipe({ name: 'datasetListByFamily' })
 export class DatasetListByFamilyPipe implements PipeTransform {
     transform(datasetList: Dataset[], idDatasetFamily: number): Dataset[] {
         return datasetList.filter(dataset => dataset.id_dataset_family === idDatasetFamily);
diff --git a/client/src/app/shared/pipes/index.ts b/client/src/app/shared/pipes/index.ts
index b8263c6a6051a3543d00b84d9b29b2e6a4469823..0de129d3c0404133bd241e3c451d1b3d95e0d2f9 100644
--- a/client/src/app/shared/pipes/index.ts
+++ b/client/src/app/shared/pipes/index.ts
@@ -11,7 +11,7 @@ import { DatasetListByFamilyPipe } from './dataset-list-by-family.pipe';
 import { AttributeListByFamilyPipe } from './attribute-list-by-family.pipe';
 import { SurveyByNamePipe } from './survey-by-name.pipe';
 import { OptionListBySelectPipe } from './option-list-by-select.pipe';
-import { OutputFamilyById } from './output-family-by-id.pipe';
+import { OutputFamilyByIdPipe } from './output-family-by-id.pipe';
 import { DatasetByNamePipe } from './dataset-by-name.pipe';
 import { InstanceByNamePipe } from './instance-by-name.pipe';
 
@@ -20,7 +20,7 @@ export const sharedPipes = [
     AttributeListByFamilyPipe,
     SurveyByNamePipe,
     OptionListBySelectPipe,
-    OutputFamilyById,
+    OutputFamilyByIdPipe,
     DatasetByNamePipe,
     InstanceByNamePipe
 ];
diff --git a/client/src/app/shared/pipes/instance-by-name.pipe.spec.ts b/client/src/app/shared/pipes/instance-by-name.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7a5ae6d059c585a5a22e6f72eacacf00dc2139b1
--- /dev/null
+++ b/client/src/app/shared/pipes/instance-by-name.pipe.spec.ts
@@ -0,0 +1,10 @@
+import { InstanceByNamePipe } from './instance-by-name.pipe';
+import { INSTANCE_LIST } from '../../../test-data';
+
+describe('[Shared][Pipes] InstanceByNamePipe', () => {
+    let pipe = new InstanceByNamePipe();
+
+    it('should return survey corresponding to the given name', () => {
+        expect(pipe.transform(INSTANCE_LIST, 'myOtherInstance')).toEqual(INSTANCE_LIST[0]);
+    });
+});
diff --git a/client/src/app/shared/pipes/instance-by-name.pipe.ts b/client/src/app/shared/pipes/instance-by-name.pipe.ts
index ffb56e0da45a96079c17000b3bc33fad332f82a1..39cfe9aa59e60a41d87c7de461310422b2fd265c 100644
--- a/client/src/app/shared/pipes/instance-by-name.pipe.ts
+++ b/client/src/app/shared/pipes/instance-by-name.pipe.ts
@@ -11,7 +11,15 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { Instance } from 'src/app/metamodel/models';
 
-@Pipe({name: 'instanceByName'})
+/**
+ * @class
+ * @classdesc Returns instance corresponding to the given name.
+ *
+ * @example
+ * // returns instance object that matching with the 'myInstance' name among the instance list
+ * {{ instanceList | instanceByName:'myInstance' }}
+ */
+@Pipe({ name: 'instanceByName' })
 export class InstanceByNamePipe implements PipeTransform {
     transform(instanceList: Instance[], instanceName: string): Instance {
         return instanceList.find(instance => instance.name === instanceName);
diff --git a/client/src/app/shared/pipes/option-list-by-select.pipe.spec.ts b/client/src/app/shared/pipes/option-list-by-select.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b83383e895b31068c82fed7aa7b4bdd0c0868f3
--- /dev/null
+++ b/client/src/app/shared/pipes/option-list-by-select.pipe.spec.ts
@@ -0,0 +1,11 @@
+import { OptionListBySelectPipe } from './option-list-by-select.pipe';
+import { SELECT_OPTION_LIST } from '../../../test-data';
+
+describe('[Shared][Pipes] OptionListBySelect', () => {
+    let pipe = new OptionListBySelectPipe();
+
+    it('should return options corresponding to the given select name', () => {
+        expect(pipe.transform(SELECT_OPTION_LIST, 'name_one')).toContain(SELECT_OPTION_LIST[1]);
+        expect(pipe.transform(SELECT_OPTION_LIST, 'name_one').length).toEqual(1);
+    });
+});
diff --git a/client/src/app/shared/pipes/option-list-by-select.pipe.ts b/client/src/app/shared/pipes/option-list-by-select.pipe.ts
index 58c9e9ded1a8fe35d9378911f8a50ef6e1bfdcbe..7805487d44d1e498cace2c7b13373565d7253e88 100644
--- a/client/src/app/shared/pipes/option-list-by-select.pipe.ts
+++ b/client/src/app/shared/pipes/option-list-by-select.pipe.ts
@@ -11,7 +11,15 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { SelectOption } from 'src/app/metamodel/models';
 
-@Pipe({name: 'optionListBySelect'})
+/**
+ * @class
+ * @classdesc Returns options corresponding to the given select name.
+ *
+ * @example
+ * // returns options that matching with the select name among the option list
+ * {{ optionList | optionListBySelect:'search_flag' }}
+ */
+@Pipe({ name: 'optionListBySelect' })
 export class OptionListBySelectPipe implements PipeTransform {
     transform(optionList: SelectOption[], selectName: string): SelectOption[] {
         return optionList.filter(option => option.select_name  === selectName);
diff --git a/client/src/app/shared/pipes/output-family-by-id.pipe.spec.ts b/client/src/app/shared/pipes/output-family-by-id.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8e06565f958da135998c871213ac8e074b3a2ea0
--- /dev/null
+++ b/client/src/app/shared/pipes/output-family-by-id.pipe.spec.ts
@@ -0,0 +1,10 @@
+import { OutputFamilyByIdPipe } from './output-family-by-id.pipe';
+import { OUTPUT_FAMILY_LIST } from '../../../test-data';
+
+describe('[Shared][Pipes] OutputFamilyByIdPipe', () => {
+    let pipe = new OutputFamilyByIdPipe();
+
+    it('should return output family corresponding to the given ID', () => {
+        expect(pipe.transform(OUTPUT_FAMILY_LIST, 1)).toEqual(OUTPUT_FAMILY_LIST[1]);
+    });
+});
diff --git a/client/src/app/shared/pipes/output-family-by-id.pipe.ts b/client/src/app/shared/pipes/output-family-by-id.pipe.ts
index ef3424c5a66b4ca804dbbf694c7aaf1061b14fcb..f32b8797e5e46aee52c5596cbc7cd587c1067beb 100644
--- a/client/src/app/shared/pipes/output-family-by-id.pipe.ts
+++ b/client/src/app/shared/pipes/output-family-by-id.pipe.ts
@@ -11,8 +11,16 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { OutputFamily } from 'src/app/metamodel/models';
 
-@Pipe({name: 'outputFamilyById'})
-export class OutputFamilyById implements PipeTransform {
+/**
+ * @class
+ * @classdesc Returns output family corresponding to the given ID.
+ *
+ * @example
+ * // returns output family object that matching with the ID 1 among the output family list
+ * {{ outputFamilyList | outputFamilyById:1 }}
+ */
+@Pipe({ name: 'outputFamilyById' })
+export class OutputFamilyByIdPipe implements PipeTransform {
     transform(outputFamilyList: OutputFamily[], outputFamilyId: number): OutputFamily {
         return outputFamilyList.find(outputFamily => outputFamily.id === outputFamilyId);
     }
diff --git a/client/src/app/shared/pipes/survey-by-name.pipe.spec.ts b/client/src/app/shared/pipes/survey-by-name.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..33e78e02622fb66c698e29e089cd891a7f19db05
--- /dev/null
+++ b/client/src/app/shared/pipes/survey-by-name.pipe.spec.ts
@@ -0,0 +1,10 @@
+import { SurveyByNamePipe } from './survey-by-name.pipe';
+import { SURVEY_LIST } from '../../../test-data';
+
+describe('[Shared][Pipes] SurveyByNamePipe', () => {
+    let pipe = new SurveyByNamePipe();
+
+    it('should return survey corresponding to the given name', () => {
+        expect(pipe.transform(SURVEY_LIST, 'survey-one')).toEqual(SURVEY_LIST[0]);
+    });
+});
diff --git a/client/src/app/shared/pipes/survey-by-name.pipe.ts b/client/src/app/shared/pipes/survey-by-name.pipe.ts
index ed7021c0dddf30dc6c4f872764e7302264d36eca..9546c92f5ea01d935da99bb54e8f5a76baace5f3 100644
--- a/client/src/app/shared/pipes/survey-by-name.pipe.ts
+++ b/client/src/app/shared/pipes/survey-by-name.pipe.ts
@@ -11,7 +11,15 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { Survey } from 'src/app/metamodel/models';
 
-@Pipe({name: 'surveyByName'})
+/**
+ * @class
+ * @classdesc Returns survey corresponding to the given name.
+ *
+ * @example
+ * // returns survey object that matching with the 'mySurvey' name among the survey list
+ * {{ surveyList | surveyByName:'mySurvey' }}
+ */
+@Pipe({ name: 'surveyByName' })
 export class SurveyByNamePipe implements PipeTransform {
     transform(surveyList: Survey[], surveyName: string): Survey {
         return surveyList.find(survey => survey.name === surveyName);
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index ef7580ab68e55a3d8f64d4b264ccb607a1bcfc79..84b7f5565f820eb0e18993c3fd967f7dd71b3b29 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -26,6 +26,10 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer';
 import { sharedComponents } from './components';
 import { sharedPipes } from './pipes';
 
+/**
+ * @class
+ * @classdesc Shared module.
+ */
 @NgModule({
     declarations: [
         sharedComponents,
@@ -64,4 +68,4 @@ import { sharedPipes } from './pipes';
         sharedPipes
     ]
 })
-export class SharedModule { }
\ No newline at end of file
+export class SharedModule { }
diff --git a/client/src/app/shared/utils.ts b/client/src/app/shared/utils.ts
index c679257436292a3ea0ee8b1ceca31ad555ce6b47..0d255597a7304dd87dc42181fe70dc89226421d5 100644
--- a/client/src/app/shared/utils.ts
+++ b/client/src/app/shared/utils.ts
@@ -13,14 +13,3 @@ export const getHost = (apiUrl: string): string => {
     }
     return apiUrl;
 }
-
-/**
- * Sorts objects by the display property.
- *
- * @param  {number} a - The first object to sort.
- * @param  {number} b - The second object to sort.
- *
- * @example
- * [objects].sortByDisplay()
- */
-export const sortByDisplay = (a, b) => a.display - b.display;
diff --git a/client/src/test-data.ts b/client/src/test-data.ts
index 683df725204adfb4dd6fa6fb5975530dbfef8c0d..69575072bb5b538deaf44ebc1f551865421e38e0 100644
--- a/client/src/test-data.ts
+++ b/client/src/test-data.ts
@@ -1,4 +1,12 @@
-import { Attribute, Dataset, DatasetFamily, Instance, OutputCategory, Survey } from './app/metamodel/models';
+import {
+    Attribute,
+    Dataset,
+    DatasetFamily,
+    Instance,
+    OutputCategory,
+    OutputFamily, SelectOption,
+    Survey
+} from './app/metamodel/models';
 
 export const SURVEY_LIST: Survey[] = [
     {
@@ -21,6 +29,75 @@ export const SURVEY_LIST: Survey[] = [
     }
 ];
 
+export const INSTANCE_LIST: Instance[] = [
+    {
+        name: 'myOtherInstance',
+        label: 'My Other Instance',
+        data_path: 'data/path',
+        config: {
+            design: {
+                design_color: 'green',
+                design_background_color: 'darker green',
+                design_logo: 'path/to/logo',
+                design_favicon: 'path/to/favicon'
+            },
+            home: {
+                home_component: 'HomeComponent',
+                home_config: {
+                    home_component_text: 'Description',
+                    home_component_logo: 'path/to/logo'
+                }
+            },
+            search: {
+                search_by_criteria_allowed: false,
+                search_by_criteria_label: 'Search',
+                search_multiple_allowed: false,
+                search_multiple_label: 'Search multiple',
+                search_multiple_all_datasets_selected: false
+            },
+            documentation: {
+                documentation_allowed: false,
+                documentation_label: 'Documentation'
+            }
+        },
+        nb_dataset_families: 2,
+        nb_datasets: 1
+    },
+    {
+        name: 'myInstance',
+        label: 'My Instance',
+        data_path: 'data/path',
+        config: {
+            design: {
+                design_color: 'green',
+                design_background_color: 'darker green',
+                design_logo: 'path/to/logo',
+                design_favicon: 'path/to/favicon'
+            },
+            home: {
+                home_component: 'HomeComponent',
+                home_config: {
+                    home_component_text: 'Description',
+                    home_component_logo: 'path/to/logo'
+                }
+            },
+            search: {
+                search_by_criteria_allowed: false,
+                search_by_criteria_label: 'Search',
+                search_multiple_allowed: false,
+                search_multiple_label: 'Search multiple',
+                search_multiple_all_datasets_selected: false
+            },
+            documentation: {
+                documentation_allowed: false,
+                documentation_label: 'Documentation'
+            }
+        },
+        nb_dataset_families: 1,
+        nb_datasets: 2
+    }
+];
+
 export const INSTANCE: Instance = {
     name: 'myInstance',
     label: 'My Instance',
@@ -240,6 +317,7 @@ export const ATTRIBUTE_LIST: Attribute[] = [
         operator: '=',
         type: 'integer',
         display_detail: 2,
+        id_criteria_family: 1,
         options: [
             { label: 'Three', value: 'three', display: 3 },
             { label: 'One', value: 'one', display: 1 },
@@ -332,6 +410,16 @@ export const CATEGORY_LIST: OutputCategory[] = [
     }
 ];
 
+export const OUTPUT_FAMILY_LIST: OutputFamily[] = [
+    { id: 2, label: 'Output family Two', display: 2, opened: true },
+    { id: 1, label: 'Output family One', display: 1, opened: false }
+];
+
+export const SELECT_OPTION_LIST: SelectOption[] = [
+    { id: 2, label: 'select_option_label_two', value: 'select_option_label_two', display: 2, select_name: 'name_two' },
+    { id: 1, label: 'select_option_label_one', value: 'select_option_label_one', display: 1, select_name: 'name_one' }
+];
+
 export const OBJECT_DETAIL: any = {
     label_four: 'spec1d',
     label_five: 5