Skip to content

Commit

Permalink
Merge pull request #2686 from ita-social-projects/bugfix/#5600/#5602/…
Browse files Browse the repository at this point in the history 
…Events-filter

bugfix/#5600/#5602/Fixed the event filters.
  • Loading branch information
@hnativlyubomyr
hnativlyubomyr authored Sep 18, 2023
2 parents 8fac83a + 8347319 commit 2ade3cb
Show file tree
Hide file tree
Showing 9 changed files with 228 additions and 118 deletions.
26 changes: 17 additions & 9 deletions src/app/main/component/events/components/events-list/events-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@
<div class="dropdown" (click)="timeFilter.open()">
<mat-label class="filter">{{ 'homepage.events.time' | translate }}</mat-label>
<mat-select #timeFilter [formControl]="timeFilterControl" multiple>
<mat-option [value]="0" (click)="toggleAllSelection(timeList, 'timeList')">
<mat-option [value]="0" (click)="toggleAllSelection(timeList, 'eventTime')">
{{ 'homepage.events.time-any-time' | translate }}
</mat-option>
<mat-divider></mat-divider>
<mat-option
[value]="eventTime"
*ngFor="let eventTime of eventTimeList"
(onSelectionChange)="updateSelectedFilters(eventTime, $event)"
(onSelectionChange)="updateSelectedFilters(eventTime, $event, timeList, 'eventTime', eventTimeList)"
>
{{ getLangValue(eventTime.nameUa, eventTime.nameEn) }}
</mat-option>
Expand All @@ -41,14 +41,14 @@
<div class="dropdown" (click)="locationFilter.open()">
<mat-label class="filter">{{ 'homepage.events.filter-location' | translate }}</mat-label>
<mat-select #locationFilter [formControl]="locationFilterControl" multiple>
<mat-option [value]="0" (click)="toggleAllSelection(locationList, 'locationList')">{{
<mat-option [value]="0" (click)="toggleAllSelection(locationList, 'cities')">{{
'homepage.events.filter-location-аny-location' | translate
}}</mat-option>
<mat-divider></mat-divider>
<mat-option
[value]="location"
*ngFor="let location of eventLocationList"
(onSelectionChange)="updateSelectedFilters(location, $event)"
(onSelectionChange)="updateSelectedFilters(location, $event, locationList, 'cities', eventLocationList)"
>
{{ getLangValue(location.nameUa, location.nameEn) }}
</mat-option>
Expand All @@ -57,23 +57,31 @@
<div class="dropdown" (click)="statusFilter.open()">
<mat-label class="filter">{{ 'homepage.events.filter-status' | translate }}</mat-label>
<mat-select #statusFilter [formControl]="statusFilterControl" multiple>
<mat-option [value]="0" (click)="toggleAllSelection(statusesList, 'statusList')">{{
<mat-option [value]="0" (click)="toggleAllSelection(statusesList, 'statuses')">{{
'homepage.events.filter-status-аny-status' | translate
}}</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="status" *ngFor="let status of statusList" (onSelectionChange)="updateSelectedFilters(status, $event)">
<mat-option
[value]="status"
*ngFor="let status of statusList"
(onSelectionChange)="updateSelectedFilters(status, $event, statusesList, 'statuses', statusList)"
>
{{ getLangValue(status.nameUa, status.nameEn) }}
</mat-option>
</mat-select>
</div>
<div class="dropdown" (click)="typeFilter.open()">
<mat-label class="filter">{{ 'homepage.events.filter-type' | translate }}</mat-label>
<mat-select #typeFilter [formControl]="typeFilterControl" multiple>
<mat-option [value]="0" (click)="toggleAllSelection(typesList, 'typeList')">{{
<mat-option [value]="0" (click)="toggleAllSelection(typesList, 'tags')">{{
'homepage.events.filter-аny-type' | translate
}}</mat-option>
<mat-divider></mat-divider>
<mat-option *ngFor="let type of typeList" [value]="type" (onSelectionChange)="updateSelectedFilters(type, $event)">
<mat-option
*ngFor="let type of typeList"
[value]="type"
(onSelectionChange)="updateSelectedFilters(type, $event, typesList, 'tags', typeList)"
>
<span>{{ getLangValue(type.nameUa, type.nameEn) }}</span>
</mat-option>
</mat-select>
Expand All @@ -86,7 +94,7 @@
<hr />
<div class="active-filter-container">
<p>
{{ 'homepage.events.item-found-text' | translate }} {{ selectedFilters.length }}
{{ 'homepage.events.item-found-text' | translate }} {{ remaining }}
{{ 'homepage.events.items-event-text' | translate }}
</p>
<div class="chips">
Expand Down
79 changes: 29 additions & 50 deletions src/app/main/component/events/components/events-list/events-list.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,20 @@ import { Store } from '@ngrx/store';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { eventStatusList, TagsArray, eventTimeList } from '../../models/event-consts';
import { By } from '@angular/platform-browser';
import { MatOption } from '@angular/material/core';
import { MatOption, MatOptionSelectionChange } from '@angular/material/core';
import { FormControl } from '@angular/forms';
import { EventPageResponceDto } from '../../models/events.interface';

describe('EventsListComponent', () => {
let component: EventsListComponent;
let fixture: ComponentFixture<EventsListComponent>;

const eventStatusList = [
{ nameEn: 'Open', nameUa: 'Відкритa' },
{ nameEn: 'Closed', nameUa: 'Закритa' },
{ nameEn: 'Joined', nameUa: 'Вже доєднані' },
{ nameEn: 'Created', nameUa: 'Створенa' },
{ nameEn: 'Saved', nameUa: 'Збережена' }
];
const MockReqest = {
page: [],
totalElements: 4
Expand Down Expand Up @@ -223,7 +229,7 @@ describe('EventsListComponent', () => {
{ nameEn: 'two', nameUa: 'два' },
{ nameEn: 'three', nameUa: 'три' }
];
const filterRemoved = [{ nameEn: 'three', nameUa: 'три' }];
const filterRemoved = { nameEn: 'three', nameUa: 'три' };
const res = [
{ nameEn: 'one', nameUa: 'один' },
{ nameEn: 'two', nameUa: 'два' }
Expand All @@ -240,6 +246,7 @@ describe('EventsListComponent', () => {
expect(spy).toHaveBeenCalledTimes(1);
expect(component.selectedFilters).toEqual(res);
});

it('should check weather getUniqueCities works correctly', () => {
const expected = [
{ nameEn: 'Kyiv', nameUa: 'Київ' },
Expand Down Expand Up @@ -280,57 +287,29 @@ describe('EventsListComponent', () => {
});
});

it('should subscribe to form control changes for all form controls', () => {
component.timeFilterControl = timeFilterControl;
component.locationFilterControl = locationFilterControl;
component.statusFilterControl = statusFilterControl;
component.typeFilterControl = typeFilterControl;

const spy = spyOn(component, 'updateSelectedFilters');

component.subscribeOnFormControlsChanges();

timeFilterControl.setValue('Some value');
locationFilterControl.setValue('Some value');
statusFilterControl.setValue('Some value');
typeFilterControl.setValue('Some value');

expect(spy).toHaveBeenCalledTimes(4);
});

it('should remove existing filter when deselected', () => {
component.selectedFilters = ['filter1', 'filter2'];
const mockEvent = { isUserInput: true, source: { selected: false } };
component.updateSelectedFilters('filter1', mockEvent);
expect(component.selectedFilters).toEqual(['filter2']);
let mockEvent: MatOptionSelectionChange = {
isUserInput: true,
source: { selected: true } as MatOption
};
component.updateSelectedFilters(eventStatusList[0], mockEvent, component.statusesList, 'statuses', component.statusList);
component.updateSelectedFilters(eventStatusList[1], mockEvent, component.statusesList, 'statuses', component.statusList);
mockEvent = { isUserInput: true, source: { selected: false } as MatOption };
component.updateSelectedFilters(eventStatusList[1], mockEvent, component.statusesList, 'statuses', component.statusList);
expect(component.selectedFilters).toEqual([{ nameEn: 'Open', nameUa: 'Відкритa' }]);
});

it('should add new filter when selected', () => {
component.selectedFilters = ['filter1', 'filter2'];
const mockEvent = { isUserInput: true, source: { selected: true } };
component.updateSelectedFilters('filter3', mockEvent);
expect(component.selectedFilters).toEqual(['filter1', 'filter2', 'filter3']);
});

it('should not modify selectedFilters when no user input', () => {
component.selectedFilters = ['filter1', 'filter2'];
const mockEvent = { isUserInput: false, source: { selected: true } };
component.updateSelectedFilters('filter3', mockEvent);
expect(component.selectedFilters).toEqual(['filter1', 'filter2']);
});

it('should not modify selectedFilters when already deselected', () => {
component.selectedFilters = ['filter1', 'filter2'];
const mockEvent = { isUserInput: true, source: { selected: false } };
component.updateSelectedFilters('filter3', mockEvent);
expect(component.selectedFilters).toEqual(['filter1', 'filter2']);
});

it('should not modify selectedFilters when already selected', () => {
component.selectedFilters = ['filter1', 'filter2'];
const mockEvent = { isUserInput: true, source: { selected: true } };
component.updateSelectedFilters('filter2', mockEvent);
expect(component.selectedFilters).toEqual(['filter1', 'filter2']);
const mockEvent: MatOptionSelectionChange = {
isUserInput: true,
source: { selected: true } as MatOption
};
component.updateSelectedFilters(eventStatusList[0], mockEvent, component.statusesList, 'statuses', component.statusList);
component.updateSelectedFilters(eventStatusList[1], mockEvent, component.statusesList, 'statuses', component.statusList);
expect(component.selectedFilters).toEqual([
{ nameEn: 'Open', nameUa: 'Відкритa' },
{ nameEn: 'Closed', nameUa: 'Закритa' }
]);
});

it('should check weather search works correctly', () => {
Expand Down
Loading

0 comments on commit 2ade3cb

Please sign in to comment.