Merge pull request #594 from tillkuhn/new-local-storage

Switch Angular module for local storage
tillkuhn · Jan 6, 2024 · 328e39f · 328e39f
2 parents 6db503d + 16ca61c
commit 328e39f
Show file tree

Hide file tree

Showing 35 changed files with 86 additions and 78 deletions.
diff --git a/angular/package.json b/angular/package.json
@@ -58,7 +58,7 @@
     "ngx-logger": "^5.0.12",
     "ngx-mapbox-gl": "^9.1.0",
     "ngx-markdown": "^15",
-    "ngx-web-storage": "^0.2.0",
+    "ngx-webstorage": "^13.0.1",
     "rxjs": "~7.5",
     "ts-jest": "^29.1",
     "tslib": "^2.6.0",

diff --git a/angular/src/app/app.component.spec.ts b/angular/src/app/app.component.spec.ts
@@ -4,7 +4,7 @@ import {AppComponent} from './app.component';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {LoggerTestingModule} from 'ngx-logger/testing';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
@@ -15,10 +15,13 @@ describe('AppComponent', () => {
     TestBed.configureTestingModule({
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       // Angular15 legacy hack
-      providers: [{provide: MatLegacySnackBar, useValue: {}}, {provide: MatLegacyDialog, useValue: {}}],
+      providers: [
+        {provide: MatLegacySnackBar, useValue: {}},
+        {provide: MatLegacyDialog, useValue: {}}
+      ],
       imports: [
         RouterTestingModule, MatSnackBarModule, LoggerTestingModule, HttpClientTestingModule,
-        WebStorageModule, MatIconTestingModule
+        NgxWebstorageModule.forRoot(), MatIconTestingModule
       ],
       declarations: [
         AppComponent

diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts
@@ -51,13 +51,15 @@ import {UserDisplayComponent} from '@shared/components/users/display/user-displa
 import {UserSelectComponent} from '@shared/components/users/select/user-select.component';
 import {VideoDetailsComponent} from './locatables/videos/video-details.component';
 import {VideoPlayerComponent} from './locatables/videos/video-player.component';
-import {WebStorageModule} from 'ngx-web-storage';
+// import {LocalStorageService} from 'ngx-webstorage'; // see successor below
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {YouTubePlayerModule} from '@angular/youtube-player';
 import {RadioComponent} from './radio/radio.component';
 import {MatLegacySliderModule as MatSliderModule} from '@angular/material/legacy-slider';
 import {RatingModule} from '@shared/modules/rating/rating.module';
 import { RemoveMeComponent } from './myprofile/remove-me.component';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
+
 @NgModule({
   // "declarations:" make directives (including components and pipes) from the *current* module available to
   // *other* directives in the current module. Selectors of directives components or pipes are only matched against
@@ -120,10 +122,10 @@ import { MAT_DATE_LOCALE } from '@angular/material/core';
     MaterialModule, // here you'll find all the Material stuff
     MetricsModule,
     NgxMapboxGLModule,
+    NgxWebstorageModule.forRoot(),
     RatingModule, // Our Rating Module in shared/modules
     ReactiveFormsModule,
     TagCloudComponent, // instead of TagCloudModule, see https://github.com/d-koppenhagen/angular-tag-cloud-module/releases/tag/14.0.0
-    WebStorageModule.forRoot(),
     YouTubePlayerModule,
     MatSliderModule,
     RatingModule

diff --git a/angular/src/app/areas/area-tree.component.spec.ts b/angular/src/app/areas/area-tree.component.spec.ts
@@ -11,7 +11,7 @@ import {MatInputModule} from '@angular/material/input';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatSelectModule} from '@angular/material/select';
 import {MatCardModule} from '@angular/material/card';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {MatTreeModule} from '@angular/material/tree';
@@ -31,7 +31,7 @@ describe('AreaTreeComponent', () => {
       providers: [{provide: MatLegacySnackBar, useValue: {}}],
       imports: [MatIconTestingModule, MatCardModule, RouterTestingModule, LoggerTestingModule, HttpClientTestingModule,
         MatIconModule, MatSelectModule, MatTreeModule,
-        FormsModule, ReactiveFormsModule, MatSnackBarModule, MatInputModule, BrowserAnimationsModule, WebStorageModule],
+        FormsModule, ReactiveFormsModule, MatSnackBarModule, MatInputModule, BrowserAnimationsModule, NgxWebstorageModule.forRoot()],
       teardown: {destroyAfterEach: false}
     })
       .compileComponents();

diff --git a/angular/src/app/dishes/add/dish-add.component.spec.ts b/angular/src/app/dishes/add/dish-add.component.spec.ts
@@ -7,7 +7,8 @@ import {RouterTestingModule} from '@angular/router/testing';
 // imports: [RouterTestingModule, LoggerTestingModule, HttpClientTestingModule]
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatCardModule} from '@angular/material/card';
-import {WebStorageModule, WebStorageService} from 'ngx-web-storage';
+// import {WebStorageModule, WebStorageService} from 'ngx-web-storage';
+import {NgxWebstorageModule, LocalStorageService} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 
@@ -22,7 +23,7 @@ describe('DishAddComponent', () => {
         CUSTOM_ELEMENTS_SCHEMA
     ],
     imports: [MatCardModule, MatIconTestingModule, RouterTestingModule, LoggerTestingModule, HttpClientTestingModule, FormsModule,
-        ReactiveFormsModule, WebStorageService, WebStorageModule],
+        ReactiveFormsModule, LocalStorageService, NgxWebstorageModule.forRoot()],
     teardown: { destroyAfterEach: false }
 })
       .compileComponents();

diff --git a/angular/src/app/dishes/detail/dish-detail.component.spec.ts b/angular/src/app/dishes/detail/dish-detail.component.spec.ts
@@ -7,7 +7,7 @@ import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatCardModule} from '@angular/material/card';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {MarkdownModule} from 'ngx-markdown';
@@ -27,7 +27,7 @@ describe('DishDetailComponent', () => {
         CUSTOM_ELEMENTS_SCHEMA
       ],
       imports: [MatIconTestingModule, MatCardModule, RouterTestingModule, LoggerTestingModule, HttpClientTestingModule, MatDialogModule,
-        MatSnackBarModule, WebStorageModule, MarkdownModule, MatDatepickerModule],
+        MatSnackBarModule, MarkdownModule, MatDatepickerModule, NgxWebstorageModule.forRoot()],
       teardown: {destroyAfterEach: false}
 
     })

diff --git a/angular/src/app/dishes/edit/dish-edit.component.spec.ts b/angular/src/app/dishes/edit/dish-edit.component.spec.ts
@@ -8,7 +8,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatIconModule} from '@angular/material/icon';
 import {ClipboardModule} from '@angular/cdk/clipboard';
 import {MatCardModule} from '@angular/material/card';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; // important for test
 
@@ -23,7 +23,7 @@ describe('DishEditComponent', () => {
         CUSTOM_ELEMENTS_SCHEMA
     ],
     imports: [MatIconModule, MatCardModule, LoggerTestingModule, RouterTestingModule, HttpClientTestingModule, FormsModule, ReactiveFormsModule,
-        ClipboardModule, MatIconTestingModule, WebStorageModule],
+        ClipboardModule, MatIconTestingModule, NgxWebstorageModule.forRoot()],
     teardown: { destroyAfterEach: false }
 })
       .compileComponents();

diff --git a/angular/src/app/dishes/list/dishes.component.spec.ts b/angular/src/app/dishes/list/dishes.component.spec.ts
@@ -7,7 +7,7 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {MatIconModule} from '@angular/material/icon';
 import {MatCardModule} from '@angular/material/card';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {MatTableModule} from '@angular/material/table';
@@ -26,7 +26,7 @@ describe('DishesComponent', () => {
         CUSTOM_ELEMENTS_SCHEMA
     ],
     imports: [MatIconModule, MatCardModule, RouterTestingModule, LoggerTestingModule, MatTabsModule,
-        HttpClientTestingModule, MatIconTestingModule, MatSnackBarModule, WebStorageModule, MatTableModule, FormsModule],
+        HttpClientTestingModule, MatIconTestingModule, MatSnackBarModule, NgxWebstorageModule.forRoot(), MatTableModule, FormsModule],
     teardown: { destroyAfterEach: false }
 })
       .compileComponents();

diff --git a/angular/src/app/home/home.component.spec.ts b/angular/src/app/home/home.component.spec.ts
@@ -5,7 +5,7 @@ import {LoggerTestingModule} from 'ngx-logger/testing';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {MatIconModule} from '@angular/material/icon';
 import {MatCardModule} from '@angular/material/card';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {RouterTestingModule} from '@angular/router/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@@ -23,7 +23,7 @@ describe('HomeComponent', () => {
         CUSTOM_ELEMENTS_SCHEMA
     ],
     imports: [MatIconTestingModule, MatCardModule, LoggerTestingModule, HttpClientTestingModule, MatIconModule,
-        RouterTestingModule, WebStorageModule, MatSnackBarModule],
+        RouterTestingModule, NgxWebstorageModule.forRoot(), MatSnackBarModule],
     teardown: { destroyAfterEach: false }
 })
       .compileComponents();

diff --git a/angular/src/app/links/feeds/feed.component.spec.ts b/angular/src/app/links/feeds/feed.component.spec.ts
@@ -9,7 +9,7 @@ import {MatSelectModule} from '@angular/material/select';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 
 describe('FeedComponent', () => {
   let component: FeedComponent;
@@ -22,7 +22,7 @@ describe('FeedComponent', () => {
       ],
       declarations: [FeedComponent],
       imports: [LoggerTestingModule, RouterTestingModule,
-        MatIconTestingModule, MatSelectModule, NoopAnimationsModule, HttpClientTestingModule, MatSnackBarModule, WebStorageModule],
+        MatIconTestingModule, MatSelectModule, NoopAnimationsModule, HttpClientTestingModule, MatSnackBarModule, NgxWebstorageModule.forRoot()],
       teardown: {destroyAfterEach: false}
     })
       .compileComponents();

diff --git a/angular/src/app/locatables/photos/photo-details.component.spec.ts b/angular/src/app/locatables/photos/photo-details.component.spec.ts
@@ -6,7 +6,7 @@ import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {LayoutModule} from '@angular/cdk/layout';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -46,7 +46,7 @@ describe('PhotoDetailsComponent', () => {
     schemas: [
         CUSTOM_ELEMENTS_SCHEMA
     ],
-    imports: [MatIconTestingModule, FormsModule, LayoutModule, WebStorageModule, MatSelectModule, MatFormFieldModule, MatInputModule,
+    imports: [MatIconTestingModule, FormsModule, LayoutModule, NgxWebstorageModule.forRoot(), MatSelectModule, MatFormFieldModule, MatInputModule,
         ReactiveFormsModule, NoopAnimationsModule, HttpClientTestingModule, RouterTestingModule, LoggerTestingModule,
         MatButtonModule, MatDialogModule],
     teardown: { destroyAfterEach: false }

diff --git a/angular/src/app/locatables/posts/post-details.component.spec.ts b/angular/src/app/locatables/posts/post-details.component.spec.ts
@@ -6,7 +6,7 @@ import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {LayoutModule} from '@angular/cdk/layout';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -46,7 +46,7 @@ describe('PostDetailsComponent', () => {
     schemas: [
         CUSTOM_ELEMENTS_SCHEMA
     ],
-    imports: [MatIconTestingModule, FormsModule, LayoutModule, WebStorageModule, MatSelectModule, MatFormFieldModule, MatInputModule,
+    imports: [MatIconTestingModule, FormsModule, LayoutModule, NgxWebstorageModule.forRoot(), MatSelectModule, MatFormFieldModule, MatInputModule,
         ReactiveFormsModule, NoopAnimationsModule, HttpClientTestingModule, RouterTestingModule, LoggerTestingModule,
         MatButtonModule, MatDialogModule],
     teardown: { destroyAfterEach: false }

diff --git a/angular/src/app/locatables/search/location-search.component.spec.ts b/angular/src/app/locatables/search/location-search.component.spec.ts
@@ -15,8 +15,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatInputModule} from '@angular/material/input';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatIconModule} from '@angular/material/icon';
-import {WebStorageModule} from 'ngx-web-storage';
-
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatMenuModule} from '@angular/material/menu';
 import {EntityType} from '@shared/domain/entities';
 import {ActivatedRoute} from '@angular/router';
@@ -77,7 +76,7 @@ describe('ToursComponent', () => {
         MatTabsModule,
         ReactiveFormsModule,
         RouterTestingModule,
-        WebStorageModule],
+        NgxWebstorageModule.forRoot()],
       teardown: {destroyAfterEach: false}
     })
       .compileComponents();

diff --git a/angular/src/app/locatables/tours/tour-details.component.spec.ts b/angular/src/app/locatables/tours/tour-details.component.spec.ts
@@ -7,7 +7,7 @@ import {LoggerTestingModule} from 'ngx-logger/testing';
 import {RouterTestingModule} from '@angular/router/testing';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {Tour} from '@domain/location';
 import {EntityType} from '@shared/domain/entities';
 import {UntypedFormBuilder, FormsModule, ReactiveFormsModule} from '@angular/forms';
@@ -66,7 +66,7 @@ describe('TourDetailsComponent', () => {
         {provide: UntypedFormBuilder, useValue: formBuilder}, // for @ViewChild
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      imports: [MatIconTestingModule, FormsModule, LayoutModule, WebStorageModule, MatSelectModule, MatFormFieldModule, MatInputModule,
+      imports: [MatIconTestingModule, FormsModule, LayoutModule, NgxWebstorageModule.forRoot(), MatSelectModule, MatFormFieldModule, MatInputModule,
         ReactiveFormsModule, NoopAnimationsModule, HttpClientTestingModule, RouterTestingModule, LoggerTestingModule,
         MatButtonModule, MatLegacyDialogModule],
       declarations: [TourDetailsComponent],

diff --git a/angular/src/app/locatables/videos/video-details.component.spec.ts b/angular/src/app/locatables/videos/video-details.component.spec.ts
@@ -11,7 +11,7 @@ import {Link} from '@app/domain/link';
 import {MatButtonModule} from '@angular/material/button';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {RouterTestingModule} from '@angular/router/testing';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -39,7 +39,7 @@ describe('LinkInputComponent', () => {
     schemas: [
         CUSTOM_ELEMENTS_SCHEMA
     ],
-    imports: [MatIconTestingModule, FormsModule, LayoutModule, WebStorageModule, MatSelectModule, MatFormFieldModule, MatInputModule,
+    imports: [MatIconTestingModule, FormsModule, LayoutModule, NgxWebstorageModule.forRoot(), MatSelectModule, MatFormFieldModule, MatInputModule,
         ReactiveFormsModule, NoopAnimationsModule, HttpClientTestingModule, RouterTestingModule, LoggerTestingModule,
         MatButtonModule, MatDialogModule],
     teardown: { destroyAfterEach: false }

diff --git a/angular/src/app/locatables/videos/video-player.component.spec.ts b/angular/src/app/locatables/videos/video-player.component.spec.ts
@@ -9,7 +9,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {RouterTestingModule} from '@angular/router/testing';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatDialogModule} from '@angular/material/dialog';
 
 describe('YoutubePlayerDemoComponent', () => {
@@ -24,7 +24,7 @@ describe('YoutubePlayerDemoComponent', () => {
     declarations: [VideoPlayerComponent],
     imports: [YouTubePlayerModule, LoggerTestingModule, RouterTestingModule,
         MatIconTestingModule, NoopAnimationsModule, HttpClientTestingModule,
-        MatSnackBarModule, WebStorageModule, MatDialogModule],
+        MatSnackBarModule, NgxWebstorageModule.forRoot(), MatDialogModule],
     teardown: { destroyAfterEach: false }
 })
       .compileComponents();

diff --git a/angular/src/app/map/map.component.spec.ts_disabled b/angular/src/app/map/map.component.spec.ts_disabled
@@ -5,7 +5,7 @@ import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {LoggerTestingModule} from 'ngx-logger/testing';
 import {RouterTestingModule} from '@angular/router/testing';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {NgxMapboxGLModule} from 'ngx-mapbox-gl';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@@ -32,7 +32,7 @@ describe('MapComponent', () => {
         CUSTOM_ELEMENTS_SCHEMA
     ],
     imports: [MatIconTestingModule, MatMenuModule, MatButtonModule, RouterTestingModule, LoggerTestingModule, HttpClientTestingModule, MatSnackBarModule,
-        WebStorageModule, NgxMapboxGLModule],
+        NgxWebstorageModule, NgxMapboxGLModule],
     teardown: { destroyAfterEach: false }
 })
       .compileComponents();

diff --git a/angular/src/app/myprofile/my-profile.component.spec.ts b/angular/src/app/myprofile/my-profile.component.spec.ts
@@ -3,7 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MyProfileComponent} from './my-profile.component';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {LoggerTestingModule} from 'ngx-logger/testing';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {RouterTestingModule} from '@angular/router/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@@ -31,7 +31,7 @@ describe('UserProfileComponent', () => {
         {provide: MatLegacyDialog, useValue: {}},
         {provide: MatLegacySnackBar, useValue: {}}
       ],
-      imports: [MatIconTestingModule, HttpClientTestingModule, LoggerTestingModule, WebStorageModule, RouterTestingModule, MatDialogModule, MatSnackBarModule],
+      imports: [MatIconTestingModule, HttpClientTestingModule, LoggerTestingModule, NgxWebstorageModule.forRoot(), RouterTestingModule, MatDialogModule, MatSnackBarModule],
       declarations: [MyProfileComponent],
       teardown: {destroyAfterEach: false}
     })

diff --git a/angular/src/app/notes/detail/note-details.component.spec.ts b/angular/src/app/notes/detail/note-details.component.spec.ts
@@ -13,7 +13,7 @@ import {MatIconModule} from '@angular/material/icon';
 // the corresponding jest test, so we have to do it ourselves. Import of MatDialogModule in beforeEach seems to be no longer necessary
 import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {MatCardModule} from '@angular/material/card';
-import {WebStorageModule} from 'ngx-web-storage';
+import {NgxWebstorageModule} from 'ngx-webstorage';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatIconTestingModule} from '@angular/material/icon/testing';
 import {MatTableModule} from '@angular/material/table';
@@ -54,7 +54,7 @@ describe('NoteDetailsComponent', () => {
     imports: [MatIconTestingModule, MatCardModule, LayoutModule, LoggerTestingModule, RouterTestingModule,
         HttpClientTestingModule,/* MatDialogModule,*/ MatTabsModule, MatTableModule,
       BrowserAnimationsModule, MatFormFieldModule, FormsModule, ReactiveFormsModule, MatSnackBarModule, MatInputModule,
-        MatIconModule, WebStorageModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule],
+        MatIconModule, NgxWebstorageModule.forRoot(), MatSelectModule, MatDatepickerModule, MatNativeDateModule],
     teardown: { destroyAfterEach: false }
 })
       .compileComponents();