diff --git a/README.md b/README.md index 4a6e140..a43e90d 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,24 @@ try { } ``` +### Used in Hash +Basic Persist supports only url excluding hash. If you want to use hash, use the code below. +```js +import { HashPersist, registerHashPersist } from "@egjs/persist"; + +// Register globally to use HashPersist. +registerHashPersist(); + + +// Use HashPersist +const persist = new HashPersist(); + +// set +persist.set("a", "A"); + +// get +persist.get("a"); +``` ### Used in SPA diff --git a/index.d.ts b/index.d.ts index 91d6260..72e634d 100644 --- a/index.d.ts +++ b/index.d.ts @@ -30,12 +30,16 @@ declare module "@egjs/persist" { public remove(path: string): this; } + export class HashPersist extends Persist { + } + export class PersistQuotaExceededError extends Error { public name: string; public storageType: "SessionStorage" | "LocalStorage" | "History" | "None"; public key: string; public size: number; } + export function releaseEvent(): void; export function updateDepth(type?: number): void; export function replaceDepth(): void; export default Persist; diff --git a/package.json b/package.json index f522608..cab019c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@egjs/persist", - "version": "2.6.0-snapshot", + "version": "2.7.0-beta.0", "description": "Provide cache interface to handle persisted data among history navigation.", "main": "dist/persist.js", "module": "dist/persist.esm.js", @@ -8,7 +8,7 @@ "types": "./index.d.ts", "sideEffects": false, "scripts": { - "start": "webpack-dev-server --open", + "start": "rollup -c -w", "build": "rollup -c", "build:webpack": "webpack --env production", "test": "karma start", diff --git a/rollup.config.js b/rollup.config.js index f32399a..52df164 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -18,7 +18,7 @@ export default [ ], }), esm({ - input: "./src/Persist.js", + input: "./src/index.js", output: "./dist/persist.esm.js", }), ]; diff --git a/src/HashPersist.js b/src/HashPersist.js new file mode 100644 index 0000000..711a151 --- /dev/null +++ b/src/HashPersist.js @@ -0,0 +1,61 @@ +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ +/* eslint-disable class-methods-use-this */ +/* eslint-disable no-use-before-define */ +import {location} from "./browser"; +import {CONST_HASH} from "./consts"; +import Persist from "./Persist"; + +/** + * Get or store the current state of the web page using JSON according to hash. + * @ko 웹 페이지의 현재 상태를 hash에 따라 JSON 형식으로 저장하거나 읽는다. + * @memberof eg.Persist + * @alias eg.Persist.HashPersist + * @extends eg.Persist + * + * @support {"ie": "9+", "ch" : "latest", "ff" : "latest", "sf" : "latest" , "edge" : "latest", "ios" : "7+", "an" : "2.3+ (except 3.x)"} + */ +class HashPersist extends Persist { + /** + * Read value + * @param {String|Array} [path] - target path + * @return {String|Number|Boolean|Object|Array} + */ + get(path) { + return this._get(this._getKey(), this._getPath(path)); + } + /** + * Save value + * @param {String|Array} path - target path + * @param {String|Number|Boolean|Object|Array} value - value to save + * @return {Persist} + */ + set(path, value) { + return this._set(this._getKey(), this._getPath(path), value); + } + /** + * Remove value + * @param {String|Array} [path] - target path + * @return {Persist} + */ + remove(path) { + return this._remove(this._getKey(), this._getPath(path)); + } + _getKey() { + return `${CONST_HASH}${location.hash}`; + } + _getPath(path) { + let nextPath = path; + + if (Array.isArray(nextPath)) { + nextPath = [this.key, ...nextPath]; + } else { + nextPath = `${this.key}.${nextPath}`; + } + return nextPath; + } +} + +export default HashPersist; diff --git a/src/Persist.js b/src/Persist.js index a05849d..2c9f9e8 100755 --- a/src/Persist.js +++ b/src/Persist.js @@ -1,3 +1,8 @@ +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ +/* eslint-disable class-methods-use-this */ /* eslint-disable no-use-before-define */ import { reset, @@ -5,186 +10,9 @@ import { getStateByKey, getStorage, } from "./storageManager"; -import PersistQuotaExceededError from "./PersistQuotaExceededError"; -import {isNeeded, getUrl, getStorageKey, getNavigationType, isQuotaExceededError} from "./utils"; -import {console, window} from "./browser"; -import {TYPE_BACK_FORWARD, TYPE_NAVIGATE, CONST_PERSIST_STATE, CONST_DEPTHS, CONST_LAST_URL} from "./consts"; - -let currentUrl = ""; - - -function execRec(obj, path, func) { - let _obj = obj; - - if (!_obj) { - _obj = isNaN(path[0]) ? {} : []; - } - - const head = path.shift(); - - if (path.length === 0) { - if (_obj instanceof Array && isNaN(head)) { - console.warn("Don't use key string on array"); - } - func(_obj, head); - return _obj; - } - - _obj[head] = execRec(_obj[head], path, func); - return _obj; -} - -function setPersistState(key, value) { - try { - setStateByKey(CONST_PERSIST_STATE, key, value); - } catch (e) { - if (catchQuotaExceededError(e, CONST_PERSIST_STATE, value)) { - if (key === CONST_LAST_URL) { - setPersistState(key, value); - } else if (key === CONST_DEPTHS) { - setPersistState(key, value && value.slice(1)); - } - } - } -} -function getPersistState(key) { - return getStateByKey(CONST_PERSIST_STATE, key); -} - -function replaceDepth() { - const url = getUrl(); - - if (currentUrl === url) { - return; - } - const prevUrl = currentUrl; - - try { - currentUrl = url; - - const depths = getPersistState(CONST_DEPTHS) || []; - - // remove prev url - const prevIndex = depths.indexOf(prevUrl); - - if (prevIndex >= 0) { - depths.splice(prevIndex, 1); - reset(getStorageKey(prevUrl)); - } - - // remove next url info - const currentIndex = depths.indexOf(url); - - if (currentIndex >= 0) { - depths.splice(currentIndex, 1); - reset(getStorageKey(url)); - } - - depths.push(url); - setPersistState(CONST_DEPTHS, depths); - setPersistState(CONST_LAST_URL, url); - } catch (e) { - // revert currentUrl - currentUrl = prevUrl; - throw e; - } -} - -function updateDepth(type = 0) { - const url = getUrl(); - - if (currentUrl === url) { - return; - } - // url is not the same for the first time, pushState, or replaceState. - const prevUrl = currentUrl; - - try { - currentUrl = url; - const depths = getPersistState(CONST_DEPTHS) || []; - - if (type === TYPE_BACK_FORWARD) { - // Change current url only - const currentIndex = depths.indexOf(url); - - ~currentIndex && setPersistState(CONST_LAST_URL, url); - } else { - const prevLastUrl = getPersistState(CONST_LAST_URL); - - reset(getStorageKey(url)); - - if (type === TYPE_NAVIGATE && url !== prevLastUrl) { - // Remove all url lists with higher index than current index - const prevLastIndex = depths.indexOf(prevLastUrl); - const removedList = depths.splice(prevLastIndex + 1, depths.length); - - removedList.forEach(removedUrl => { - reset(getStorageKey(removedUrl)); - }); - // If the type is NAVIGATE and there is information about current url, delete it. - const currentIndex = depths.indexOf(url); - - ~currentIndex && depths.splice(currentIndex, 1); - } - // Add depth for new address. - if (depths.indexOf(url) < 0) { - depths.push(url); - } - setPersistState(CONST_DEPTHS, depths); - setPersistState(CONST_LAST_URL, url); - } - } catch (e) { - // revert currentUrl - currentUrl = prevUrl; - throw e; - } -} - -function catchQuotaExceededError(e, key, value) { - if (clearFirst()) { - return true; - } else if (isQuotaExceededError(e)) { - throw new PersistQuotaExceededError(key, value ? JSON.stringify(value) : ""); - } else { - throw e; - } -} - -function clearFirst() { - const depths = getPersistState(CONST_DEPTHS) || []; - const removed = depths.splice(0, 1); - - if (!removed.length) { - // There is an error because there is no depth to add data. - return false; - } - const removedUrl = removed[0]; - - reset(getStorageKey(removedUrl)); - if (currentUrl === removedUrl) { - currentUrl = ""; - setPersistState(CONST_LAST_URL, ""); - if (!depths.length) { - // I tried to add myself, but it didn't add up, so I got an error. - return false; - } - } - setPersistState(CONST_DEPTHS, depths); - // Clear the previous record and try to add data again. - return true; -} - -function clear() { - const depths = getPersistState(CONST_DEPTHS) || []; - - depths.forEach(url => { - reset(getStorageKey(url)); - }); - - reset(CONST_PERSIST_STATE); - - currentUrl = ""; -} +import {isNeeded, getUrlKey, execRec} from "./utils"; +import {TYPE_NAVIGATE} from "./consts"; +import {clear, updateDepth, catchQuotaExceededError} from "./historyManager"; /** * Get or store the current state of the web page using JSON. @@ -223,29 +51,43 @@ class Persist { constructor(key) { this.key = key || ""; } - /** * Read value * @param {String?} path target path * @return {String|Number|Boolean|Object|Array} */ get(path) { + return this._get(this.key, path); + } + /** + * Save value + * @param {String|Array} [path] - target path + * @param {String|Number|Boolean|Object|Array} value value to save + * @return {Persist} + */ + set(path, value) { + return this._set(this.key, path, value); + } + /** + * Remove value + * @param {String|Array} path - target path + * @return {Persist} + */ + remove(path) { + return this._remove(this.key, path); + } + _get(key, path) { // update url for pushState, replaceState updateDepth(TYPE_NAVIGATE); - // find path - const urlKey = getStorageKey(getUrl()); - const globalState = getStateByKey(urlKey, this.key); - + const urlKey = getUrlKey(); + const globalState = getStateByKey(urlKey, key); if (!path || path.length === 0) { return globalState; } - const pathToken = path.split("."); - let currentItem = globalState; - let isTargetExist = true; for (let i = 0; i < pathToken.length; i++) { @@ -260,18 +102,11 @@ class Persist { } return currentItem; } - /** - * Save value - * @param {String} path target path - * @param {String|Number|Boolean|Object|Array} value value to save - * @return {Persist} - */ - set(path, value) { + _set(key, path, value) { // update url for pushState, replaceState updateDepth(TYPE_NAVIGATE); - // find path - const key = this.key; - const urlKey = getStorageKey(getUrl()); + + const urlKey = getUrlKey(); const globalState = getStateByKey(urlKey, key); try { @@ -290,23 +125,17 @@ class Persist { } } catch (e) { if (catchQuotaExceededError(e, urlKey, value)) { - this.set(path, value); + this._set(key, path, value); } } return this; } - /** - * Remove value - * @param {String} path target path - * @return {Persist} - */ - remove(path) { + _remove(key, path) { // update url for pushState, replaceState updateDepth(TYPE_NAVIGATE); // find path - const key = this.key; - const urlKey = getStorageKey(getUrl()); + const urlKey = getUrlKey(); const globalState = getStateByKey(urlKey, key); try { @@ -327,41 +156,11 @@ class Persist { } } catch (e) { if (catchQuotaExceededError(e)) { - this.remove(path); + this._remove(key, path); } } return this; } } - -if ("onpopstate" in window) { - window.addEventListener("popstate", () => { - // popstate event occurs when backward or forward - try { - updateDepth(TYPE_BACK_FORWARD); - } catch (e) { - // Global function calls prevent errors. - if (!isQuotaExceededError(e)) { - throw e; - } - } - }); -} - -// If navigation's type is not TYPE_BACK_FORWARD, delete information about current url. -try { - updateDepth(getNavigationType()); -} catch (e) { - // Global function calls prevent errors. - if (!isQuotaExceededError(e)) { - throw e; - } -} - -export { - updateDepth, - replaceDepth, -}; - export default Persist; diff --git a/src/PersistHistory.js b/src/PersistHistory.js new file mode 100644 index 0000000..1b74c73 --- /dev/null +++ b/src/PersistHistory.js @@ -0,0 +1,13 @@ +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ +const PersistHistory = { + url: "", + hashUrl: "", + hash: null, + length: 0, + useHash: false, +}; + +export default PersistHistory; diff --git a/src/PersistQuotaExceededError.js b/src/PersistQuotaExceededError.js index 21aa09a..bd74250 100644 --- a/src/PersistQuotaExceededError.js +++ b/src/PersistQuotaExceededError.js @@ -1,3 +1,7 @@ +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ import {getStorage, getStorageType} from "./storageManager"; const setPrototypeOf = Object.setPrototypeOf || ((obj, proto) => { diff --git a/src/browser.js b/src/browser.js index fbdcf0f..f5bf53e 100755 --- a/src/browser.js +++ b/src/browser.js @@ -1,3 +1,7 @@ +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ const win = (typeof window !== `undefined` && window) || {}; export {win as window}; diff --git a/src/consts.js b/src/consts.js index b3d61b0..81ed5fc 100644 --- a/src/consts.js +++ b/src/consts.js @@ -1,8 +1,14 @@ +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ import {performance, navigator, parseFloat} from "./browser"; export const CONST_PERSIST = "___persist___"; -export const CONST_PERSIST_STATE = `state${CONST_PERSIST}`; +export const CONST_HASH = `___hash___`; export const CONST_DEPTHS = "depths"; +export const CONST_HASH_DEPTHS_PERSIST = `${CONST_HASH}${CONST_DEPTHS}${CONST_PERSIST}`; +export const CONST_PERSIST_STATE = `state${CONST_PERSIST}`; export const CONST_LAST_URL = "lastUrl"; const navigation = performance && performance.navigation; diff --git a/src/historyManager.js b/src/historyManager.js new file mode 100644 index 0000000..ae326ff --- /dev/null +++ b/src/historyManager.js @@ -0,0 +1,380 @@ +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ +/* eslint-disable no-use-before-define */ +import { + reset, + setState, + getState, + getStateByKey, + setStateByKey, + getDepths, + getPersistState, +} from "./storageManager"; +import PersistHistory from "./PersistHistory"; +import {location, history, document, window} from "./browser"; +import {getNavigationType, getUrl, getStorageKey, getUrlKey, getHashUrl} from "./utils"; +import {TYPE_BACK_FORWARD, TYPE_NAVIGATE, CONST_PERSIST_STATE, CONST_DEPTHS, CONST_LAST_URL, CONST_HASH_DEPTHS_PERSIST, CONST_HASH} from "./consts"; +import PersistQuotaExceededError from "./PersistQuotaExceededError"; + + +function setHashDepths(depths, key = getUrlKey()) { + return setStateByKey(key, CONST_HASH_DEPTHS_PERSIST, depths); +} + +/* + * flush current history state for hash + */ +function resetHash(key, hash) { + const originalState = getState(key); + const hashDepths = originalState[CONST_HASH_DEPTHS_PERSIST]; + + if (hashDepths && hashDepths.length) { + if (typeof hash === "undefined") { + const nextState = {}; + + for (const name in originalState) { + if (name.indexOf(CONST_HASH) === 0) { + nextState[name] = originalState[name]; + } + } + setState(key, nextState); + } else { + delete originalState[`${CONST_HASH}${hash}`]; + setState(key, originalState); + } + } else { + setState(key, null); + } +} +function replaceHashDepth() { + const prevHash = PersistHistory.hash; + const prevUrl = PersistHistory.url; + const prevUrlKey = getStorageKey(prevUrl); + const prevHashUrl = PersistHistory.hashUrl; + + const hashUrl = getHashUrl(); + const urlKey = getUrlKey(); + const hash = location.hash; + const hashLength = history.length; + + if (hashUrl === prevHashUrl) { + return; + } + + PersistHistory.hash = hash; + PersistHistory.hashUrl = hashUrl; + PersistHistory.length = hashLength; + // remove hash info + resetHash(getStorageKey(prevUrl), prevHash); + + // remove prev hash + const prevDepths = getHashDepths(prevUrlKey); + const prevHashIndex = prevDepths.indexOf(prevHash); + + if (prevHashIndex > -1) { + prevDepths.splice(prevHashIndex, 1); + } + const isSameKey = urlKey === prevUrlKey; + const depths = isSameKey ? prevDepths : getHashDepths(); + const hashIndex = depths.indexOf(hash); + + // remove next hash info + if (hashIndex > -1) { + resetHash(urlKey, hash); + depths.splice(hashIndex, 1); + } + if (isSameKey) { + const addedIndex = hashIndex === -1 || hashIndex > prevHashIndex ? + prevHashIndex : prevHashIndex - 1; + + depths.splice(addedIndex, 0, hash); + } else { + depths.splice(0, 0, hash); + setHashDepths(prevDepths, prevUrlKey); + } + + // add next hash + setHashDepths(depths, urlKey); +} +function updateHashDepth(type = 0) { + const prevLength = PersistHistory.length; + const prevHash = PersistHistory.hash; + const prevUrl = PersistHistory.url; + const prevHashUrl = PersistHistory.hashUrl; + + const url = getUrl(); + const hashUrl = getHashUrl(); + const urlKey = getUrlKey(); + const hash = location.hash; + const hashLength = history.length; + + let hashType = type; + + if (hashUrl === prevHashUrl) { + return; + } + const historyState = history.state; + + if (historyState == null) { + hashType = TYPE_NAVIGATE; + + // warning + history.replaceState({[CONST_PERSIST_STATE]: true}, document.title, location.href); + } else if (type === TYPE_BACK_FORWARD && hashLength !== prevLength) { + hashType = TYPE_NAVIGATE; + } + PersistHistory.hash = hash; + PersistHistory.hashUrl = hashUrl; + PersistHistory.length = hashLength; + + const depths = getHashDepths(); + + if (hashType === TYPE_BACK_FORWARD) { + return; + } + + // remove url key + // remove hash key for first refresh or first navigate + resetHash(urlKey, hash); + + // Remove all url lists with higher index than current index + if (hashType === TYPE_NAVIGATE) { + const prevLastIndex = prevUrl === url ? + depths.indexOf(prevHash) : 0; + + if (prevLastIndex > -1 && prevHash != null) { + const removedList = depths.splice(prevLastIndex + 1, depths.length); + + removedList.forEach(removedHash => { + resetHash(urlKey, removedHash); + }); + } + // If the type is NAVIGATE and there is information about current hash, delete it. + const currentIndex = depths.indexOf(hash); + + ~currentIndex && depths.splice(currentIndex, 1); + } + + // Add depth for new address. + if (depths.indexOf(hash) < 0) { + depths.push(hash); + } + setHashDepths(depths); +} + +export function getHashDepths(key = getUrlKey()) { + return getStateByKey(key, CONST_HASH_DEPTHS_PERSIST) || []; +} + +export function isQuotaExceededError(e) { + return e.name === "QuotaExceededError" || e.name === "PersistQuotaExceededError"; +} + +export function catchQuotaExceededError(e, key, value) { + if (clearFirst()) { + return true; + } else if (isQuotaExceededError(e)) { + throw new PersistQuotaExceededError(key, value ? JSON.stringify(value) : ""); + } else { + throw e; + } +} + +export function trySetPersistState(key, value) { + try { + setStateByKey(CONST_PERSIST_STATE, key, value); + } catch (e) { + if (catchQuotaExceededError(e, CONST_PERSIST_STATE, value)) { + if (key === CONST_LAST_URL) { + trySetPersistState(key, value); + } else if (key === CONST_DEPTHS) { + trySetPersistState(key, value && value.slice(1)); + } + } + } +} + +export function clearFirst() { + const depths = getDepths(); + const removed = depths.splice(0, 1); + + if (!removed.length) { + // There is an error because there is no depth to add data. + return false; + } + const removedUrl = removed[0]; + + reset(getStorageKey(removedUrl)); + if (PersistHistory.url === removedUrl) { + PersistHistory.url = ""; + trySetPersistState(CONST_LAST_URL, ""); + if (!depths.length) { + // I tried to add myself, but it didn't add up, so I got an error. + return false; + } + } + + trySetPersistState(CONST_DEPTHS, depths); + // Clear the previous record and try to add data again. + return true; +} + +export function replaceDepth() { + const url = getUrl(); + + if (PersistHistory.useHash) { + replaceHashDepth(); + } + if (PersistHistory.url === url) { + return; + } + const prevUrl = PersistHistory.url; + + try { + PersistHistory.url = url; + + const depths = getDepths(); + + // remove prev url + const prevIndex = depths.indexOf(prevUrl); + + if (prevIndex >= 0) { + depths.splice(prevIndex, 1); + resetHash(getStorageKey(prevUrl)); + } + + // remove next url info + const currentIndex = depths.indexOf(url); + + if (currentIndex >= 0) { + depths.splice(currentIndex, 1); + resetHash(getStorageKey(url)); + } + if (prevIndex >= 0) { + const addedIndex = currentIndex === -1 || currentIndex > prevIndex ? + prevIndex : + prevIndex - 1; + + depths.splice(addedIndex, 0, url); + } else { + depths.push(url); + } + trySetPersistState(CONST_DEPTHS, depths); + trySetPersistState(CONST_LAST_URL, url); + } catch (e) { + // revert PersistHistory.url + PersistHistory.url = prevUrl; + throw e; + } +} + +export function updateDepth(type = 0) { + const url = getUrl(); + + if (PersistHistory.useHash) { + updateHashDepth(type); + } + if (PersistHistory.url === url) { + return; + } + // url is not the same for the first time, pushState, or replaceState. + const prevUrl = PersistHistory.url; + + try { + PersistHistory.url = url; + const depths = getDepths(); + + if (type === TYPE_BACK_FORWARD) { + // Change current url only + const currentIndex = depths.indexOf(url); + + ~currentIndex && trySetPersistState(CONST_LAST_URL, url); + } else { + const prevLastUrl = getPersistState(CONST_LAST_URL); + + // remove url key + // remove hash key for first refresh or first navigate + resetHash(getStorageKey(url)); + + if (type === TYPE_NAVIGATE && url !== prevLastUrl) { + // Remove all url lists with higher index than current index + const prevLastIndex = depths.indexOf(prevLastUrl); + + if (prevLastIndex >= -1) { + const removedList = depths.splice(prevLastIndex + 1, depths.length); + + removedList.forEach(removedUrl => { + reset(getStorageKey(removedUrl)); + }); + } + // If the type is NAVIGATE and there is information about current url, delete it. + const currentIndex = depths.indexOf(url); + + ~currentIndex && depths.splice(currentIndex, 1); + } + // Add depth for new address. + if (depths.indexOf(url) < 0) { + depths.push(url); + } + trySetPersistState(CONST_DEPTHS, depths); + trySetPersistState(CONST_LAST_URL, url); + } + } catch (e) { + // revert PersistHistory.url + PersistHistory.url = prevUrl; + throw e; + } +} + +export function clear() { + const depths = getDepths(); + + depths.forEach(url => { + reset(getStorageKey(url)); + }); + + reset(CONST_PERSIST_STATE); + + PersistHistory.url = ""; + PersistHistory.hashUrl = ""; + PersistHistory.hash = null; +} + +export function registerHashPersist() { + if (PersistHistory.useHash) { + return; + } + PersistHistory.useHash = true; + updateHashDepth(getNavigationType()); +} + +export function releaseEvent() { + window.removeEventListener("popstate", onPopState); +} +function onPopState() { + // popstate event occurs when backward or forward + try { + updateDepth(TYPE_BACK_FORWARD); + } catch (e) { + // Global function calls prevent errors. + if (!isQuotaExceededError(e)) { + throw e; + } + } +} +// execute global +if ("onpopstate" in window) { + window.addEventListener("popstate", onPopState); +} + +// If navigation's type is not TYPE_BACK_FORWARD, delete information about current url. +try { + updateDepth(getNavigationType()); +} catch (e) { + // Global function calls prevent errors. + if (!isQuotaExceededError(e)) { + throw e; + } +} diff --git a/src/index.js b/src/index.js index a677072..992ac50 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,20 @@ -import Persist, {updateDepth, replaceDepth} from "./Persist"; +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ +import Persist from "./Persist"; +import HashPersist from "./HashPersist"; import PersistQuotaExceededError from "./PersistQuotaExceededError"; - export { updateDepth, replaceDepth, + registerHashPersist, + releaseEvent, +} from "./historyManager"; + +export { + HashPersist, PersistQuotaExceededError, }; diff --git a/src/index.umd.js b/src/index.umd.js index 337d5c7..9395498 100755 --- a/src/index.umd.js +++ b/src/index.umd.js @@ -1,3 +1,7 @@ +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ import Persist, * as modules from "./index"; for (const name in modules) { diff --git a/src/persist-migrate.js b/src/persist-migrate.js index 6bd3dba..b42e2f0 100644 --- a/src/persist-migrate.js +++ b/src/persist-migrate.js @@ -1,3 +1,7 @@ +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ /* eslint-disable */ import {window} from "./browser"; import { getStorageKey, getUrl } from "./utils"; diff --git a/src/storageManager.js b/src/storageManager.js index 09950dc..e9ae07c 100644 --- a/src/storageManager.js +++ b/src/storageManager.js @@ -1,5 +1,9 @@ -import {window, history, location, sessionStorage, localStorage} from "./browser"; -import {CONST_PERSIST} from "./consts"; +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ +import {window, console, history, location, sessionStorage, localStorage} from "./browser"; +import {CONST_DEPTHS, CONST_PERSIST, CONST_PERSIST_STATE} from "./consts"; const isSupportState = history && "replaceState" in history && "state" in history; let storageType = "None"; @@ -48,7 +52,7 @@ function warnInvalidStorageValue() { /* * Get state value */ -function getState(key) { +export function getState(key) { let state; let stateStr; @@ -95,7 +99,7 @@ function getState(key) { /* * Set state value */ -function setState(key, state) { +export function setState(key, state) { if (storage) { if (state) { storage.setItem( @@ -169,3 +173,11 @@ export function setStateByKey(key, valueKey, data) { export function reset(key) { setState(key, null); } + +export function getPersistState(key) { + return getStateByKey(CONST_PERSIST_STATE, key); +} + +export function getDepths() { + return getPersistState(CONST_DEPTHS) || []; +} diff --git a/src/utils.js b/src/utils.js index fda2eff..3543fd9 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,4 +1,8 @@ -import {navigator, parseFloat, performance, location} from "./browser"; +/* + * Copyright (c) 2015 NAVER Corp. + * egjs projects are licensed under the MIT license + */ +import {navigator, parseFloat, performance, location, console} from "./browser"; import {CONST_PERSIST} from "./consts"; const userAgent = navigator ? navigator.userAgent : ""; @@ -26,14 +30,43 @@ export function getNavigationType() { performance.navigation.type; } + +export function getHashUrl() { + return location ? location.href : ""; +} + export function getUrl() { - return location ? location.href.split("#")[0] : ""; + return getHashUrl().split("#")[0]; } export function getStorageKey(name) { return name + CONST_PERSIST; } -export function isQuotaExceededError(e) { - return e.name === "QuotaExceededError" || e.name === "PersistQuotaExceededError"; +export function getUrlKey() { + return getStorageKey(getUrl()); +} + +export function execRec(obj, path, func) { + let _obj = obj; + + if (!_obj) { + const firstElement = path[0]; + + _obj = isNaN(firstElement) || firstElement === "" ? {} : []; + } + + + const head = path.shift(); + + if (path.length === 0) { + if (_obj instanceof Array && isNaN(head)) { + console.warn("Don't use key string on array"); + } + func(_obj, head); + return _obj; + } + + _obj[head] = execRec(_obj[head], path, func); + return _obj; } diff --git a/test/manual/hash.html b/test/manual/hash.html new file mode 100755 index 0000000..10eb5c4 --- /dev/null +++ b/test/manual/hash.html @@ -0,0 +1,46 @@ + + +Persist - Hash + + + + + + + #a + #b + + + + + + + + \ No newline at end of file diff --git a/test/unit/HashPersist.spec.js b/test/unit/HashPersist.spec.js new file mode 100755 index 0000000..dc30466 --- /dev/null +++ b/test/unit/HashPersist.spec.js @@ -0,0 +1,362 @@ +/* eslint-disable no-new */ +/* eslint-disable no-unused-expressions */ +import Persist from "../../src/Persist"; +import {injectHashPersist, mockPersistModulesWithBrowser, reloadPersist, wait} from "./TestHelper"; +import {HashPersist, registerHashPersist} from "../../src"; +import PersistHistory from "../../src/PersistHistory"; +import {clear, getHashDepths} from "../../src/historyManager"; + +describe("HashPersist", () => { + beforeEach(() => { + location.hash = ""; + clear(); + sessionStorage.clear(); + registerHashPersist(); + }); + + afterEach(() => { + PersistHistory.useHash = false; + }); + + it("should check whether the default Persist gets the value properly even if the hash changes", async () => { + // Given + const persist = new Persist(); + + persist.set("a", "a"); + + // When + location.hash = "a"; + await wait(); + + // Then + expect(PersistHistory.hash).to.be.equals("#a"); + expect(persist.get("a")).to.be.equals("a"); + expect(getHashDepths()).to.be.deep.equals(["", "#a"]); + }); + + it(`should check whether the value of HashPersist changes according to hash. ("" => #a)`, async () => { + // Given + const persist = new HashPersist(); + + // hash "" + persist.set("a", "a"); + + // When + location.hash = "a"; + await wait(); + + // Then + expect(PersistHistory.hash).to.be.equals("#a"); + expect(persist.get("a")).to.be.equals(null); + expect(getHashDepths()).to.be.deep.equals(["", "#a"]); + }); + + it(`should check whether the value of HashPersist changes according to hash. ("" => #a => #b)`, async () => { + // Given + const persist = new HashPersist(); + + // hash "" + persist.set("a", "a"); + + // When + // hash #a + location.hash = "a"; + await wait(); + persist.set("a", "b"); + + // hash #b + location.hash = "b"; + await wait(); + + // Then + expect(PersistHistory.hash).to.be.equals("#b"); + expect(persist.get("a")).to.be.equals(null); + expect(getHashDepths()).to.be.deep.equals(["", "#a", "#b"]); + }); + it(`should check whether the value of HashPersist changes according to hash. ("" => #a => ""(bf))`, async () => { + // Given + const persist = new HashPersist(); + + // hash "" + persist.set("a", "a"); + + // When + // hash #a + location.hash = "a"; + await wait(); + + persist.set("a", "b"); + + // hash "" (bf) + history.back(); + await wait(); + + // Then + expect(PersistHistory.hash).to.be.equals(""); + expect(persist.get("a")).to.be.equals("a"); + expect(getHashDepths()).to.be.deep.equals(["", "#a"]); + }); + it(`should check if the order of hash depth is changed when navigating to overlapping hashes. ("" => #a => ""(navigate))`, async () => { + // Given + const persist = new HashPersist(); + + // hash "" + persist.set("a", "a"); + + // When + // hash #a + location.hash = "a"; + await wait(); + + persist.set("a", "b"); + + // hash "" (navigate) + location.hash = ""; + await wait(); + + // Then + expect(PersistHistory.hash).to.be.equals(""); + expect(persist.get("a")).to.be.equals(null); + expect(getHashDepths()).to.be.deep.equals(["#a", ""]); + }); + it(`should check if the value of "#a" is overwritten ("" => #a => ""(bf) => #a(navigate))`, async () => { + // Given + const persist = new HashPersist(); + + // hash "" + persist.set("a", "a"); + + // When + // hash #a + location.hash = "a"; + await wait(); + + persist.set("a", "b"); + + // hash "" (bf) + history.back(); + await wait(); + + // hash #b (navigate) + location.hash = "a"; + await wait(); + + // Then + expect(PersistHistory.hash).to.be.equals("#a"); + expect(persist.get("a")).to.be.equals(null); + expect(getHashDepths()).to.be.deep.equals(["", "#a"]); + }); + it(`should check if forward history disappears when navigating the page. ("" => #a => ""(bf) => #b(navigate))`, async () => { + // Given + const persist = new HashPersist(); + + // hash "" + persist.set("a", "a"); + + // When + // hash #a + location.hash = "a"; + await wait(); + + persist.set("a", "b"); + + // hash "" (bf) + history.back(); + await wait(); + + // hash #b (navigate) + location.hash = "b"; + await wait(); + + // Then + expect(PersistHistory.hash).to.be.equals("#b"); + expect(getHashDepths()).to.be.deep.equals(["", "#b"]); + }); + it(`should check if the value is cleared upon reload. ("" => #a => ""(bf, reload))`, async () => { + // Given + const persist = new HashPersist(); + + // hash "" + persist.set("a", "a"); + + // When + // hash #a + location.hash = "a"; + await wait(); + + persist.set("a", "b"); + + // hash "" (bf) + history.back(); + await wait(); + + // hash "" (virtual reload) + reloadPersist(); + await wait(); + + // Then + expect(PersistHistory.hash).to.be.equals(""); + expect(persist.get("a")).to.be.equals(null); + expect(getHashDepths()).to.be.deep.equals(["", "#a"]); + }); + it(`should check if it works even if the url value changes ("" => a#a => ""(bf) => a#a(bf))`, async () => { + // Given + const mockModules = mockPersistModulesWithBrowser(); + const InjectedHashPersist = injectHashPersist(mockModules); + + mockModules["./historyManager"].registerHashPersist(); + const persist = new InjectedHashPersist(); + const mockHistory = mockModules["./browser"].history; + const mockPersistHistory = mockModules["./PersistHistory"]; + + // hash "" + persist.set("a", "a"); + + // hash a#a + mockHistory.pushState({}, "", `/a#a`); + persist.set("a", "b"); + + // When + // hash "" + mockHistory.go(-1); + const noHashValue = persist.get("a"); + + // hash a#a + mockHistory.go(1); + const aHashValue = persist.get("a"); + + // Then + expect(mockPersistHistory.hash).to.be.equals("#a"); + expect(noHashValue).to.be.equals("a"); + expect(aHashValue).to.be.equals("b"); + }); + it(`should checks whether the value is replaced when the state is replaced in the same url ("" => #a => #b(replace))`, async () => { + // Given + const mockModules = mockPersistModulesWithBrowser(); + const InjectedHashPersist = injectHashPersist(mockModules); + const mockHistoryManager = mockModules["./historyManager"]; + + mockHistoryManager.registerHashPersist(); + const persist = new InjectedHashPersist(); + const mockHistory = mockModules["./browser"].history; + const mockLocation = mockModules["./browser"].location; + const mockPersistHistory = mockModules["./PersistHistory"]; + const defaultUrl = mockLocation.href.replace(mockLocation.origin, ""); + + // hash "" + persist.set("a", "a"); + + // hash #a + mockHistory.pushState({}, "", `${defaultUrl}#a`); + persist.set("a", "b"); + + // When + // hash #b (replace) + mockHistory.replaceState({}, "", `${defaultUrl}#b`); + mockHistoryManager.replaceDepth(); + + // Then + expect(mockHistoryManager.getHashDepths()).to.be.deep.equals(["", "#b"]); + expect(mockPersistHistory.hash).to.be.equals("#b"); + }); + it(`should checks whether the value is replaced when the state is replaced in another url ("" => #a => a#a(replace))`, async () => { + // Given + const mockModules = mockPersistModulesWithBrowser(); + const InjectedHashPersist = injectHashPersist(mockModules); + const mockHistoryManager = mockModules["./historyManager"]; + + mockHistoryManager.registerHashPersist(); + const persist = new InjectedHashPersist(); + const mockHistory = mockModules["./browser"].history; + const mockLocation = mockModules["./browser"].location; + const getUrlKey = mockModules["./utils"].getUrlKey; + const mockPersistHistory = mockModules["./PersistHistory"]; + const defaultUrl = mockLocation.href.replace(mockLocation.origin, ""); + const prevUrlKey = getUrlKey(); + + // hash "" + persist.set("a", "a"); + + // hash #a + mockHistory.pushState({}, "", `${defaultUrl}#a`); + persist.set("a", "b"); + + // When + // hash a#a (replace) + mockHistory.replaceState({}, "", `/a#a`); + mockHistoryManager.replaceDepth(); + + // Then + expect(mockHistoryManager.getHashDepths(prevUrlKey)).to.be.deep.equals([""]); + expect(mockHistoryManager.getHashDepths()).to.be.deep.equals(["#a"]); + expect(mockPersistHistory.hash).to.be.equals("#a"); + }); + it(`should checks whether the value is replaced when the state is replaced in another url ("" => a#a => a#b => ""(bf) => a#c(replace))`, async () => { + // Given + const mockModules = mockPersistModulesWithBrowser(); + const InjectedHashPersist = injectHashPersist(mockModules); + const mockHistoryManager = mockModules["./historyManager"]; + + mockHistoryManager.registerHashPersist(); + const persist = new InjectedHashPersist(); + const mockHistory = mockModules["./browser"].history; + const mockPersistHistory = mockModules["./PersistHistory"]; + + // hash "" + persist.set("a", "a"); + + // hash a#a + mockHistory.pushState({}, "", `/a#a`); + persist.set("a", "a#a"); + + // hash a#b + mockHistory.pushState({}, "", `/a#b`); + persist.set("a", "a#b"); + + // hash "" + mockHistory.go(-2); + + // When + // hash a#c + mockHistory.replaceState({}, "", `/a#c`); + mockHistoryManager.replaceDepth(); + + // Then + expect(mockHistoryManager.getHashDepths()).to.be.deep.equals(["#c", "#a", "#b"]); + expect(mockPersistHistory.hash).to.be.equals("#c"); + }); + it(`should checks whether the value is replaced when the state is replaced in another url ("" => a#a => a#b => ""(bf) => a#b(replace))`, async () => { + // Given + const mockModules = mockPersistModulesWithBrowser(); + const InjectedHashPersist = injectHashPersist(mockModules); + const mockHistoryManager = mockModules["./historyManager"]; + + mockHistoryManager.registerHashPersist(); + const persist = new InjectedHashPersist(); + const mockHistory = mockModules["./browser"].history; + const mockPersistHistory = mockModules["./PersistHistory"]; + + // hash "" + persist.set("a", "a"); + + // hash a#a + mockHistory.pushState({}, "", `/a#a`); + persist.set("a", "a#a"); + + // hash a#b + mockHistory.pushState({}, "", `/a#b`); + persist.set("a", "a#b"); + + // hash "" + mockHistory.go(-2); + + // When + // hash a#b + mockHistory.replaceState({}, "", `/a#b`); + mockHistoryManager.replaceDepth(); + + // Then + expect(mockHistoryManager.getHashDepths()).to.be.deep.equals(["#b", "#a"]); + expect(mockPersistHistory.hash).to.be.equals("#b"); + }); +}); diff --git a/test/unit/TestHelper.js b/test/unit/TestHelper.js index b90ccf5..5220740 100644 --- a/test/unit/TestHelper.js +++ b/test/unit/TestHelper.js @@ -1,9 +1,15 @@ +/* eslint-disable no-use-before-define */ import PersistInjector from "inject-loader!../../src/Persist"; +import HashPersistInjector from "inject-loader!../../src/HashPersist"; import StorageManagerInjector from "inject-loader!../../src/storageManager"; +import HistoryManagerInjector from "inject-loader!../../src/historyManager"; +import PersistHistoryInjector from "inject-loader!../../src/PersistHistory"; import UtilsInjector from "inject-loader!../../src/utils"; import {CONST_PERSIST_STATE, CONST_DEPTHS} from "../../src/consts"; import * as StorageManager from "../../src/storageManager"; -import * as browser from "../../src/browser"; +import * as orgBrowser from "../../src/browser"; +import PersistHistory from "../../src/PersistHistory"; +import {updateDepth} from "../../src"; const DEFAULT_HREF = location.href; @@ -26,16 +32,42 @@ export function throwQuotaExceedError() { throw err; } +export function reloadPersist() { + PersistHistory.url = ""; + PersistHistory.hashUrl = ""; + PersistHistory.hash = null; + updateDepth(1); +} +export function clearStorage() { + const length = sessionStorage.length; + for (let i = 0; i < length; ++i) { + sessionStorage.removeItem(sessionStorage.key(i)); + } +} export function injectBrowser(href = DEFAULT_HREF) { const location = { pathname: INJECT_URL, origin: INJECT_URL, href, + set hash(hash) { + if (location.hash === hash) { + return; + } + const url = location.href.replace(location.origin, ""); + + history.pushState(null, "", url + hash); + + window.dispatchEvent(new Event("popstate")); + }, + get hash() { + return states[index].hash; + }, }; const states = [{ state: null, href: location.href, + hash: "", }]; let index = 0; const history = { @@ -55,31 +87,33 @@ export function injectBrowser(href = DEFAULT_HREF) { pushState(state, title, url) { location.href = location.origin + url; ++index; + const hashs = url.match(/#.+/g); + states.splice(index, states.length - index, { state, href: location.origin + url, + hash: hashs ? hashs[0] : "", }); }, replaceState(state, title, url) { location.href = location.origin + url; + const hashs = url.match(/#.+/g); states[index] = { state, href: location.origin + url, + hash: hashs ? hashs[0] : "", }; }, }; return { - ...browser, + ...orgBrowser, location, history, }; } -export function getDepths() { - return StorageManager.getStateByKey(CONST_PERSIST_STATE, CONST_DEPTHS) || []; -} -export function sessionStorageForLimit(limit, limit2 = limit) { +export function sessionStorageForLimit(depthsLimit, addedLimit = depthsLimit) { // Compare with limit when adding depth and limit2 when adding value. return { removeItem: key => window.sessionStorage.removeItem(key), @@ -87,14 +121,14 @@ export function sessionStorageForLimit(limit, limit2 = limit) { setItem: (key, value) => { let isExceed = false; + try { if (key === CONST_PERSIST_STATE) { - isExceed = JSON.parse(value || "{depths: []}")[CONST_DEPTHS].length > limit; + isExceed = JSON.parse(value || "{depths: []}")[CONST_DEPTHS].length > depthsLimit; } else { - isExceed = getDepths().length > limit2; + isExceed = StorageManager.getDepths().length > addedLimit; } } catch (e) { - } if (isExceed) { throwQuotaExceedError(); @@ -104,32 +138,67 @@ export function sessionStorageForLimit(limit, limit2 = limit) { }; } -export function injectPersistModules({ +export function mockPersistModules({ + browser = {}, + utils = {}, +}) { + const mockedBrowser = { + ...orgBrowser, + ...browser, + }; + const mockedUtils = { + ...UtilsInjector({ + "./browser": mockedBrowser, + }), + ...utils, + }; + const mockedPersistHistory = PersistHistoryInjector(); + const mockedStorageManager = StorageManagerInjector({ + "./browser": mockedBrowser, + }); + + return { + "./browser": mockedBrowser, + "./PersistHistory": mockedPersistHistory, + "./historyManager": HistoryManagerInjector({ + "./browser": mockedBrowser, + "./storageManager": mockedStorageManager, + "./utils": mockedUtils, + "./PersistHistory": mockedPersistHistory, + }), + "./storageManager": mockedStorageManager, + "./utils": mockedUtils, + }; +} + +export function mockPersistModulesWithBrowser({ href = DEFAULT_HREF, sessionLimitCount = -1, } = {}) { - const mockBrowser = injectBrowser(href); + const mockedBrowser = injectBrowser(href); if (sessionLimitCount >= 0) { - mockBrowser.sessionStorage = sessionStorageForLimit(sessionLimitCount); + mockedBrowser.sessionStorage = sessionStorageForLimit(sessionLimitCount); } - - return { - "./browser": mockBrowser, - "./storageManager": StorageManagerInjector({ - "./browser": mockBrowser, - }), - "./utils": UtilsInjector({ - "./browser": mockBrowser, - }), - }; + return mockPersistModules({ + browser: mockedBrowser, + }); } -export function injectPersistExports(options) { - return PersistInjector(options); +export function injectHashPersist(options) { + const mockBrowser = options["./browser"]; + + return HashPersistInjector({ + "./Persist": injectPersist(options), + "./browser": mockBrowser, + }); } export function injectPersist(options) { - return injectPersistExports(options).default; + const nextOptions = {...options}; + + delete nextOptions["./browser"]; + delete nextOptions["./PersistHistory"]; + return PersistInjector(nextOptions); } export function storageManagerForLimit(limit, limit2) { @@ -147,3 +216,16 @@ export function storageManagerForLimit(limit, limit2) { } ); } + +export function injectPersistForLimit(depthsLimit, addedLimit) { + const storageManager = storageManagerForLimit(depthsLimit, addedLimit); + const historyManager = HistoryManagerInjector({ + "./storageManager": storageManager, + }); + + + return injectPersist({ + "./storageManager": storageManager, + "./historyManager": historyManager, + }); +} diff --git a/test/unit/persist.spec.js b/test/unit/persist.spec.js index d612213..168c23b 100755 --- a/test/unit/persist.spec.js +++ b/test/unit/persist.spec.js @@ -1,13 +1,12 @@ /* eslint-disable no-new */ /* eslint-disable no-unused-expressions */ -import UtilsInjector from "inject-loader!../../src/utils"; import StorageManagerInjector from "inject-loader!../../src/storageManager"; import Persist from "../../src/Persist"; import * as utils from "../../src/utils"; import * as StorageManager from "../../src/storageManager"; import {CONST_PERSIST_STATE, CONST_DEPTHS, CONST_LAST_URL} from "../../src/consts"; -import {wait, storageManagerForLimit, injectBrowser, injectPersistModules, INJECT_URL, injectPersist, injectPersistExports, getDepths} from "./TestHelper"; -import { PersistQuotaExceededError } from "../../src"; +import {wait, mockPersistModulesWithBrowser, INJECT_URL, injectPersist, injectPersistForLimit, mockPersistModules, clearStorage} from "./TestHelper"; +import {PersistQuotaExceededError} from "../../src"; const StorageManagerUsingHistory = StorageManagerInjector( { @@ -26,17 +25,6 @@ const PersistUsingHistory = injectPersist({ "./storageManager": StorageManagerUsingHistory, }); -const mockBrowser = injectBrowser(); -const mockState = { - "./storageManager": StorageManagerInjector({ - "./browser": mockBrowser, - }), - "./utils": UtilsInjector({ - "./browser": mockBrowser, - }), -}; - - describe("Persist", () => { describe("isNeeded", () => { it("isNeeded on chrome", () => { @@ -484,23 +472,18 @@ describe("Persist", () => { it("cannot setting key value on array with warning", () => { // Given let warnCalled = false; - const MockedPersist = injectPersist( - { - "./browser": { - - console: { - ...console, - warn: () => { - warnCalled = true; - }, - }, - window: { + const MockedPersist = injectPersist(mockPersistModules({ + browser: { + console: { + ...console, + warn: () => { + warnCalled = true; }, }, - - } - ); + window: {}, + }, + })); const persist = new MockedPersist("TESTKEY"); @@ -620,15 +603,8 @@ describe("Persist", () => { it(`test depth test for exceed test (depths limit: 0)`, () => { try { // Given - const persist = new(injectPersist( - { - "./storageManager": storageManagerForLimit(0), - "./browser": { - window: {}, - console: window, - }, - } - ))(""); + const InjectedPersist = injectPersistForLimit(0); + const persist = new InjectedPersist(""); // When persist.set("a", ""); @@ -643,15 +619,8 @@ describe("Persist", () => { it(`should check if other values of sessionStorage are displayed`, () => { try { // Given - const persist = new(injectPersist( - { - "./storageManager": storageManagerForLimit(0), - "./browser": { - window: {}, - console: window, - }, - } - ))(""); + const InjectedPersist = injectPersistForLimit(0); + const persist = new InjectedPersist(""); sessionStorage.setItem("test1", "22"); sessionStorage.setItem("test2", "1114"); @@ -676,15 +645,8 @@ describe("Persist", () => { [2, 3, 4, 5].forEach(limit => { it(`test depth test for exceed test (depths limit: ${limit}, value limit: ${limit - 1})`, () => { // Given - const persist = new(injectPersist( - { - "./storageManager": storageManagerForLimit(limit, limit - 1), - "./browser": { - window: {}, - console, - }, - } - ))(""); + const InjectedPersist = injectPersistForLimit(limit, limit - 1); + const persist = new InjectedPersist(""); if (limit < 3) { @@ -693,7 +655,7 @@ describe("Persist", () => { persist.set("a", "1"); // Then - const state1 = getDepths().length; + const state1 = StorageManager.getDepths().length; expect(state1).to.be.equals(limit - 1); @@ -702,7 +664,7 @@ describe("Persist", () => { persist.set("a", "1"); // Then - const state2 = getDepths().length; + const state2 = StorageManager.getDepths().length; expect(state2).to.be.equals(limit - 1); } else { @@ -716,7 +678,7 @@ describe("Persist", () => { // start, a0 // start, a0 , a1 // a0 , a1, a2 - const state = getDepths().length; + const state = StorageManager.getDepths().length; expect(state).to.be.equals(j + 2); } @@ -728,7 +690,7 @@ describe("Persist", () => { persist.set("a", 1); // Then - const currentState = getDepths().length; + const currentState = StorageManager.getDepths().length; expect(currentState).to.be.equals(limit - 1); } @@ -737,7 +699,7 @@ describe("Persist", () => { [1, 2, 3, 4, 5].forEach(limit => { it(`test depth test for exceed test (limit: ${limit})`, () => { // Given - const mockModules = injectPersistModules({ + const mockModules = mockPersistModulesWithBrowser({ sessionLimitCount: limit, }); const mockHistory = mockModules["./browser"].history; @@ -804,11 +766,12 @@ describe("Persist", () => { Persist.clear(); }); afterEach(() => { + clearStorage(); history.replaceState({}, "", pathname); }); it("test depth start -> a -> b -> c", () => { // Given - const mockModules = injectPersistModules(); + const mockModules = mockPersistModulesWithBrowser(); const mockHistory = mockModules["./browser"].history; const InjectedPersist = injectPersist(mockModules); const persist = new InjectedPersist(""); @@ -860,7 +823,7 @@ describe("Persist", () => { }); it("test depth start -> a -> b -> a(new)", () => { // Given - const mockModules = injectPersistModules(); + const mockModules = mockPersistModulesWithBrowser(); const mockHistory = mockModules["./browser"].history; const InjectedPersist = injectPersist(mockModules); const persist = new InjectedPersist(""); @@ -885,7 +848,7 @@ describe("Persist", () => { mockHistory.pushState({}, "", "/a"); // remove (a) information - injectPersist(injectPersistModules({ + injectPersist(mockPersistModulesWithBrowser({ href: `${INJECT_URL}/a`, })); @@ -918,7 +881,7 @@ describe("Persist", () => { }); it("test depth start -> a -> start(back) -> a(forward)", async () => { // Given - const mockModules = injectPersistModules(); + const mockModules = mockPersistModulesWithBrowser(); const mockHistory = mockModules["./browser"].history; const InjectedPersist = injectPersist(mockModules); const persist = new InjectedPersist(""); @@ -982,7 +945,7 @@ describe("Persist", () => { }); it("test depth start -> a -> b -> start(back) -> a(new)", async () => { // Given - const mockModules = injectPersistModules(); + const mockModules = mockPersistModulesWithBrowser(); const mockHistory = mockModules["./browser"].history; const InjectedPersist = injectPersist(mockModules); const persist = new InjectedPersist(""); @@ -1021,7 +984,7 @@ describe("Persist", () => { }); it("test depth with reloead start -> a -> b -> start -> start(reload)", async () => { // Given - const mockModules = injectPersistModules(); + const mockModules = mockPersistModulesWithBrowser(); const mockHistory = mockModules["./browser"].history; const InjectedPersist = injectPersist(mockModules); const persist = new InjectedPersist(""); @@ -1048,14 +1011,11 @@ describe("Persist", () => { // start(reload) // remove start information - injectPersist( - { - "./utils": { - ...utils, - getNavigationType: () => 1, - }, - } - ); + injectPersist(mockPersistModules({ + utils: { + getNavigationType: () => 1, + }, + })); const value2 = persist.get("value"); const length2 = StorageManager.getStateByKey(CONST_PERSIST_STATE, CONST_DEPTHS).length; @@ -1068,7 +1028,7 @@ describe("Persist", () => { }); it("test depth only get() with start -> a -> b -> start(back)", async () => { // Given - const mockModules = injectPersistModules(); + const mockModules = mockPersistModulesWithBrowser(); const mockHistory = mockModules["./browser"].history; const InjectedPersist = injectPersist(mockModules); const persist = new InjectedPersist(""); @@ -1119,12 +1079,12 @@ describe("Persist", () => { }); it("should check remove 'b' depth when replaceDepth for start -> a -> b -> c(replace)", () => { // Given - const mockModules = injectPersistModules(); + const mockModules = mockPersistModulesWithBrowser(); const mockHistory = mockModules["./browser"].history; - const InjectedPersist = injectPersistExports(mockModules); - const persist = new InjectedPersist.default(""); + const InjectedPersist = injectPersist(mockModules); + const persist = new InjectedPersist(""); - InjectedPersist.default.clear(); + InjectedPersist.clear(); // When // start @@ -1143,7 +1103,7 @@ describe("Persist", () => { // c (replace) mockHistory.replaceState({}, "", "/c"); - InjectedPersist.replaceDepth(); + mockModules["./historyManager"].replaceDepth(); // start -> a(x) -> c diff --git a/test/unit/storageManager.spec.js b/test/unit/storageManager.spec.js index e3b7aba..0524e59 100755 --- a/test/unit/storageManager.spec.js +++ b/test/unit/storageManager.spec.js @@ -1,5 +1,6 @@ /* eslint-disable */ import * as StorageManager from "../../src/storageManager"; +import * as orgBrowser from "../../src/browser"; import StorageManagerInjector from "inject-loader!../../src/storageManager"; import { getUrl, getStorageKey } from "../../src/utils"; @@ -123,7 +124,7 @@ describe("StorageManager", function() { describe("storage value exception", function() { const consoleWarn = console.warn; afterEach(() => { - console.warn = consoleWarn; + console.warn = consoleWarn; }); const storageValues = ['{', '[ 1,2,3 ]', '1', '1.234', '"123"']; storageValues.forEach(storageVal => { @@ -132,24 +133,22 @@ describe("StorageManager", function() { StorageManager.getStorage().setItem(KEY, storageVal); let errorThrown = false; let warningShown = false; - console.warn = function () { - warningShown = true; - }; // When try { let MockStorageManager = StorageManagerInjector({ "./browser": { - sessionStorage: sessionStorage, - localStorage: localStorage, - history: history, - JSON: JSON, - location: location, - window: window + ...orgBrowser, + console: { + warn: () => { + warningShown = true; + }, + } } }); MockStorageManager.getStateByKey(KEY, "TEST"); } catch (e) { + console.log(e.message); errorThrown = true; } @@ -159,4 +158,4 @@ describe("StorageManager", function() { }); }) }); -}); \ No newline at end of file +});