Skip to content

Commit

Permalink
feat(combo): implementa definições do AnimaliaDS
Browse files Browse the repository at this point in the history 
Implementa definições do AnimaliaDS no Breadcrumb

fixes DTHFUI-7500
  • Loading branch information
@jcorrea97
jcorrea97 committed Oct 31, 2023
1 parent 3f90ec6 commit 5e2debb
Show file tree
Hide file tree
Showing 7 changed files with 206 additions and 56 deletions.
12 changes: 8 additions & 4 deletions ...ui/src/lib/components/po-field/po-combo/interfaces/po-combo-literals-default.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,22 @@ import { PoComboLiterals } from './po-combo-literals.interface';
export const poComboLiteralsDefault = {
en: <PoComboLiterals>{
noData: 'No data found',
chooseOption: 'Choose an option'
chooseOption: 'Choose an option',
clear: 'Clear'
},
es: <PoComboLiterals>{
noData: 'Datos no encontrados',
chooseOption: 'Elija una opción'
chooseOption: 'Elija una opción',
clear: 'limpia'
},
pt: <PoComboLiterals>{
noData: 'Nenhum dado encontrado',
chooseOption: 'Escolha uma opção'
chooseOption: 'Escolha uma opção',
clear: 'Apagar'
},
ru: <PoComboLiterals>{
noData: 'Данные не найдены',
chooseOption: 'Выберите опцию'
chooseOption: 'Выберите опцию',
clear: 'чистый'
}
};
3 changes: 3 additions & 0 deletions projects/ui/src/lib/components/po-field/po-combo/interfaces/po-combo-literals.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,7 @@ export interface PoComboLiterals {

/** Texto exibido quando o combo estiver vazio. */
chooseOption?: string;

/** Texto do aria-label do botão de limpar */
clean?: string;
}
33 changes: 22 additions & 11 deletions projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
[p-required]="required"
[p-show-required]="showRequired"
>
<div cdkOverlayOrigin #trigger="cdkOverlayOrigin" class="po-field-container-content">
<div cdkOverlayOrigin #trigger="cdkOverlayOrigin" class="po-field-container-content po-combo-container-content">
<div *ngIf="icon" class="po-field-icon-container-left">
<po-icon class="po-field-icon po-icon-input" [class.po-field-icon-disabled]="disabled" [p-icon]="icon"></po-icon>
</div>

<input
#inp
class="po-input po-combo-input"
class="po-combo-input"
[ngClass]="clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'"
[class.po-input-icon-left]="icon"
autocomplete="off"
Expand All @@ -26,24 +26,35 @@
(click)="toggleComboVisibility()"
(keyup)="onKeyUp($event)"
(blur)="onBlur()"
(keyup.enter)="searchOnEnter($event.target.value)"
(keyup)="searchOnEnterOrArrow($event, $event.target.value)"
(keydown)="onKeyDown($event)"
/>

<div class="po-field-icon-container-right">
<po-clean
class="po-icon-input"
*ngIf="clean && !disabled"
(p-change-event)="clear($event)"
[p-element-ref]="inputEl"
<div
tabindex="0"
role="button"
[attr.aria-label]="literals.clean"
*ngIf="clean && !disabled && inp.value"
class="po-combo-clean"
(click)="clear(); $event.preventDefault()"
(keydown.enter)="clear(); $event.preventDefault()"
>
</po-clean>
<span
[class.po-border-focused]="!disabled && comboOpen"
class="po-icon po-field-icon po-icon-clear-content"
></span>
</div>
<span
#iconArrow
class="po-icon po-field-icon {{ comboIcon }} po-icon-input"
class="po-icon po-field-icon po-icon-input"
[class.po-field-icon-disabled]="disabled"
[class.po-icon-arrow-up]="comboOpen"
[class.po-icon-arrow-down]="!comboOpen"
[class.po-field-icon]="!disabled"
(click)="toggleComboVisibility()"
[class.po-combo-default-border]="!disabled && inp.value"
[class.po-combo-background-arrow-up]="!disabled && comboOpen"
(click)="toggleComboVisibility(true)"
>
</span>
</div>
Expand Down
126 changes: 103 additions & 23 deletions projects/ui/src/lib/components/po-field/po-combo/po-combo.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ describe('PoComboComponent:', () => {
component.isProcessingValueByTab = false;
spyOn(component, 'applyFilter');
component.controlApplyFilter('valor');
expect(component.applyFilter).toHaveBeenCalledWith('valor', true);
expect(component.applyFilter).toHaveBeenCalledWith('valor', true, undefined);
});

it('shouldn`t call apply filter when is processing "getObjectByValue"', () => {
Expand Down Expand Up @@ -208,9 +208,9 @@ describe('PoComboComponent:', () => {
spyOn(component, 'controlComboVisibility');
component.comboOpen = true;
component.disabled = false;

component.toggleComboVisibility();
expect(component.controlComboVisibility).toHaveBeenCalledWith(false);
fixture.detectChanges();
component.toggleComboVisibility(false);
expect(component.controlComboVisibility).toHaveBeenCalledWith(false, false, false);
});

it('should call applyFilterInFirstClick', () => {
Expand Down Expand Up @@ -571,12 +571,8 @@ describe('PoComboComponent:', () => {
focus: () => {}
}
};
component.poListbox = {
setFocus: () => {}
} as any;

spyOn(component.contentElement.nativeElement, 'focus');
spyOn(component.poListbox, 'setFocus');
component.visibleOptions = [{ value: 'item 1', label: 'item 1' }];
component.comboOpen = true;
component.changeOnEnter = true;
Expand All @@ -586,15 +582,13 @@ describe('PoComboComponent:', () => {

expect(component.controlComboVisibility).toHaveBeenCalledWith(true);
expect(component.isFiltering).toBe(false);
expect(component.poListbox.setFocus).toHaveBeenCalled();
});

it('shouldn`t call `selectNextOption` and call `controlComboVisibility` if `comboOpen` with false', () => {
const event = { ...fakeEvent, keyCode: 40 };

component.comboOpen = false;
component.visibleOptions = [{ value: '1', label: '1' }];

spyOn(component, 'controlComboVisibility');

component.onKeyDown(event);
Expand Down Expand Up @@ -683,6 +677,36 @@ describe('PoComboComponent:', () => {
expect(component.updateComboList).toHaveBeenCalled();
});

it('should call `clear` if esc is double clicked', () => {
const event = { ...fakeEvent, keyCode: 27 };

component.service = undefined;
component.selectedValue = 'Test1';
component.comboOpen = true;
component['lastKey'] = 27;

spyOn(component, 'clear');

component.onKeyDown(event);

expect(component.clear).toHaveBeenCalled();
});

it('should call `onCloseCombo` if esc is clicked', () => {
const event = { ...fakeEvent, keyCode: 27 };

component.service = undefined;
component.selectedValue = 'Test1';
component.comboOpen = true;
component['lastKey'] = 20;

spyOn(component, 'onCloseCombo');

component.onKeyDown(event);

expect(component.onCloseCombo).toHaveBeenCalled();
});

it('shouldn`t call `updateComboList` if itens service is not undefined', () => {
const event = { ...fakeEvent, keyCode: 13 };

Expand Down Expand Up @@ -949,6 +973,22 @@ describe('PoComboComponent:', () => {
expect(component.comboOpen).toBe(true);
});

it('should open the input element', () => {
const focusSpy = spyOn(component.inputEl.nativeElement, 'focus');

component['open'](true);

expect(focusSpy).toHaveBeenCalled();
});

it('should add class to input element when isButton is true', () => {
const addClassSpy = spyOn(component.renderer, 'addClass');

component['open'](false, true);

expect(addClassSpy).toHaveBeenCalledWith(component.inputEl.nativeElement, 'po-combo-input-focus');
});

it('open: should set page and options when has inifity scroll', () => {
component.infiniteScroll = true;
spyOn(component, 'getInputValue').and.returnValue(undefined);
Expand Down Expand Up @@ -1156,18 +1196,19 @@ describe('PoComboComponent:', () => {
it('should show po-clean if `clean` is true and `disabled` is false', () => {
component.clean = true;
component.disabled = false;
component.inputEl.nativeElement.value = 'Test';

fixture.detectChanges();

expect(nativeElement.querySelector('po-clean')).toBeTruthy();
expect(nativeElement.querySelector('.po-combo-clean')).toBeTruthy();
});

it('shouldn`t show po-clean if `clean` is true and `disabled` is true', () => {
component.clean = true;
component.disabled = true;

fixture.detectChanges();
expect(nativeElement.querySelector('po-clean')).toBe(null);
expect(nativeElement.querySelector('.po-combo-clean')).toBe(null);
});

it('shouldn`t show po-clean if `clean` is false', () => {
Expand Down Expand Up @@ -1316,11 +1357,14 @@ describe('PoComboComponent - with service:', () => {
it('applyFilter: should call PoComboFilterService.getFilteredData() with param and filterParams', () => {
const filterParams = 'filter';
const applyFilterValue = 'value';
const isArrowDown = true;
const param = { property: 'label', value: applyFilterValue };
const fakeThis: any = {
controlComboVisibility: () => {},
setOptionsByApplyFilter: () => {},
focusItem: () => {},
fieldLabel: 'label',
isArrowDown: true,
filterParams: filterParams,
service: {
getFilteredData: () => {}
Expand All @@ -1332,11 +1376,23 @@ describe('PoComboComponent - with service:', () => {

spyOn(fakeThis.service, 'getFilteredData').and.returnValue({ subscribe: callback => callback() });

component.applyFilter.apply(fakeThis, [applyFilterValue]);
component.applyFilter.apply(fakeThis, [applyFilterValue, isArrowDown]);

expect(fakeThis.service.getFilteredData).toHaveBeenCalledWith(param, filterParams);
});

it('applyFilter: should call focusItem if param `isArrowDown` is true', () => {
spyOn(component.service, 'getFilteredData').and.returnValue(of([{ value: 'test' }]));
spyOn(component, 'setOptionsByApplyFilter');
spyOn(component, <any>'focusItem');

component.defaultService.hasNext = true;
component.applyFilter('test', false, true);

expect(component.setOptionsByApplyFilter).toHaveBeenCalled();
expect(component['focusItem']).toHaveBeenCalled();
});

it('applyFilter: shouldn´t call PoComboFilterService.getFilteredData() if hasNext is false', () => {
const filterParams = 'filter';
const applyFilterValue = 'value';
Expand Down Expand Up @@ -1539,49 +1595,60 @@ describe('PoComboComponent - with service:', () => {
expect(component['initInputObservable']).not.toHaveBeenCalled();
});

it(`searchOnEnter: should call 'controlApplyFilter' if has a service,
it(`searchOnEnterOrArrow: should call 'controlApplyFilter' if has a service,
not has selectedView and value.length is greater than 'filterMinlength'`, () => {
const value = 'newValue';
const event = {
key: 'Enter'
};
component.selectedView = undefined;
component.filterMinlength = 2;

spyOn(component, 'controlApplyFilter');

component.searchOnEnter(value);
component.searchOnEnterOrArrow(event, value);

expect(component.controlApplyFilter).toHaveBeenCalledWith(value);
expect(component.controlApplyFilter).toHaveBeenCalledWith(value, false);
});

it(`searchOnEnter: shouldn't call 'controlApplyFilter' if has a service and has selectedView`, () => {
it(`searchOnEnterOrArrow: shouldn't call 'controlApplyFilter' if has a service and has selectedView`, () => {
const value = 'value';
component.selectedView = { label: 'Option 1', value: '1' };

const event = {
key: 'Enter'
};
spyOn(component, 'controlApplyFilter');

component.searchOnEnter(value);
component.searchOnEnterOrArrow(event, value);

expect(component.controlApplyFilter).not.toHaveBeenCalled();
});

it(`searchOnEnter: shouldn't call 'controlApplyFilter' if doesn't have a service`, () => {
it(`searchOnEnterOrArrow: shouldn't call 'controlApplyFilter' if doesn't have a service`, () => {
const value = 'value';
component.service = undefined;
const event = {
key: 'Enter'
};

spyOn(component, 'controlApplyFilter');

component.searchOnEnter(value);
component.searchOnEnterOrArrow(event, value);

expect(component.controlApplyFilter).not.toHaveBeenCalled();
});

it(`searchOnEnter: shouldn't call 'controlApplyFilter' if value.length is less than 'filterMinlength'`, () => {
it(`searchOnEnterOrArrow: shouldn't call 'controlApplyFilter' if value.length is less than 'filterMinlength'`, () => {
const value = 'value';
component.selectedView = { label: 'Option 1', value: '1' };
component.filterMinlength = 8;
const event = {
key: 'Enter'
};

spyOn(component, 'controlApplyFilter');

component.searchOnEnter(value);
component.searchOnEnterOrArrow(event, value);

expect(component.controlApplyFilter).not.toHaveBeenCalled();
});
Expand Down Expand Up @@ -1719,6 +1786,19 @@ describe('PoComboComponent - with service:', () => {

expect(component.visibleOptions).toEqual(mockOptions);
});

it('should focus on the listbox item when selectedValue is true', fakeAsync(() => {
const listboxItem = document.createElement('div');
listboxItem.setAttribute('aria-selected', 'true');
spyOn(document, 'querySelector').and.returnValue(listboxItem);

const focusSpy = spyOn(listboxItem, 'focus');

component.selectedValue = true;
component['focusItem']();
tick(100);
expect(focusSpy).toHaveBeenCalled();
}));
});
});

Expand Down
Loading

0 comments on commit 5e2debb

Please sign in to comment.