mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACA-4123] Unify APS and Cloud event emitters for filters (#6331)
* Experimental solution * Unify event emitters for aps and cloud filters * Update emitter descriptions * Fix/Add unit tests * Unit tests part 2 * Update documentation, put mock objects into separate mock files and remove them from test files * rename tests * align demo-shell with the new changes * fix aps demo shell
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
|
||||
<ng-container *ngIf="filters$ | async as filterList; else loading">
|
||||
<div *ngFor="let filter of filterList" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
|
||||
<button (click)="selectFilterById(filter.id)"
|
||||
<button (click)="onFilterClick(filter)"
|
||||
[attr.aria-label]="filter.name | translate"
|
||||
[id]="filter.id"
|
||||
[attr.data-automation-id]="filter.key + '_filter'"
|
||||
@@ -18,4 +18,4 @@
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
@@ -19,7 +19,6 @@ import { SimpleChange } from '@angular/core';
|
||||
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
|
||||
import { setupTestBed } from '@alfresco/adf-core';
|
||||
import { from, Observable } from 'rxjs';
|
||||
import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
|
||||
import { ProcessFilterCloudService } from '../services/process-filter-cloud.service';
|
||||
import { ProcessFiltersCloudComponent } from './process-filters-cloud.component';
|
||||
import { By } from '@angular/platform-browser';
|
||||
@@ -28,43 +27,20 @@ import { ProcessFiltersCloudModule } from '../process-filters-cloud.module';
|
||||
import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
|
||||
import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { mockProcessFilters } from '../mock/process-filters-cloud.mock';
|
||||
|
||||
describe('ProcessFiltersCloudComponent', () => {
|
||||
|
||||
let processFilterService: ProcessFilterCloudService;
|
||||
|
||||
const fakeGlobalFilter = [
|
||||
new ProcessFilterCloudModel({
|
||||
name: 'FakeAllProcesses',
|
||||
key: 'FakeAllProcesses',
|
||||
icon: 'adjust',
|
||||
id: '10',
|
||||
status: ''
|
||||
}),
|
||||
new ProcessFilterCloudModel({
|
||||
name: 'FakeRunningProcesses',
|
||||
key: 'FakeRunningProcesses',
|
||||
icon: 'inbox',
|
||||
id: '11',
|
||||
status: 'RUNNING'
|
||||
}),
|
||||
new ProcessFilterCloudModel({
|
||||
name: 'FakeCompletedProcesses',
|
||||
key: 'completed-processes',
|
||||
icon: 'done',
|
||||
id: '12',
|
||||
status: 'COMPLETED'
|
||||
})
|
||||
];
|
||||
|
||||
const fakeGlobalFilterObservable =
|
||||
new Observable(function(observer) {
|
||||
observer.next(fakeGlobalFilter);
|
||||
observer.next(mockProcessFilters);
|
||||
observer.complete();
|
||||
});
|
||||
|
||||
const fakeGlobalFilterPromise = new Promise(function (resolve) {
|
||||
resolve(fakeGlobalFilter);
|
||||
resolve(mockProcessFilters);
|
||||
});
|
||||
|
||||
const mockErrorFilterList = {
|
||||
@@ -197,7 +173,7 @@ describe('ProcessFiltersCloudComponent', () => {
|
||||
const appName = 'my-app-1';
|
||||
const change = new SimpleChange(null, appName, true);
|
||||
|
||||
component.filterClick.subscribe((res) => {
|
||||
component.filterSelected.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.currentFilter).toBeDefined();
|
||||
expect(component.currentFilter.name).toEqual('FakeRunningProcesses');
|
||||
@@ -217,7 +193,7 @@ describe('ProcessFiltersCloudComponent', () => {
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
component.filterClick.subscribe((res) => {
|
||||
component.filterSelected.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.currentFilter).toBeDefined();
|
||||
expect(component.currentFilter.name).toEqual('FakeCompletedProcesses');
|
||||
@@ -236,7 +212,7 @@ describe('ProcessFiltersCloudComponent', () => {
|
||||
const change = new SimpleChange(null, appName, true);
|
||||
fixture.detectChanges();
|
||||
|
||||
component.filterClick.subscribe((res) => {
|
||||
component.filterSelected.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.currentFilter).toBeDefined();
|
||||
expect(component.currentFilter.name).toEqual('FakeCompletedProcesses');
|
||||
@@ -255,7 +231,7 @@ describe('ProcessFiltersCloudComponent', () => {
|
||||
const change = new SimpleChange(null, appName, true);
|
||||
fixture.detectChanges();
|
||||
|
||||
component.filterClick.subscribe((res) => {
|
||||
component.filterSelected.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.currentFilter).toBeDefined();
|
||||
expect(component.currentFilter.name).toEqual('FakeCompletedProcesses');
|
||||
@@ -265,7 +241,7 @@ describe('ProcessFiltersCloudComponent', () => {
|
||||
component.ngOnChanges({ 'appName': change });
|
||||
});
|
||||
|
||||
it('should emit an event when a filter is selected', (done) => {
|
||||
it('should filterClicked emit when a filter is clicked from the UI', (done) => {
|
||||
spyOn(processFilterService, 'getProcessFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
|
||||
component.filterParam = { id: '10' };
|
||||
@@ -275,14 +251,14 @@ describe('ProcessFiltersCloudComponent', () => {
|
||||
component.ngOnChanges({ 'appName': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
component.filterClick.subscribe((res) => {
|
||||
component.filterClicked.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.currentFilter).toBeDefined();
|
||||
expect(component.currentFilter.name).toEqual('FakeAllProcesses');
|
||||
done();
|
||||
});
|
||||
|
||||
const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalFilter[0].key}_filter"]`);
|
||||
const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${mockProcessFilters[0].key}_filter"]`);
|
||||
filterButton.click();
|
||||
});
|
||||
|
||||
@@ -318,14 +294,14 @@ describe('ProcessFiltersCloudComponent', () => {
|
||||
});
|
||||
|
||||
it('should change current filter when filterParam (name) changes', () => {
|
||||
component.filters = fakeGlobalFilter;
|
||||
component.filters = mockProcessFilters;
|
||||
component.currentFilter = null;
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
expect(component.currentFilter.name).toEqual(fakeGlobalFilter[2].name);
|
||||
expect(component.currentFilter.name).toEqual(mockProcessFilters[2].name);
|
||||
});
|
||||
|
||||
const change = new SimpleChange(null, { name: fakeGlobalFilter[2].name }, true);
|
||||
const change = new SimpleChange(null, { name: mockProcessFilters[2].name }, true);
|
||||
component.ngOnChanges({ 'filterParam': change });
|
||||
});
|
||||
|
||||
@@ -340,11 +316,11 @@ describe('ProcessFiltersCloudComponent', () => {
|
||||
});
|
||||
|
||||
it('should return the current filter after one is selected', () => {
|
||||
const filter = fakeGlobalFilter[1];
|
||||
component.filters = fakeGlobalFilter;
|
||||
const filter = mockProcessFilters[1];
|
||||
component.filters = mockProcessFilters;
|
||||
|
||||
expect(component.currentFilter).toBeUndefined();
|
||||
component.selectFilter(<ProcessFilterCloudModel> {id: filter.id});
|
||||
component.selectFilter({ id: filter.id });
|
||||
expect(component.getCurrentFilter()).toBe(filter);
|
||||
});
|
||||
});
|
||||
|
@@ -42,9 +42,13 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
|
||||
@Input()
|
||||
showIcons: boolean = false;
|
||||
|
||||
/** Emitted when a filter is selected/clicked */
|
||||
/** Emitted when a filter is being selected based on the filterParam input. */
|
||||
@Output()
|
||||
filterClick = new EventEmitter<ProcessFilterCloudModel>();
|
||||
filterSelected = new EventEmitter<ProcessFilterCloudModel>();
|
||||
|
||||
/** Emitted when a filter is being clicked from the UI. */
|
||||
@Output()
|
||||
filterClicked = new EventEmitter<ProcessFilterCloudModel>();
|
||||
|
||||
/** Emitted when filters are loaded successfully */
|
||||
@Output()
|
||||
@@ -126,12 +130,12 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
|
||||
}
|
||||
|
||||
/**
|
||||
* Select and emit the given filter
|
||||
* Selects and emits the given filter
|
||||
*/
|
||||
public selectFilterAndEmit(newParamFilter: FilterParamsModel) {
|
||||
if (newParamFilter) {
|
||||
this.selectFilter(newParamFilter);
|
||||
this.filterClick.emit(this.currentFilter);
|
||||
this.filterSelected.emit(this.currentFilter);
|
||||
} else {
|
||||
this.currentFilter = undefined;
|
||||
}
|
||||
@@ -144,6 +148,18 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
|
||||
this.selectFilterAndEmit(<ProcessFilterCloudModel> {id: id});
|
||||
}
|
||||
|
||||
/**
|
||||
* Selects and emits the clicked filter
|
||||
*/
|
||||
public onFilterClick(filter: ProcessFilterCloudModel) {
|
||||
if (filter) {
|
||||
this.selectFilter(filter);
|
||||
this.filterClicked.emit(this.currentFilter);
|
||||
} else {
|
||||
this.currentFilter = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Select as default process filter the first in the list
|
||||
*/
|
||||
|
@@ -0,0 +1,169 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* 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 { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
|
||||
import { DateCloudFilterType } from '../../../../..';
|
||||
|
||||
export const fakeProcessCloudFilters = [
|
||||
{
|
||||
name: 'MOCK_PROCESS_NAME_1',
|
||||
id: '1',
|
||||
key: 'all-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK_ALL',
|
||||
order: 'DESC'
|
||||
},
|
||||
{
|
||||
name: 'MOCK_PROCESS_NAME_2',
|
||||
id: '2',
|
||||
key: 'run-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK-RUNNING',
|
||||
order: 'DESC'
|
||||
},
|
||||
{
|
||||
name: 'MOCK_PROCESS_NAME_3',
|
||||
id: '3',
|
||||
key: 'complete-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK-COMPLETED',
|
||||
order: 'DESC'
|
||||
}
|
||||
];
|
||||
|
||||
export const mockProcessFilters = [
|
||||
new ProcessFilterCloudModel({
|
||||
name: 'FakeAllProcesses',
|
||||
key: 'FakeAllProcesses',
|
||||
icon: 'adjust',
|
||||
id: '10',
|
||||
status: ''
|
||||
}),
|
||||
new ProcessFilterCloudModel({
|
||||
name: 'FakeRunningProcesses',
|
||||
key: 'FakeRunningProcesses',
|
||||
icon: 'inbox',
|
||||
id: '11',
|
||||
status: 'RUNNING'
|
||||
}),
|
||||
new ProcessFilterCloudModel({
|
||||
name: 'FakeCompletedProcesses',
|
||||
key: 'completed-processes',
|
||||
icon: 'done',
|
||||
id: '12',
|
||||
status: 'COMPLETED'
|
||||
})
|
||||
];
|
||||
|
||||
export const fakeProcessFilter: ProcessFilterCloudModel = new ProcessFilterCloudModel({
|
||||
name: 'MOCK_PROCESS_NAME_1',
|
||||
id: '1',
|
||||
key: 'all-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK_ALL',
|
||||
order: 'DESC',
|
||||
index: 2,
|
||||
processName: 'process-name',
|
||||
processDefinitionName: 'process-def-name',
|
||||
processInstanceId: 'processinstanceid',
|
||||
initiator: 'mockuser',
|
||||
processDefinitionId: 'processDefid',
|
||||
processDefinitionKey: 'processDefKey',
|
||||
lastModified: null,
|
||||
lastModifiedTo: null,
|
||||
lastModifiedFrom: null,
|
||||
completedDateType: DateCloudFilterType.NO_DATE,
|
||||
startedDateType: DateCloudFilterType.NO_DATE,
|
||||
_completedFrom: null,
|
||||
_completedTo: null,
|
||||
startedDate: null,
|
||||
_startFrom: null,
|
||||
_startTo: null
|
||||
});
|
||||
|
||||
export const fakeProcessCloudFilterEntries = {
|
||||
list: {
|
||||
entries: [
|
||||
{
|
||||
entry: {
|
||||
key: 'process-filters-mock-appName-mock-username',
|
||||
value: JSON.stringify(fakeProcessCloudFilters)
|
||||
}
|
||||
},
|
||||
{
|
||||
entry: fakeProcessCloudFilters[1]
|
||||
},
|
||||
{
|
||||
entry: fakeProcessCloudFilters[2]
|
||||
}
|
||||
],
|
||||
pagination: {
|
||||
skipCount: 0,
|
||||
maxItems: 100,
|
||||
count: 3,
|
||||
hasMoreItems: false,
|
||||
totalItems: 3
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const fakeEmptyProcessCloudFilterEntries = {
|
||||
list: {
|
||||
entries: [],
|
||||
pagination: {
|
||||
skipCount: 0,
|
||||
maxItems: 100,
|
||||
count: 0,
|
||||
hasMoreItems: false,
|
||||
totalItems: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const fakeProcessCloudFilterWithDifferentEntries = {
|
||||
list: {
|
||||
entries: [
|
||||
{
|
||||
entry: {
|
||||
key: 'my-mock-key-1',
|
||||
value: 'my-mock-value-2'
|
||||
}
|
||||
},
|
||||
{
|
||||
entry: {
|
||||
key: 'my-mock-key-2',
|
||||
value: 'my-mock-key-2'
|
||||
}
|
||||
}
|
||||
],
|
||||
pagination: {
|
||||
skipCount: 0,
|
||||
maxItems: 100,
|
||||
count: 4,
|
||||
hasMoreItems: false,
|
||||
totalItems: 2
|
||||
}
|
||||
}
|
||||
};
|
@@ -23,8 +23,7 @@ import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.ser
|
||||
import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
|
||||
import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
|
||||
import { DateCloudFilterType } from '../../../models/date-cloud-filter.model';
|
||||
import { fakeEmptyProcessCloudFilterEntries, fakeProcessCloudFilterEntries, fakeProcessCloudFilters, fakeProcessCloudFilterWithDifferentEntries, fakeProcessFilter } from '../mock/process-filters-cloud.mock';
|
||||
|
||||
describe('ProcessFilterCloudService', () => {
|
||||
let service: ProcessFilterCloudService;
|
||||
@@ -41,187 +40,6 @@ describe('ProcessFilterCloudService', () => {
|
||||
email: 'fakeIdentity@email.com'
|
||||
};
|
||||
|
||||
const fakeProcessFilter: ProcessFilterCloudModel = new ProcessFilterCloudModel({
|
||||
name: 'MOCK_PROCESS_NAME_1',
|
||||
id: '1',
|
||||
key: 'all-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK_ALL',
|
||||
order: 'DESC',
|
||||
index: 2,
|
||||
processName: 'process-name',
|
||||
processDefinitionName: 'process-def-name',
|
||||
processInstanceId: 'processinstanceid',
|
||||
initiator: 'mockuser',
|
||||
processDefinitionId: 'processDefid',
|
||||
processDefinitionKey: 'processDefKey',
|
||||
lastModified: null,
|
||||
lastModifiedTo: null,
|
||||
lastModifiedFrom: null,
|
||||
completedDateType: DateCloudFilterType.NO_DATE,
|
||||
startedDateType: DateCloudFilterType.NO_DATE,
|
||||
_completedFrom: null,
|
||||
_completedTo: null,
|
||||
startedDate: null,
|
||||
_startFrom: null,
|
||||
_startTo: null
|
||||
});
|
||||
|
||||
const fakeProcessCloudFilterEntries = {
|
||||
list: {
|
||||
entries: [
|
||||
{
|
||||
entry: {
|
||||
key: 'process-filters-mock-appName-mock-username',
|
||||
value: JSON.stringify([
|
||||
{
|
||||
name: 'MOCK_PROCESS_NAME_1',
|
||||
id: '1',
|
||||
key: 'all-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK_ALL',
|
||||
order: 'DESC'
|
||||
},
|
||||
{
|
||||
name: 'MOCK_PROCESS_NAME_2',
|
||||
id: '2',
|
||||
key: 'run-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK-RUNNING',
|
||||
order: 'DESC'
|
||||
},
|
||||
{
|
||||
name: 'MOCK_PROCESS_NAME_3',
|
||||
id: '3',
|
||||
key: 'complete-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK-COMPLETED',
|
||||
order: 'DESC'
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
entry: {
|
||||
key: 'mock-key-2',
|
||||
value: {
|
||||
name: 'MOCK_PROCESS_NAME_2',
|
||||
id: '2',
|
||||
key: 'run-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK-RUNNING',
|
||||
order: 'DESC'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
entry: {
|
||||
key: 'mock-key-3',
|
||||
value: {
|
||||
name: 'MOCK_PROCESS_NAME_3',
|
||||
id: '3',
|
||||
key: 'complete-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK-COMPLETED',
|
||||
order: 'DESC'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
pagination: {
|
||||
skipCount: 0,
|
||||
maxItems: 100,
|
||||
count: 3,
|
||||
hasMoreItems: false,
|
||||
totalItems: 3
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fakeEmptyProcessCloudFilterEntries = {
|
||||
list: {
|
||||
entries: [],
|
||||
pagination: {
|
||||
skipCount: 0,
|
||||
maxItems: 100,
|
||||
count: 0,
|
||||
hasMoreItems: false,
|
||||
totalItems: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fakeProcessCloudFilterWithDifferentEntries = {
|
||||
list: {
|
||||
entries: [
|
||||
{
|
||||
entry: {
|
||||
key: 'my-mock-key-1',
|
||||
value: 'my-mock-value-2'
|
||||
}
|
||||
},
|
||||
{
|
||||
entry: {
|
||||
key: 'my-mock-key-2',
|
||||
value: 'my-mock-key-2'
|
||||
}
|
||||
}
|
||||
],
|
||||
pagination: {
|
||||
skipCount: 0,
|
||||
maxItems: 100,
|
||||
count: 4,
|
||||
hasMoreItems: false,
|
||||
totalItems: 2
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fakeProcessCloudFilters = [
|
||||
{
|
||||
name: 'MOCK_PROCESS_NAME_1',
|
||||
id: '1',
|
||||
key: 'all-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK_ALL',
|
||||
order: 'DESC'
|
||||
},
|
||||
{
|
||||
name: 'MOCK_PROCESS_NAME_2',
|
||||
id: '2',
|
||||
key: 'run-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK-RUNNING',
|
||||
order: 'DESC'
|
||||
},
|
||||
{
|
||||
name: 'MOCK_PROCESS_NAME_3',
|
||||
id: '3',
|
||||
key: 'complete-mock-process',
|
||||
icon: 'adjust',
|
||||
appName: 'mock-appName',
|
||||
sort: 'startDate',
|
||||
status: 'MOCK-COMPLETED',
|
||||
order: 'DESC'
|
||||
}
|
||||
];
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
TranslateModule.forRoot(),
|
||||
|
@@ -1,6 +1,6 @@
|
||||
<ng-container *ngIf="filters$ | async as filterList; else loading">
|
||||
<div *ngFor="let filter of filterList" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
|
||||
<button (click)="selectFilterAndEmit(filter)"
|
||||
<button (click)="onFilterClick(filter)"
|
||||
[attr.aria-label]="filter.name | translate"
|
||||
[id]="filter.id"
|
||||
[attr.data-automation-id]="filter.key + '_filter'"
|
||||
@@ -17,4 +17,4 @@
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
@@ -254,22 +254,35 @@ describe('ServiceTaskFiltersCloudComponent', () => {
|
||||
|
||||
}));
|
||||
|
||||
it('should emit an event when a filter is selected', async(() => {
|
||||
it('should emit the selected filter based on the filterParam input', async () => {
|
||||
spyOn(serviceTaskFilterCloudService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
spyOn(component.filterSelected, 'emit');
|
||||
|
||||
component.filterParam = { id: '12' };
|
||||
const filterParam = { id: '10' };
|
||||
const change = new SimpleChange(null, filterParam, true);
|
||||
component.filterParam = filterParam;
|
||||
|
||||
const appName = 'my-app-1';
|
||||
const change = new SimpleChange(null, appName, true);
|
||||
component.ngOnChanges({ 'appName': change });
|
||||
component.ngOnChanges({ 'filterParam': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(component.filterSelected.emit).toHaveBeenCalledWith(fakeGlobalServiceFilters[0]);
|
||||
});
|
||||
|
||||
it('should filterClicked emit when a filter is clicked from the UI', async () => {
|
||||
spyOn(serviceTaskFilterCloudService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
spyOn(component.filterClicked, 'emit');
|
||||
|
||||
fixture.detectChanges();
|
||||
spyOn(component, 'selectFilterAndEmit').and.stub();
|
||||
const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalServiceFilters[1].key}_filter"]`);
|
||||
await fixture.whenStable();
|
||||
|
||||
const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalServiceFilters[0].key}_filter"]`);
|
||||
filterButton.click();
|
||||
expect(component.selectFilterAndEmit).toHaveBeenCalledWith(fakeGlobalServiceFilters[1]);
|
||||
}));
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.filterClicked.emit).toHaveBeenCalledWith(fakeGlobalServiceFilters[0]);
|
||||
});
|
||||
|
||||
it('should reset the filter when the param is undefined', async(() => {
|
||||
spyOn(serviceTaskFilterCloudService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
|
@@ -30,9 +30,13 @@ import { ServiceTaskFilterCloudService } from '../services/service-task-filter-c
|
||||
})
|
||||
export class ServiceTaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent implements OnInit, OnChanges {
|
||||
|
||||
/** Emitted when a filter in the list is clicked. */
|
||||
/** Emitted when a filter is being selected based on the filterParam input. */
|
||||
@Output()
|
||||
filterClick = new EventEmitter<ServiceTaskFilterCloudModel>();
|
||||
filterSelected = new EventEmitter<ServiceTaskFilterCloudModel>();
|
||||
|
||||
/** Emitted when a filter is being clicked from the UI. */
|
||||
@Output()
|
||||
filterClicked = new EventEmitter<ServiceTaskFilterCloudModel>();
|
||||
|
||||
filters$: Observable<ServiceTaskFilterCloudModel[]>;
|
||||
filters: ServiceTaskFilterCloudModel[] = [];
|
||||
@@ -91,7 +95,19 @@ export class ServiceTaskFiltersCloudComponent extends BaseTaskFiltersCloudCompon
|
||||
public selectFilterAndEmit(newParamFilter: FilterParamsModel) {
|
||||
if (newParamFilter) {
|
||||
this.selectFilter(newParamFilter);
|
||||
this.filterClick.emit(this.currentFilter);
|
||||
this.filterSelected.emit(this.currentFilter);
|
||||
} else {
|
||||
this.currentFilter = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Selects and emits the clicked filter.
|
||||
*/
|
||||
public onFilterClick(filter: FilterParamsModel) {
|
||||
if (filter) {
|
||||
this.selectFilter(filter);
|
||||
this.filterClicked.emit(this.currentFilter);
|
||||
} else {
|
||||
this.currentFilter = undefined;
|
||||
}
|
||||
|
@@ -254,22 +254,35 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
|
||||
}));
|
||||
|
||||
it('should emit an event when a filter is selected', async(() => {
|
||||
it('should emit the selected filter based on the filterParam input', async(() => {
|
||||
spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
spyOn(component.filterSelected, 'emit');
|
||||
|
||||
component.filterParam = { id: '12' };
|
||||
const filterParam = { id: '10' };
|
||||
const change = new SimpleChange(null, filterParam, true);
|
||||
component.filterParam = filterParam;
|
||||
|
||||
const appName = 'my-app-1';
|
||||
const change = new SimpleChange(null, appName, true);
|
||||
component.ngOnChanges({ 'appName': change });
|
||||
component.ngOnChanges({ 'filterParam': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(component.filterSelected.emit).toHaveBeenCalledWith(fakeGlobalFilter[0]);
|
||||
}));
|
||||
|
||||
it('should filterClicked emit when a filter is clicked from the UI', async () => {
|
||||
spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
spyOn(component.filterClicked, 'emit');
|
||||
|
||||
fixture.detectChanges();
|
||||
spyOn(component, 'selectFilterAndEmit').and.stub();
|
||||
const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalFilter[1].key}_filter"]`);
|
||||
await fixture.whenStable();
|
||||
|
||||
const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalFilter[0].key}_filter"]`);
|
||||
filterButton.click();
|
||||
expect(component.selectFilterAndEmit).toHaveBeenCalledWith(fakeGlobalFilter[1]);
|
||||
}));
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(component.filterClicked.emit).toHaveBeenCalledWith(fakeGlobalFilter[0]);
|
||||
});
|
||||
|
||||
it('should reset the filter when the param is undefined', async(() => {
|
||||
spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
|
@@ -29,9 +29,13 @@ import { BaseTaskFiltersCloudComponent } from './base-task-filters-cloud.compone
|
||||
styleUrls: ['base-task-filters-cloud.component.scss']
|
||||
})
|
||||
export class TaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent implements OnInit, OnChanges {
|
||||
/** Emitted when a filter in the list is clicked. */
|
||||
/** Emitted when a filter is being selected based on the filterParam input. */
|
||||
@Output()
|
||||
filterClick = new EventEmitter<TaskFilterCloudModel>();
|
||||
filterSelected = new EventEmitter<TaskFilterCloudModel>();
|
||||
|
||||
/** Emitted when a filter is being clicked from the UI. */
|
||||
@Output()
|
||||
filterClicked = new EventEmitter<TaskFilterCloudModel>();
|
||||
|
||||
filters$: Observable<TaskFilterCloudModel[]>;
|
||||
filters: TaskFilterCloudModel[] = [];
|
||||
@@ -90,7 +94,19 @@ export class TaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent imp
|
||||
public selectFilterAndEmit(newParamFilter: FilterParamsModel) {
|
||||
if (newParamFilter) {
|
||||
this.selectFilter(newParamFilter);
|
||||
this.filterClick.emit(this.currentFilter);
|
||||
this.filterSelected.emit(this.currentFilter);
|
||||
} else {
|
||||
this.currentFilter = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Selects and emits the clicked filter.
|
||||
*/
|
||||
public onFilterClick(filter: FilterParamsModel) {
|
||||
if (filter) {
|
||||
this.selectFilter(filter);
|
||||
this.filterClicked.emit(this.currentFilter);
|
||||
} else {
|
||||
this.currentFilter = undefined;
|
||||
}
|
||||
|
@@ -22,7 +22,7 @@ export const fakeGlobalFilter = [
|
||||
name: 'FakeInvolvedTasks',
|
||||
key: 'fake-involved-tasks',
|
||||
icon: 'adjust',
|
||||
id: 10,
|
||||
id: '10',
|
||||
status: 'open',
|
||||
assignee: 'fake-involved'
|
||||
}),
|
||||
@@ -30,7 +30,7 @@ export const fakeGlobalFilter = [
|
||||
name: 'FakeMyTasks1',
|
||||
key: 'fake-my-tast1',
|
||||
icon: 'done',
|
||||
id: 11,
|
||||
id: '11',
|
||||
status: 'open',
|
||||
assignee: 'fake-assignee'
|
||||
}),
|
||||
@@ -38,7 +38,7 @@ export const fakeGlobalFilter = [
|
||||
name: 'FakeMyTasks2',
|
||||
key: 'fake-my-tast2',
|
||||
icon: 'inbox',
|
||||
id: 12,
|
||||
id: '12',
|
||||
status: 'open',
|
||||
assignee: 'fake-assignee'
|
||||
})
|
||||
|
Reference in New Issue
Block a user