fix: Add tests for card-row, card-section and card-table.

frontend/src/app/card-row/card-row.component.html

-<ng-container *ngIf="(test && value === undefined)  || (value)">
+<ng-container *ngIf="shouldShow()">
   <div class="row row-sep">
     <div class="col-4 field my-2">
       {{ label }}

frontend/src/app/card-row/card-row.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
 
 import { CardRowComponent } from './card-row.component';
+import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
+import { Component, ViewChild } from '@angular/core';
+
+class CardRowComponentTester extends ComponentTester<CardRowComponent> {
+    constructor() {
+        super(CardRowComponent);
+    }
+
+    get rowDiv() {
+        return this.element('div.row');
+    }
+
+    get labelDiv() {
+        return this.element('div.field');
+    }
+
+    get valueDiv() {
+        return this.element('div.col');
+    }
+}
+
+
+/**
+ * Test gpds-card-row with a provided `ng-template`
+ */
+@Component({
+    selector: 'gpds-test',
+    template: `
+        <gpds-card-row>
+            <ng-template>
+                <strong>Value HTML template</strong>
+            </ng-template>
+        </gpds-card-row>`
+})
+class CardRowWithTemplateComponent {
+    @ViewChild(CardRowComponent) component: CardRowComponent;
+}
 
 describe('CardRowComponent', () => {
-    let component: CardRowComponent;
-    let fixture: ComponentFixture<CardRowComponent>;
+    beforeEach(() => jasmine.addMatchers(speculoosMatchers));
 
-    beforeEach(async(() => {
+    beforeEach(async(() =>
         TestBed.configureTestingModule({
-            declarations: [CardRowComponent]
-        })
-            .compileComponents();
-    }));
+            declarations: [CardRowComponent, CardRowWithTemplateComponent]
+        }).compileComponents()
+    ));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CardRowComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
+
+    it('should hide falsy value', () => {
+        const tester = new CardRowComponentTester();
+        tester.componentInstance.label = 'Label1';
+        tester.componentInstance.value = null;
+        tester.detectChanges();
+
+        expect(tester.rowDiv).toBeFalsy();
+    });
+
+    it('should show truthy value', () => {
+        const tester = new CardRowComponentTester();
+        tester.componentInstance.label = 'Label1';
+        tester.componentInstance.value = 'Value1';
+        tester.detectChanges();
+
+        expect(tester.rowDiv).toBeTruthy();
+        expect(tester.labelDiv).toContainText(tester.componentInstance.label);
+        expect(tester.valueDiv).toContainText(tester.componentInstance.value);
     });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
+    it('should hide falsy test', () => {
+        const tester = new CardRowComponentTester();
+        tester.componentInstance.label = 'Label1';
+        tester.componentInstance.value = 'Value1';
+        tester.componentInstance.test = false;
+        tester.detectChanges();
+
+        expect(tester.rowDiv).toBeFalsy();
+    });
+
+    it('should hide truthy test, falsy value', () => {
+        const tester = new CardRowComponentTester();
+        tester.componentInstance.label = 'Label1';
+        tester.componentInstance.value = '';
+        tester.componentInstance.test = true;
+        tester.detectChanges();
+
+        expect(tester.rowDiv).toBeFalsy();
     });
+
+    it('should hide truthy test, falsy value', () => {
+        const tester = new CardRowComponentTester();
+        tester.componentInstance.label = 'Label1';
+        tester.componentInstance.value = '';
+        tester.componentInstance.test = true;
+        tester.detectChanges();
+
+        expect(tester.rowDiv).toBeFalsy();
+    });
+
+    it('should show truthy test, truthy value', () => {
+        const tester = new CardRowComponentTester();
+        tester.componentInstance.label = 'Label1';
+        tester.componentInstance.value = 'Value1';
+        tester.componentInstance.test = true;
+        tester.detectChanges();
+
+        expect(tester.rowDiv).toBeTruthy();
+        expect(tester.labelDiv).toContainText(tester.componentInstance.label);
+        expect(tester.valueDiv).toContainText(tester.componentInstance.value);
+    });
+
+
+    it('should hide falsy test, provided template', async(() => {
+        const fixture = TestBed.createComponent(CardRowWithTemplateComponent);
+        fixture.componentInstance.component.label = 'Label1';
+        fixture.componentInstance.component.test = '';
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture.nativeElement;
+        expect(element.querySelector('div.row')).toBeFalsy();
+    }));
+
+
+    it('should show truthy test, provided template', async(() => {
+        const fixture = TestBed.createComponent(CardRowWithTemplateComponent);
+        const component = fixture.componentInstance.component;
+        component.label = 'Label2';
+        component.test = true;
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture.nativeElement;
+        expect(element.querySelector('div.row')).toBeTruthy();
+        expect(element.querySelector('div.field').textContent).toContain(component.label);
+        expect(element.querySelector('div.col').textContent).toContain('Value HTML template');
+    }));
 });

frontend/src/app/card-row/card-row.component.ts

@@ -13,4 +13,13 @@ export class CardRowComponent {
 
     @ContentChild(TemplateRef) template: TemplateRef<any>;
 
+    shouldShow(): boolean {
+        return this.test && (
+            // Value not provided and template provided
+            (this.value === undefined && this.template !== undefined)
+            ||
+            // Or value truthy
+            !!this.value
+        );
+    }
 }

frontend/src/app/card-section/card-section.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
 
 import { CardSectionComponent } from './card-section.component';
+import { speculoosMatchers } from 'ngx-speculoos';
+import { Component, ViewChild } from '@angular/core';
+
+
+/**
+ * Test gpds-card-section with a provided `ng-template`
+ */
+@Component({
+    selector: 'gpds-test',
+    template: `
+        <gpds-card-section>
+            <ng-template>
+                <div class="test-body">Body HTML template</div>
+            </ng-template>
+        </gpds-card-section>`
+})
+class CardSectionTestWrapperComponent {
+    @ViewChild(CardSectionComponent) component: CardSectionComponent;
+}
 
 describe('CardSectionComponent', () => {
-    let component: CardSectionComponent;
-    let fixture: ComponentFixture<CardSectionComponent>;
+    beforeEach(() => jasmine.addMatchers(speculoosMatchers));
 
-    beforeEach(async(() => {
+    beforeEach(async(() =>
         TestBed.configureTestingModule({
-            declarations: [CardSectionComponent]
-        })
-            .compileComponents();
+            declarations: [CardSectionComponent, CardSectionTestWrapperComponent]
+        }).compileComponents()
+    ));
+
+    it('should hide falsy test', async(() => {
+        const fixture = TestBed.createComponent(CardSectionTestWrapperComponent);
+        const component = fixture.componentInstance.component;
+        component.header = 'Header1';
+        component.test = '';
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture.nativeElement;
+        const cardDiv = element.querySelector('div.card');
+        expect(cardDiv).toBeFalsy();
     }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CardSectionComponent);
-        component = fixture.componentInstance;
+
+    it('should show truthy test', async(() => {
+        const fixture = TestBed.createComponent(CardSectionTestWrapperComponent);
+        const component = fixture.componentInstance.component;
+        component.header = 'Header2';
+        component.test = true;
         fixture.detectChanges();
-    });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+        const element: HTMLElement = fixture.nativeElement;
+        const cardDiv = element.querySelector('div.card');
+        const headerDiv = element.querySelector('div.card-header');
+        const bodyDiv = element.querySelector('div.test-body');
+        expect(cardDiv).toBeTruthy();
+        expect(headerDiv.textContent).toContain(component.header);
+        expect(bodyDiv.textContent).toContain('Body HTML template');
+    }));
 });

frontend/src/app/card-table/card-table.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
 
 import { CardTableComponent } from './card-table.component';
+import { Component, ViewChild } from '@angular/core';
+
+/**
+ * Test gpds-card-table with a simple provided row `ng-template`
+ */
+@Component({
+    selector: 'gpds-test',
+    template: `
+        <gpds-card-table>
+            <ng-template let-row>
+                <tr>
+                    <td>{{ row[0] }}</td>
+                    <td>{{ row[1] }}</td>
+                    <td>{{ row[2] }}</td>
+                </tr>
+            </ng-template>
+        </gpds-card-table>`
+})
+class CardTableTestWrapperComponent {
+    @ViewChild(CardTableComponent) component: CardTableComponent;
+}
 
 describe('CardTableComponent', () => {
-    let component: CardTableComponent;
-    let fixture: ComponentFixture<CardTableComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(async(() =>
         TestBed.configureTestingModule({
-            declarations: [CardTableComponent]
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CardTableComponent);
-        component = fixture.componentInstance;
+            declarations: [CardTableComponent, CardTableTestWrapperComponent]
+        }).compileComponents()
+    ));
+
+    const headers = [
+        'h1', 'h2', 'h3'
+    ];
+    const rows = [
+        ['a', 'b', 'c'],
+        ['d', 'e', 'f'],
+        ['g', 'h', 'i'],
+    ];
+
+    it('should hide headers and show rows', () => {
+        const fixture = TestBed.createComponent(CardTableTestWrapperComponent);
+        const component = fixture.componentInstance.component;
+        component.headers = null;
+        component.rows = rows;
         fixture.detectChanges();
+
+        const element: HTMLElement = fixture.nativeElement;
+        const thead = element.querySelector('thead');
+        expect(thead).toBeFalsy();
+
+        const tds = element.querySelectorAll('td');
+        expect(tds.length).toBe(9);
+        expect(tds[0].textContent).toContain(rows[0][0]);
+        expect(tds[5].textContent).toContain(rows[1][2]);
     });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
+    it('should show headers and rows', () => {
+        const fixture = TestBed.createComponent(CardTableTestWrapperComponent);
+        const component = fixture.componentInstance.component;
+        component.headers = headers;
+        component.rows = rows;
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture.nativeElement;
+        const ths = element.querySelectorAll('thead th');
+        expect(ths.length).toBe(3);
+        expect(ths[0].textContent).toContain(headers[0]);
+        expect(ths[2].textContent).toContain(headers[2]);
+
+        const tds = element.querySelectorAll('td');
+        expect(tds.length).toBe(9);
+        expect(tds[0].textContent).toContain(rows[0][0]);
+        expect(tds[5].textContent).toContain(rows[1][2]);
     });
 });