fix(media-library-cloudinary): fix options, add tests (#1938)

packages/netlify-cms-media-library-cloudinary/src/__tests__/index.spec.js

@@ -0,0 +1,292 @@
+import { queryHelpers, waitForElement } from 'dom-testing-library';
+import cloudinary from '../index';
+
+describe('cloudinary media library', () => {
+  let mediaLibrary;
+  let cloudinaryScript;
+  let cloudinaryConfig;
+  let cloudinaryInsertHandler;
+
+  beforeEach(() => {
+    /**
+     * Mock of the Cloudinary library itself, which is otherwise created by
+     * their script (which isn't actually run during testing).
+     */
+    window.cloudinary = {
+      createMediaLibrary: (config, { insertHandler }) => {
+        cloudinaryConfig = config;
+        cloudinaryInsertHandler = insertHandler;
+        return mediaLibrary;
+      },
+    };
+
+    /**
+     * Mock of the object returned by the Cloudinary createMediaLibrary method.
+     */
+    mediaLibrary = {
+      show: jest.fn(),
+      hide: jest.fn(),
+    };
+
+    /**
+     * Every time the integration is initialized, a script tag is dynamically
+     * generated and added to the page. The initialization is on hold until
+     * the `load` event is broadcast, but that doesn't happen during testing,
+     * so we wait for the script tag to be added to the dom and then manually
+     * call its `onreadystatechange` method, which resolves the promise and
+     * allows initialization to continue.
+     *
+     * This also ensures that the script is being added to the DOM, and in a way
+     * that is not tied to script loading implementation details.
+     */
+    waitForElement(() => {
+      const url = 'https://media-library.cloudinary.com/global/all.js';
+      return queryHelpers.queryByAttribute('src', document, url);
+    }).then(script => {
+      cloudinaryScript = script;
+      script.onreadystatechange();
+    });
+  });
+
+  afterEach(() => {
+    /**
+     * Remove the script element from the dom after each test.
+     */
+    if (cloudinaryScript) {
+      document.head.removeChild(cloudinaryScript);
+    }
+  });
+
+  it('exports an object with expected properties', () => {
+    expect(cloudinary).toMatchInlineSnapshot(`
+Object {
+  "init": [Function],
+  "name": "cloudinary",
+}
+`);
+  });
+
+  describe('configuration', () => {
+    const defaultCloudinaryConfig = {
+      button_class: undefined,
+      inline_container: undefined,
+      insert_transformation: false,
+      z_index: '99999',
+      multiple: false,
+    };
+
+    it('has defaults', async () => {
+      await cloudinary.init();
+      expect(cloudinaryConfig).toEqual(defaultCloudinaryConfig);
+    });
+
+    it('does not allow enforced values to be overridden', async () => {
+      const options = {
+        config: {
+          button_class: 'foo',
+          inline_container: 'foo',
+          insert_transformation: 'foo',
+          z_index: 0,
+        },
+      };
+      await cloudinary.init({ options });
+      expect(cloudinaryConfig).toEqual(defaultCloudinaryConfig);
+    });
+
+    it('allows non-enforced defaults to be overridden', async () => {
+      const options = {
+        config: {
+          multiple: true,
+        },
+      };
+      await cloudinary.init({ options });
+      expect(cloudinaryConfig).toEqual({ ...defaultCloudinaryConfig, ...options.config });
+    });
+
+    it('allows unknown values', async () => {
+      const options = {
+        config: {
+          foo: 'bar',
+        },
+      };
+      await cloudinary.init({ options });
+      expect(cloudinaryConfig).toEqual({ ...defaultCloudinaryConfig, ...options.config });
+    });
+  });
+
+  describe('insertHandler', () => {
+    let handleInsert;
+    const asset = {
+      url: 'http://foo.bar/image.jpg',
+      secure_url: 'https://foo.bar/image.jpg',
+      public_id: 'image',
+      format: 'jpg',
+    };
+    const assetWithDerived = {
+      ...asset,
+      derived: [
+        {
+          secure_url: 'https://derived.foo.bar/image.jpg',
+          url: 'http://derived.foo.bar/image.jpg',
+        },
+      ],
+    };
+
+    beforeEach(() => {
+      handleInsert = jest.fn();
+    });
+
+    it('calls insert function with single asset', async () => {
+      await cloudinary.init({ handleInsert });
+      cloudinaryInsertHandler({ assets: [asset] });
+      expect(handleInsert).toHaveBeenCalledWith(expect.any(String));
+    });
+
+    it('calls insert function with multiple assets', async () => {
+      const options = {
+        config: {
+          multiple: true,
+        },
+      };
+      await cloudinary.init({ options, handleInsert });
+      cloudinaryInsertHandler({ assets: [asset, asset] });
+      expect(handleInsert).toHaveBeenCalledWith(expect.any(Array));
+    });
+
+    it('calls insert function with secure url', async () => {
+      await cloudinary.init({ handleInsert });
+      cloudinaryInsertHandler({ assets: [asset] });
+      expect(handleInsert).toHaveBeenCalledWith(asset.secure_url);
+    });
+
+    it('calls insert function with insecure url', async () => {
+      const options = {
+        use_secure_url: false,
+      };
+      await cloudinary.init({ options, handleInsert });
+      cloudinaryInsertHandler({ assets: [asset] });
+      expect(handleInsert).toHaveBeenCalledWith(asset.url);
+    });
+
+    it('supports derived assets', async () => {
+      await cloudinary.init({ handleInsert });
+      cloudinaryInsertHandler({ assets: [assetWithDerived] });
+      expect(handleInsert).toHaveBeenCalledWith(assetWithDerived.derived[0].secure_url);
+    });
+
+    it('ignores derived assets when use_transformations is false', async () => {
+      const options = {
+        use_transformations: false,
+      };
+      await cloudinary.init({ options, handleInsert });
+      cloudinaryInsertHandler({ assets: [assetWithDerived] });
+      expect(handleInsert).toHaveBeenCalledWith(assetWithDerived.secure_url);
+    });
+
+    it('supports outputting filename only', async () => {
+      const options = {
+        output_filename_only: true,
+      };
+      await cloudinary.init({ options, handleInsert });
+      cloudinaryInsertHandler({ assets: [asset] });
+      expect(handleInsert.mock.calls[0][0]).toMatchInlineSnapshot(`"image.jpg"`);
+    });
+  });
+
+  describe('show method', () => {
+    const defaultOptions = {
+      config: {
+        multiple: false,
+      },
+    };
+
+    it('calls cloudinary instance show method with default options', async () => {
+      const integration = await cloudinary.init();
+      integration.show();
+      expect(mediaLibrary.show).toHaveBeenCalledWith(defaultOptions);
+    });
+
+    it('accepts unknown configuration keys', async () => {
+      const showOptions = {
+        config: {
+          ...defaultOptions.config,
+          foo: 'bar',
+        },
+      };
+      const integration = await cloudinary.init();
+      integration.show(showOptions);
+      expect(mediaLibrary.show).toHaveBeenCalledWith(showOptions);
+    });
+
+    it('receives global configuration for behavior only', async () => {
+      const behaviorOptions = {
+        default_transformations: [{ foo: 'bar' }],
+        max_files: 2,
+        multiple: true,
+      };
+      const nonBehaviorOptions = {
+        api_key: 123,
+      };
+      const options = {
+        config: {
+          ...behaviorOptions,
+          ...nonBehaviorOptions,
+        },
+      };
+      const expectedOptions = {
+        config: behaviorOptions,
+      };
+      const integration = await cloudinary.init({ options });
+      integration.show();
+      expect(mediaLibrary.show).toHaveBeenCalledWith(expectedOptions);
+    });
+
+    it('allows global/default configuration to be overridden', async () => {
+      const showOptions = {
+        config: {
+          multiple: true,
+        },
+      };
+      const integration = await cloudinary.init();
+      integration.show(showOptions);
+      expect(mediaLibrary.show).toHaveBeenCalledWith(showOptions);
+    });
+
+    it('enforces multiple: false if allowMultiple is true', async () => {
+      const options = {
+        config: {
+          multiple: true,
+        },
+      };
+      const showOptions = {
+        config: {
+          multiple: true,
+        },
+        allowMultiple: false,
+      };
+      const expectedOptions = {
+        config: {
+          multiple: false,
+        },
+      };
+      const integration = await cloudinary.init(options);
+      integration.show(showOptions);
+      expect(mediaLibrary.show).toHaveBeenCalledWith(expectedOptions);
+    });
+  });
+
+  describe('hide method', () => {
+    it('calls cloudinary instance hide method', async () => {
+      const integration = await cloudinary.init();
+      integration.hide();
+      expect(mediaLibrary.hide).toHaveBeenCalled();
+    });
+  });
+
+  describe('enableStandalone method', () => {
+    it('returns true', async () => {
+      const integration = await cloudinary.init();
+      expect(integration.enableStandalone()).toEqual(true);
+    });
+  });
+});

packages/netlify-cms-media-library-cloudinary/src/index.js

@@ -45,7 +45,11 @@ function getAssetUrl(asset, { use_secure_url, use_transformations, output_filena
   return urlObject[urlKey];
 }
 
-async function init({ options, handleInsert }) {
+async function init({ options = {}, handleInsert } = {}) {
+  /**
+   * Configuration is specific to Cloudinary, while options are specific to this
+   * integration.
+   */
   const { config: providedConfig = {}, ...integrationOptions } = options;
   const resolvedOptions = { ...defaultOptions, ...integrationOptions };
   const cloudinaryConfig = { ...defaultConfig, ...providedConfig, ...enforcedConfig };
@@ -62,7 +66,7 @@ async function init({ options, handleInsert }) {
   const mediaLibrary = window.cloudinary.createMediaLibrary(cloudinaryConfig, { insertHandler });
 
   return {
-    show: ({ config: instanceConfig = {}, allowMultiple }) => {
+    show: ({ config: instanceConfig = {}, allowMultiple } = {}) => {
       /**
        * Ensure multiple selection is not available if the field is configured
        * to disallow it.
@@ -70,7 +74,7 @@ async function init({ options, handleInsert }) {
       if (allowMultiple === false) {
         instanceConfig.multiple = false;
       }
-      return mediaLibrary.show({ config: { ...cloudinaryBehaviorConfig, instanceConfig } });
+      return mediaLibrary.show({ config: { ...cloudinaryBehaviorConfig, ...instanceConfig } });
     },
     hide: () => mediaLibrary.hide(),
     enableStandalone: () => true,