more tests

packages/web/__tests__/storage/localStorage.spec.ts

@@ -4,11 +4,13 @@ import { promisedTimeout } from "@vue-composable/core";
 
 describe("localStorage", () => {
   const setItemSpy = jest.spyOn(Storage.prototype, 'setItem');
+  const consoleWarnSpy = jest.spyOn(console, 'warn');
 
   beforeEach(() => {
     localStorage.clear();
     useWebStorage('localStorage').remove();
     setItemSpy.mockClear();
+    consoleWarnSpy.mockClear()
   })
 
   it("should store object in localStorage if default is passed", async () => {
@@ -83,4 +85,25 @@ describe("localStorage", () => {
 
     expect(storage.value).toMatchObject({ k: 1 });
   });
+
+
+  it('should you try to sync', () => {
+    const key = "hello";
+    const { setSync } = useLocalStorage(key, { k: 10 });
+    const setSyncSpy = jest.spyOn(useWebStorage('localStorage').store!, 'setSync');
+
+    setSync(true);
+
+    expect(setSyncSpy).toHaveBeenCalledWith(key, true);
+
+  })
+
+  it('should warn if sessionStorage is not supported', () => {
+    setItemSpy.mockImplementationOnce(() => {
+      throw new Error('random')
+    });
+    const key = "hello";
+    useLocalStorage(key, { k: 10 });
+    expect(consoleWarnSpy).toHaveBeenCalledWith('[localStorage] is not available');
+  })
 });

packages/web/__tests__/storage/sessionStorage.spec.ts

@@ -4,11 +4,13 @@ import { promisedTimeout } from "@vue-composable/core";
 
 describe("sessionStorage", () => {
   const setItemSpy = jest.spyOn(Storage.prototype, 'setItem');
+  const consoleWarnSpy = jest.spyOn(console, 'warn');
 
   beforeEach(() => {
     sessionStorage.clear();
     useWebStorage('sessionStorage').remove();
     setItemSpy.mockClear();
+    consoleWarnSpy.mockClear();
   })
 
   it("should store object in sessionStorage if default is passed", async () => {
@@ -83,4 +85,22 @@ describe("sessionStorage", () => {
 
     expect(storage.value).toMatchObject({ k: 1 });
   });
+
+  it('should warn if you try to sync', () => {
+    const key = "hello";
+    const { setSync } = useSessionStorage(key, { k: 10 });
+
+    expect(consoleWarnSpy).not.toHaveBeenCalled();
+    setSync(true);
+    expect(consoleWarnSpy).toHaveBeenCalledWith('sync is not supported, please `useLocalStorage` instead');
+  })
+
+  it('should warn if sessionStorage is not supported', () => {
+    setItemSpy.mockImplementationOnce(() => {
+      throw new Error('random')
+    });
+    const key = "hello";
+    useSessionStorage(key, { k: 10 });
+    expect(consoleWarnSpy).toHaveBeenCalledWith('[sessionStorage] is not available');
+  })
 });

packages/web/__tests__/storage/storage.spec.ts

@@ -0,0 +1,18 @@
+import { useStorage } from '../../src';
+
+
+
+describe('storage', () => {
+  // const webStorageSpy = jest.spyOn(web, 'useWebStorage');
+
+  // beforeEach(() => {
+  //   webStorageSpy.mockClear();
+  // });
+
+  it('should get localStorage if supported', () => {
+    const { storage } = useStorage('');
+
+    expect(storage).not.toBeNull();
+  })
+
+})

packages/web/__tests__/storage/webStorage.spec.ts

@@ -1,7 +1,10 @@
 import { useWebStorage, WebStorage } from "../../src";
 import { nextTick } from "../utils";
+import { promisedTimeout } from "@vue-composable/core";
 
 describe("localStorage", () => {
+  const setItemSpy = jest.spyOn(Storage.prototype, 'setItem');
+
   const localStorageSpy = jest.spyOn(window, 'localStorage', 'get');
   const sessionStorageSpy = jest.spyOn(window, 'sessionStorage', 'get');
 
@@ -11,6 +14,7 @@ describe("localStorage", () => {
     useWebStorage('sessionStorage').remove();
     localStorageSpy.mockClear();
     sessionStorageSpy.mockClear();
+    setItemSpy.mockClear();
   })
 
   it('should return the same object if called multiple times', () => {
@@ -40,6 +44,47 @@ describe("localStorage", () => {
     expect(sessionStorageSpy).toBeCalledTimes(1);
   })
 
+  it('should parse string', () => {
+    const key = 'test1'
+    localStorage.setItem(key, key);
+    const { store } = useWebStorage('localStorage');
+
+    const i = store.getItem(key)!;
+
+    expect(i.value).toBe(key);
+  })
+
+  it('should removeItem', async () => {
+    const key = 'test1'
+    const val = 'test2';
+    const { store } = useWebStorage('localStorage');
+    store.setItem(key, key);
+
+    expect(localStorage.getItem(key)).toBe(key);
+    store.updateItem(key, val);
+    await nextTick();
+    await promisedTimeout(10);
+    expect(localStorage.getItem(key)).toBe(val);
+
+    store.removeItem(key);
+    expect(localStorage.getItem(key)).toBeNull();
+  })
+
+  it('should work if trying to remove not tracked item', () => {
+    const key = 'test1'
+    const non = 'test2';
+    localStorage.setItem(non, non);
+
+    const { store } = useWebStorage('localStorage');
+
+    store.updateItem(non, key);
+    // it should not update the localStorage value
+    expect(localStorage.getItem(non)).toBe(non);
+
+    store.removeItem(non);
+    expect(localStorage.getItem(non)).toBeNull();
+  })
+
 
   describe('sync behavior', () => {
     let storage: WebStorage = undefined as any;
@@ -84,6 +129,10 @@ describe("localStorage", () => {
       dispatchStorageEvent(k, JSON.stringify(item.value), JSON.stringify(item.value));
       expect(updateItemSpy).not.toBeCalled();
 
+      // different item 
+      dispatchStorageEvent(k + 'test', '', JSON.stringify(item.value));
+      expect(updateItemSpy).not.toBeCalled();
+
 
       // different value
       dispatchStorageEvent(k, JSON.stringify(item.value), JSON.stringify(n));
@@ -120,9 +169,7 @@ describe("localStorage", () => {
       expect(clearSpy).toHaveBeenCalledTimes(1);
     })
 
-    // TODO test quota exceeded
     it('should show quota errors', async () => {
-
       function getStorageTotalSize(upperLimit/*in bytes*/?: number) {
         var store = localStorage, testkey = "$_test"; // (NOTE: Test key is part of the storage!!! It should also be an even number of characters)
         var test = function (_size: number) { try { store.removeItem(testkey); store.setItem(testkey, new Array(_size + 1).join('0')); } catch (_ex) { return false; } return true; }
@@ -155,81 +202,7 @@ describe("localStorage", () => {
       await nextTick();
 
       expect(quotaError.value).toBe(true);
-
     })
-  })
-
-
-  // it("should store object in localStorage if default is passed", async () => {
-  //   const obj = { a: 1 };
-  //   const { storage } = useWebStorage("test", obj);
 
-  //   await promisedTimeout(100);
-
-  //   expect(storage.value).toMatchObject(obj);
-  //   expect(setItemSpy).toHaveBeenLastCalledWith("test", JSON.stringify(obj));
-  // });
-
-  // it("should update the localStorage if value changes", async () => {
-  //   const obj = { a: 111 };
-
-  //   const { storage } = useLocalStorage("test", obj);
-
-  //   expect(storage.value).toMatchObject(obj);
-  //   expect(setItemSpy).toHaveBeenLastCalledWith("test", JSON.stringify(obj));
-
-  //   storage.value.a = 33;
-  //   await nextTick();
-
-  //   expect(storage.value).toMatchObject({ a: 33 });
-  //   await promisedTimeout(20);
-  //   expect(setItemSpy).toHaveBeenLastCalledWith("test", JSON.stringify({ a: 33 }));
-  // });
-
-  // it("should get the same object if the same key is used", () => {
-  //   const key = "test";
-  //   const { storage: storage1 } = useLocalStorage(key, { a: 1 });
-  //   const { storage: storage2 } = useLocalStorage(key, { a: 1 });
-
-  //   expect(storage1).toBe(storage2);
-  // });
-
-  // it("should remove from localstorage", async () => {
-  //   const key = "test";
-  //   const { remove } = useLocalStorage(key, { a: 1 });
-
-  //   remove();
-  //   await nextTick();
-
-  //   expect(localStorage.getItem(key)).toBeFalsy();
-  // });
-
-  // it("should clear all localStorage keys", async () => {
-  //   localStorage.setItem("_other_", "secret");
-  //   const s1 = useLocalStorage("key", { a: 1 });
-  //   const s2 = useLocalStorage("key2", { a: 2 });
-
-  //   expect(localStorage.getItem('key')).toBe(JSON.stringify(s1.storage.value));
-  //   expect(localStorage.getItem('key2')).toBe(JSON.stringify(s2.storage.value));
-  //   expect(localStorage.getItem('_other_')).toBe("secret");
-
-  //   s1.clear();
-
-  //   await nextTick();
-  //   await promisedTimeout(200);
-
-  //   expect(s1.storage.value).toBeUndefined();
-  //   expect(s2.storage.value).toBeUndefined();
-  //   expect(localStorage.getItem('_other_')).toBe("secret");
-  // });
-
-
-  // it("should load from localStorage", () => {
-  //   const key = "hello";
-  //   localStorage.setItem(key, JSON.stringify({ k: 1 }));
-
-  //   const { storage } = useLocalStorage(key, { k: 10 });
-
-  //   expect(storage.value).toMatchObject({ k: 1 });
-  // });
+  })
 });

packages/web/src/storage/localStorage.ts

@@ -46,15 +46,18 @@ export function useLocalStorage(key: string, defaultValue?: any) {
     if (!storage) {
       storage = store.setItem(key, defaultValue);
     }
-  } else if (__DEV__) {
-    console.warn('[localStorage] is not available');
+  } else {
+    /* istanbul ignore else */
+    if (__DEV__) {
+      console.warn('[localStorage] is not available');
+    }
   }
 
   return {
     supported,
 
     storage,
-    
+
     clear,
     remove,
     setSync,

packages/web/src/storage/sessionStorage.ts

@@ -15,8 +15,9 @@ export function useSessionStorage(key: string, defaultValue?: any) {
   let storage = undefined;
 
   if (supported && store) {
+    /* istanbul ignore else */
     if (__DEV__) {
-      setSync = (s) => console.warn('sync is not supported, please `useLocalStorage` instead');
+      setSync = () => console.warn('sync is not supported, please `useLocalStorage` instead');
     }
     remove = () => store.removeItem(key);
     clear = () => store.clear();
@@ -25,8 +26,12 @@ export function useSessionStorage(key: string, defaultValue?: any) {
     if (!storage) {
       storage = store.setItem(key, defaultValue);
     }
-  } else if (__DEV__) {
-    console.warn('[sessionStorage] is not available');
+  }
+  else {
+    /* istanbul ignore else */
+    if (__DEV__) {
+      console.warn('[sessionStorage] is not available');
+    }
   }
 
   return {

packages/web/src/storage/storage.ts

@@ -6,7 +6,8 @@ import { useWebStorage } from "./webStorage";
 
 let canUseLocalStorage: boolean | undefined = undefined;
 
-export function useStorage<T = any>(
+
+export function useStorage<T extends object = any>(
   key: LocalStorageTyped<T> | string,
   defaultValue?: RefTyped<T>
 ): LocalStorageReturn<T>;