;
let queryBuilder: SearchQueryBuilderService;
- setupTestBed( {
- imports: [
- MatMenuModule,
- TranslateModule.forRoot(),
- ContentTestingModule
- ]
- });
+ setupTestBed({
+ imports: [
+ MatMenuModule,
+ TranslateModule.forRoot(),
+ ContentTestingModule
+ ]
+ });
beforeEach(() => {
queryBuilder = TestBed.inject(SearchQueryBuilderService);
@@ -46,23 +46,35 @@ describe('SearchWidgetChipComponent', () => {
component.category = simpleCategories[1];
fixture.detectChanges();
- });
+ });
- it('should update search query on apply click', () => {
+ it('should update search query on apply click', () => {
const chip = fixture.debugElement.query(By.css('mat-chip'));
chip.triggerEventHandler('click', { stopPropagation: () => null });
fixture.detectChanges();
const applyButton = fixture.debugElement.query(By.css('#apply-filter-button'));
applyButton.triggerEventHandler('click', {});
expect(queryBuilder.update).toHaveBeenCalled();
- });
+ });
- it('should update search query on cancel click', () => {
+ it('should update search query on cancel click', () => {
const chip = fixture.debugElement.query(By.css('mat-chip'));
chip.triggerEventHandler('click', { stopPropagation: () => null });
fixture.detectChanges();
const applyButton = fixture.debugElement.query(By.css('#cancel-filter-button'));
applyButton.triggerEventHandler('click', {});
expect(queryBuilder.update).toHaveBeenCalled();
- });
+ });
+
+ it('should display arrow down icon', () => {
+ const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
+ expect(icon).toEqual('keyboard_arrow_down');
+ });
+
+ it('should display arrow up icon when menu is opened', () => {
+ component.onMenuOpen();
+ fixture.detectChanges();
+ const icon = fixture.debugElement.query(By.css('mat-chip mat-icon')).nativeElement.innerText;
+ expect(icon).toEqual('keyboard_arrow_up');
+ });
});
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
index 818f3860dd..d8da8e3039 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts
@@ -41,6 +41,7 @@ export class SearchWidgetChipComponent {
widgetContainerComponent: SearchWidgetContainerComponent;
focusTrap: ConfigurableFocusTrap;
+ chipIcon = 'keyboard_arrow_down';
constructor(private focusTrapFactory: ConfigurableFocusTrapFactory) {}
@@ -48,11 +49,13 @@ export class SearchWidgetChipComponent {
if (this.menuContainer && !this.focusTrap) {
this.focusTrap = this.focusTrapFactory.create(this.menuContainer.nativeElement);
}
+ this.chipIcon = 'keyboard_arrow_up';
}
onClosed() {
this.focusTrap.destroy();
this.focusTrap = null;
+ this.chipIcon = 'keyboard_arrow_down';
}
onRemove() {
diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
index feb2b02cc6..05606fad33 100644
--- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
+++ b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
@@ -14,13 +14,4 @@
[onReset]="resetObservable"
(phrasesChanged)="onPhraseChange($event, LogicalSearchFields.EXCLUDE)">
-
-
-
-
-
diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts
index de39a7309d..dc08d69c5a 100644
--- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts
+++ b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts
@@ -64,12 +64,6 @@ describe('SearchLogicalFilterComponent', () => {
fixture.detectChanges();
}
- function clickApplyBtn() {
- const applyBtn: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="logical-filter-btn-apply"]')).nativeElement;
- applyBtn.click();
- fixture.detectChanges();
- }
-
it('should update display value on init', () => {
spyOn(component.displayValue$, 'next');
component.ngOnInit();
@@ -122,14 +116,13 @@ describe('SearchLogicalFilterComponent', () => {
expect(component.displayValue$.next).toHaveBeenCalled();
});
- it('should reset value and display value when reset button is clicked', () => {
+ it('should reset value and display value when reset is called', () => {
const searchCondition: LogicalSearchCondition = { matchAll: ['test1'], matchAny: ['test2'], exclude: ['test3'] };
component.setValue(searchCondition);
fixture.detectChanges();
spyOn(component.context, 'update');
spyOn(component.displayValue$, 'next');
- const resetBtn: HTMLButtonElement = fixture.debugElement.query(By.css('[data-automation-id="logical-filter-btn-clear"]')).nativeElement;
- resetBtn.click();
+ component.reset();
expect(component.context.queryFragments[component.id]).toBe('');
expect(component.context.update).toHaveBeenCalled();
expect(component.getCurrentValue()).toEqual({ matchAll: [], matchAny: [], exclude: [] });
@@ -140,7 +133,7 @@ describe('SearchLogicalFilterComponent', () => {
spyOn(component.context, 'update');
enterNewPhrase('test1', 0);
enterNewPhrase('test2', 0);
- clickApplyBtn();
+ component.submitValues();
expect(component.context.update).toHaveBeenCalled();
expect(component.context.queryFragments[component.id]).toBe('((field1:"test1" AND field1:"test2") OR (field2:"test1" AND field2:"test2"))');
});
@@ -149,7 +142,7 @@ describe('SearchLogicalFilterComponent', () => {
spyOn(component.context, 'update');
enterNewPhrase('test3', 1);
enterNewPhrase('test4', 1);
- clickApplyBtn();
+ component.submitValues();
expect(component.context.update).toHaveBeenCalled();
expect(component.context.queryFragments[component.id]).toBe('((field1:"test3" OR field1:"test4") OR (field2:"test3" OR field2:"test4"))');
});
@@ -158,7 +151,7 @@ describe('SearchLogicalFilterComponent', () => {
spyOn(component.context, 'update');
enterNewPhrase('test5', 2);
enterNewPhrase('test6', 2);
- clickApplyBtn();
+ component.submitValues();
expect(component.context.update).toHaveBeenCalled();
expect(component.context.queryFragments[component.id]).toBe('((NOT field1:"test5" AND NOT field1:"test6") AND (NOT field2:"test5" AND NOT field2:"test6"))');
});
@@ -168,7 +161,7 @@ describe('SearchLogicalFilterComponent', () => {
enterNewPhrase('test1', 0);
enterNewPhrase('test2', 1);
enterNewPhrase('test3', 2);
- clickApplyBtn();
+ component.submitValues();
const subQuery1 = '((field1:"test1") OR (field2:"test1"))';
const subQuery2 = '((field1:"test2") OR (field2:"test2"))';
const subQuery3 = '((NOT field1:"test3") AND (NOT field2:"test3"))';