Pulled business logic from CacheableImage component and placed it in FileSystem.js for better code organization. Added additional tests for new FileSystem.js logic.

Author: billmalarky

lib/FileSystem.js

@@ -164,6 +164,45 @@ export class FileSystem {
 
   }
 
+  /**
+   *
+   * Convenience method used to get the associated local file path of a web image that has been written to disk.
+   * If the local file does not exist yet, the remote file is downloaded to local disk then the local filepath is returned.
+   *
+   * @param url {String} - url of file to download.
+   * @param permanent {Boolean} - True persists the file locally indefinitely, false caches the file temporarily (until file is removed during cache pruning).
+   * @returns {Promise} promise that resolves to the local file path of downloaded url file.
+   */
+  async getLocalFilePathFromUrl(url, permanent) {
+
+    let filePath = null;
+
+    let fileName = this.getFileNameFromUrl(url);
+
+    let permanentFileExists = this.exists('permanent/' + fileName);
+    let cacheFileExists = this.exists('cache/' + fileName);
+
+    let exists = await Promise.all([permanentFileExists, cacheFileExists]);
+
+    if (exists[0]) {
+
+      filePath = this.baseFilePath + 'permanent/' + fileName;
+
+    } else if (exists[1]) {
+
+      filePath = this.baseFilePath + 'cache/' + fileName;
+
+    } else {
+
+      let result = await this.fetchFile(url, permanent);
+      filePath = result.path;
+
+    }
+
+    return filePath;
+
+  }
+
   /**
    *
    * Used to download files to local filesystem.

lib/imageCacheHoc.js

@@ -83,32 +83,17 @@ export default function imageCacheHoc(Image, options = {}) {
     // Async calls to local FS or network should occur here.
     // See: https://reactjs.org/docs/react-component.html#componentdidmount
     componentDidMount() {
-      let fileName = this.fileSystem.getFileNameFromUrl(traverse(this.props).get(['source', 'uri']));
 
       // Add a cache lock to file with this name (prevents concurrent <CacheableImage> components from pruning a file with this name from cache).
+      let fileName = this.fileSystem.getFileNameFromUrl(traverse(this.props).get(['source', 'uri']));
       FileSystem.lockCacheFile(fileName, this.componentId);
 
-      let permanentFileExists = this.fileSystem.exists('permanent/' + fileName);
-      let cacheFileExists = this.fileSystem.exists('cache/' + fileName);
-
-      return Promise.all([permanentFileExists, cacheFileExists])
-        .then( result => {
-
-          if (result[0]) {
-            this.setState({ localFilePath: this.fileSystem.baseFilePath + 'permanent/' + fileName });
-          } else if (result[1]) {
-            this.setState({ localFilePath: this.fileSystem.baseFilePath + 'cache/' + fileName });
-          } else {
-
-            let permanent = this.props.permanent ? true : false;
-
-            this.fileSystem.fetchFile(this.props.source.uri, permanent)
-              .then( filePath => {
-                this.setState({ localFilePath: filePath });
-              });
-
-          }
+      // Check local fs for file, fallback to network and write file to disk if local file not found.
+      let permanent = this.props.permanent ? true : false;
 
+      this.fileSystem.getLocalFilePathFromUrl(traverse(this.props).get(['source', 'uri']), permanent)
+        .then( localFilePath => {
+          this.setState({ localFilePath });
         });
 
     }

tests/FileSystem.test.js

@@ -74,6 +74,10 @@ describe('lib/FileSystem', function() {
 
   it('#exists mocked as true.', () => {
 
+    const RNFetchBlob = require('react-native-fetch-blob');
+    RNFetchBlob.fs.exists
+      .mockReturnValue(true);
+
     const fileSystem = FileSystemFactory();
 
     fileSystem.exists('abitrary-file.jpg').should.be.true();
@@ -98,6 +102,64 @@ describe('lib/FileSystem', function() {
 
   });
 
+  it('#getLocalFilePathFromUrl should return local filepath if it exists on local fs in permanent dir.', () => {
+
+    const RNFetchBlob = require('react-native-fetch-blob');
+    RNFetchBlob.fs.exists
+      .mockReturnValueOnce(true) // mock exist in local permanent dir
+      .mockReturnValue(true);
+
+    const fileSystem = FileSystemFactory();
+
+    return fileSystem.getLocalFilePathFromUrl('https://img.wennermedia.com/5333a62d-07db-432a-92e2-198cafa38a14-326adb1a-d8ed-4a5d-b37e-5c88883e1989.png')
+      .then( localFilePath => {
+        localFilePath.should.equal(mockData.basePath + '/react-native-image-cache-hoc/permanent/cd7d2199cd8e088cdfd9c99fc6359666adc36289.png');
+      });
+
+  });
+
+  it('#getLocalFilePathFromUrl should return local filepath if it exists on local fs in cache dir.', () => {
+
+    const RNFetchBlob = require('react-native-fetch-blob');
+    RNFetchBlob.fs.exists
+      .mockReturnValueOnce(false) // mock not exist in local permanent dir
+      .mockReturnValueOnce(true) // mock exist in local cache dir
+      .mockReturnValue(true);
+
+    const fileSystem = FileSystemFactory();
+
+    return fileSystem.getLocalFilePathFromUrl('https://img.wennermedia.com/5333a62d-07db-432a-92e2-198cafa38a14-326adb1a-d8ed-4a5d-b37e-5c88883e1989.png')
+      .then( localFilePath => {
+        localFilePath.should.equal(mockData.basePath + '/react-native-image-cache-hoc/cache/cd7d2199cd8e088cdfd9c99fc6359666adc36289.png');
+      });
+
+  });
+
+  it('#getLocalFilePathFromUrl should download file and write to disk (default to cache dir) if it does not exist on local fs.', () => {
+
+    const RNFetchBlob = require('react-native-fetch-blob');
+    RNFetchBlob.fs.exists
+      .mockReturnValueOnce(false) // mock not exist in local permanent dir
+      .mockReturnValueOnce(false) // mock not exist in local cache dir
+      .mockReturnValueOnce(false) // mock does not exist to get past clobber
+      .mockReturnValue(true);
+
+    RNFetchBlob.fetch
+      .mockReturnValue({
+        path: () => {
+          return '/this/is/path/to/file.jpg';
+        }
+      });
+
+    const fileSystem = FileSystemFactory();
+
+    return fileSystem.getLocalFilePathFromUrl('https://img.wennermedia.com/5333a62d-07db-432a-92e2-198cafa38a14-326adb1a-d8ed-4a5d-b37e-5c88883e1989.png')
+      .then( localFilePath => {
+        localFilePath.should.equal('/this/is/path/to/file.jpg');
+      });
+
+  });
+
   it('#fetchFile should validate path.', () => {
 
     const fileSystem = FileSystemFactory();
@@ -119,6 +181,14 @@ describe('lib/FileSystem', function() {
 
     const fileSystem = FileSystemFactory();
 
+    const RNFetchBlob = require('react-native-fetch-blob');
+    RNFetchBlob.fetch
+      .mockReturnValue({
+        path: () => {
+          return '/this/is/path/to/file.jpg';
+        }
+      });
+
     // fileSystem.exists() is mocked to always return true, so error should always be thrown unless clobber is set to true.
     return fileSystem.fetchFile('https://img.wennermedia.com/5333a62d-07db-432a-92e2-198cafa38a14-326adb1a-d8ed-4a5d-b37e-5c88883e1989.png')
       .then(() => {
@@ -134,6 +204,14 @@ describe('lib/FileSystem', function() {
 
     const fileSystem = FileSystemFactory();
 
+    const RNFetchBlob = require('react-native-fetch-blob');
+    RNFetchBlob.fetch
+      .mockReturnValue({
+        path: () => {
+          return '/this/is/path/to/file.jpg';
+        }
+      });
+
     let pruneCacheHit = false;
 
     // Mock fileSystem.pruneCache() to determine if it is called correctly.
@@ -153,6 +231,14 @@ describe('lib/FileSystem', function() {
 
     const fileSystem = FileSystemFactory();
 
+    const RNFetchBlob = require('react-native-fetch-blob');
+    RNFetchBlob.fetch
+      .mockReturnValue({
+        path: () => {
+          return '/this/is/path/to/file.jpg';
+        }
+      });
+
     let pruneCacheHit = false;
 
     // Mock fileSystem.pruneCache() to determine if it is called correctly.
@@ -172,6 +258,14 @@ describe('lib/FileSystem', function() {
 
     const fileSystem = FileSystemFactory();
 
+    const RNFetchBlob = require('react-native-fetch-blob');
+    RNFetchBlob.fetch
+      .mockReturnValue({
+        path: () => {
+          return '/this/is/path/to/file.jpg';
+        }
+      });
+
     // Mock fileSystem.pruneCache().
     fileSystem.pruneCache = () => {};
 

tests/config.js

@@ -30,7 +30,7 @@ jest.mock('react-native-fetch-blob', () => {
         CacheDir: mockData.basePath,
         DocumentDir: mockData.basePath
       },
-      exists: () => { return true; },
+      exists: jest.fn(),
       lstat: () => {
 
         let lstat = [
@@ -52,13 +52,7 @@ jest.mock('react-native-fetch-blob', () => {
     return mockRNFetchBlob; // Must return reference to self to support method chaining.
   };
 
-  mockRNFetchBlob.fetch = () => {
-    return {
-      path: () => {
-        return '/this/is/path/to/file.jpg';
-      }
-    };
-  };
+  mockRNFetchBlob.fetch = jest.fn();
 
   return mockRNFetchBlob;