Unit tests for filtering & sorting nodes on topology summary added

This commit is contained in:
Piotr Pekala 2019-08-21 05:02:47 -07:00
parent b9a2879f60
commit 22820f6320
6 changed files with 217 additions and 13 deletions

View File

@ -27,7 +27,7 @@ import { MockedProjectService } from '../../services/project.service.spec';
import { Observable } from 'rxjs/Rx';
import { Drawing } from '../../cartography/models/drawing';
import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
import { of } from 'rxjs';
import { of, BehaviorSubject } from 'rxjs';
import { Server } from '../../models/server';
import { Node } from '../../cartography/models/node';
import { ToolsService } from '../../services/tools.service';
@ -193,6 +193,10 @@ export class MockedNodesDataSource {
update() {
return of({});
}
public get changes() {
return new BehaviorSubject<[]>([]);
}
}
export class MockedLinksDataSource {

View File

@ -5,8 +5,12 @@
</div>
<mat-divider class="divider"></mat-divider>
<div class="summaryFilters">
Filters <br/>
<mat-checkbox (change)="applyStatusFilter($event.checked)">Running state</mat-checkbox>
Filter by status <br/>
<div class="filterBox">
<mat-checkbox (change)="applyStatusFilter($event.checked, 'started')">Started</mat-checkbox>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'suspended')">Suspended</mat-checkbox>
<mat-checkbox (change)="applyStatusFilter($event.checked, 'stopped')">Stopped</mat-checkbox>
</div>
</div>
<div class="summarySorting">
Sorting <br/>
@ -29,9 +33,12 @@
</svg>
{{node.name}}
</div>
<div>
<div *ngIf="node.console!=null && node.console!=undefined && node.console_type!='none'">
{{node.console_type}} {{node.console_host}}:{{node.console}}
</div>
<div *ngIf="node.console===null || node.console===undefined || node.console_type==='none'">
none
</div>
</div>
<!-- <div>
<table mat-table [dataSource]="dataSource">

View File

@ -36,6 +36,10 @@
.summaryContent {
margin-left: 5px;
margin-right: 5px;
max-height: 220px;
overflow: auto;
scrollbar-color: darkgrey #263238;
scrollbar-width: thin;
}
.title {
@ -53,6 +57,7 @@
width: 100%;
display: flex;
justify-content: space-between;
padding-right: 5px;
}
mat-icon {
@ -62,6 +67,19 @@ mat-icon {
margin-top: 4px;
}
::-webkit-scrollbar {
width: 0.5em;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid #263238;
}
.radio-group {
margin-top: 5px;
}
@ -69,3 +87,8 @@ mat-icon {
.closeButton {
cursor: pointer;
}
.filterBox {
display: flex;
justify-content: space-between;
}

View File

@ -0,0 +1,148 @@
import { TopologySummaryComponent } from "./topology-summary.component";
import { ComponentFixture, async, TestBed } from '@angular/core/testing';
import { ProjectService } from '../../services/project.service';
import { MockedProjectService } from '../../services/project.service.spec';
import { MatTableModule, MatTooltipModule, MatIconModule, MatSortModule, MatDialogModule } from '@angular/material';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs';
import { MockedNodesDataSource } from '../project-map/project-map.component.spec';
import { NodesDataSource } from '../../cartography/datasources/nodes-datasource';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { Project } from '../../models/project';
import { Node } from '../../cartography/models/node';
fdescribe('TopologySummaryComponent', () => {
let component: TopologySummaryComponent;
let fixture: ComponentFixture<TopologySummaryComponent>;
let mockedProjectService: MockedProjectService = new MockedProjectService();
let mockedNodesDataSource: MockedNodesDataSource = new MockedNodesDataSource();
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
MatTableModule,
MatTooltipModule,
MatIconModule,
MatSortModule,
MatDialogModule,
NoopAnimationsModule,
RouterTestingModule.withRoutes([])
],
providers: [
{ provide: ProjectService, useValue: mockedProjectService },
{ provide: NodesDataSource, useValue: mockedNodesDataSource }
],
declarations: [TopologySummaryComponent],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TopologySummaryComponent);
component = fixture.componentInstance;
component.project = { project_id: 1 } as unknown as Project;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should show only running nodes when filter started applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'started');
expect(component.filteredNodes.length).toBe(1);
expect(component.filteredNodes[0].status).toBe('started');
});
it('should show only stopped nodes when filter stopped applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'stopped');
expect(component.filteredNodes.length).toBe(1);
expect(component.filteredNodes[0].status).toBe('stopped');
});
it('should show only suspended nodes when filter suspended applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'suspended');
expect(component.filteredNodes.length).toBe(0);
});
it('should show all nodes when all filters applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'suspended');
component.applyStatusFilter(true, 'started');
component.applyStatusFilter(true, 'stopped');
expect(component.filteredNodes.length).toBe(2);
});
it('should show all nodes when no filters applied', () => {
component.nodes = [
{ status: 'started' } as Node,
{ status: 'stopped' } as Node
];
component.applyStatusFilter(true, 'suspended');
component.applyStatusFilter(true, 'started');
component.applyStatusFilter(true, 'stopped');
expect(component.filteredNodes.length).toBe(2);
component.applyStatusFilter(false, 'stopped');
expect(component.filteredNodes.length).toBe(1);
component.applyStatusFilter(false, 'suspended');
component.applyStatusFilter(false, 'started');
expect(component.filteredNodes.length).toBe(2);
});
it('should sort nodes in correct order', () => {
component.nodes = [
{ status: 'started', name: 'A' } as Node,
{ status: 'stopped', name: 'B' } as Node,
{ status: 'stopped', name: 'D' } as Node,
];
component.applyFilters();
component.setSortingOrder('asc');
expect(component.filteredNodes[0].name).toBe('A');
});
it('should sort filtered nodes in correct order', () => {
component.nodes = [
{ status: 'started', name: 'A' } as Node,
{ status: 'stopped', name: 'B' } as Node,
{ status: 'stopped', name: 'D' } as Node,
];
component.applyStatusFilter(true, 'stopped');
component.setSortingOrder('desc');
expect(component.filteredNodes[0].name).toBe('D');
});
});

View File

@ -2,7 +2,6 @@ import { Component, OnInit, OnDestroy, Input, AfterViewInit, Output, EventEmitte
import { Project } from '../../models/project';
import { Server } from '../../models/server';
import { NodesDataSource } from '../../cartography/datasources/nodes-datasource';
import { NodeService } from '../../services/node.service';
import { Node } from '../../cartography/models/node';
import { Subscription } from 'rxjs';
import { ProjectService } from '../../services/project.service';
@ -27,12 +26,13 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
dataSource: Node[] = [];
displayedColumns: string[] = ['name', 'console'];
sortingOrder: string = 'asc';
statusFilterEnabled: boolean = false;
startedStatusFilterEnabled: boolean = false;
suspendedStatusFilterEnabled: boolean = false;
stoppedStatusFilterEnabled: boolean = false;
constructor(
private nodesDataSource: NodesDataSource,
private projectService: ProjectService,
private nodeService: NodeService
private projectService: ProjectService
) {}
ngOnInit() {
@ -75,16 +75,34 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
}
}
applyStatusFilter(value: boolean) {
this.statusFilterEnabled = value;
applyStatusFilter(value: boolean, filter: string) {
if (filter === 'started') {
this.startedStatusFilterEnabled = value;
} else if (filter === 'stopped') {
this.stoppedStatusFilterEnabled = value;
} else if (filter === 'suspended') {
this.suspendedStatusFilterEnabled = value;
}
this.applyFilters();
}
applyFilters() {
var nodes = this.nodes;
let nodes: Node[] = [];
if (this.statusFilterEnabled) {
nodes = nodes.filter(n => n.status === 'started');
if (this.startedStatusFilterEnabled) {
nodes = nodes.concat(this.nodes.filter(n => n.status === 'started'));
}
if (this.stoppedStatusFilterEnabled) {
nodes = nodes.concat(this.nodes.filter(n => n.status === 'stopped'));
}
if (this.suspendedStatusFilterEnabled) {
nodes = nodes.concat(this.nodes.filter(n => n.status === 'suspended'));
}
if (!this.startedStatusFilterEnabled && !this.stoppedStatusFilterEnabled && !this.suspendedStatusFilterEnabled) {
nodes = nodes.concat(this.nodes);
}
if (this.sortingOrder === 'asc') {

View File

@ -45,6 +45,10 @@ export class MockedProjectService {
duplicate(server: Server, project_id: string) {
return of(project_id);
}
getStatistics(server: Server, project_id: string) {
return of({});
}
}
describe('ProjectService', () => {