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) : {};