frontend unit tests

toasts component testing

conditional import of angular setup-jest for vscode-jest support

Update jest.config.js

Create open-documents.service.spec.ts

Add unit tests for all REST services

settings service test

Remove component from settings service test

Create permissions.service.spec.ts

upload documents service tests

Update package.json

Create toast.service.spec.ts

Tasks service test

Statistics widget component tests

Update permissions.service.ts

Create app.component.spec.ts

settings component testing

tasks component unit testing

Management list component generic tests

Some management component tests

document notes component unit tests

Create document-list.component.spec.ts

Create save-view-config-dialog.component.spec.ts

Create filter-editor.component.spec.ts

small and large document cards unit testing

Create bulk-editor.component.spec.ts

document detail unit tests

saving work on documentdetail component spec

Create document-asn.component.spec.ts

dashboard & widgets unit testing

Fix ResizeObserver mock

common component unit tests

fix some merge errors

Update app-frame.component.spec.ts

Create page-header.component.spec.ts

input component unit tests

FilterableDropdownComponent unit testing

and found minor errors

update taskservice unit tests

Edit dialogs unit tests

Create date-dropdown.component.spec.ts

Remove selectors from guard tests

confirm dialog component tests

app frame component test

Miscellaneous component tests

Update document-list-view.service.spec.ts

directives unit tests

Remove unused resizeobserver mock

guard unit tests

Update query-params.spec.ts

try to fix flaky playwright

filter rules utils & testing

Interceptor unit tests

Pipes unit testing

Utils unit tests

Update upload-documents.service.spec.ts

consumer status service tests

Update setup-jest.ts

Create document-list-view.service.spec.ts

Update app-routing.module.ts

src-ui/src/app/components/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,117 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbAlertModule, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { DashboardComponent } from './dashboard.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { SettingsService } from 'src/app/services/settings.service'
+import { StatisticsWidgetComponent } from './widgets/statistics-widget/statistics-widget.component'
+import { PageHeaderComponent } from '../common/page-header/page-header.component'
+import { WidgetFrameComponent } from './widgets/widget-frame/widget-frame.component'
+import { UploadFileWidgetComponent } from './widgets/upload-file-widget/upload-file-widget.component'
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { By } from '@angular/platform-browser'
+import { SavedViewWidgetComponent } from './widgets/saved-view-widget/saved-view-widget.component'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { NgxFileDropModule } from 'ngx-file-drop'
+import { RouterTestingModule } from '@angular/router/testing'
+import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent
+  let fixture: ComponentFixture<DashboardComponent>
+  let settingsService: SettingsService
+  let tourService: TourService
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [
+        DashboardComponent,
+        StatisticsWidgetComponent,
+        PageHeaderComponent,
+        WidgetFrameComponent,
+        UploadFileWidgetComponent,
+        IfPermissionsDirective,
+        SavedViewWidgetComponent,
+      ],
+      providers: [
+        PermissionsGuard,
+        {
+          provide: PermissionsService,
+          useValue: {
+            currentUserCan: () => true,
+          },
+        },
+        {
+          provide: SavedViewService,
+          useValue: {
+            dashboardViews: [
+              {
+                id: 1,
+                name: 'saved view 1',
+                show_on_dashboard: true,
+                sort_field: 'added',
+                sort_reverse: true,
+                filter_rules: [],
+              },
+              {
+                id: 2,
+                name: 'saved view 2',
+                show_on_dashboard: true,
+                sort_field: 'created',
+                sort_reverse: true,
+                filter_rules: [],
+              },
+            ],
+          },
+        },
+      ],
+      imports: [
+        NgbAlertModule,
+        HttpClientTestingModule,
+        NgxFileDropModule,
+        RouterTestingModule,
+        TourNgBootstrapModule,
+      ],
+    }).compileComponents()
+
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = {
+      first_name: 'Foo',
+      last_name: 'Bar',
+    }
+    tourService = TestBed.inject(TourService)
+    fixture = TestBed.createComponent(DashboardComponent)
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should show a welcome message', () => {
+    expect(component.subtitle).toEqual(`Hello Foo, welcome to Paperless-ngx`)
+    settingsService.currentUser = {
+      id: 1,
+    }
+    expect(component.subtitle).toEqual(`Welcome to Paperless-ngx`)
+  })
+
+  it('should show dashboard widgets', () => {
+    expect(
+      fixture.debugElement.queryAll(By.directive(SavedViewWidgetComponent))
+    ).toHaveLength(2)
+  })
+
+  it('should end tour service if still running and welcome widget dismissed', () => {
+    jest.spyOn(tourService, 'getStatus').mockReturnValueOnce(1)
+    const endSpy = jest.spyOn(tourService, 'end')
+    component.completeTour()
+    expect(endSpy).toHaveBeenCalled()
+  })
+
+  it('should save tour completion if it was stopped and welcome widget dismissed', () => {
+    jest.spyOn(tourService, 'getStatus').mockReturnValueOnce(0)
+    const settingsCompleteTourSpy = jest.spyOn(settingsService, 'completeTour')
+    component.completeTour()
+    expect(settingsCompleteTourSpy).toHaveBeenCalled()
+  })
+})

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts

@@ -0,0 +1,165 @@
+import { DatePipe } from '@angular/common'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { Router } from '@angular/router'
+import { RouterTestingModule } from '@angular/router/testing'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { of, Subject } from 'rxjs'
+import { routes } from 'src/app/app-routing.module'
+import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
+import {
+  ConsumerStatusService,
+  FileStatus,
+} from 'src/app/services/consumer-status.service'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
+import { SavedViewWidgetComponent } from './saved-view-widget.component'
+
+const savedView: PaperlessSavedView = {
+  id: 1,
+  name: 'Saved View 1',
+  sort_field: 'added',
+  sort_reverse: true,
+  show_in_sidebar: true,
+  show_on_dashboard: true,
+  filter_rules: [
+    {
+      rule_type: FILTER_HAS_TAGS_ALL,
+      value: '1,2',
+    },
+  ],
+}
+
+const documentResults = [
+  {
+    id: 2,
+    title: 'doc2',
+  },
+  {
+    id: 3,
+    title: 'doc3',
+  },
+]
+
+describe('SavedViewWidgetComponent', () => {
+  let component: SavedViewWidgetComponent
+  let fixture: ComponentFixture<SavedViewWidgetComponent>
+  let documentService: DocumentService
+  let consumerStatusService: ConsumerStatusService
+  let documentListViewService: DocumentListViewService
+  let router: Router
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [
+        SavedViewWidgetComponent,
+        WidgetFrameComponent,
+        IfPermissionsDirective,
+        CustomDatePipe,
+        DocumentTitlePipe,
+      ],
+      providers: [
+        PermissionsGuard,
+        DocumentService,
+        {
+          provide: PermissionsService,
+          useValue: {
+            currentUserCan: () => true,
+          },
+        },
+        CustomDatePipe,
+        DatePipe,
+      ],
+      imports: [
+        HttpClientTestingModule,
+        NgbModule,
+        RouterTestingModule.withRoutes(routes),
+      ],
+    }).compileComponents()
+
+    documentService = TestBed.inject(DocumentService)
+    consumerStatusService = TestBed.inject(ConsumerStatusService)
+    documentListViewService = TestBed.inject(DocumentListViewService)
+    router = TestBed.inject(Router)
+    fixture = TestBed.createComponent(SavedViewWidgetComponent)
+    component = fixture.componentInstance
+    component.savedView = savedView
+
+    fixture.detectChanges()
+  })
+
+  it('should show a list of documents', () => {
+    jest.spyOn(documentService, 'listFiltered').mockReturnValue(
+      of({
+        all: [2, 3],
+        count: 2,
+        results: documentResults,
+      })
+    )
+    component.ngOnInit()
+    fixture.detectChanges()
+    expect(fixture.debugElement.nativeElement.textContent).toContain('doc2')
+    expect(fixture.debugElement.nativeElement.textContent).toContain('doc3')
+  })
+
+  it('should call api endpoint and load results', () => {
+    const listAllSpy = jest.spyOn(documentService, 'listFiltered')
+    listAllSpy.mockReturnValue(
+      of({
+        all: [2, 3],
+        count: 2,
+        results: documentResults,
+      })
+    )
+    component.ngOnInit()
+    expect(listAllSpy).toHaveBeenCalledWith(
+      1,
+      10,
+      savedView.sort_field,
+      savedView.sort_reverse,
+      savedView.filter_rules,
+      {
+        truncate_content: true,
+      }
+    )
+    fixture.detectChanges()
+    expect(component.documents).toEqual(documentResults)
+  })
+
+  it('should reload on document consumption finished', () => {
+    const fileStatusSubject = new Subject<FileStatus>()
+    jest
+      .spyOn(consumerStatusService, 'onDocumentConsumptionFinished')
+      .mockReturnValue(fileStatusSubject)
+    const reloadSpy = jest.spyOn(component, 'reload')
+    component.ngOnInit()
+    fileStatusSubject.next(new FileStatus())
+    expect(reloadSpy).toHaveBeenCalled()
+  })
+
+  it('should navigate on showAll', () => {
+    const routerSpy = jest.spyOn(router, 'navigate')
+    component.showAll()
+    expect(routerSpy).toHaveBeenCalledWith(['view', savedView.id])
+    savedView.show_in_sidebar = false
+    component.showAll()
+    expect(routerSpy).toHaveBeenCalledWith(['documents'], {
+      queryParams: { view: savedView.id },
+    })
+  })
+
+  it('should navigate via quickfilter on click tag', () => {
+    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    component.clickTag({ id: 11, name: 'Tag11' }, new MouseEvent('click'))
+    expect(qfSpy).toHaveBeenCalledWith([
+      { rule_type: FILTER_HAS_TAGS_ALL, value: '11' },
+    ])
+  })
+})

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts

@@ -0,0 +1,110 @@
+import { TestBed } from '@angular/core/testing'
+import { StatisticsWidgetComponent } from './statistics-widget.component'
+import { ComponentFixture } from '@angular/core/testing'
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
+import { environment } from 'src/environments/environment'
+import { RouterTestingModule } from '@angular/router/testing'
+import { routes } from 'src/app/app-routing.module'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+
+describe('StatisticsWidgetComponent', () => {
+  let component: StatisticsWidgetComponent
+  let fixture: ComponentFixture<StatisticsWidgetComponent>
+  let httpTestingController: HttpTestingController
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [StatisticsWidgetComponent, WidgetFrameComponent],
+      providers: [PermissionsGuard],
+      imports: [
+        HttpClientTestingModule,
+        NgbModule,
+        RouterTestingModule.withRoutes(routes),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(StatisticsWidgetComponent)
+    component = fixture.componentInstance
+
+    httpTestingController = TestBed.inject(HttpTestingController)
+
+    fixture.detectChanges()
+  })
+
+  it('should call api statistics endpoint', () => {
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}statistics/`
+    )
+    expect(req.request.method).toEqual('GET')
+  })
+
+  it('should display inbox link with count', () => {
+    const mockStats = {
+      documents_total: 200,
+      documents_inbox: 18,
+      inbox_tag: 10,
+    }
+
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}statistics/`
+    )
+
+    req.flush(mockStats)
+    fixture.detectChanges()
+
+    const goToInboxSpy = jest.spyOn(component, 'goToInbox')
+
+    expect(fixture.nativeElement.textContent.replace(/\s/g, '')).toContain(
+      'inbox:18'
+    )
+    const link = fixture.nativeElement.querySelector('a') as HTMLAnchorElement
+    expect(link).not.toBeNull()
+    link.click()
+    expect(goToInboxSpy).toHaveBeenCalled()
+  })
+
+  it('should display mime types with counts', () => {
+    const mockStats = {
+      documents_total: 200,
+      documents_inbox: 18,
+      inbox_tag: 10,
+      document_file_type_counts: [
+        {
+          mime_type: 'application/pdf',
+          mime_type_count: 160,
+        },
+        {
+          mime_type: 'text/plain',
+          mime_type_count: 20,
+        },
+        {
+          mime_type: 'text/csv',
+          mime_type_count: 20,
+        },
+      ],
+      character_count: 162312,
+    }
+
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}statistics/`
+    )
+
+    req.flush(mockStats)
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.textContent.replace(/\s/g, '')).toContain(
+      'PDF(80%)'
+    )
+    expect(fixture.nativeElement.textContent.replace(/\s/g, '')).toContain(
+      'TXT(10%)'
+    )
+    expect(fixture.nativeElement.textContent.replace(/\s/g, '')).toContain(
+      'CSV(10%)'
+    )
+  })
+})

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts

@@ -0,0 +1,173 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { RouterTestingModule } from '@angular/router/testing'
+import {
+  NgbModule,
+  NgbAlertModule,
+  NgbAlert,
+  NgbCollapse,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxFileDropModule } from 'ngx-file-drop'
+import { routes } from 'src/app/app-routing.module'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import {
+  ConsumerStatusService,
+  FileStatus,
+  FileStatusPhase,
+} from 'src/app/services/consumer-status.service'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
+import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
+import { UploadFileWidgetComponent } from './upload-file-widget.component'
+
+describe('UploadFileWidgetComponent', () => {
+  let component: UploadFileWidgetComponent
+  let fixture: ComponentFixture<UploadFileWidgetComponent>
+  let consumerStatusService: ConsumerStatusService
+  let uploadDocumentsService: UploadDocumentsService
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [
+        UploadFileWidgetComponent,
+        WidgetFrameComponent,
+        IfPermissionsDirective,
+      ],
+      providers: [
+        PermissionsGuard,
+        {
+          provide: PermissionsService,
+          useValue: {
+            currentUserCan: () => true,
+          },
+        },
+      ],
+      imports: [
+        HttpClientTestingModule,
+        NgbModule,
+        RouterTestingModule.withRoutes(routes),
+        NgxFileDropModule,
+        NgbAlertModule,
+      ],
+    }).compileComponents()
+
+    consumerStatusService = TestBed.inject(ConsumerStatusService)
+    uploadDocumentsService = TestBed.inject(UploadDocumentsService)
+    fixture = TestBed.createComponent(UploadFileWidgetComponent)
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should support drop files', () => {
+    const uploadSpy = jest.spyOn(uploadDocumentsService, 'uploadFiles')
+    component.dropped([])
+    expect(uploadSpy).toHaveBeenCalled()
+    // coverage
+    component.fileLeave(null)
+    component.fileOver(null)
+  })
+
+  it('should generate stats summary', () => {
+    mockConsumerStatuses(consumerStatusService)
+    expect(component.getStatusSummary()).toEqual(
+      'Processing: 6, Failed: 1, Added: 4'
+    )
+  })
+
+  it('should report an upload progress summary', () => {
+    mockConsumerStatuses(consumerStatusService)
+    expect(component.getTotalUploadProgress()).toEqual(0.75)
+  })
+
+  it('should change color by status phase', () => {
+    const processingStatus = new FileStatus()
+    processingStatus.phase = FileStatusPhase.PROCESSING
+    expect(component.getStatusColor(processingStatus)).toEqual('primary')
+    const failedStatus = new FileStatus()
+    failedStatus.phase = FileStatusPhase.FAILED
+    expect(component.getStatusColor(failedStatus)).toEqual('danger')
+    const successStatus = new FileStatus()
+    successStatus.phase = FileStatusPhase.SUCCESS
+    expect(component.getStatusColor(successStatus)).toEqual('success')
+  })
+
+  it('should enforce a maximum number of alerts', () => {
+    mockConsumerStatuses(consumerStatusService)
+    fixture.detectChanges()
+    // 5 total, 1 hidden
+    expect(fixture.debugElement.queryAll(By.directive(NgbAlert))).toHaveLength(
+      6
+    )
+    expect(
+      fixture.debugElement
+        .query(By.directive(NgbCollapse))
+        .queryAll(By.directive(NgbAlert))
+    ).toHaveLength(1)
+  })
+
+  it('should allow dismissing an alert', () => {
+    const dismissSpy = jest.spyOn(consumerStatusService, 'dismiss')
+    component.dismiss(new FileStatus())
+    expect(dismissSpy).toHaveBeenCalled()
+  })
+
+  it('should allow dismissing all alerts', () => {
+    const dismissSpy = jest.spyOn(consumerStatusService, 'dismissCompleted')
+    component.dismissCompleted()
+    expect(dismissSpy).toHaveBeenCalled()
+  })
+})
+
+function mockConsumerStatuses(consumerStatusService) {
+  const partialUpload1 = new FileStatus()
+  partialUpload1.currentPhaseProgress = 50
+  partialUpload1.currentPhaseMaxProgress = 50
+  const partialUpload2 = new FileStatus()
+  partialUpload2.currentPhaseProgress = 25
+  partialUpload2.currentPhaseMaxProgress = 50
+  jest
+    .spyOn(consumerStatusService, 'getConsumerStatus')
+    .mockImplementation((phase) => {
+      switch (phase) {
+        case FileStatusPhase.FAILED:
+          return [new FileStatus()]
+        case FileStatusPhase.PROCESSING:
+          return [new FileStatus(), new FileStatus()]
+        case FileStatusPhase.STARTED:
+          return [new FileStatus(), new FileStatus(), new FileStatus()]
+        case FileStatusPhase.SUCCESS:
+          return [
+            new FileStatus(),
+            new FileStatus(),
+            new FileStatus(),
+            new FileStatus(),
+          ]
+        case FileStatusPhase.UPLOADING:
+          return [partialUpload1, partialUpload2]
+        default:
+          return [
+            new FileStatus(),
+            new FileStatus(),
+            new FileStatus(),
+            new FileStatus(),
+            new FileStatus(),
+            new FileStatus(),
+          ]
+      }
+    })
+  jest
+    .spyOn(consumerStatusService, 'getConsumerStatusNotCompleted')
+    .mockImplementation(() => {
+      return [
+        new FileStatus(),
+        new FileStatus(),
+        new FileStatus(),
+        new FileStatus(),
+        new FileStatus(),
+        new FileStatus(),
+      ]
+    })
+}

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -69,9 +69,6 @@ export class UploadFileWidgetComponent extends ComponentWithPermissions {
     return this.consumerStatusService.getConsumerStatus(FileStatusPhase.SUCCESS)
   }
 
-  getStatusCompleted() {
-    return this.consumerStatusService.getConsumerStatusCompleted()
-  }
   getTotalUploadProgress() {
     let current = 0
     let max = 0

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { NgbAlertModule, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
+import { WelcomeWidgetComponent } from './welcome-widget.component'
+
+describe('WelcomeWidgetComponent', () => {
+  let component: WelcomeWidgetComponent
+  let fixture: ComponentFixture<WelcomeWidgetComponent>
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [WelcomeWidgetComponent, WidgetFrameComponent],
+      providers: [PermissionsGuard],
+      imports: [NgbAlertModule],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(WelcomeWidgetComponent)
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should be dismissable', () => {
+    let dismissResult
+    component.dismiss.subscribe(() => (dismissResult = true))
+    fixture.debugElement
+      .query(By.directive(NgbAlert))
+      .triggerEventHandler('closed')
+    expect(dismissResult).toBeTruthy()
+  })
+})

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { NgbAlertModule, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { WidgetFrameComponent } from './widget-frame.component'
+
+@Component({
+  template: `
+    <div>
+      <button
+        *appIfObjectPermissions="{
+          object: { id: 2, owner: user1 },
+          action: 'view'
+        }"
+      >
+        Some Text
+      </button>
+    </div>
+  `,
+})
+class TestComponent extends WidgetFrameComponent {}
+
+describe('WidgetFrameComponent', () => {
+  let component: WidgetFrameComponent
+  let fixture: ComponentFixture<WidgetFrameComponent>
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [WidgetFrameComponent, WidgetFrameComponent],
+      providers: [PermissionsGuard],
+      imports: [NgbAlertModule],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(WidgetFrameComponent)
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should show title', () => {
+    component.title = 'Foo'
+    fixture.detectChanges()
+    expect(fixture.debugElement.nativeElement.textContent).toContain('Foo')
+  })
+
+  it('should show loading indicator', () => {
+    expect(fixture.debugElement.query(By.css('.spinner-border'))).toBeNull()
+    component.loading = true
+    fixture.detectChanges()
+    expect(fixture.debugElement.query(By.css('.spinner-border'))).not.toBeNull()
+  })
+})