From f977acab05aa56697353ce7ce2ca2e089b8d0131 Mon Sep 17 00:00:00 2001
From: Tim Cremer <65229601+cremertim@users.noreply.github.com>
Date: Sat, 12 Oct 2024 13:27:54 +0200
Subject: [PATCH] Communication: Add FAQ search bar (#9423)

---
 src/main/webapp/app/faq/faq.component.html    |  5 ++-
 src/main/webapp/app/faq/faq.component.ts      | 29 ++++++++++++++---
 src/main/webapp/app/faq/faq.service.ts        |  9 ++++++
 .../course-faq/course-faq.component.html      |  5 +--
 .../course-faq/course-faq.component.ts        | 32 +++++++++++++++----
 .../webapp/app/overview/courses.module.ts     |  2 ++
 .../search-filter/search-filter.component.ts  |  3 ++
 src/main/webapp/app/shared/shared.module.ts   |  3 --
 .../app/shared/sidebar/sidebar.module.ts      |  2 ++
 .../course/course-exercises.component.spec.ts |  2 +-
 .../exam-navigation-sidebar.component.spec.ts |  3 +-
 .../spec/component/faq/faq.component.spec.ts  | 26 +++++++++++----
 .../course-exams.component.spec.ts            |  4 +--
 .../course-faq/course-faq.component.spec.ts   | 30 +++++++++++++++--
 .../course-lectures.component.spec.ts         |  2 +-
 .../shared/search-filter.component.spec.ts    |  5 ++-
 .../sidebar-accordion.component.spec.ts       |  1 +
 .../course-tutorial-groups.component.spec.ts  |  4 +--
 .../spec/service/faq.service.spec.ts          |  9 ++++++
 19 files changed, 141 insertions(+), 35 deletions(-)

diff --git a/src/main/webapp/app/faq/faq.component.html b/src/main/webapp/app/faq/faq.component.html
index 94bdab39fb48..157c9a8a8708 100644
--- a/src/main/webapp/app/faq/faq.component.html
+++ b/src/main/webapp/app/faq/faq.component.html
@@ -5,7 +5,10 @@ <h2 id="page-heading">
                 <span jhiTranslate="artemisApp.faq.home.title"></span>
             </h2>
         </div>
-        <div class="d-flex flex-row-reverse bd-highlight mb-3">
+        <div class="d-flex justify-content-between bd-highlight mb-3 gap-2">
+            <div class="flex-grow-1">
+                <jhi-search-filter (newSearchEvent)="setSearchValue($event)" />
+            </div>
             <div aria-label="Button group with nested dropdown" class="btn-group" role="group">
                 <div class="me-2" aria-label="Filter Dropdown" ngbDropdown>
                     <button
diff --git a/src/main/webapp/app/faq/faq.component.ts b/src/main/webapp/app/faq/faq.component.ts
index 3790932a47a8..0a8c1df808f8 100644
--- a/src/main/webapp/app/faq/faq.component.ts
+++ b/src/main/webapp/app/faq/faq.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { Faq } from 'app/entities/faq.model';
 import { faEdit, faFilter, faPencilAlt, faPlus, faSort, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Subject } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { debounceTime, map } from 'rxjs/operators';
 import { AlertService } from 'app/core/util/alert.service';
 import { ActivatedRoute } from '@angular/router';
 import { FaqService } from 'app/faq/faq.service';
@@ -15,13 +15,14 @@ import { CustomExerciseCategoryBadgeComponent } from 'app/shared/exercise-catego
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
+import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 
 @Component({
     selector: 'jhi-faq',
     templateUrl: './faq.component.html',
     styleUrls: [],
     standalone: true,
-    imports: [ArtemisSharedModule, CustomExerciseCategoryBadgeComponent, ArtemisSharedComponentModule, ArtemisMarkdownModule],
+    imports: [ArtemisSharedModule, CustomExerciseCategoryBadgeComponent, ArtemisSharedComponentModule, ArtemisMarkdownModule, SearchFilterComponent],
 })
 export class FaqComponent implements OnInit, OnDestroy {
     faqs: Faq[];
@@ -34,6 +35,7 @@ export class FaqComponent implements OnInit, OnDestroy {
     dialogError$ = this.dialogErrorSource.asObservable();
 
     activeFilters = new Set<string>();
+    searchInput = new BehaviorSubject<string>('');
     predicate: string;
     ascending: boolean;
 
@@ -59,10 +61,14 @@ export class FaqComponent implements OnInit, OnDestroy {
         this.courseId = Number(this.route.snapshot.paramMap.get('courseId'));
         this.loadAll();
         this.loadCourseFaqCategories(this.courseId);
+        this.searchInput.pipe(debounceTime(300)).subscribe((searchTerm: string) => {
+            this.refreshFaqList(searchTerm);
+        });
     }
 
     ngOnDestroy(): void {
         this.dialogErrorSource.complete();
+        this.searchInput.complete();
     }
 
     deleteFaq(courseId: number, faqId: number) {
@@ -80,7 +86,7 @@ export class FaqComponent implements OnInit, OnDestroy {
 
     toggleFilters(category: string) {
         this.activeFilters = this.faqService.toggleFilter(category, this.activeFilters);
-        this.applyFilters();
+        this.refreshFaqList(this.searchInput.getValue());
     }
 
     private applyFilters(): void {
@@ -121,4 +127,19 @@ export class FaqComponent implements OnInit, OnDestroy {
         });
         this.applyFilters();
     }
+
+    private applySearch(searchTerm: string) {
+        this.filteredFaqs = this.filteredFaqs.filter((faq) => {
+            return this.faqService.hasSearchTokens(faq, searchTerm);
+        });
+    }
+
+    setSearchValue(searchValue: string) {
+        this.searchInput.next(searchValue);
+    }
+
+    refreshFaqList(searchTerm: string) {
+        this.applyFilters();
+        this.applySearch(searchTerm);
+    }
 }
diff --git a/src/main/webapp/app/faq/faq.service.ts b/src/main/webapp/app/faq/faq.service.ts
index d0c80cf72e94..bcdd824c671c 100644
--- a/src/main/webapp/app/faq/faq.service.ts
+++ b/src/main/webapp/app/faq/faq.service.ts
@@ -137,4 +137,13 @@ export class FaqService {
             return categories.some((category) => filteredCategory.has(category!));
         }
     }
+
+    hasSearchTokens(faq: Faq, searchTerm: string): boolean {
+        if (searchTerm === '') {
+            return true;
+        }
+        const tokens = searchTerm.toLowerCase().split(' ');
+        const faqText = `${faq.questionTitle ?? ''} ${faq.questionAnswer ?? ''}`.toLowerCase();
+        return tokens.every((token) => faqText.includes(token));
+    }
 }
diff --git a/src/main/webapp/app/overview/course-faq/course-faq.component.html b/src/main/webapp/app/overview/course-faq/course-faq.component.html
index c94960161ee4..115efb80cc1c 100644
--- a/src/main/webapp/app/overview/course-faq/course-faq.component.html
+++ b/src/main/webapp/app/overview/course-faq/course-faq.component.html
@@ -1,6 +1,7 @@
 <div>
-    <div class="input-group mb-2 rounded-3 p-2 me-2 module-bg" style="display: flex; justify-content: end">
-        <div class="me-2" aria-label="Filter Dropdown" ngbDropdown>
+    <div class="input-group mb-2 rounded-3 p-2 me-2 module-bg d-flex justify-content-between">
+        <jhi-search-filter class="flex-grow-1" (newSearchEvent)="setSearchValue($event)" />
+        <div class="ms-2 me-2" aria-label="Filter Dropdown" ngbDropdown>
             <button class="btn" [ngClass]="{ 'btn-secondary': activeFilters.size === 0, 'btn-success': activeFilters.size > 0 }" ngbDropdownToggle id="filter-dropdown-button">
                 <fa-icon [icon]="faFilter" />
                 <span class="d-s-none d-md-inline" jhiTranslate="artemisApp.courseOverview.exerciseList.filter" [translateValues]="{ num: activeFilters.size }"></span>
diff --git a/src/main/webapp/app/overview/course-faq/course-faq.component.ts b/src/main/webapp/app/overview/course-faq/course-faq.component.ts
index 51ce0a81b3b2..03fd207fda21 100644
--- a/src/main/webapp/app/overview/course-faq/course-faq.component.ts
+++ b/src/main/webapp/app/overview/course-faq/course-faq.component.ts
@@ -1,10 +1,9 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs/operators';
-import { Subject, Subscription } from 'rxjs';
+import { debounceTime, map } from 'rxjs/operators';
+import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { faFilter } from '@fortawesome/free-solid-svg-icons';
 import { ButtonType } from 'app/shared/components/button.component';
-import { SidebarData } from 'app/types/sidebar';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { CourseFaqAccordionComponent } from 'app/overview/course-faq/course-faq-accordion-component';
@@ -16,6 +15,7 @@ import { FaqCategory } from 'app/entities/faq-category.model';
 import { loadCourseFaqCategories } from 'app/faq/faq.utils';
 import { CustomExerciseCategoryBadgeComponent } from 'app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component';
 import { onError } from 'app/shared/util/global.utils';
+import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 
 @Component({
     selector: 'jhi-course-faq',
@@ -23,7 +23,7 @@ import { onError } from 'app/shared/util/global.utils';
     styleUrls: ['../course-overview.scss', 'course-faq.component.scss'],
     encapsulation: ViewEncapsulation.None,
     standalone: true,
-    imports: [ArtemisSharedComponentModule, ArtemisSharedModule, CourseFaqAccordionComponent, CustomExerciseCategoryBadgeComponent],
+    imports: [ArtemisSharedComponentModule, ArtemisSharedModule, CourseFaqAccordionComponent, CustomExerciseCategoryBadgeComponent, SearchFilterComponent],
 })
 export class CourseFaqComponent implements OnInit, OnDestroy {
     private ngUnsubscribe = new Subject<void>();
@@ -36,10 +36,11 @@ export class CourseFaqComponent implements OnInit, OnDestroy {
     existingCategories: FaqCategory[];
     activeFilters = new Set<string>();
 
-    sidebarData: SidebarData;
     hasCategories = false;
     isCollapsed = false;
 
+    searchInput = new BehaviorSubject<string>('');
+
     readonly ButtonType = ButtonType;
 
     // Icons
@@ -56,6 +57,9 @@ export class CourseFaqComponent implements OnInit, OnDestroy {
             this.loadFaqs();
             this.loadCourseExerciseCategories(this.courseId);
         });
+        this.searchInput.pipe(debounceTime(300)).subscribe((searchTerm: string) => {
+            this.refreshFaqList(searchTerm);
+        });
     }
 
     private loadCourseExerciseCategories(courseId: number) {
@@ -82,14 +86,30 @@ export class CourseFaqComponent implements OnInit, OnDestroy {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
         this.parentParamSubscription?.unsubscribe();
+        this.searchInput.complete();
     }
 
     toggleFilters(category: string) {
         this.activeFilters = this.faqService.toggleFilter(category, this.activeFilters);
-        this.applyFilters();
+        this.refreshFaqList(this.searchInput.getValue());
     }
 
     private applyFilters(): void {
         this.filteredFaqs = this.faqService.applyFilters(this.activeFilters, this.faqs);
     }
+
+    private applySearch(searchTerm: string) {
+        this.filteredFaqs = this.filteredFaqs.filter((faq) => {
+            return this.faqService.hasSearchTokens(faq, searchTerm);
+        });
+    }
+
+    setSearchValue(searchValue: string) {
+        this.searchInput.next(searchValue);
+    }
+
+    refreshFaqList(searchTerm: string) {
+        this.applyFilters();
+        this.applySearch(searchTerm);
+    }
 }
diff --git a/src/main/webapp/app/overview/courses.module.ts b/src/main/webapp/app/overview/courses.module.ts
index 01e27a171163..5dbae0d30fde 100644
--- a/src/main/webapp/app/overview/courses.module.ts
+++ b/src/main/webapp/app/overview/courses.module.ts
@@ -19,6 +19,7 @@ import { ArtemisCourseExerciseRowModule } from 'app/overview/course-exercises/co
 import { NgxChartsModule, PieChartModule } from '@swimlane/ngx-charts';
 import { CourseUnenrollmentModalComponent } from 'app/overview/course-unenrollment-modal.component';
 import { ArtemisSidebarModule } from 'app/shared/sidebar/sidebar.module';
+import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 
 @NgModule({
     imports: [
@@ -36,6 +37,7 @@ import { ArtemisSidebarModule } from 'app/shared/sidebar/sidebar.module';
         NgxChartsModule,
         PieChartModule,
         ArtemisSidebarModule,
+        SearchFilterComponent,
     ],
     declarations: [
         CoursesComponent,
diff --git a/src/main/webapp/app/shared/search-filter/search-filter.component.ts b/src/main/webapp/app/shared/search-filter/search-filter.component.ts
index b71bb54f850e..941017433864 100644
--- a/src/main/webapp/app/shared/search-filter/search-filter.component.ts
+++ b/src/main/webapp/app/shared/search-filter/search-filter.component.ts
@@ -1,11 +1,14 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { faMagnifyingGlass, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
 
 @Component({
     selector: 'jhi-search-filter',
     templateUrl: './search-filter.component.html',
     styleUrls: ['./search-filter.component.scss'],
+    standalone: true,
+    imports: [ArtemisSharedModule],
 })
 export class SearchFilterComponent {
     faMagnifyingGlass = faMagnifyingGlass;
diff --git a/src/main/webapp/app/shared/shared.module.ts b/src/main/webapp/app/shared/shared.module.ts
index ed2bf4cc9dfd..9c0e71a1bc90 100644
--- a/src/main/webapp/app/shared/shared.module.ts
+++ b/src/main/webapp/app/shared/shared.module.ts
@@ -27,7 +27,6 @@ import { StickyPopoverDirective } from 'app/shared/sticky-popover/sticky-popover
 import { ConfirmEntityNameComponent } from 'app/shared/confirm-entity-name/confirm-entity-name.component';
 import { DetailOverviewNavigationBarComponent } from 'app/shared/detail-overview-navigation-bar/detail-overview-navigation-bar.component';
 import { ScienceDirective } from 'app/shared/science/science.directive';
-import { SearchFilterComponent } from './search-filter/search-filter.component';
 
 @NgModule({
     imports: [ArtemisSharedLibsModule, ArtemisSharedCommonModule, ArtemisSharedPipesModule, RouterModule],
@@ -56,7 +55,6 @@ import { SearchFilterComponent } from './search-filter/search-filter.component';
         AssessmentWarningComponent,
         StickyPopoverDirective,
         ScienceDirective,
-        SearchFilterComponent,
     ],
     exports: [
         ArtemisSharedLibsModule,
@@ -87,7 +85,6 @@ import { SearchFilterComponent } from './search-filter/search-filter.component';
         CompetencySelectionComponent,
         StickyPopoverDirective,
         ScienceDirective,
-        SearchFilterComponent,
     ],
 })
 export class ArtemisSharedModule {}
diff --git a/src/main/webapp/app/shared/sidebar/sidebar.module.ts b/src/main/webapp/app/shared/sidebar/sidebar.module.ts
index cc34473eb48f..fdb5efb40bff 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar.module.ts
+++ b/src/main/webapp/app/shared/sidebar/sidebar.module.ts
@@ -16,6 +16,7 @@ import { SidebarCardDirective } from 'app/shared/sidebar/sidebar-card.directive'
 import { ConversationOptionsComponent } from 'app/shared/sidebar/conversation-options/conversation-options.component';
 import { AccordionAddOptionsComponent } from 'app/shared/sidebar/accordion-add-options/accordion-add-options.component';
 import { ArtemisExamSharedModule } from 'app/exam/shared/exam-shared.module';
+import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 
 @NgModule({
     imports: [
@@ -28,6 +29,7 @@ import { ArtemisExamSharedModule } from 'app/exam/shared/exam-shared.module';
         SubmissionResultStatusModule,
         SidebarCardDirective,
         ArtemisExamSharedModule,
+        SearchFilterComponent,
     ],
     declarations: [
         SidebarAccordionComponent,
diff --git a/src/test/javascript/spec/component/course/course-exercises.component.spec.ts b/src/test/javascript/spec/component/course/course-exercises.component.spec.ts
index 0fe1c7509d2d..8f8f1634603e 100644
--- a/src/test/javascript/spec/component/course/course-exercises.component.spec.ts
+++ b/src/test/javascript/spec/component/course/course-exercises.component.spec.ts
@@ -48,7 +48,6 @@ describe('CourseExercisesComponent', () => {
             declarations: [
                 CourseExercisesComponent,
                 SidebarComponent,
-                SearchFilterComponent,
                 MockDirective(OrionFilterDirective),
                 MockComponent(CourseExerciseRowComponent),
                 MockComponent(SidePanelComponent),
@@ -60,6 +59,7 @@ describe('CourseExercisesComponent', () => {
                 MockDirective(DeleteButtonDirective),
                 MockTranslateValuesDirective,
                 MockPipe(SearchFilterPipe),
+                MockComponent(SearchFilterComponent),
             ],
             providers: [
                 { provide: SessionStorageService, useClass: MockSyncStorage },
diff --git a/src/test/javascript/spec/component/exam/participate/exam-navigation-sidebar.component.spec.ts b/src/test/javascript/spec/component/exam/participate/exam-navigation-sidebar.component.spec.ts
index 3a9102c72e8e..2645f07b9ce2 100644
--- a/src/test/javascript/spec/component/exam/participate/exam-navigation-sidebar.component.spec.ts
+++ b/src/test/javascript/spec/component/exam/participate/exam-navigation-sidebar.component.spec.ts
@@ -21,6 +21,7 @@ import { facSaveSuccess, facSaveWarning } from 'src/main/webapp/content/icons/ic
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { ExamLiveEventsButtonComponent } from 'app/exam/participate/events/exam-live-events-button.component';
 import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module';
+import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 
 describe('ExamNavigationSidebarComponent', () => {
     let fixture: ComponentFixture<ExamNavigationSidebarComponent>;
@@ -35,7 +36,7 @@ describe('ExamNavigationSidebarComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, TranslateTestingModule, MockModule(NgbTooltipModule), MockModule(ArtemisSharedCommonModule)],
-            declarations: [ExamNavigationSidebarComponent, MockComponent(ExamTimerComponent), MockComponent(ExamLiveEventsButtonComponent)],
+            declarations: [ExamNavigationSidebarComponent, MockComponent(ExamTimerComponent), MockComponent(ExamLiveEventsButtonComponent), MockComponent(SearchFilterComponent)],
             providers: [
                 ExamParticipationService,
                 { provide: ExamExerciseUpdateService, useValue: mockExamExerciseUpdateService },
diff --git a/src/test/javascript/spec/component/faq/faq.component.spec.ts b/src/test/javascript/spec/component/faq/faq.component.spec.ts
index d31f60b8e2f2..d9f8b84c6cd5 100644
--- a/src/test/javascript/spec/component/faq/faq.component.spec.ts
+++ b/src/test/javascript/spec/component/faq/faq.component.spec.ts
@@ -1,5 +1,5 @@
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
-import { ComponentFixture, TestBed, fakeAsync, flush } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateService } from '@ngx-translate/core';
 import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
 import { MockComponent, MockModule, MockProvider } from 'ng-mocks';
@@ -93,6 +93,9 @@ describe('FaqComponent', () => {
                     applyFilters: () => {
                         return [faq2, faq3];
                     },
+                    hasSearchTokens: () => {
+                        return true;
+                    },
                 }),
             ],
         })
@@ -158,20 +161,31 @@ describe('FaqComponent', () => {
         expect(faqComponent.filteredFaqs).toEqual([faq2, faq3]);
     });
 
-    it('should catch error if no categories are found', fakeAsync(() => {
+    it('should catch error if no categories are found', () => {
         alertServiceStub = jest.spyOn(alertService, 'error');
         const error = { status: 404 };
         jest.spyOn(faqService, 'findAllCategoriesByCourseId').mockReturnValue(throwError(() => new HttpErrorResponse(error)));
         faqComponentFixture.detectChanges();
         expect(alertServiceStub).toHaveBeenCalledOnce();
-        flush();
-    }));
+    });
+
+    it('should search through already filtered array', () => {
+        const searchSpy = jest.spyOn(faqService, 'hasSearchTokens');
+        const applyFilterSpy = jest.spyOn(faqService, 'applyFilters');
+        faqComponent.setSearchValue('questionTitle');
+        faqComponent.refreshFaqList(faqComponent.searchInput.getValue());
+        expect(applyFilterSpy).toHaveBeenCalledOnce();
+        expect(searchSpy).toHaveBeenCalledTimes(2);
+        expect(searchSpy).toHaveBeenCalledWith(faq2, 'questionTitle');
+        expect(searchSpy).toHaveBeenCalledWith(faq3, 'questionTitle');
+        expect(faqComponent.filteredFaqs).toHaveLength(2);
+        expect(faqComponent.filteredFaqs).not.toContain(faq1);
+        expect(faqComponent.filteredFaqs).toEqual([faq2, faq3]);
+    });
 
     it('should call sortService when sortRows is called', () => {
         jest.spyOn(sortService, 'sortByProperty').mockReturnValue([]);
-
         faqComponent.sortRows();
-
         expect(sortService.sortByProperty).toHaveBeenCalledOnce();
     });
 });
diff --git a/src/test/javascript/spec/component/overview/course-exams/course-exams.component.spec.ts b/src/test/javascript/spec/component/overview/course-exams/course-exams.component.spec.ts
index e49832ad6990..c8a658a2ef65 100644
--- a/src/test/javascript/spec/component/overview/course-exams/course-exams.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-exams/course-exams.component.spec.ts
@@ -5,7 +5,7 @@ import { CourseExamsComponent } from 'app/overview/course-exams/course-exams.com
 import { Exam } from 'app/entities/exam/exam.model';
 import { ArtemisTestModule } from '../../../test.module';
 import dayjs from 'dayjs/esm';
-import { MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
+import { MockComponent, MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { Observable, of } from 'rxjs';
 import { ArtemisServerDateService } from 'app/shared/server-date.service';
 import { ExamParticipationService } from 'app/exam/participate/exam-participation.service';
@@ -101,7 +101,7 @@ describe('CourseExamsComponent', () => {
 
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, RouterModule.forRoot([]), MockModule(FormsModule), MockModule(ReactiveFormsModule), MockDirective(TranslateDirective)],
-            declarations: [CourseExamsComponent, SidebarComponent, SearchFilterComponent, MockPipe(ArtemisTranslatePipe), MockPipe(SearchFilterPipe)],
+            declarations: [CourseExamsComponent, SidebarComponent, MockComponent(SearchFilterComponent), MockPipe(ArtemisTranslatePipe), MockPipe(SearchFilterPipe)],
             providers: [
                 { provide: Router, useValue: router },
                 {
diff --git a/src/test/javascript/spec/component/overview/course-faq/course-faq.component.spec.ts b/src/test/javascript/spec/component/overview/course-faq/course-faq.component.spec.ts
index 6c5a21b56ddb..f7795a433603 100644
--- a/src/test/javascript/spec/component/overview/course-faq/course-faq.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-faq/course-faq.component.spec.ts
@@ -18,12 +18,13 @@ import { CustomExerciseCategoryBadgeComponent } from 'app/shared/exercise-catego
 import { CourseFaqAccordionComponent } from 'app/overview/course-faq/course-faq-accordion-component';
 import { Faq } from 'app/entities/faq.model';
 import { FaqCategory } from 'app/entities/faq-category.model';
+import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 
 function createFaq(id: number, category: string, color: string): Faq {
     const faq = new Faq();
     faq.id = id;
-    faq.questionTitle = 'questionTitle';
-    faq.questionAnswer = 'questionAnswer';
+    faq.questionTitle = 'questionTitle ' + id;
+    faq.questionAnswer = 'questionAnswer ' + id;
     faq.categories = [new FaqCategory(category, color)];
     return faq;
 }
@@ -48,7 +49,13 @@ describe('CourseFaqs', () => {
 
         TestBed.configureTestingModule({
             imports: [ArtemisSharedComponentModule, ArtemisSharedModule, MockComponent(CustomExerciseCategoryBadgeComponent), MockComponent(CourseFaqAccordionComponent)],
-            declarations: [CourseFaqComponent, MockPipe(ArtemisTranslatePipe), MockComponent(FaIconComponent), MockDirective(TranslateDirective)],
+            declarations: [
+                CourseFaqComponent,
+                MockPipe(ArtemisTranslatePipe),
+                MockComponent(FaIconComponent),
+                MockDirective(TranslateDirective),
+                MockComponent(SearchFilterComponent),
+            ],
             providers: [
                 MockProvider(FaqService),
                 { provide: Router, useClass: MockRouter },
@@ -84,6 +91,9 @@ describe('CourseFaqs', () => {
                     applyFilters: () => {
                         return [faq2, faq3];
                     },
+                    hasSearchTokens: () => {
+                        return true;
+                    },
                 }),
             ],
         })
@@ -125,6 +135,20 @@ describe('CourseFaqs', () => {
         expect(courseFaqComponent.filteredFaqs).toEqual([faq2, faq3]);
     });
 
+    it('should search through already filtered array', () => {
+        const searchSpy = jest.spyOn(faqService, 'hasSearchTokens');
+        const applyFilterSpy = jest.spyOn(faqService, 'applyFilters');
+        courseFaqComponent.setSearchValue('questionTitle');
+        courseFaqComponent.refreshFaqList(courseFaqComponent.searchInput.getValue());
+        expect(applyFilterSpy).toHaveBeenCalledOnce();
+        expect(searchSpy).toHaveBeenCalledTimes(2);
+        expect(searchSpy).toHaveBeenCalledWith(faq2, 'questionTitle');
+        expect(searchSpy).toHaveBeenCalledWith(faq3, 'questionTitle');
+        expect(courseFaqComponent.filteredFaqs).toHaveLength(2);
+        expect(courseFaqComponent.filteredFaqs).not.toContain(faq1);
+        expect(courseFaqComponent.filteredFaqs).toEqual([faq2, faq3]);
+    });
+
     it('should catch error if no categories are found', () => {
         alertServiceStub = jest.spyOn(alertService, 'error');
         const error = { status: 404 };
diff --git a/src/test/javascript/spec/component/overview/course-lectures/course-lectures.component.spec.ts b/src/test/javascript/spec/component/overview/course-lectures/course-lectures.component.spec.ts
index 0a2732347f41..1db277061599 100644
--- a/src/test/javascript/spec/component/overview/course-lectures/course-lectures.component.spec.ts
+++ b/src/test/javascript/spec/component/overview/course-lectures/course-lectures.component.spec.ts
@@ -72,13 +72,13 @@ describe('CourseLectures', () => {
                 CourseLecturesComponent,
                 CourseLectureRowStubComponent,
                 SidebarComponent,
-                SearchFilterComponent,
                 MockPipe(ArtemisTranslatePipe),
                 MockPipe(ArtemisDatePipe),
                 MockPipe(SearchFilterPipe),
                 MockComponent(SidePanelComponent),
                 MockComponent(FaIconComponent),
                 MockDirective(TranslateDirective),
+                MockComponent(SearchFilterComponent),
             ],
             providers: [
                 provideHttpClient(),
diff --git a/src/test/javascript/spec/component/shared/search-filter.component.spec.ts b/src/test/javascript/spec/component/shared/search-filter.component.spec.ts
index 5ff83d37e5fd..a75e50a3551e 100644
--- a/src/test/javascript/spec/component/shared/search-filter.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/search-filter.component.spec.ts
@@ -1,11 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ArtemisTestModule } from '../../test.module';
 import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
-import { MockModule, MockPipe } from 'ng-mocks';
+import { MockModule } from 'ng-mocks';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { By } from '@angular/platform-browser';
-import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 
 describe('SearchFilterComponent', () => {
     let component: SearchFilterComponent;
@@ -14,7 +13,7 @@ describe('SearchFilterComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, MockModule(ReactiveFormsModule), MockModule(FormsModule), MockModule(FontAwesomeModule)],
-            declarations: [SearchFilterComponent, MockPipe(ArtemisTranslatePipe)],
+            declarations: [SearchFilterComponent],
         }).compileComponents();
     });
 
diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts
index bcffb82bc9c1..68eddc94218d 100644
--- a/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts
@@ -31,6 +31,7 @@ describe('SidebarAccordionComponent', () => {
                 SearchFilterPipe,
                 SearchFilterComponent,
                 MockPipe(ArtemisTranslatePipe),
+                MockComponent(SearchFilterComponent),
             ],
         }).compileComponents();
     });
diff --git a/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-groups.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-groups.component.spec.ts
index cf60468091e9..95738abdc115 100644
--- a/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-groups.component.spec.ts
+++ b/src/test/javascript/spec/component/tutorial-groups/course-tutorial-groups/course-tutorial-groups.component.spec.ts
@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TutorialGroup } from 'app/entities/tutorial-group/tutorial-group.model';
 import { TutorialGroupsService } from 'app/course/tutorial-groups/services/tutorial-groups.service';
 import { MockRouter } from '../../../helpers/mocks/mock-router';
-import { MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
+import { MockComponent, MockDirective, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { AlertService } from 'app/core/util/alert.service';
 import { ActivatedRoute, Router, RouterModule, convertToParamMap } from '@angular/router';
@@ -34,7 +34,7 @@ describe('CourseTutorialGroupsComponent', () => {
 
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, RouterModule, MockModule(FormsModule), MockModule(ReactiveFormsModule), MockDirective(TranslateDirective)],
-            declarations: [CourseTutorialGroupsComponent, MockPipe(ArtemisTranslatePipe), SidebarComponent, SearchFilterComponent, MockPipe(SearchFilterPipe)],
+            declarations: [CourseTutorialGroupsComponent, MockPipe(ArtemisTranslatePipe), SidebarComponent, MockComponent(SearchFilterComponent), MockPipe(SearchFilterPipe)],
             providers: [
                 MockProvider(TutorialGroupsService),
                 MockProvider(CourseStorageService),
diff --git a/src/test/javascript/spec/service/faq.service.spec.ts b/src/test/javascript/spec/service/faq.service.spec.ts
index 931238c987c9..272a7352a091 100644
--- a/src/test/javascript/spec/service/faq.service.spec.ts
+++ b/src/test/javascript/spec/service/faq.service.spec.ts
@@ -207,5 +207,14 @@ describe('Faq Service', () => {
             const convertedCategory = FaqService.stringifyFaqCategories(faq2);
             expect(convertedCategory).toEqual(['{"color":"red","category":"testing"}']);
         });
+
+        it('should return if all tokens exist in FAQ title or answer', () => {
+            const faq1 = new Faq();
+            faq1.questionTitle = 'Title';
+            faq1.questionAnswer = 'Answer';
+
+            expect(service.hasSearchTokens(faq1, 'title answer')).toBeTrue();
+            expect(service.hasSearchTokens(faq1, 'title answer missing')).toBeFalse();
+        });
     });
 });