mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
[ACS-4985] Transferred business logic from SearchDateRangeAdvancedComponent and SearchFilterTabbedComponent to SearchDateRangeAdvancedTabbedComponent. Updated test cases accordingly
This commit is contained in:
committed by
Jatin_Chugh
parent
b16fd58243
commit
884568e136
-10
@@ -11,13 +11,3 @@
|
|||||||
</adf-search-date-range-advanced>
|
</adf-search-date-range-advanced>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</adf-search-filter-tabbed>
|
</adf-search-filter-tabbed>
|
||||||
|
|
||||||
<div class="adf-facet-buttons" *ngIf="!settings?.hideDefaultAction">
|
|
||||||
<button mat-button color="primary" data-automation-id="date-range-advanced-btn-clear" (click)="reset()">
|
|
||||||
{{ 'SEARCH.FILTER.ACTIONS.CLEAR' | translate }}
|
|
||||||
</button>
|
|
||||||
<button mat-button color="primary" data-automation-id="date-range-advanced-btn-apply" [disabled]="!hasValidValue()" (click)="submitValues()">
|
|
||||||
{{ 'SEARCH.FILTER.ACTIONS.APPLY' | translate }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|||||||
+9
-2
@@ -47,7 +47,7 @@ export class MockSearchFilterTabbedComponent {}
|
|||||||
selector: 'adf-search-date-range-advanced',
|
selector: 'adf-search-date-range-advanced',
|
||||||
template: ``
|
template: ``
|
||||||
})
|
})
|
||||||
export class MockSearchDateRangeAdvancedComponent {
|
class MockSearchDateRangeAdvancedComponent {
|
||||||
@Input()
|
@Input()
|
||||||
dateFormat: string;
|
dateFormat: string;
|
||||||
@Input()
|
@Input()
|
||||||
@@ -62,7 +62,7 @@ export class MockSearchDateRangeAdvancedComponent {
|
|||||||
@Output()
|
@Output()
|
||||||
valid = new EventEmitter<boolean>();
|
valid = new EventEmitter<boolean>();
|
||||||
}
|
}
|
||||||
fdescribe('SearchDateRangeAdvancedTabbedComponent', () => {
|
describe('SearchDateRangeAdvancedTabbedComponent', () => {
|
||||||
let component: SearchDateRangeAdvancedTabbedComponent;
|
let component: SearchDateRangeAdvancedTabbedComponent;
|
||||||
let fixture: ComponentFixture<SearchDateRangeAdvancedTabbedComponent>;
|
let fixture: ComponentFixture<SearchDateRangeAdvancedTabbedComponent>;
|
||||||
let betweenMockData: SearchDateRangeAdvanced;
|
let betweenMockData: SearchDateRangeAdvanced;
|
||||||
@@ -82,6 +82,7 @@ fdescribe('SearchDateRangeAdvancedTabbedComponent', () => {
|
|||||||
]
|
]
|
||||||
});
|
});
|
||||||
fixture = TestBed.createComponent(SearchDateRangeAdvancedTabbedComponent);
|
fixture = TestBed.createComponent(SearchDateRangeAdvancedTabbedComponent);
|
||||||
|
|
||||||
component = fixture.componentInstance;
|
component = fixture.componentInstance;
|
||||||
component.id = 'dateRangeAdvanced';
|
component.id = 'dateRangeAdvanced';
|
||||||
component.context = {
|
component.context = {
|
||||||
@@ -128,6 +129,10 @@ fdescribe('SearchDateRangeAdvancedTabbedComponent', () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
const searchDateRangeAdvancedComponentList = fixture.debugElement.queryAll(By.directive(SearchDateRangeAdvancedComponent));
|
||||||
|
createdDateRangeComponent = searchDateRangeAdvancedComponentList.find(searchDateRangeAdvancedComponent => (searchDateRangeAdvancedComponent.componentInstance as SearchDateRangeAdvancedComponent).field === 'createdDate').componentInstance;
|
||||||
|
// modifiedDateRangeComponent = searchDateRangeAdvancedComponentList.find(searchDateRangeAdvancedComponent => searchDateRangeAdvancedComponent.attributes['field'] === 'modifiedDate').componentInstance;
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should be able to generate separate fields on init', () => {
|
it('should be able to generate separate fields on init', () => {
|
||||||
@@ -232,4 +237,6 @@ fdescribe('SearchDateRangeAdvancedTabbedComponent', () => {
|
|||||||
expect(component.context.queryFragments['dateRangeAdvanced']).toEqual('');
|
expect(component.context.queryFragments['dateRangeAdvanced']).toEqual('');
|
||||||
expect(component.context.update).toHaveBeenCalled();
|
expect(component.context.update).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
+35
-8
@@ -177,19 +177,46 @@ export class SearchDateRangeAdvancedTabbedComponent implements SearchWidget, OnI
|
|||||||
this.combinedValuesToDisplay = valuesToDisplay;
|
this.combinedValuesToDisplay = valuesToDisplay;
|
||||||
}
|
}
|
||||||
|
|
||||||
onTabValid(tabValid: boolean, field: string) {
|
private generateQuery(value: Partial<SearchDateRangeAdvanced>, field: string): string {
|
||||||
this.tabsValidity[field] = tabValid;
|
let query = '';
|
||||||
|
if (value.dateRangeType === DateRangeType.IN_LAST) {
|
||||||
|
query = `${field}:[NOW/DAY-${value.inLastValue}${value.inLastValueType} TO NOW/DAY+1DAY]`;
|
||||||
|
} else if (value.dateRangeType === DateRangeType.BETWEEN) {
|
||||||
|
query = `${field}:['${formatISO(startOfDay(value.betweenStartDate))}' TO '${formatISO(endOfDay(value.betweenEndDate))}']`;
|
||||||
|
}
|
||||||
|
return query;
|
||||||
}
|
}
|
||||||
|
|
||||||
onDateRangedValueChanged(value: Partial<SearchDateRangeAdvanced>, field: string) {
|
private generateDisplayValue(value: Partial<SearchDateRangeAdvanced>): string {
|
||||||
this.value[field] = value;
|
let displayValue = '';
|
||||||
|
if (value.dateRangeType === DateRangeType.IN_LAST && value.inLastValue) {
|
||||||
|
displayValue = this.translateService.instant(`SEARCH.DATE_RANGE_ADVANCED.IN_LAST_DISPLAY_LABELS.${value.inLastValueType}`, {
|
||||||
|
value: value.inLastValue
|
||||||
|
});
|
||||||
|
} else if (value.dateRangeType === DateRangeType.BETWEEN && value.betweenStartDate && value.betweenEndDate) {
|
||||||
|
displayValue = `${format(startOfDay(value.betweenStartDate), this.settings.dateFormat)} - ${format(endOfDay(value.betweenEndDate), this.settings.dateFormat)}`;
|
||||||
|
}
|
||||||
|
return displayValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
onFieldsChanged(fields: string[]) {
|
private updateQuery(value: Partial<SearchDateRangeAdvanced>, field: string) {
|
||||||
this.fields = fields;
|
this.combinedQuery = '';
|
||||||
|
this.queryMapByField.set(field, this.generateQuery(value, field));
|
||||||
|
this.queryMapByField.forEach((query: string) => {
|
||||||
|
if (query) {
|
||||||
|
this.combinedQuery = this.combinedQuery ? `${this.combinedQuery} AND ${query}` : `${query}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onDisplayLabelsByFieldsTranslated(displayedLabelsByField: { [p: string]: string }) {
|
private updateDisplayValue(value: Partial<SearchDateRangeAdvanced>, field: string) {
|
||||||
this.displayedLabelsByField = displayedLabelsByField;
|
this.combinedDisplayValue = '';
|
||||||
|
this.displayValueMapByField.set(field, this.generateDisplayValue(value));
|
||||||
|
this.displayValueMapByField.forEach((displayValue: string, field: string) => {
|
||||||
|
if (displayValue) {
|
||||||
|
const displayLabelForField = `${this.translateService.instant(this.settings.displayedLabelsByField[field]).toUpperCase()}: ${displayValue}`;
|
||||||
|
this.combinedDisplayValue = this.combinedDisplayValue ? `${this.combinedDisplayValue} ${displayLabelForField}` : `${displayLabelForField}`
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+121
@@ -278,4 +278,125 @@ describe('SearchDateRangeAdvancedComponent', () => {
|
|||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
expect(component.changed.emit).toHaveBeenCalledWith(value);
|
expect(component.changed.emit).toHaveBeenCalledWith(value);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should not be able to set zero or negative values in In the last input field', () => {
|
||||||
|
component.form.controls.dateRangeType.setValue(component.DateRangeType.IN_LAST);
|
||||||
|
fixture.detectChanges();
|
||||||
|
enterValueInInputField('date-range-advanced-in-last-input', '-5');
|
||||||
|
fixture.detectChanges();
|
||||||
|
let inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-advanced-in-last-input"]').value;
|
||||||
|
expect(inLastInputFieldValue).toBe('5');
|
||||||
|
|
||||||
|
enterValueInInputField('date-range-advanced-in-last-input', '0');
|
||||||
|
fixture.detectChanges();
|
||||||
|
inLastInputFieldValue = getElementBySelector('[data-automation-id="date-range-advanced-in-last-input"]').value;
|
||||||
|
expect(inLastInputFieldValue).toBe('');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should emit valid as false when form is invalid', () => {
|
||||||
|
spyOn(component.valid, 'emit');
|
||||||
|
component.form.controls.dateRangeType.setValue(component.DateRangeType.IN_LAST);
|
||||||
|
fixture.detectChanges();
|
||||||
|
enterValueInInputField('date-range-advanced-in-last-input', '');
|
||||||
|
selectDropdownOption('date-range-advanced-in-last-option-weeks');
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.valid.emit).toHaveBeenCalledWith(false);
|
||||||
|
|
||||||
|
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.valid.emit).toHaveBeenCalledWith(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should emit valid as true when form is valid', () => {
|
||||||
|
spyOn(component.valid, 'emit');
|
||||||
|
component.form.controls.dateRangeType.setValue(component.DateRangeType.IN_LAST);
|
||||||
|
fixture.detectChanges();
|
||||||
|
enterValueInInputField('date-range-advanced-in-last-input', '5');
|
||||||
|
selectDropdownOption('date-range-advanced-in-last-option-weeks');
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.valid.emit).toHaveBeenCalledWith(true);
|
||||||
|
|
||||||
|
component.form.controls.dateRangeType.setValue(component.DateRangeType.BETWEEN);
|
||||||
|
fixture.detectChanges();
|
||||||
|
component.betweenStartDateFormControl.setValue(startDateSampleValue);
|
||||||
|
component.betweenEndDateFormControl.setValue(endDateSampleValue);
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.valid.emit).toHaveBeenCalledWith(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not emit values when form is invalid', () => {
|
||||||
|
spyOn(component.changed, 'emit');
|
||||||
|
let value = {
|
||||||
|
dateRangeType: component.DateRangeType.IN_LAST,
|
||||||
|
inLastValueType: component.InLastDateType.WEEKS,
|
||||||
|
inLastValue: '',
|
||||||
|
betweenStartDate: undefined,
|
||||||
|
betweenEndDate: undefined
|
||||||
|
};
|
||||||
|
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-in-last"] .mat-radio-input');
|
||||||
|
dateRangeTypeRadioButton.click();
|
||||||
|
selectDropdownOption('date-range-advanced-in-last-option-weeks');
|
||||||
|
enterValueInInputField('date-range-advanced-in-last-input', '');
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.changed.emit).not.toHaveBeenCalledWith(value);
|
||||||
|
|
||||||
|
component.form.patchValue({
|
||||||
|
dateRangeType: component.DateRangeType.ANY,
|
||||||
|
inLastValueType: component.InLastDateType.DAYS,
|
||||||
|
inLastValue: undefined,
|
||||||
|
betweenStartDate: undefined,
|
||||||
|
betweenEndDate: undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
value = {
|
||||||
|
dateRangeType: component.DateRangeType.BETWEEN,
|
||||||
|
inLastValueType: component.InLastDateType.DAYS,
|
||||||
|
inLastValue: undefined,
|
||||||
|
betweenStartDate: '',
|
||||||
|
betweenEndDate: ''
|
||||||
|
}
|
||||||
|
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-between"] .mat-radio-input');
|
||||||
|
dateRangeTypeRadioButton.click();
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.changed.emit).not.toHaveBeenCalledWith(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should emit values when form is valid', () => {
|
||||||
|
spyOn(component.changed, 'emit');
|
||||||
|
let value = {
|
||||||
|
dateRangeType: component.DateRangeType.IN_LAST,
|
||||||
|
inLastValueType: component.InLastDateType.WEEKS,
|
||||||
|
inLastValue: 5,
|
||||||
|
betweenStartDate: null,
|
||||||
|
betweenEndDate: null
|
||||||
|
};
|
||||||
|
let dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-in-last"] .mat-radio-input');
|
||||||
|
dateRangeTypeRadioButton.click();
|
||||||
|
selectDropdownOption('date-range-advanced-in-last-option-weeks');
|
||||||
|
enterValueInInputField('date-range-advanced-in-last-input', '5');
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.changed.emit).toHaveBeenCalledWith(value);
|
||||||
|
|
||||||
|
component.form.patchValue({
|
||||||
|
dateRangeType: component.DateRangeType.ANY,
|
||||||
|
inLastValueType: component.InLastDateType.DAYS,
|
||||||
|
inLastValue: undefined,
|
||||||
|
betweenStartDate: undefined,
|
||||||
|
betweenEndDate: undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
value = {
|
||||||
|
dateRangeType: component.DateRangeType.BETWEEN,
|
||||||
|
inLastValueType: component.InLastDateType.DAYS,
|
||||||
|
inLastValue: undefined,
|
||||||
|
betweenStartDate: startDateSampleValue,
|
||||||
|
betweenEndDate: endDateSampleValue
|
||||||
|
}
|
||||||
|
dateRangeTypeRadioButton = getElementBySelector('[data-automation-id="date-range-advanced-between"] .mat-radio-input');
|
||||||
|
dateRangeTypeRadioButton.click();
|
||||||
|
component.betweenStartDateFormControl.setValue(startDateSampleValue);
|
||||||
|
component.betweenEndDateFormControl.setValue(endDateSampleValue);
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.changed.emit).toHaveBeenCalledWith(value);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
+1
-1
@@ -185,7 +185,7 @@ export class SearchDateRangeAdvancedComponent implements OnInit, OnDestroy {
|
|||||||
// formControl.errors.required = true;
|
// formControl.errors.required = true;
|
||||||
// formControl.errors.dateFormatInvalid = false;
|
// formControl.errors.dateFormatInvalid = false;
|
||||||
// } else {
|
// } else {
|
||||||
// const date = parse(event.target['value'], this.datePickerFormat, new Date());
|
// const date = parse(event.target['value'], this.dateFormat, new Date());
|
||||||
// if(!isValid(date)) {
|
// if(!isValid(date)) {
|
||||||
// formControl.errors.dateFormatInvalid = true;
|
// formControl.errors.dateFormatInvalid = true;
|
||||||
// } else {
|
// } else {
|
||||||
|
|||||||
-97
@@ -1,97 +0,0 @@
|
|||||||
/*!
|
|
||||||
* @license
|
|
||||||
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
import { TranslateModule } from '@ngx-translate/core';
|
|
||||||
import { ContentTestingModule } from '../../../testing/content.testing.module';
|
|
||||||
import { SearchFilterTabbedComponent } from './search-filter-tabbed.component';
|
|
||||||
|
|
||||||
fdescribe('SearchFilterTabbedComponent', () => {
|
|
||||||
let component: SearchFilterTabbedComponent;
|
|
||||||
let fixture: ComponentFixture<SearchFilterTabbedComponent>;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [SearchFilterTabbedComponent],
|
|
||||||
imports: [
|
|
||||||
TranslateModule.forRoot(),
|
|
||||||
ContentTestingModule
|
|
||||||
]
|
|
||||||
});
|
|
||||||
fixture = TestBed.createComponent(SearchFilterTabbedComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should emit a single combined query when multiple queries are provided', () => {
|
|
||||||
spyOn(component.queriesCombined, 'emit');
|
|
||||||
component.queries = {
|
|
||||||
testField1: 'test-query-1',
|
|
||||||
testField2: 'test-query-2',
|
|
||||||
testField3: 'test-query-3'
|
|
||||||
};
|
|
||||||
fixture.detectChanges();
|
|
||||||
expect(component.queriesCombined.emit).toHaveBeenCalledWith('test-query-1 AND test-query-2 AND test-query-3');
|
|
||||||
});
|
|
||||||
|
|
||||||
it ('should emit a single combined value to display when multiple display values are provided', () => {
|
|
||||||
spyOn(component.valuesToDisplayCombined, 'emit');
|
|
||||||
component.settings = {
|
|
||||||
field: 'testField1, testField2, testField3',
|
|
||||||
displayedLabelsByField: {
|
|
||||||
testField1: 'Field 1',
|
|
||||||
testField2: 'Field 2',
|
|
||||||
testField3: 'Field 3'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
component.valuesToDisplay = {
|
|
||||||
testField1: 'test-display-value-1',
|
|
||||||
testField2: 'test-display-value-2',
|
|
||||||
testField3: 'test-display-value-3'
|
|
||||||
};
|
|
||||||
fixture.detectChanges();
|
|
||||||
expect(component.valuesToDisplayCombined.emit).toHaveBeenCalledWith('FIELD 1: test-display-value-1 FIELD 2: test-display-value-2 FIELD 3: test-display-value-3');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should emit translated display labels by field when settings are set', () => {
|
|
||||||
spyOn(component.displayedLabelsByFieldTranslated, 'emit');
|
|
||||||
component.settings = {
|
|
||||||
field: 'testField1, testField2, testField3',
|
|
||||||
displayedLabelsByField: {
|
|
||||||
testField1: 'Field 1',
|
|
||||||
testField2: 'Field 2',
|
|
||||||
testField3: 'Field 3'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
fixture.detectChanges();
|
|
||||||
const displayedLabelsMap = {
|
|
||||||
testField1: 'Field 1',
|
|
||||||
testField2: 'Field 2',
|
|
||||||
testField3: 'Field 3'
|
|
||||||
};
|
|
||||||
expect(component.displayedLabelsByFieldTranslated.emit).toHaveBeenCalledWith(displayedLabelsMap);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should emit an array of fields when all the fields are provided in a combined string via settings', () => {
|
|
||||||
spyOn(component.fieldsChanged, 'emit');
|
|
||||||
component.settings = {
|
|
||||||
field: 'testField1, testField2, testField3'
|
|
||||||
};
|
|
||||||
fixture.detectChanges();
|
|
||||||
expect(component.fieldsChanged.emit).toHaveBeenCalledWith(['testField1', 'testField2', 'testField3']);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user