bv-ui-core 2.8.2 → 2.9.2

package/README.md

@@ -38,6 +38,7 @@ module's directory.
 ## Modules
 
 - [body](./lib/body)
+- [bvFetch](./lib/bvFetch/)
 - [checkHighContrast](./lib/checkHighContrast)
 - [cookie](./lib/cookie)
 - [cookieConsent](./lib/cookieConsent)

package/lib/bvFetch/README.md

@@ -0,0 +1,92 @@
+# BvFetch
+
+The BvFetch module provides methods to cache duplicate API calls and interact with the cacheStorage
+
+
+## The following methods are provided:
+
+## BvFetch Parameters
+`shouldCache (Function):` A function that takes the API response JSON as input and returns a boolean indicating whether to cache the response or not. This allows you to implement custom logic based on the response content. If caching is desired, the function should return true; otherwise, false.
+`cacheName (String):` Optional. Specifies the name of the cache to be used. If not provided, the default cache name 'bvCache' will be used.
+`cacheLimit (Integer)`: Optional. Specifies the cache size limit for the cache storage. Its value should be in MB. Default value is 10 MB.
+
+## bvFetchFunc Method Parameters
+`url (String):` The URL of the API endpoint to fetch data from.
+`options (Object):` Optional request options such as headers, method, etc., as supported by the Fetch API.
+
+## bvFetchFunc Return Value
+`Promise<Response>:` A promise that resolves to the API response. If the response is cached, it returns the cached response. Otherwise, it fetches data from the API endpoint, caches the response according to the caching logic, and returns the fetched response.
+
+## generateCacheKey Method Parameters:
+`url (String):` The URL of the API endpoint.
+`options (Object):` Optional request options.
+## generateCacheKey Return Value:
+`string:` The generated cache key.
+
+## retrieveCachedUrls Method
+Retrieves cached URLs from the cache storage associated with the provided cache name.
+## retrieveCachedUrls Parameters
+This method takes no parameters.
+## retrieveCachedUrls Return Value
+`void:` This method does not return anything.
+
+## fetchDataAndCache Method
+Fetches data from the specified URL, caches the response, and returns the response.
+## Parameters
+`url (String):` The URL from which to fetch data.
+`options (Object):` Optional request options such as headers, method, etc., as supported by the 
+Fetch API.
+`cacheKey (String):`
+ The cache key associated with the fetched data.
+## Return Value
+`Promise<Response>:` A promise that resolves to the fetched response.
+
+## fetchFromCache Method
+Function to fetch data from cache.
+## Parameters
+`cacheKey (String):` The cache key to fetch data from the cache.
+## Return Value
+Promise<Response|null>: A Promise that resolves with a Response object if the data is found in cache, or null if the data is not cached or expired.
+
+## cacheData Method
+Caches the provided response with the specified cache key if it meets the criteria for caching.
+## Parameters
+`response (Response):` The response object to be cached.
+`cacheKey (String):` The cache key associated with the response.
+## Return Value
+`void:` This method does not return anything.
+
+
+## flushCache Method Parameters
+This method takes no parameters.
+## flushCache Return Value
+`Promise<void>:` A promise indicating the completion of cache flush operation.
+
+## manageCache Method
+Manages the cache by deleting expired cache entries and maintaining the cache size limit.
+## Parameters
+This method takes no parameters.
+## Return Value
+`void:` This method does not return anything.
+
+
+## Usage with of `BvFetch`:
+
+```js
+var BvFetch = require('bv-ui-core/lib/bvFetch')
+
+// Initialize BV Fetch instance
+const bvFetch = new BVFetch({
+  canBeCached: canBeCached, // optional
+  cacheName: "bvCache" // optional, default is "bvCache"
+});
+
+// Make API calls using bvFetchFunc method
+bvFetch.bvFetchFunc('https://api.example.com/data')
+  .then(response => {
+    // Handle response
+  })
+  .catch(error => {
+    // Handle error
+  });
+  ```

package/lib/bvFetch/index.js

@@ -0,0 +1,290 @@
+
+/**
+ * @fileOverview
+ * Provides api response caching utilties
+ */
+
+const { fetch } = require('../polyfills/fetch')
+
+module.exports = function BvFetch ({ shouldCache, cacheName, cacheLimit }) {
+  this.shouldCache = shouldCache;
+  this.cacheName = cacheName || 'bvCache';
+  this.cacheLimit = cacheLimit * 1024 * 1024 || 10 * 1024 * 1024;
+  this.fetchPromises = new Map();
+  this.cachedUrls = new Set();
+
+  /**
+   * Generates a unique cache key for the given URL and options.
+   * @param {string} url - The URL of the API endpoint.
+   * @param {Object} options - Optional request options.
+   * @returns {string} The generated cache key.
+   */
+
+  this.generateCacheKey =  (url, options) => {
+    const optionsString = (Object.keys(options).length > 0) ? JSON.stringify(options) : '';
+    const key = url + optionsString;
+    return key;
+  };
+
+  /**
+  * Retrieves cached URLs from the cache storage associated with the provided cache name.
+  * @returns {void}
+  */
+
+  this.retrieveCachedUrls = () => {
+    // Open the Cache Storage
+    caches.open(this.cacheName).then(cache => {
+    // Get all cache keys
+      cache.keys().then(keys => {
+        keys.forEach(request => {
+          this.cachedUrls.add(request.url);
+        });
+      });
+    });
+
+  }
+
+  //callretrieveCachedUrls function to set the cache URL set with the cached URLS
+  this.retrieveCachedUrls();
+
+  /**
+    * Fetches data from the specified URL, caches the response, and returns the response.
+    * @param {string} url - The URL from which to fetch data.
+    * @param {string} cacheKey - The cache key associated with the fetched data.
+    * @returns {Promise<Response>} A Promise that resolves with the fetched response.
+    * @throws {Error} Throws an error if there's any problem fetching the data.
+  */
+  this.fetchDataAndCache = (url, options = {}, cacheKey) => {
+    return fetch(url,options)
+      .then((response) => {
+        // initiate caching of response and return the response
+        this.cacheData(response, cacheKey);
+        return response.clone();
+      })
+      .catch(function (error) {
+        throw new Error('Error fetching data: ' + error);
+      });
+  }
+
+  /**
+    * Caches the provided response with the specified cache key if it meets the criteria for caching.
+    * @param {Response} response - The response object to be cached.
+    * @param {string} cacheKey - The cache key associated with the response.
+    * @returns {void}
+  */
+
+  this.cacheData = (response, cacheKey) => {
+    const errJson = response.clone();
+    let canBeCached = true;
+    // Check for error in response obj
+    errJson.json().then(json => {
+      if (typeof this.shouldCache === 'function') {
+        canBeCached = this.shouldCache(json);
+      }
+    }).then(() => {
+      if (canBeCached) {
+        const clonedResponse = response.clone()
+        const newHeaders = new Headers();
+        clonedResponse.headers.forEach((value, key) => {
+          newHeaders.append(key, value);
+        });
+        newHeaders.append('X-Bazaarvoice-Cached-Time', Date.now())
+        // Get response text to calculate its size
+        clonedResponse.text().then(text => {
+        // Calculate size of response text in bytes
+          const sizeInBytes = new Blob([text]).size;
+
+        // Append response size to headers
+          newHeaders.append('X-Bazaarvoice-Response-Size', sizeInBytes);
+
+        // Create new Response object with modified headers
+          const newResponse = new Response(clonedResponse._bodyBlob || clonedResponse.body, {
+            status: clonedResponse.status,
+            statusText: clonedResponse.statusText,
+            headers: newHeaders
+          });
+          // Cache the response
+          caches.open(this.cacheName).then(cache => {
+            cache.put(cacheKey, newResponse);
+            //add key to cachedUrls set
+            this.cachedUrls.add(cacheKey);
+          });
+        });
+      }
+    })
+  }
+
+  /**
+    * Function to fetch data from cache.
+    * @param {string} cacheKey - The cache key to fetch data from the cache.
+    * @returns {Promise<Response|null>} A Promise that resolves with a Response object if the data is found in cache, 
+    * or null if the data is not cached or expired.
+    * @throws {Error} Throws an error if there's any problem fetching from cache.
+  */
+  this.fetchFromCache = (cacheKey) => {
+    // Check if the URL is in the set of cached URLs
+    if (!this.cachedUrls.has(cacheKey)) {
+      return Promise.resolve(null);
+    }
+
+    // Open the cache and try to match the URL
+    return caches.open(this.cacheName)
+      .then((cache) => {
+        return cache.match(cacheKey)
+          .then((cachedResponse) => {
+                  
+            const cachedTime = cachedResponse.headers.get('X-Bazaarvoice-Cached-Time');
+            const ttl = cachedResponse.headers.get('Cache-Control').match(/max-age=(\d+)/)[1];
+            const currentTimestamp = Date.now();
+            const cacheAge = (currentTimestamp - cachedTime) / 1000;
+            if (cacheAge < ttl) {
+              // Cached response found
+              return cachedResponse.clone();
+            }
+          })
+      })
+      .catch((error) => {
+        throw new Error('Error fetching from cache: ' + error);
+      });
+  }
+
+  /**
+   * Fetches data from the API endpoint, caches responses, and handles caching logic.
+   * @param {string} url - The URL of the API endpoint.
+   * @param {Object} options - Optional request options.
+   * @returns {Promise<Response>} A promise resolving to the API response.
+   */
+
+  this.bvFetchFunc = (url, options = {}) => {
+
+    const cacheKey = this.generateCacheKey(url, options);
+  // If an ongoing fetch promise exists for the URL, return it
+    if (this.fetchPromises.has(cacheKey)) {
+      return this.fetchPromises.get(cacheKey).then(res => res.clone());
+    }
+
+  // Check if response is available in cache
+    const newPromise = this.fetchFromCache(cacheKey)
+      .then((cachedResponse) => {
+          // If response found in cache, return it
+        if (cachedResponse) {
+          return cachedResponse;
+        }
+          // If response not found in cache, fetch from API and cache it
+        return this.fetchDataAndCache(url, options, cacheKey);
+      });
+
+    // Store the ongoing fetch promise
+    this.fetchPromises.set(cacheKey, newPromise);
+
+    //initiate cache cleanUp
+    this.debounceCleanupExpiredCache();
+
+    // When fetch completes or fails, remove the promise from the store
+    newPromise.finally(() => {
+      this.fetchPromises.delete(cacheKey);
+    });
+
+    return newPromise.then(res => res.clone());
+  }
+
+
+  /**
+   * Clears all cache entries stored in the cache storage.
+   * @returns {Promise<void>} A promise indicating cache flush completion.
+   */
+
+  this.flushCache = () => {
+    return caches.open(this.cacheName).then(cache => {
+      return cache.keys().then(keys => {
+        const deletionPromises = keys.map(key => cache.delete(key));
+        return Promise.all(deletionPromises);
+      });
+    });
+  };
+
+  this.manageCache = () => {
+    // Delete expired cache entries
+    caches.open(this.cacheName).then(cache => {
+      cache.keys().then(keys => {
+        keys.forEach(key => {
+          cache.match(key).then(response => {
+            const cachedTime = response.headers.get('X-Bazaarvoice-Cached-Time');
+            const ttl = response.headers.get('Cache-Control').match(/max-age=(\d+)/)[1];
+            const currentTimestamp = Date.now();
+            const cacheAge = (currentTimestamp - cachedTime) / 1000;
+            if (cacheAge >= ttl) {
+              cache.delete(key);
+              this.cachedUrls.delete(key);
+            }
+          });
+        });
+      });
+    });
+
+    // Calculate total size of cached responses
+    let totalSize = 0;
+    caches.open(this.cacheName).then(cache => {
+      cache.keys().then(keys => {
+        // Create an array of promises for cache match operations
+        const matchPromises = keys.map(key =>
+                cache.match(key).then(response => {
+                  const sizeHeader = response.headers.get('X-Bazaarvoice-Response-Size');
+                  return parseInt(sizeHeader, 10);
+                })
+            );
+
+        // wait for all match promises to resolve
+        return Promise.all(matchPromises)
+          .then(sizes => sizes.reduce((acc, size) => acc + size, 0));
+      }).then(size => {
+        totalSize = size;
+        // If total size exceeds 10 MB, delete old cache entries
+        if (totalSize > this.cacheLimit) {
+
+          // create an array of cached responses
+          const cacheEntries = [];
+          return cache.keys().then(keys => {
+            const cachesResEntries = keys.map(key =>
+              cache.match(key).then(response => {
+                const sizeHeader = response.headers.get('X-Bazaarvoice-Response-Size');
+                const lastAccessedTime = response.headers.get('X-Bazaarvoice-Cached-Time');
+                cacheEntries.push({ key, size: parseInt(sizeHeader, 10), lastAccessedTime });
+              })
+            );
+
+            return Promise.all(cachesResEntries)
+            .then(() => {
+              // Sort cache entries by last accessed time in ascending order
+              cacheEntries.sort((a, b) => a.lastAccessedTime - b.lastAccessedTime);
+              
+              // Delete older cache entries until total size is under 10 MB
+              let currentSize = totalSize;
+              cacheEntries.forEach(entry => {
+                if (currentSize > this.cacheLimit) {
+                  cache.delete(entry.key);
+                  this.cachedUrls.delete(entry.key);
+                  currentSize -= entry.size;
+                }
+              });
+            });
+          });
+        }
+      });
+    });
+  };
+
+
+  function debounce (func, delay) {
+    let timer;
+    return function () {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, arguments);
+      }, delay);
+    };
+  }
+
+  this.debounceCleanupExpiredCache = debounce(this.manageCache, 8000);
+  
+}

package/lib/loader/index.js

@@ -152,8 +152,9 @@ module.exports = {
       done = true;
       clearTimeout(timeoutHandle);
       script.onload = script.onreadystatechange = script.onerror = null;
-      script.parentNode.removeChild(script);
-
+      if (script && script.parentNode) {
+        script.parentNode.removeChild(script);
+      }
       if (!err) {
         _loadedUrls[url] = true;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bv-ui-core",
-  "version": "2.8.2",
+  "version": "2.9.2",
   "license": "Apache 2.0",
   "description": "Bazaarvoice UI-related JavaScript",
   "repository": {

package/test/unit/bvFetch/index.spec.js

@@ -0,0 +1,213 @@
+//Imports
+
+var BvFetch = require('../../../lib/bvFetch');
+
+describe('BvFetch', function () {
+  let bvFetchInstance;
+  let cacheStub;
+  let cacheStorage;
+  
+  beforeEach(function () {
+    bvFetchInstance = new BvFetch({
+      shouldCache: null,
+      cacheName: 'testCache'
+    });
+
+    // Define cacheStorage as a Map
+    cacheStorage = new Map();
+
+    // Stubbing caches.open
+    cacheStub = sinon.stub(caches, 'open').resolves({
+      match: key => {
+        const cachedResponse = cacheStorage.get(key);
+        return Promise.resolve(cachedResponse);
+      },
+      put: (key, response) => {
+        cacheStorage.set(key, response);
+        return Promise.resolve();
+      }
+    });
+
+  });
+  
+  afterEach(function () {
+    bvFetchInstance = null;
+    // Restore the original method after each test
+    caches.open.restore();
+  });
+  
+  it('should generate correct cache key', function () {
+    const url = 'https://jsonplaceholder.typicode.com/todos';
+    const options = {};
+    const expectedKey = 'https://jsonplaceholder.typicode.com/todos';
+    const generatedKey = bvFetchInstance.generateCacheKey(url, options);
+    expect(generatedKey).to.equal(expectedKey);
+  });
+
+  
+  it('should fetch from cache when the response is cached', function (done) {
+    const url = 'https://jsonplaceholder.typicode.com/todos';
+    const options = {};
+  
+    // Mocking cache response
+    const mockResponse = new Response('Mock Data', {
+      status: 200,
+      statusText: 'OK',
+      headers: {
+        'Cache-Control': 'max-age=3600',
+        'X-Cached-Time': Date.now()
+      }
+    });
+
+    const cacheKey = bvFetchInstance.generateCacheKey(url, options);
+  
+    // Overriding the stub for this specific test case
+    caches.open.resolves({
+      match: (key) => {
+        expect(key).to.equal(cacheKey); 
+        return Promise.resolve(mockResponse)
+      },
+      put: (key, response) => {
+        cacheStorage.set(key, response);
+        return Promise.resolve();
+      }
+    });
+  
+    // Simulate that the response is cached
+    bvFetchInstance.cachedUrls.add(cacheKey);
+    
+    // Call the function under test
+    bvFetchInstance.bvFetchFunc(url, options)
+    .then(response => {
+      // Check if response is fetched from cache
+      expect(response).to.not.be.null;
+
+       // Check if response is cached
+      const cachedResponse = cacheStorage.get(cacheKey);
+      expect(cachedResponse).to.not.be.null;
+
+      // Check if caches.open was called
+      expect(cacheStub.called).to.be.true;
+
+      done();
+    })
+    .catch(error => {
+      done(error); // Call done with error if any
+    })
+  });
+
+  
+  it('should fetch from network when response is not cached', function (done) {
+    const url = 'https://jsonplaceholder.typicode.com/todos';
+    const options = {};
+
+    const matchSpy = sinon.spy((key) => {
+      expect(key).to.equal(cacheKey); 
+      Promise.resolve(null)
+    });
+    caches.open.resolves({
+      match: matchSpy,
+      put: (key, response) => {
+        cacheStorage.set(key, response);
+        return Promise.resolve();
+      }
+    });
+   
+
+    bvFetchInstance.bvFetchFunc(url, options)
+      .then(response => {
+        // Check if response is fetched from network
+        expect(response).to.not.be.null;
+        console.log(response.body)
+        
+        // Check if caches.match was called
+        expect(matchSpy.called).to.be.false;
+
+        done();
+      })
+      .catch(done);
+  });
+
+  it('should not cache response when there is an error', function (done) {
+    const url = 'https://jsonplaceholder.typicode.com/todos';
+    const options = {};
+
+    // Define shouldCache directly in bvFetchInstance
+    bvFetchInstance.shouldCache = (res) => {
+      return false
+    };
+ 
+    bvFetchInstance.bvFetchFunc(url, options)
+    .then(response => {
+      // Check if response is fetched from network
+      expect(response).to.not.be.null;
+      console.log(response.body)
+
+      // Check if caches.match was called
+      expect(cacheStub.calledOnce).to.be.false;
+
+      // Check if response is not cached
+      const cachedResponse = cacheStorage.get(url);
+      expect(cachedResponse).to.be.undefined;
+
+      done();
+    })
+    .catch(done);
+  });
+
+  it('should delete cache when size is greater than 10 MB', function (done) {
+    // Mock cache entries exceeding 10 MB
+    const mockCacheEntries = [
+      { key: 'key1', size: 6000000 }, // 6 MB
+      { key: 'key2', size: 6000000 }  // 6 MB
+      // Add more entries as needed to exceed 10 MB
+    ];
+  
+    // Stub cache operations
+    const deleteSpy = sinon.spy(
+      (key) => {
+        const index = mockCacheEntries.findIndex(entry => entry.key === key);
+        if (index !== -1) {
+          mockCacheEntries.splice(index, 1); // Delete entry from mock cache entries
+        }
+        return Promise.resolve(true);
+      }
+    )
+    caches.open.resolves({
+      keys: () => Promise.resolve(mockCacheEntries.map(entry => entry.key)),
+      match: (key) => {
+        const entry = mockCacheEntries.find(entry => entry.key === key);
+        if (entry) {
+          return Promise.resolve({
+            headers: new Headers({
+              'X-Bazaarvoice-Response-Size': entry.size.toString(),
+              'X-Bazaarvoice-Cached-Time': Date.now(),
+              'Cache-Control': 'max-age=3600'
+            })
+          });
+        } 
+        else {
+          return Promise.resolve(null);
+        }
+      },
+      delete: deleteSpy
+    });
+  
+    // Create a new instance of BvFetch
+    const bvFetchInstance = new BvFetch({ shouldCache: true });
+  
+    // Call manageCache function
+    bvFetchInstance.manageCache()
+    setTimeout(() => {
+      // Ensure cache deletion occurred until the total size is under 10 MB
+      const totalSizeAfterDeletion = mockCacheEntries.reduce((acc, entry) => acc + entry.size, 0);
+      expect(totalSizeAfterDeletion).to.be.at.most(10 * 1024 * 1024); // Total size should be under 10 MB
+      // Ensure cache.delete was called for each deleted entry
+      expect(deleteSpy.called).to.be.true;
+      expect(deleteSpy.callCount).to.equal(mockCacheEntries.length);
+      done();
+    }, 500);
+      
+  });  
+  
+});