inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3668] Search filter buckets are set to 0 after any search filtering (#3891)

Browse Source 
* [ADF-3668] Fix facet fields 0 buckets

* [ADF-3668] add test for case when labels are i18n keys

* [ADF-3668] add translations on demo-shell - for manual testing

* [ADF-3668] allow translations for the bucket labels

* [ADF-3668] Fix facet queries buckets for translated labels

* [ADF-3668] Fix e2e tests

* [ADF-3668] Fix facet queries filtering when having translated labels

* [ADF-3668] add translations on demo-shell - for manual testing

* [ADF-3668] case covered by translationMock custom instant

* [ADF-3668] move test translations to demo-shell resources

* [ADF-3668] code review changes
This commit is contained in:
Suzana Dirla
2018-10-18 12:42:01 +03:00
committed by Denys Vuika
parent 28a327216c
commit 63fb4fc857
7 changed files with 81 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
demo-shell/resources/i18n/en.json
View File

@@ -203,7 +203,25 @@
}, },
"SEARCH": { "SEARCH": {
"RESULTS": "Search results", "RESULTS": "Search results",
"NO_RESULT": "No results found" "NO_RESULT": "No results found",
"FACET_FIELDS": {
"TYPE": "1:Type",
"SIZE": "2:Size",
"CREATOR": "3:Creator",
"MODIFIER": "4:Modifier",
"CREATED": "5:Created"
},
"FACET_QUERIES": {
"MY_FACET_QUERIES": "My facet queries",
"CREATED_THIS_YEAR": "1.Created This Year",
"MIMETYPE": "2.Type",
"XTRASMALL": "3.Size: xtra small",
"SMALL": "4.Size: small",
"MEDIUM": "5.Size: medium",
"LARGE": "6.Size: large",
"XTRALARGE": "7.Size: xtra large",
"XXTRALARGE": "8.Size: XX large"
}
}, },
"SOCIAL": { "SOCIAL": {
"LIKE": "Like component", "LIKE": "Like component",

28
demo-shell/src/app.config.json
View File

@@ -93,25 +93,25 @@
"facetFields": { "facetFields": {
"expanded": true, "expanded": true,
"fields": [ "fields": [
{ "field": "content.mimetype", "mincount": 1, "label": "1:Type" }, { "field": "content.mimetype", "mincount": 1, "label": "SEARCH.FACET_FIELDS.TYPE" },
{ "field": "content.size", "mincount": 1, "label": "2:Size" }, { "field": "content.size", "mincount": 1, "label": "SEARCH.FACET_FIELDS.SIZE" },
{ "field": "creator", "mincount": 1, "label": "3:Creator" }, { "field": "creator", "mincount": 1, "label": "SEARCH.FACET_FIELDS.CREATOR" },
{ "field": "modifier", "mincount": 1, "label": "4:Modifier" }, { "field": "modifier", "mincount": 1, "label": "SEARCH.FACET_FIELDS.MODIFIER" },
{ "field": "created", "mincount": 1, "label": "5:Created" } { "field": "created", "mincount": 1, "label": "SEARCH.FACET_FIELDS.CREATED" }
] ]
}, },
"facetQueries": { "facetQueries": {
"label": "My facet queries", "label": "SEARCH.FACET_QUERIES.MY_FACET_QUERIES",
"pageSize": 5, "pageSize": 5,
"queries": [ "queries": [
{ "query": "created:2018", "label": "1.Created This Year" }, { "query": "created:2018", "label": "SEARCH.FACET_QUERIES.CREATED_THIS_YEAR" },
{ "query": "content.mimetype", "label": "2.Type" }, { "query": "content.mimetype", "label": "SEARCH.FACET_QUERIES.MIMETYPE" },
{ "query": "content.size:[0 TO 10240]", "label": "3.Size: Extra small"}, { "query": "content.size:[0 TO 10240]", "label": "SEARCH.FACET_QUERIES.XTRASMALL"},
{ "query": "content.size:[10240 TO 102400]", "label": "4.Size: small"}, { "query": "content.size:[10240 TO 102400]", "label": "SEARCH.FACET_QUERIES.SMALL"},
{ "query": "content.size:[102400 TO 1048576]", "label": "5.Size: medium" }, { "query": "content.size:[102400 TO 1048576]", "label": "SEARCH.FACET_QUERIES.MEDIUM" },
{ "query": "content.size:[1048576 TO 16777216]", "label": "6.Size: large" }, { "query": "content.size:[1048576 TO 16777216]", "label": "SEARCH.FACET_QUERIES.LARGE" },
{ "query": "content.size:[16777216 TO 134217728]", "label": "7.Size: Extra large" }, { "query": "content.size:[16777216 TO 134217728]", "label": "SEARCH.FACET_QUERIES.XTRALARGE" },
{ "query": "content.size:[134217728 TO MAX]", "label": "8.Size: XX large" } { "query": "content.size:[134217728 TO MAX]", "label": "SEARCH.FACET_QUERIES.XXTRALARGE" }
] ]
}, },
"categories": [ "categories": [

16
e2e/pages/adf/searchFiltersPage.ts
View File

@@ -20,14 +20,14 @@ import Util = require('../../util/util');
export class SearchFiltersPage { export class SearchFiltersPage {
searchFilters = element(by.css('adf-search-filter')); searchFilters = element(by.css('adf-search-filter'));
fileTypeFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-1:Type"')); fileTypeFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-SEARCH.FACET_FIELDS.TYPE"'));
searchFileTypeFilter = element(by.css('input[data-automation-id="facet-result-filter-1:Type"')); searchFileTypeFilter = element(by.css('input[data-automation-id="facet-result-filter-SEARCH.FACET_FIELDS.TYPE"'));
creatorFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-3:Creator"')); creatorFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-SEARCH.FACET_FIELDS.CREATOR"'));
searchCreatorFilter = element(by.css('input[data-automation-id="facet-result-filter-3:Creator"')); searchCreatorFilter = element(by.css('input[data-automation-id="facet-result-filter-SEARCH.FACET_FIELDS.CREATOR"'));
fileSizeFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-2:Size"')); fileSizeFilter = element(by.css('mat-expansion-panel[data-automation-id="expansion-panel-SEARCH.FACET_FIELDS.SIZE"'));
showMoreButtonForSize = this.fileSizeFilter.element(by.css('button[title="Show more"]')); showMoreButtonForSize = this.fileSizeFilter.element(by.css('button[title="Show more"]'));
showLessButtonForSize = this.fileSizeFilter.element(by.css('button[title="Show less"]')); showLessButtonForSize = this.fileSizeFilter.element(by.css('button[title="Show less"]'));
numberOfCheckboxesforSize = element.all(by.css('mat-checkbox[data-automation-id*="checkbox-2:Size"]')); numberOfCheckboxesforSize = element.all(by.css('mat-checkbox[data-automation-id*="checkbox-SEARCH.FACET_FIELDS.SIZE"]'));
checkSearchFiltersIsDisplayed() { checkSearchFiltersIsDisplayed() {
Util.waitUntilElementIsVisible(this.searchFilters); Util.waitUntilElementIsVisible(this.searchFilters);
@@ -62,13 +62,13 @@ export class SearchFiltersPage {
} }
selectFileType(fileType) { selectFileType(fileType) {
let result = element(by.css(`mat-checkbox[data-automation-id='checkbox-1:Type-${fileType}'] .mat-checkbox-inner-container`)); let result = element(by.css(`mat-checkbox[data-automation-id='checkbox-SEARCH.FACET_FIELDS.TYPE-${fileType}'] .mat-checkbox-inner-container`));
Util.waitUntilElementIsClickable(result); Util.waitUntilElementIsClickable(result);
result.click(); result.click();
} }
selectCreator(creatorName) { selectCreator(creatorName) {
let result = element(by.css(`mat-checkbox[data-automation-id='checkbox-3:Creator-${creatorName}'] .mat-checkbox-inner-container`)); let result = element(by.css(`mat-checkbox[data-automation-id='checkbox-SEARCH.FACET_FIELDS.CREATOR-${creatorName}'] .mat-checkbox-inner-container`));
Util.waitUntilElementIsClickable(result); Util.waitUntilElementIsClickable(result);
result.click(); result.click();
} }

4
lib/content-services/search/components/search-filter/models/response-facet-query-list.model.ts
View File

@@ -19,7 +19,7 @@ import { FacetQuery } from '../../../facet-query.interface';
import { SearchFilterList } from './search-filter-list.model'; import { SearchFilterList } from './search-filter-list.model';
export class ResponseFacetQueryList extends SearchFilterList<FacetQuery> { export class ResponseFacetQueryList extends SearchFilterList<FacetQuery> {
constructor(items: FacetQuery[] = [], pageSize: number = 5) { constructor(items: FacetQuery[] = [], translationService, pageSize: number = 5) {
super( super(
items items
.filter(item => { .filter(item => {
@@ -31,7 +31,7 @@ export class ResponseFacetQueryList extends SearchFilterList<FacetQuery> {
this.filter = (query: FacetQuery) => { this.filter = (query: FacetQuery) => {
if (this.filterText && query.label) { if (this.filterText && query.label) {
const pattern = (this.filterText || '').toLowerCase(); const pattern = (this.filterText || '').toLowerCase();
const label = query.label.toLowerCase(); const label = translationService.instant(query.label).toLowerCase();
return label.startsWith(pattern); return label.startsWith(pattern);
} }
return true; return true;

6
lib/content-services/search/components/search-filter/search-filter.component.html
View File

@@ -41,7 +41,7 @@
[checked]="query.checked" [checked]="query.checked"
[attr.data-automation-id]="'checkbox-'+facetQueriesLabel+'-'+query.label" [attr.data-automation-id]="'checkbox-'+facetQueriesLabel+'-'+query.label"
(change)="onToggleFacetQuery($event, query)"> (change)="onToggleFacetQuery($event, query)">
{{ query.label }} ({{ query.count }}) {{ query.label | translate }} ({{ query.count }})
</mat-checkbox> </mat-checkbox>
</ng-container> </ng-container>
</div> </div>
@@ -72,7 +72,7 @@
<mat-expansion-panel [attr.data-automation-id]="'expansion-panel-'+field.label" *ngFor="let field of responseFacetFields" <mat-expansion-panel [attr.data-automation-id]="'expansion-panel-'+field.label" *ngFor="let field of responseFacetFields"
[expanded]="facetFieldsExpanded"> [expanded]="facetFieldsExpanded">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>{{ field.label }}</mat-panel-title> <mat-panel-title>{{ field.label | translate }}</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="facet-result-filter"> <div class="facet-result-filter">
@@ -96,7 +96,7 @@
[checked]="bucket.checked" [checked]="bucket.checked"
[attr.data-automation-id]="'checkbox-'+field.label+'-'+(bucket.display || bucket.label)" [attr.data-automation-id]="'checkbox-'+field.label+'-'+(bucket.display || bucket.label)"
(change)="onToggleBucket($event, field, bucket)"> (change)="onToggleBucket($event, field, bucket)">
{{ bucket.display || bucket.label }} <span *ngIf="bucket.count!==null">(</span>{{ bucket.count }}<span *ngIf="bucket.count!==null">)</span> {{ bucket.display || bucket.label | translate }} <span *ngIf="bucket.count!==null">(</span>{{ bucket.count }}<span *ngIf="bucket.count!==null">)</span>
</mat-checkbox> </mat-checkbox>
</div> </div>

31
lib/content-services/search/components/search-filter/search-filter.component.spec.ts
View File

@@ -30,6 +30,7 @@ describe('SearchFilterComponent', () => {
let component: SearchFilterComponent; let component: SearchFilterComponent;
let queryBuilder: SearchQueryBuilderService; let queryBuilder: SearchQueryBuilderService;
let appConfig: AppConfigService; let appConfig: AppConfigService;
const translationMock = new TranslationMock();
beforeEach(() => { beforeEach(() => {
appConfig = new AppConfigService(null); appConfig = new AppConfigService(null);
@@ -39,7 +40,7 @@ describe('SearchFilterComponent', () => {
const searchMock: any = { const searchMock: any = {
dataLoaded: new Subject() dataLoaded: new Subject()
}; };
const translationMock = new TranslationMock(); translationMock.instant = (key) => `translated${key}`;
component = new SearchFilterComponent(queryBuilder, searchMock, translationMock); component = new SearchFilterComponent(queryBuilder, searchMock, translationMock);
component.ngOnInit(); component.ngOnInit();
}); });
@@ -293,6 +294,32 @@ describe('SearchFilterComponent', () => {
expect(component.responseFacetFields[0].buckets.items[1].count).toEqual(0); expect(component.responseFacetFields[0].buckets.items[1].count).toEqual(0);
}); });
it('should update correctly the existing facetFields bucket values', () => {
component.responseFacetFields = null;
queryBuilder.config = {
categories: [],
facetFields: { fields: [{ label: 'f1', field: 'f1' }] },
facetQueries: { queries: [] }
};
const firstCallFields: any = [{
label: 'f1',
buckets: [{ label: 'b1', count: 10 }]
}];
const firstCallData = { list: { context: { facetsFields: firstCallFields }}};
component.onDataLoaded(firstCallData);
expect(component.responseFacetFields[0].buckets.items[0].count).toEqual(10);
const secondCallFields: any = [{
label: 'f1',
buckets: [{ label: 'b1', count: 6 }]
}];
const secondCallData = { list: { context: { facetsFields: secondCallFields}}};
component.onDataLoaded(secondCallData);
expect(component.responseFacetFields[0].buckets.items[0].count).toEqual(6);
});
it('should fetch facet fields from response payload and show the already checked items', () => { it('should fetch facet fields from response payload and show the already checked items', () => {
spyOn(queryBuilder, 'execute').and.stub(); spyOn(queryBuilder, 'execute').and.stub();
queryBuilder.config = { queryBuilder.config = {
@@ -490,7 +517,7 @@ describe('SearchFilterComponent', () => {
{ label: 'q1', query: 'q1', checked: true, count: 1 }, { label: 'q1', query: 'q1', checked: true, count: 1 },
{ label: 'q2', query: 'q2', checked: false, count: 1 }, { label: 'q2', query: 'q2', checked: false, count: 1 },
{ label: 'q3', query: 'q3', checked: true, count: 1 } { label: 'q3', query: 'q3', checked: true, count: 1 }
]); ], translationMock);
component.resetSelectedQueries(); component.resetSelectedQueries();
expect(queryBuilder.removeUserFacetQuery).toHaveBeenCalledTimes(3); expect(queryBuilder.removeUserFacetQuery).toHaveBeenCalledTimes(3);

12
lib/content-services/search/components/search-filter/search-filter.component.ts
View File

@@ -224,22 +224,22 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
return <FacetFieldBucket> { return <FacetFieldBucket> {
...bucket, ...bucket,
checked: !!selectedBucket, checked: !!selectedBucket,
display: this.translationService.instant(bucket.display), display: bucket.display,
label: this.translationService.instant(bucket.label) label: bucket.label
}; };
}); });
const bucketList = new SearchFilterList<FacetFieldBucket>(buckets, field.pageSize); const bucketList = new SearchFilterList<FacetFieldBucket>(buckets, field.pageSize);
bucketList.filter = (bucket: FacetFieldBucket): boolean => { bucketList.filter = (bucket: FacetFieldBucket): boolean => {
if (bucket && bucketList.filterText) { if (bucket && bucketList.filterText) {
const pattern = (bucketList.filterText || '').toLowerCase(); const pattern = (bucketList.filterText || '').toLowerCase();
const label = (bucket.display || bucket.label || '').toLowerCase(); const label = (this.translationService.instant(bucket.display) || this.translationService.instant(bucket.label)).toLowerCase();
return label.startsWith(pattern); return label.startsWith(pattern);
} }
return true; return true;
}; };
return { return {
...field, ...field,
label: this.translationService.instant(field.label), label: field.label,
pageSize: field.pageSize | this.DEFAULT_PAGE_SIZE, pageSize: field.pageSize | this.DEFAULT_PAGE_SIZE,
currentPageSize: field.pageSize | this.DEFAULT_PAGE_SIZE, currentPageSize: field.pageSize | this.DEFAULT_PAGE_SIZE,
buckets: bucketList buckets: bucketList
@@ -282,7 +282,7 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
} }
return <FacetQuery> { return <FacetQuery> {
...query, ...query,
label: this.translationService.instant(query.label), label: query.label,
count: queryResult.count count: queryResult.count
}; };
}); });
@@ -292,7 +292,7 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
this.responseFacetQueries.items = facetQueries; this.responseFacetQueries.items = facetQueries;
} else { } else {
this.responseFacetQueries = new ResponseFacetQueryList(facetQueries, this.facetQueriesPageSize); this.responseFacetQueries = new ResponseFacetQueryList(facetQueries, this.translationService, this.facetQueriesPageSize);
} }
} else { } else {