Commit 681e1024 authored by Guillaume Cornut's avatar Guillaume Cornut
Browse files

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

parent df4189c5
<ng-container *ngIf="(test && value === undefined) || (value)">
<ng-container *ngIf="shouldShow()">
<div class="row row-sep">
<div class="col-4 field my-2">
{{ label }}
......
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');
}));
});
......@@ -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
);
}
}
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');
}));
});
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]);
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment