Skip to content

Commit 73a3d6f

Browse files
author
Binod Sahu
committed
Test cases added
1 parent 11973a0 commit 73a3d6f

File tree

10 files changed

+222
-9
lines changed

10 files changed

+222
-9
lines changed

‎src/app/app.component.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { CustomerServerComponent } from './components/customer-server/customer-s
55
import { HeaderComponent } from './components/header/header.component';
66
import { FooterComponent } from './components/footer/footer.component';
77
import { CustomerServerEmptyComponent } from './components/customer-server-empty/customer-server-empty.component';
8-
import { CustomerRightSideTableComponent } from './components/customer-right-side-table/customer-right-side-table.component';
8+
import { CustomerRightSideTableComponent } from './components/customer-table/customer-table.component';
99
import { CustomerSideNavComponent } from './components/customer-side-nav/customer-side-nav.component';
1010
import { MatTableModule } from '@angular/material';
1111
import { MatSortModule } from '@angular/material/sort';

‎src/app/app.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { HttpClientModule } from '@angular/common/http';
1717
import {MatSelectModule} from '@angular/material/select';
1818
import {MatTableModule} from '@angular/material/table';
1919
import {MatPaginatorModule} from '@angular/material/paginator';
20-
import { CustomerRightSideTableComponent } from './components/customer-right-side-table/customer-right-side-table.component';
20+
import { CustomerRightSideTableComponent } from './components/customer-table/customer-table.component';
2121
import {MatButtonModule} from '@angular/material/button';
2222
import {MatToolbarModule} from '@angular/material/toolbar';
2323
import { ReactiveFormsModule } from '@angular/forms';

‎src/app/components/customer-side-nav/customer-side-nav.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
</form>
6363
</div>
6464
<div class="customer-table-container">
65-
<app-customer-right-side-table [serverTabledata]="serverTabledata"></app-customer-right-side-table>
65+
<app-customer-table [serverTabledata]="serverTabledata"></app-customer-table>
6666
</div>
6767

6868
</div>

‎src/app/components/customer-table/customer-table.component.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div class="mat-elevation-z8">
2+
<table mat-table [dataSource]="dataSource">
3+
<ng-container matColumnDef="model">
4+
<th mat-header-cell *matHeaderCellDef class="mat-elevation-z8-table" style="width: 30%"> Model </th>
5+
<td mat-cell *matCellDef="let element"> {{element.model}} </td>
6+
</ng-container>
7+
<ng-container matColumnDef="ram">
8+
<th mat-header-cell *matHeaderCellDef class="mat-elevation-z8-table " style="width: 15%"> RAM </th>
9+
<td mat-cell *matCellDef="let element"> {{element.ram.memory}} {{element.ram.unit}}</td>
10+
</ng-container>
11+
<ng-container matColumnDef="hdd">
12+
<th mat-header-cell *matHeaderCellDef class="mat-elevation-z8-table" style="width: 15%"> HDD </th>
13+
<td mat-cell *matCellDef="let element"> {{element.hdd.count}}{{element.hdd.unit}} </td>
14+
</ng-container>
15+
<ng-container matColumnDef="location">
16+
<th mat-header-cell *matHeaderCellDef class="mat-elevation-z8-table" style="width: 30%"> Location </th>
17+
<td mat-cell *matCellDef="let element"> {{element.location | slice:0:-6}} </td>
18+
</ng-container>
19+
<ng-container matColumnDef="price">
20+
<th mat-header-cell *matHeaderCellDef class="mat-elevation-z8-table" style="width:20%"> Price </th>
21+
<td mat-cell *matCellDef="let element"> {{element.price.currencySymbol}}{{element.price.amountCents}} </td>
22+
</ng-container>
23+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
24+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
25+
26+
</table>
27+
<app-customer-server-empty [dataLength]="serverTabledata ? serverTabledata.length : null"></app-customer-server-empty>
28+
<mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>
29+
</div>

‎src/app/components/customer-table/customer-table.component.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
:host {
2+
width: 96%;
3+
.mat-elevation-z8 {
4+
.mat-table {
5+
width: 100%;
6+
tr.mat-header-row{
7+
height: 40px;
8+
}
9+
tr.mat-row{
10+
height: 40px;
11+
}
12+
.mat-elevation-z8-table {
13+
background: #999;
14+
font-size: 12px;
15+
color: #FFF;
16+
font-family: tahoma;
17+
font-weight: bold;
18+
}
19+
td {
20+
font-size: 12px;
21+
font-family: tahoma;
22+
}
23+
}
24+
}
25+
.mat-accordion {
26+
.mat-expansion-panel-body {
27+
.example-section {
28+
mat-checkbox {
29+
.mat-checkbox-layout {
30+
padding-right: 15px;
31+
padding-bottom: 15px;
32+
}
33+
.mat-checkbox-inner-container {
34+
width: 22px;
35+
height: 22px;
36+
}
37+
}
38+
}
39+
}
40+
}
41+
}

‎src/app/components/customer-table/customer-table.component.spec.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { CustomerRightSideTableComponent } from './customer-table.component';
3+
import { CUSTOM_ELEMENTS_SCHEMA,  NO_ERRORS_SCHEMA } from '@angular/core';
4+
import {MatTableModule} from '@angular/material/table';
5+
6+
describe('CustomerRightSideTableComponent', () => {
7+
let component: CustomerRightSideTableComponent;
8+
let fixture: ComponentFixture<CustomerRightSideTableComponent>;
9+
10+
beforeEach(async(() => {
11+
TestBed.configureTestingModule({
12+
imports: [
13+
MatTableModule
14+
],
15+
declarations: [ CustomerRightSideTableComponent ],
16+
schemas:  [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
17+
})
18+
.compileComponents();
19+
}));
20+
21+
beforeEach(() => {
22+
fixture = TestBed.createComponent(CustomerRightSideTableComponent);
23+
component = fixture.componentInstance;
24+
fixture.detectChanges();
25+
});
26+
27+
it('should create the table component', () => {
28+
expect(component).toBeTruthy();
29+
});
30+
});

‎src/app/components/customer-table/customer-table.component.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, OnInit, ViewChild, Input, ChangeDetectorRef, SimpleChanges, OnChanges } from '@angular/core';
2+
import {MatPaginator} from '@angular/material/paginator';
3+
import {MatTableDataSource} from '@angular/material/table';
4+
import {
5+
Servers
6+
} from 'src/app/model/customer';
7+
8+
@Component({
9+
selector: 'app-customer-table',
10+
templateUrl: './customer-table.component.html',
11+
styleUrls: ['./customer-table.component.scss']
12+
})
13+
export class CustomerRightSideTableComponent implements OnInit, OnChanges {
14+
@Input() serverTabledata: Servers[] = null;
15+
displayedColumns: string[] = ['model', 'ram', 'hdd', 'location', 'price'];
16+
dataSource: MatTableDataSource<Servers> = null;
17+
@ViewChild(MatPaginator) paginator: MatPaginator;
18+
19+
constructor(private cd: ChangeDetectorRef) { }
20+
21+
ngOnInit() {}
22+
23+
ngOnChanges(changes: SimpleChanges): void {
24+
this.dataSource = new MatTableDataSource(this.serverTabledata);
25+
this.dataSource.paginator = this.paginator;
26+
this.cd.markForCheck();
27+
}
28+
}

‎src/app/model/customer.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ export interface Servers {
1111
}
1212

1313
export interface Ram {
14-
memory: number;
14+
memory: string;
1515
unit: string;
1616
type: string;
1717
}
1818
export interface Hdd {
19-
memory: number;
20-
count: number;
19+
memory: string;
20+
count: string;
2121
unit: string;
2222
type: string;
2323
}

‎src/app/services/customer-service.spec.ts‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,48 @@
11
import { TestBed, async } from '@angular/core/testing';
22
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
33
import { CustomerService } from './customer-service';
4+
import { HttpClientModule } from '@angular/common/http';
5+
import { mockData, mockApiparam } from '../test/mockData';
6+
import { Customer } from '../model/customer';
7+
import { apiParam } from '../model/param';
8+
import { inject } from '@angular/core/src/di';
49

510
describe('CustomerServiceService', () => {
11+
let service: CustomerService;
612
beforeEach(() => TestBed.configureTestingModule({}));
713
beforeEach(async(() => {
814
TestBed.configureTestingModule({
9-
imports: [
10-
HttpClientTestingModule,
11-
],
15+
imports: [HttpClientModule, HttpClientTestingModule],
16+
providers: [CustomerService]
1217
}).compileComponents();
18+
service = TestBed.get(CustomerService);
1319
}));
1420
it('should be created', () => {
1521
const service: CustomerService = TestBed.get(CustomerService);
1622
expect(service).toBeTruthy();
1723
});
24+
25+
it('be able to retrieve Customer Data from the API bia GET', () => {
26+
const dummyPosts: Customer = mockData;
27+
service.getCustomer().subscribe(posts => {
28+
expect(posts.servers.length).toBe(2);
29+
expect(posts).toEqual(dummyPosts);
30+
});
31+
});
32+
33+
it('be able to retrieve Customer filter data', () => {
34+
const dummyPosts: Customer = mockData;
35+
const param: apiParam = mockApiparam;
36+
service.getFilteredCustomerList(param).subscribe(posts => {
37+
expect(posts.servers[0].location).toEqual('AmsterdamAMS-01');
38+
});
39+
});
40+
41+
it('correctly handles error', () => {
42+
const spy = spyOn(console, 'log');
43+
const error: Error = new Error('ERROR');
44+
service.handleError(error);
45+
});
1846
});
47+
48+

‎src/app/test/mockData.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Customer } from "../model/customer";
2+
import { apiParam } from "../model/param";
3+
4+
export const mockData: Customer = {
5+
"servers": [
6+
{
7+
"model": "HP DL120G7Intel G850",
8+
"ram": {
9+
"memory": "4",
10+
"unit": "GB",
11+
"type": "DDR3"
12+
},
13+
"hdd": {
14+
"memory": "1",
15+
"count": "4",
16+
"unit": "TB",
17+
"type": "SATA2"
18+
},
19+
"location": "AmsterdamAMS-01",
20+
"price": {
21+
"currency": "EUR",
22+
"currencySymbol": "€",
23+
"amountCents": 3999
24+
}
25+
},
26+
{
27+
"model": "Dell R210-IIIntel G530",
28+
"ram": {
29+
"memory": "4",
30+
"unit": "GB",
31+
"type": "DDR3"
32+
},
33+
"hdd": {
34+
"memory": "500",
35+
"count": "2",
36+
"unit": "GB",
37+
"type": "SATA2"
38+
},
39+
"location": "AmsterdamAMS-01",
40+
"price": {
41+
"currency": "EUR",
42+
"currencySymbol": "€",
43+
"amountCents": 3599
44+
}
45+
}
46+
]
47+
}
48+
49+
export const mockApiparam:apiParam = {
50+
storageMin: '0',
51+
storageMax: '72000',
52+
ram: '2GB',
53+
hdd: '8TB',
54+
location: 'Amsterdam'
55+
}

0 commit comments

Comments
 (0)