Merge pull request #206 from cloudinary/fix-placeholder-plugin-token

fix: fix placeholder plugin token

Author: lbendavid-cloudinary

packages/html/__tests__/HtmlImageLayer.test.ts

@@ -16,7 +16,7 @@ const sdkAnalyticsTokens: BaseAnalyticsOptions = {
 }
 
 const flushPromises = async () => {
-    jest.advanceTimersByTime(100);
+    jest.advanceTimersByTime(10);
     await Promise.resolve();
 }
 
@@ -95,4 +95,36 @@ describe('HtmlImageLayer tests', function () {
         await flushPromises();
         expect(spy).toHaveBeenCalledTimes(1);
     });
+
+    it('should verfiy no unneeded request with placeholder plugin', async function () {
+        const OriginalImage = Image;
+        // mocking Image constructor in order to simulate firing 'load' event
+        jest.spyOn(global, "Image").mockImplementation(() => {
+            const img = new OriginalImage();
+            setTimeout(() => {
+                img.dispatchEvent(new Event("load"));
+            }, 10)
+            return img;
+
+        })
+        const img = document.createElement('img');
+        const imgSrcSpy = jest.spyOn(img, 'src', 'set');
+        const imgSetAttributeSpy = jest.spyOn(img, 'setAttribute');
+
+        new HtmlImageLayer(img, cldImage, [placeholder()], sdkAnalyticsTokens);
+        expect(imgSrcSpy).toHaveBeenCalledTimes(1);
+        // test that the initial src is set to a token contains last character "B" which is the character of placeholder plugin
+        const imgSrcSpyAnalyticsToken = imgSrcSpy.mock.calls[0][0];
+        expect(imgSrcSpyAnalyticsToken).toEqualAnalyticsToken('AXAABABB');
+        // trigger load event in order to resolve the 1st promise of the placeholder plugin
+        img.dispatchEvent(new Event('load'));
+        await flushPromises();
+        // resolve the 2nd promise of the placeholder plugin, which cause the placeholder plugin to create the pixelated Image
+        await flushPromises();
+        // resolve the 3rd promise of the placeholder plugin, which cause HtmlLayer to set the image attribute
+        await flushPromises();
+        expect(imgSetAttributeSpy).toHaveBeenCalledTimes(1);
+        // test that the src which set by HtmlImageLayer contains last character "B" which is the character of placeholder plugin
+        expect(imgSetAttributeSpy.mock.calls[0][1]).toEqualAnalyticsToken('AXAABABB');
+    });
 });

packages/html/src/plugins/placeholder.ts

@@ -26,7 +26,7 @@ export function placeholder({mode='vectorize'}:{mode?: string}={}): Plugin{
  * @param element {HTMLImageElement} The image element.
  * @param pluginCloudinaryImage {CloudinaryImage}
  * @param htmlPluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions.
- * @param analyticsOptions {BaseAnalyticsOptions} analytics options for the url to be created
+ * @param baseAnalyticsOptions {BaseAnalyticsOptions} analytics options for the url to be created
  */
 function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState, baseAnalyticsOptions?: BaseAnalyticsOptions): Promise<PluginResponse> | boolean {
   // @ts-ignore
@@ -104,12 +104,12 @@ function placeholderPlugin(mode: PlaceholderMode, element: HTMLImageElement, plu
       const largeImage = new Image();
       largeImage.src = pluginCloudinaryImage.toURL(analyticsOptions);
       largeImage.onload = () => {
-        resolve();
+        resolve({placeholder: true});
       };
 
       // image does not load, resolve
       largeImage.onerror = () => {
-        resolve();
+        resolve({placeholder: true});
       };
     });
   });