diff options
Diffstat (limited to 'public/src/app/rule-engine/target')
4 files changed, 115 insertions, 55 deletions
diff --git a/public/src/app/rule-engine/target/target.component.html b/public/src/app/rule-engine/target/target.component.html index 7a321ef..d643ad8 100644 --- a/public/src/app/rule-engine/target/target.component.html +++ b/public/src/app/rule-engine/target/target.component.html @@ -7,7 +7,7 @@ <img src="{{imgBase}}/target.svg" alt="target"> </span> </div> - <div class="bottom-select" *ngIf="showOption" [@toggleDropdown]> + <div class="bottom-select" *ngIf="showOption"> <div class="filter-container" style="display: flex; border-bottom: 1px solid #F2F2F2;margin-bottom: 1rem; width:100%;"> <input id="filter" #filter class="filter" (keyup)="tree.treeModel.filterNodes(filter.value)" placeholder="Search..." /> <button mat-raised-button style="min-width: 18px; box-shadow: none; display: flex; justify-content: center;" (click)="tree.treeModel.clearFilter(); filter.value = ''"> diff --git a/public/src/app/rule-engine/target/target.component.spec.ts b/public/src/app/rule-engine/target/target.component.spec.ts index 6ddd8cd..e9a69c8 100644 --- a/public/src/app/rule-engine/target/target.component.spec.ts +++ b/public/src/app/rule-engine/target/target.component.spec.ts @@ -1,10 +1,9 @@ -import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core'; +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule, MatIconModule } from '@angular/material'; +import { By } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // component import { TargetComponent } from './target.component'; @@ -46,12 +45,28 @@ describe('TargetComponent', () => { const openTargetElement = fixture.debugElement .query(By.css('span[data-tests-id=openTargetTree]')) .nativeElement.click(); - fixture.detectChanges(); - const treeContainer = fixture.debugElement.query( By.css('.filter-container') ); expect(treeContainer).not.toBeNull(); }); + + it('should toggle target tree when clicking 2 times on button', () => { + fixture.debugElement + .query(By.css('span[data-tests-id=openTargetTree]')) + .nativeElement.click(); + fixture.detectChanges(); + fixture.debugElement + .query(By.css('span[data-tests-id=openTargetTree]')) + .nativeElement.click(); + fixture.detectChanges(); + const treeContainer = fixture.debugElement.query( + By.css('.filter-container') + ); + expect(treeContainer).toBeNull(); + }); + + // it('check when input change', () => { tree.setData({nodes: _nodes, options: + // null, events: null}); component.filterFn('liav', tree); }); }); diff --git a/public/src/app/rule-engine/target/target.component.ts b/public/src/app/rule-engine/target/target.component.ts index f17cdef..c9aa75c 100644 --- a/public/src/app/rule-engine/target/target.component.ts +++ b/public/src/app/rule-engine/target/target.component.ts @@ -7,13 +7,8 @@ import { EventEmitter } from '@angular/core'; import { TreeModel, TreeComponent, ITreeOptions } from 'angular-tree-component'; -import { - trigger, - state, - animate, - transition, - style -} from '@angular/animations'; +// import {trigger, state, animate, transition, style} from +// '@angular/animations'; import { fuzzysearch, getBranchRequierds, validation } from './target.util'; import { environment } from '../../../environments/environment'; import { NgForm } from '@angular/forms'; @@ -22,24 +17,15 @@ import { NgForm } from '@angular/forms'; selector: 'app-target', templateUrl: './target.component.html', styleUrls: ['./target.component.scss'], - encapsulation: ViewEncapsulation.None, - animations: [ - trigger('toggleDropdown', [ - transition('void => *', [ - style({ opacity: 0, offset: 0, height: 0 }), - animate('300ms cubic-bezier(0.17, 0.04, 0.03, 0.94)') - ]), - transition('* => void', [ - style({ opacity: 1, offset: 1, height: 'auto' }), - animate('100ms cubic-bezier(0.17, 0.04, 0.03, 0.94)') - ]) - ]) - ] + encapsulation: ViewEncapsulation.None }) export class TargetComponent { imgBase = environment.imagePath; showOption = false; - selectedNode = { name: '', id: '' }; + selectedNode = { + name: '', + id: '' + }; @Input() nodes; @Output() onTargetChange = new EventEmitter(); @ViewChild(TreeComponent) private tree: TreeComponent; diff --git a/public/src/app/rule-engine/target/target.validation.spec.ts b/public/src/app/rule-engine/target/target.validation.spec.ts index 71dc083..e66235f 100644 --- a/public/src/app/rule-engine/target/target.validation.spec.ts +++ b/public/src/app/rule-engine/target/target.validation.spec.ts @@ -1,8 +1,7 @@ -import { TestBed, async } from '@angular/core/testing'; -import { TreeModel, TreeComponent, ITreeOptions } from 'angular-tree-component'; -import { validation, getBranchRequierds } from './target.util'; +import { TreeModel } from 'angular-tree-component'; +import { fuzzysearch, getBranchRequierds, validation } from './target.util'; -const _nodes = [ +export const _nodes = [ { id: 1, name: 'North America', @@ -13,46 +12,68 @@ const _nodes = [ name: 'United States', requiredChildren: ['New York', 'Florida'], children: [ - { id: 111, name: 'New York' }, - { id: 112, name: 'California' }, - { id: 113, name: 'Florida' } + { + id: 111, + name: 'New York' + }, + { + id: 112, + name: 'California' + }, + { + id: 113, + name: 'Florida' + } ] }, - { id: 12, name: 'Canada' } + { + id: 12, + name: 'Canada' + } ] }, { name: 'South America', - children: [{ name: 'Argentina', children: [] }, { name: 'Brazil' }] + children: [ + { + name: 'Argentina', + children: [] + }, + { + name: 'Brazil' + } + ] }, { name: 'Europe', children: [ - { name: 'England' }, - { name: 'Germany' }, - { name: 'France' }, - { name: 'Italy' }, - { name: 'Spain' } + { + name: 'England' + }, + { + name: 'Germany' + }, + { + name: 'France' + }, + { + name: 'Italy' + }, + { + name: 'Spain' + } ] } ]; -const tree = new TreeModel(); +export const tree = new TreeModel(); describe('treeTest', () => { beforeAll(() => { - tree.setData({ - nodes: _nodes, - options: null, - events: null - }); + tree.setData({ nodes: _nodes, options: null, events: null }); }); - it('should return node branch requireds', () => { - // console.log('root', tree.getFirstRoot().data.name); - // console.log(tree.getNodeBy((node) => node.data.name === 'California').data.uuid); - // console.log(tree.getNodeBy((node) => node.data.name === 'California').id); - // console.log(tree.getNodeById(1)); + it('should return node branch requireds toBeGreaterThan 1', () => { const selectedNode = tree.getNodeBy( node => node.data.name === 'California' ); @@ -60,6 +81,14 @@ describe('treeTest', () => { const expected = [['New York', 'Florida'], ['United States']]; expect(result.length).toBeGreaterThan(1); + }); + + it('should return node branch requireds', () => { + const selectedNode = tree.getNodeBy( + node => node.data.name === 'California' + ); + const result = getBranchRequierds(selectedNode, []); + const expected = [['New York', 'Florida'], ['United States']]; expect(result).toEqual(expected); }); @@ -67,9 +96,14 @@ describe('treeTest', () => { const userSelect = ['Florida', 'New York', 'United States']; const selectedNode = tree.getNodeBy(node => node.data.name === 'New York'); const result = validation(selectedNode, userSelect); + expect(result).toEqual([]); + }); + it('should return empty array - success state lenght zero', () => { + const userSelect = ['Florida', 'New York', 'United States']; + const selectedNode = tree.getNodeBy(node => node.data.name === 'New York'); + const result = validation(selectedNode, userSelect); expect(result.length).toEqual(0); - expect(result).toEqual([]); }); it('should return validation array - missing required filed', () => { @@ -80,4 +114,29 @@ describe('treeTest', () => { expect(result).toEqual(expected); }); + + it('fuzzysearch find match one char', () => { + const search = fuzzysearch('1', '1'); + expect(search).toBe(true); + }); + + it('fuzzysearch find match string', () => { + const search = fuzzysearch('liav', 'liavEzar'); + expect(search).toBe(true); + }); + + it('fuzzysearch not find match', () => { + const search = fuzzysearch('1', '2'); + expect(search).toBe(false); + }); + + it('fuzzysearch not find match', () => { + const search = fuzzysearch('liavEzar', 'liav'); + expect(search).toBe(false); + }); + + it('fuzzysearch not find match', () => { + const search = fuzzysearch('var', 'r2f44'); + expect(search).toBe(false); + }); }); |