Fix frontend tests icon imports

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { ClearableBadgeComponent } from './clearable-badge.component'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('ClearableBadgeComponent', () => {
   let component: ClearableBadgeComponent
@@ -8,6 +9,7 @@ describe('ClearableBadgeComponent', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
       declarations: [ClearableBadgeComponent],
+      imports: [NgxBootstrapIconsModule.pick(allIcons)],
     }).compileComponents()
 
     fixture = TestBed.createComponent(ClearableBadgeComponent)

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts

@@ -20,6 +20,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { By } from '@angular/platform-browser'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 const fields: CustomField[] = [
   {
@@ -40,7 +41,6 @@ describe('CustomFieldsDropdownComponent', () => {
   let customFieldService: CustomFieldsService
   let toastService: ToastService
   let modalService: NgbModal
-  let httpController: HttpTestingController
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -52,10 +52,10 @@ describe('CustomFieldsDropdownComponent', () => {
         ReactiveFormsModule,
         NgbModalModule,
         NgbDropdownModule,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
     })
     customFieldService = TestBed.inject(CustomFieldsService)
-    httpController = TestBed.inject(HttpTestingController)
     toastService = TestBed.inject(ToastService)
     modalService = TestBed.inject(NgbModal)
     jest.spyOn(customFieldService, 'listAll').mockReturnValue(

src-ui/src/app/components/common/date-dropdown/date-dropdown.component.spec.ts

@@ -10,20 +10,17 @@ import {
   DateSelection,
   RelativeDate,
 } from './date-dropdown.component'
-import {
-  HttpClientTestingModule,
-  HttpTestingController,
-} from '@angular/common/http/testing'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DatePipe } from '@angular/common'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('DateDropdownComponent', () => {
   let component: DateDropdownComponent
-  let httpTestingController: HttpTestingController
   let settingsService: SettingsService
   let settingsSpy
 
@@ -40,10 +37,10 @@ describe('DateDropdownComponent', () => {
         NgbModule,
         FormsModule,
         ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
     }).compileComponents()
 
-    httpTestingController = TestBed.inject(HttpTestingController)
     settingsService = TestBed.inject(SettingsService)
     settingsSpy = jest.spyOn(settingsService, 'getLocalizedDateInputFormat')
 

src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.spec.ts

@@ -13,6 +13,7 @@ import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { TagEditDialogComponent } from './tag-edit-dialog.component'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('TagEditDialogComponent', () => {
   let component: TagEditDialogComponent
@@ -38,6 +39,7 @@ describe('TagEditDialogComponent', () => {
         ReactiveFormsModule,
         NgSelectModule,
         NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
     }).compileComponents()
 

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts

@@ -25,6 +25,7 @@ import {
 import { TagComponent } from '../tag/tag.component'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 const items: Tag[] = [
   {
@@ -63,7 +64,12 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
         ClearableBadgeComponent,
       ],
       providers: [FilterPipe],
-      imports: [NgbModule, FormsModule, ReactiveFormsModule],
+      imports: [
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(FilterableDropdownComponent)
@@ -215,6 +221,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should apply changes and close when apply button clicked', () => {
     component.items = items
+    component.icon = 'tag-fill'
     component.editing = true
     component.selectionModel = selectionModel
     fixture.nativeElement
@@ -236,6 +243,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should apply on close if enabled', () => {
     component.items = items
+    component.icon = 'tag-fill'
     component.editing = true
     component.applyOnClose = true
     component.selectionModel = selectionModel
@@ -253,6 +261,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should focus text filter on open, support filtering, clear on close', fakeAsync(() => {
     component.items = items
+    component.icon = 'tag-fill'
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
@@ -279,6 +288,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should toggle & close on enter inside filter field if 1 item remains', fakeAsync(() => {
     component.items = items
+    component.icon = 'tag-fill'
     expect(component.selectionModel.getSelectedItems()).toEqual([])
     fixture.nativeElement
       .querySelector('button')
@@ -298,6 +308,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should apply & close on enter inside filter field if 1 item remains if editing', fakeAsync(() => {
     component.items = items
+    component.icon = 'tag-fill'
     component.editing = true
     let applyResult: ChangedItems
     component.apply.subscribe((result) => (applyResult = result))
@@ -319,6 +330,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should support arrow keyboard navigation', fakeAsync(() => {
     component.items = items
+    component.icon = 'tag-fill'
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
@@ -363,6 +375,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should support arrow keyboard navigation after tab keyboard navigation', fakeAsync(() => {
     component.items = items
+    component.icon = 'tag-fill'
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
@@ -398,6 +411,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should support arrow keyboard navigation after click', fakeAsync(() => {
     component.items = items
+    component.icon = 'tag-fill'
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
@@ -422,6 +436,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should toggle logical operator', fakeAsync(() => {
     component.items = items
+    component.icon = 'tag-fill'
     component.manyToOne = true
     selectionModel.set(items[0].id, ToggleableItemState.Selected)
     selectionModel.set(items[1].id, ToggleableItemState.Selected)
@@ -450,6 +465,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   it('should toggle intersection include / exclude', fakeAsync(() => {
     component.items = items
+    component.icon = 'tag-fill'
     selectionModel.set(items[0].id, ToggleableItemState.Selected)
     selectionModel.set(items[1].id, ToggleableItemState.Selected)
     component.selectionModel = selectionModel

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { MatchingModel } from 'src/app/data/matching-model'
 
 export enum ToggleableItemState {

src-ui/src/app/components/common/input/color/color.component.spec.ts

@@ -7,6 +7,7 @@ import {
 import { ColorComponent } from './color.component'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { ColorSliderModule } from 'ngx-color/slider'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('ColorComponent', () => {
   let component: ColorComponent
@@ -22,6 +23,7 @@ describe('ColorComponent', () => {
         ReactiveFormsModule,
         NgbPopoverModule,
         ColorSliderModule,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
     }).compileComponents()
 

src-ui/src/app/components/common/input/date/date.component.spec.ts

@@ -12,6 +12,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { RouterTestingModule } from '@angular/router/testing'
 import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('DateComponent', () => {
   let component: DateComponent
@@ -33,6 +34,7 @@ describe('DateComponent', () => {
         HttpClientTestingModule,
         NgbDatepickerModule,
         RouterTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
     }).compileComponents()
 

src-ui/src/app/components/common/input/password/password.component.spec.ts

@@ -6,6 +6,7 @@ import {
 } from '@angular/forms'
 import { PasswordComponent } from './password.component'
 import { By } from '@angular/platform-browser'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('PasswordComponent', () => {
   let component: PasswordComponent
@@ -16,7 +17,11 @@ describe('PasswordComponent', () => {
     TestBed.configureTestingModule({
       declarations: [PasswordComponent],
       providers: [],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(PasswordComponent)

src-ui/src/app/components/common/input/tags/tags.component.spec.ts

@@ -30,6 +30,7 @@ import { ColorComponent } from '../color/color.component'
 import { PermissionsFormComponent } from '../permissions/permissions-form/permissions-form.component'
 import { SelectComponent } from '../select/select.component'
 import { SettingsService } from 'src/app/services/settings.service'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 const tags: Tag[] = [
   {
@@ -99,6 +100,7 @@ describe('TagsComponent', () => {
         NgbModalModule,
         NgbAccordionModule,
         NgbPopoverModule,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
     }).compileComponents()
 

src-ui/src/app/components/common/input/url/url.component.spec.ts

@@ -5,6 +5,7 @@ import {
   NG_VALUE_ACCESSOR,
 } from '@angular/forms'
 import { UrlComponent } from './url.component'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('TextComponent', () => {
   let component: UrlComponent
@@ -15,7 +16,11 @@ describe('TextComponent', () => {
     TestBed.configureTestingModule({
       declarations: [UrlComponent],
       providers: [],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(UrlComponent)

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts

@@ -14,6 +14,7 @@ import {
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
 import { SettingsService } from 'src/app/services/settings.service'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 const currentUserID = 13
 
@@ -69,6 +70,7 @@ describe('PermissionsFilterDropdownComponent', () => {
         FormsModule,
         ReactiveFormsModule,
         NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
     }).compileComponents()
 

src-ui/src/app/components/common/permissions-select/permissions-select.component.spec.ts

@@ -11,6 +11,7 @@ import {
   PermissionType,
 } from 'src/app/services/permissions.service'
 import { By } from '@angular/platform-browser'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 const permissions = [
   'add_document',
@@ -32,7 +33,12 @@ describe('PermissionsSelectComponent', () => {
     TestBed.configureTestingModule({
       declarations: [PermissionsSelectComponent],
       providers: [],
-      imports: [FormsModule, ReactiveFormsModule, NgbModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(PermissionsSelectComponent)

src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts

@@ -8,6 +8,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { DocumentService } from 'src/app/services/rest/document.service'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 const doc = {
   id: 10,
@@ -25,7 +26,10 @@ describe('PreviewPopupComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [PreviewPopupComponent, PdfViewerComponent, SafeUrlPipe],
-      imports: [HttpClientTestingModule],
+      imports: [
+        HttpClientTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
     })
     settingsService = TestBed.inject(SettingsService)
     documentService = TestBed.inject(DocumentService)

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts

@@ -19,6 +19,7 @@ import { PasswordComponent } from '../input/password/password.component'
 import { of, throwError } from 'rxjs'
 import { ToastService } from 'src/app/services/toast.service'
 import { Clipboard } from '@angular/cdk/clipboard'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 const profile = {
   email: 'foo@bar.com',
@@ -49,6 +50,7 @@ describe('ProfileEditDialogComponent', () => {
         FormsModule,
         NgbModalModule,
         NgbAccordionModule,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
     })
     profileService = TestBed.inject(ProfileService)

src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.spec.ts

@@ -17,6 +17,7 @@ import { environment } from 'src/environments/environment'
 import { ShareLinksDropdownComponent } from './share-links-dropdown.component'
 import { Clipboard } from '@angular/cdk/clipboard'
 import { By } from '@angular/platform-browser'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('ShareLinksDropdownComponent', () => {
   let component: ShareLinksDropdownComponent
@@ -29,7 +30,12 @@ describe('ShareLinksDropdownComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ShareLinksDropdownComponent],
-      imports: [HttpClientTestingModule, FormsModule, ReactiveFormsModule],
+      imports: [
+        HttpClientTestingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
     })
 
     fixture = TestBed.createComponent(ShareLinksDropdownComponent)

src-ui/src/app/components/common/toasts/toasts.component.spec.ts

@@ -12,6 +12,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { of } from 'rxjs'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { Clipboard } from '@angular/cdk/clipboard'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 const toasts = [
   {
@@ -45,7 +46,11 @@ describe('ToastsComponent', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
       declarations: [ToastsComponent],
-      imports: [HttpClientTestingModule, NgbModule],
+      imports: [
+        HttpClientTestingModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
       providers: [
         {
           provide: ToastService,