Merge pull request #187 from cloudinary/fix/vue-ssr-analytics-token

Fix/vue ssr analytics token

Author: lbendavid-cloudinary

packages/vue3/src/components/AdvancedImage.vue

@@ -1,6 +1,6 @@
 <template>
   <img v-if="isBrowser()" ref="imageRef" />
-  <img v-else src="{{getSsrSrc()}}" />
+  <img v-else :src="getSsrSrc()" />
 </template>
 
 <script setup lang="ts">
@@ -37,7 +37,7 @@ const props = defineProps<ImgProps>();
 const imageRef = ref(null);
 let htmlLayerInstance;
 
-const getSsrSrc = () => serverSideSrc(props.plugins, props.cldImg);
+const getSsrSrc = () => serverSideSrc(props.plugins, props.cldImg, SDKAnalyticsConstants);
 
 /**
  * On mount, creates a new HTMLLayer instance and initializes with ref to img element,

packages/vue3/tests/unit/analytics-ssr.spec.ts

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment node
+ */
+import { AdvancedImage } from "../../src";
+import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
+import { createSSRApp } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { SDKAnalyticsConstants } from "../../src/internal/SDKAnalyticsConstants";
+import { testIf } from "./utils";
+
+const cloudinaryImage = new CloudinaryImage("sample", { cloudName: "demo" });
+
+describe("analytics", () => {
+  testIf(
+    !(process.env.VUE3_TEST_ENV === "DIST"),
+    "creates an img with analytics using src",
+    async () => {
+      // Update src analytics value
+      SDKAnalyticsConstants.sdkSemver = "1.0.0";
+      SDKAnalyticsConstants.techVersion = "10.2.5";
+
+      const app = createSSRApp({
+        template: '<AdvancedImage :cldImg="cldImg" />',
+        data: () => ({
+          cldImg: cloudinaryImage,
+        }),
+        components: { AdvancedImage },
+      });
+      const html = await renderToString(app);
+      expect(html).toMatch(
+        '<img src="https://res.cloudinary.com/demo/image/upload/sample?_a=AL'
+      );
+    }
+  );
+
+  testIf(
+    process.env.VUE3_TEST_ENV === "DIST",
+    "creates an img with analytics using dist",
+    async () => {
+      const app = createSSRApp({
+        template: '<AdvancedImage :cldImg="cldImg" />',
+        data: () => ({
+          cldImg: cloudinaryImage,
+        }),
+        components: { AdvancedImage },
+      });
+      const html = await renderToString(app);
+      expect(html).toMatch(
+        '<img src="https://res.cloudinary.com/demo/image/upload/sample?_a=AL'
+      );
+    }
+  );
+});

packages/vue3/tests/unit/analytics.spec.ts

@@ -1,20 +1,11 @@
 import { AdvancedImage } from "../../src";
 import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
 import { mount } from "@vue/test-utils";
-import { waitTicks } from "./utils";
+import { testIf, waitTicks } from "./utils";
 import { SDKAnalyticsConstants } from "../../src/internal/SDKAnalyticsConstants";
 
 const cloudinaryImage = new CloudinaryImage("sample", { cloudName: "demo" });
 
-/**
- * Run test if condition is true
- * Otherwise act as passing test
- * @param condition
- * @param args
- */
-const testIf = (condition: boolean, ...args: [string, () => void]) =>
-  condition ? test(...args) : {};
-
 describe("analytics", () => {
   testIf(
     !(process.env.VUE3_TEST_ENV === "DIST"),

packages/vue3/tests/unit/utils.ts

@@ -11,3 +11,12 @@ export const waitTicks = async (ticks: number) => {
     await nextTick();
   }
 };
+
+/**
+ * Run test if condition is true
+ * Otherwise act as passing test
+ * @param condition
+ * @param args
+ */
+export const testIf = (condition: boolean, ...args: [string, () => void]) =>
+    condition ? test(...args) : {};