Update Makefile commands, WIP: tests on documentation components

Makefile

@@ -14,9 +14,9 @@ list:
 	@echo "  install_client   > Install client dependencies"
 	@echo "  shell_client     > Shell into angular client container"
 	@echo "  build_client     > Generate the angular client dist application (html, css, js)"
-	@echo "  test_client      > Starts the angular client unit tests"
+	@echo "  test_client      > Run the angular client unit tests and generate code coverage report"
 	@echo "  test_client-live > Run the angular client unit tests on every file change"
-	@echo "  client_coverage  > Run nginx web server test client coverage"
+	@echo "  open-coverage    > Open the client code coverage report in a browser (only available for Linux)"
 	@echo "  install_server   > Install server dependencies"
 	@echo "  shell_server     > Shell into php server container"
 	@echo "  test_server      > Starts the server php unit tests"
@@ -56,13 +56,13 @@ build_client:
 	@docker-compose exec client ng build
 
 test_client:
-	@docker-compose exec client npx jest
+	@docker-compose exec client npx jest --coverage --collectCoverageFrom='src/**/*.ts'
 
-test_client-live:
-	@docker-compose exec client npx jest --watchAll
+test_client_live:
+	@docker-compose exec client npx jest --watchAll --coverage
 
-client_coverage:
-	@docker run --name anis-client-code-coverage -d -p 8888:80 -v $(CURDIR)/client/coverage/anis-client:/usr/share/nginx/html:ro nginx
+open_coverage_report:
+	xdg-open client/coverage/anis-client/index.html
 
 install_server:
 	@docker run --init -it --rm --user $(UID):$(GID) \

client/jest.config.js

@@ -5,8 +5,6 @@ module.exports = {
     preset: 'jest-preset-angular',
     testMatch: ['**/+(*.)+(spec).+(ts|js)'],
     setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
-    collectCoverage: false,
-    collectCoverageFrom: ['src/**/*.ts'],
     coverageReporters: ['html'],
     coverageDirectory: 'coverage/anis-client',
     moduleDirectories: ["node_modules", "./"],

client/src/app/instance/documentation/components/__snapshots__/output-list.component.spec.ts.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OutputListComponent should information in HTML file 1`] = `
+<app-output-list
+  attributeList={[Function Array]}
+  datasetSelected={[Function String]}
+>
+  <h4>
+    Available outputs for myTestDataset
+  </h4><table
+    class="attributes-table p-0"
+    id="table"
+  >
+    <tr>
+      <th>
+        id
+      </th>
+      <th>
+        attribute
+      </th>
+    </tr>
+    <tr>
+      <td>
+        2
+      </td>
+      <td>
+        name_two
+      </td>
+    </tr>
+    <tr>
+      <td>
+        1
+      </td>
+      <td>
+        name_one
+      </td>
+    </tr>
+  </table>
+</app-output-list>
+`;

client/src/app/instance/documentation/components/index.ts

 import { DatasetByFamilyComponent } from './dataset-by-family.component';
 import { DatasetCardDocComponent } from './dataset-card-doc.component';
-import { OutputListComponent } from "./output-list.component";
+import { OutputListComponent } from './output-list.component';
 
 export const dummiesComponents = [
     DatasetByFamilyComponent,

client/src/app/instance/documentation/components/output-list.component.spec.ts

+import { TestBed, waitForAsync, ComponentFixture  } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { OutputListComponent } from './output-list.component';
+import { Attribute } from '../../../metamodel/models';
+
+const ATTRIBUTE_LIST: Attribute[] = [
+    {
+        id: 2,
+        name: 'name_two',
+        label: 'label_two',
+        form_label: 'form_label_two',
+        description : 'description_two',
+        output_display: 1,
+        criteria_display: 1,
+        search_flag : 'SPECTRUM_1D',
+        search_type : 'field',
+        operator : '=',
+        type: '',
+        display_detail: 1
+    },
+    {
+        id: 1,
+        name: 'name_one',
+        label: 'label_one',
+        form_label: 'form_label_one',
+        description: 'description_one',
+        output_display: 2,
+        criteria_display: 2,
+        search_flag: 'ID',
+        search_type: 'field',
+        operator: '=',
+        type: 'integer',
+        display_detail: 2
+    }
+];
+
+describe('OutputListComponent', () => {
+    let component: OutputListComponent;
+    let fixture: ComponentFixture<OutputListComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [RouterTestingModule],
+            declarations: [OutputListComponent]
+        }).compileComponents();
+        fixture = TestBed.createComponent(OutputListComponent);
+        component = fixture.componentInstance;
+    }));
+
+    it('should create the component', () => {
+        expect(component).toBeDefined();
+    });
+
+    it('should information in HTML file', () => {
+        component.datasetSelected = 'myTestDataset';
+        component.attributeList = ATTRIBUTE_LIST;
+        fixture.detectChanges();
+        expect(fixture).toMatchSnapshot();
+    });
+});