cloudinary · patrick-tolosa · Jun 21, 2020 · Jun 16, 2020
diff --git a/package.json b/package.json
@@ -25,30 +25,30 @@
     "vue": "2.6.10"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.0.0",
-    "@storybook/addon-knobs": "5.0.0",
-    "@storybook/addon-links": "5.0.0",
-    "@storybook/addon-notes": "5.0.0",
-    "@vue/cli-plugin-babel": "3.10.0",
-    "@vue/cli-plugin-eslint": "3.10.0",
-    "@vue/cli-plugin-unit-jest": "3.10.0",
-    "@vue/cli-service": "3.10.0",
-    "@vue/eslint-config-prettier": "4.0.1",
-    "@vue/test-utils": "1.0.0-beta.29",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
-    "bundlewatch": "0.2.6",
-    "eslint": "5.15.1",
-    "eslint-plugin-vue": "5.2.2",
-    "glob": "7.1.3",
-    "husky": "1.3.1",
-    "jstoxml": "1.4.4",
-    "vue-loader": "15.7.1",
+    "@storybook/addon-actions": "^5.0.0",
+    "@storybook/addon-knobs": "^5.0.0",
+    "@storybook/addon-links": "^5.0.0",
+    "@storybook/addon-notes": "^5.0.0",
+    "@vue/cli-plugin-babel": "^3.10.0",
+    "@vue/cli-plugin-eslint": "^3.10.0",
+    "@vue/cli-plugin-unit-jest": "^3.10.0",
+    "@vue/cli-service": "^3.10.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "@vue/test-utils": "^1.0.0-beta.29",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "bundlewatch": "^0.2.6",
+    "eslint": "^5.15.1",
+    "eslint-plugin-vue": "^5.2.2",
+    "glob": "^7.1.3",
+    "husky": "^1.3.1",
+    "jstoxml": "^1.4.4",
+    "vue-loader": "^15.7.1",
     "vue-server-renderer": "2.6.10",
-    "vue-styleguidist": "3.8.3",
+    "vue-styleguidist": "^3.8.3",
     "vue-template-compiler": "2.6.10",
-    "webpack-node-externals": "1.7.2"
+    "webpack-node-externals": "^1.7.2"
   },
   "husky": {
     "hooks": {

diff --git a/tests/unit/Context/context.spec.js b/tests/unit/Context/context.spec.js
@@ -25,7 +25,7 @@ describe("Tests for CldContext", () => {
     expect(getImageSRC(wrapper)).toBe(expectedURL);
   });
 
-  it ('Works correctly with a nested cld-transformation', () => {
+  it ('Works correctly with a nested cld-transformation', async () => {
     const wrapper = mount(
       {
         template: `
@@ -41,6 +41,8 @@ describe("Tests for CldContext", () => {
       }
     );
 
+    await Vue.nextTick();
+
     const expectedURL = `${cloudinaryDomain}/demo/image/upload/c_scale,h_100,w_100/face_top`;
     expect(getImageSRC(wrapper)).toBe(expectedURL);
   });

diff --git a/tests/unit/Image/img_effect.spec.js b/tests/unit/Image/img_effect.spec.js
@@ -15,7 +15,6 @@ describe("CldImage", () => {
     });
     const image = wrapper.find('img');
 
-    expect(image.is("img")).toBe(true);
     expect(image.attributes("src")).toEqual(
       `http://res.cloudinary.com/demo/image/upload/e_sepia/face_top`
     );

diff --git a/tests/unit/Image/img_placeholder_color.spec.js b/tests/unit/Image/img_placeholder_color.spec.js
@@ -16,7 +16,6 @@ describe("CldImage", () => {
         `,
         components: { CldImage }
       }).find('img');
-      expect(image.is("img")).toBe(true);
       expect(image.attributes("src")).toEqual(
         `http://res.cloudinary.com/demo/image/upload/$nh_ih,$nw_iw,c_scale,q_1,w_1/c_scale,h_$nh,w_$nw/face_top`
       );

diff --git a/tests/unit/Image/img_placeholder_lq.spec.js b/tests/unit/Image/img_placeholder_lq.spec.js
@@ -16,7 +16,6 @@ describe("CldImage", () => {
         `,
         components: { CldImage }
       }).find('img');
-      expect(image.is("img")).toBe(true);
       expect(image.attributes("src")).toEqual(
         `http://res.cloudinary.com/demo/image/upload/$nh_ih,$nw_iw,c_scale,q_auto,w_20/c_scale,h_$nh,w_$nw/face_top`
       );

diff --git a/tests/unit/Image/img_placeholder_pixelate.spec.js b/tests/unit/Image/img_placeholder_pixelate.spec.js
@@ -16,7 +16,6 @@ describe("CldImage", () => {
         `,
         components: { CldImage }
       }).find('img');
-      expect(image.is("img")).toBe(true);
       expect(image.attributes("src")).toEqual(
         `http://res.cloudinary.com/demo/image/upload/e_pixelate,f_auto,q_1/face_top`
       );

diff --git a/tests/unit/Image/img_progressive.spec.js b/tests/unit/Image/img_progressive.spec.js
@@ -13,7 +13,6 @@ describe("CldImage", () => {
         `,
       components: { CldImage }
     }).find('img');
-    expect(image.is("img")).toBe(true);
     expect(image.attributes("src")).toEqual(
       `http://res.cloudinary.com/demo/image/upload/fl_progressive/face_top`
     );

diff --git a/tests/unit/Image/img_responsive_boolean.spec.js b/tests/unit/Image/img_responsive_boolean.spec.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import { mount } from "@vue/test-utils";
 import CldImage from "../../../src/components/CldImage/CldImage.vue";
 
@@ -14,12 +15,11 @@ describe("CldImage::responsive", () => {
     });
     const image = wrapper.find('img');
 
-    expect(image.is("img")).toBe(true);
     expect(image.attributes("src")).toEqual(undefined);
 
     wrapper.vm.$children[0].size = { width: 100, height: 100 };
+    await Vue.nextTick();
 
-    expect(image.is("img")).toBe(true);
     expect(image.attributes("src")).toEqual(
       `http://res.cloudinary.com/demo/image/upload/c_scale,dpr_1.0,w_100/face_top`
     );
@@ -36,7 +36,6 @@ describe("CldImage::responsive", () => {
       }
     }).find('img');
 
-    expect(wrapper.is("img")).toBe(true);
     expect(wrapper.attributes("src")).toEqual(
       `http://res.cloudinary.com/demo/image/upload/face_top`
     );

diff --git a/tests/unit/Image/img_responsive_fill.spec.js b/tests/unit/Image/img_responsive_fill.spec.js
@@ -1,7 +1,8 @@
+import Vue from 'vue';
 import { mount } from "@vue/test-utils";
 import CldImage from "../../../src/components/CldImage/CldImage.vue";
 
-describe("CldImage::responsive=fill", () => {
+describe("CldImage::responsive=fill", async () => {
   it("renders", async () => {
     const wrapper = mount({
       template: `
@@ -12,12 +13,12 @@ describe("CldImage::responsive=fill", () => {
 
     const image = wrapper.find('img');
 
-    expect(image.is("img")).toBe(true);
     expect(image.attributes("src")).toEqual(undefined);
 
     wrapper.vm.$children[0].size = { width: 100, height: 100 };
 
-    expect(image.is("img")).toBe(true);
+    await Vue.nextTick();
+
     expect(image.attributes("src")).toEqual(
       `http://res.cloudinary.com/demo/image/upload/c_fill,dpr_1.0,h_100,w_100/face_top`
     );

diff --git a/tests/unit/Image/img_responsive_flag.spec.js b/tests/unit/Image/img_responsive_flag.spec.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import { mount } from "@vue/test-utils";
 import CldImage from "../../../src/components/CldImage/CldImage.vue";
 
@@ -12,12 +13,12 @@ describe("CldImage::responsive", () => {
 
     const image = wrapper.find('img');
 
-    expect(image.is("img")).toBe(true);
     expect(image.attributes("src")).toEqual(undefined);
 
     wrapper.vm.$children[0].size = { width: 100, height: 100 };
 
-    expect(image.is("img")).toBe(true);
+    await Vue.nextTick();
+
     expect(image.attributes("src")).toEqual(
       `http://res.cloudinary.com/demo/image/upload/c_scale,dpr_1.0,w_100/face_top`
     );

diff --git a/tests/unit/Image/img_responsive_height.spec.js b/tests/unit/Image/img_responsive_height.spec.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import { mount } from "@vue/test-utils";
 import CldImage from "../../../src/components/CldImage/CldImage.vue";
 
@@ -11,12 +12,12 @@ describe("CldImage::responsive=height", () => {
     });
     const image = wrapper.find('img');
 
-    expect(image.is("img")).toBe(true);
     expect(image.attributes("src")).toEqual(undefined);
 
     wrapper.vm.$children[0].size = { width: 100, height: 200 };
 
-    expect(image.is("img")).toBe(true);
+    await Vue.nextTick();
+
     expect(image.attributes("src")).toEqual(
       `http://res.cloudinary.com/demo/image/upload/c_scale,dpr_1.0,h_200/face_top`
     );

diff --git a/tests/unit/Image/img_responsive_width.spec.js b/tests/unit/Image/img_responsive_width.spec.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import { mount } from "@vue/test-utils";
 import CldImage from "../../../src/components/CldImage/CldImage.vue";
 
@@ -11,12 +12,12 @@ describe("CldImage::responsive=width", () => {
     });
     const image = wrapper.find('img');
 
-    expect(image.is("img")).toBe(true);
     expect(image.attributes("src")).toEqual(undefined);
 
     wrapper.vm.$children[0].size = { width: 100, height: 100 };
 
-    expect(image.is("img")).toBe(true);
+    await Vue.nextTick();
+
     expect(image.attributes("src")).toEqual(
       `http://res.cloudinary.com/demo/image/upload/c_scale,dpr_1.0,w_100/face_top`
     );

diff --git a/tests/unit/PlaceholderComponent/img_placeholder_component.spec.js b/tests/unit/PlaceholderComponent/img_placeholder_component.spec.js
@@ -54,6 +54,7 @@ describe("CldPlaceholder", () => {
 
     // load the image (as if time has passed)
     cldImageVM.onImageLoad();
+    await Vue.nextTick();
 
     // Step 4 - Placeholder component should not exist
     expect(wrapper.findAll('.cld-placeholder').length).toBe(0);

diff --git a/tests/unit/PlaceholderComponent/placeholder_lazyloaded.spec.js b/tests/unit/PlaceholderComponent/placeholder_lazyloaded.spec.js
@@ -48,11 +48,14 @@ describe("CldPlaceholder", () => {
       isIntersecting: true
     }]);
 
+    await Vue.nextTick();
+
     // expect cloudinary image to be populated
     expect(cldImage.attributes().src).toBe('http://res.cloudinary.com/demo/image/upload/face_top');
 
     // fake image load
     cldImageVM.onImageLoad();
+    await Vue.nextTick();
 
     // expect placeholder to be gone
     expect(wrapper.findAll("img").length).toBe(1);

diff --git a/tests/unit/SSR/ssr.spec.js b/tests/unit/SSR/ssr.spec.js
@@ -18,6 +18,7 @@ describe('SSR Tests', () => {
         components: { CldContext, CldImage }
       })
     );
+
     expect(output).toBe(
       '<div data-server-rendered="true" class="cld-context">' +
       '<div class="cld-image">' +

diff --git a/tests/unit/Transformation/img+transform.spec.js b/tests/unit/Transformation/img+transform.spec.js
@@ -16,7 +16,6 @@ describe("CldImage with CldTransformation ", () => {
 
     await Vue.nextTick();
 
-    expect(wrapper.is("img")).toBe(true);
     expect(wrapper.attributes("src")).toEqual(
       `http://res.cloudinary.com/demo/image/upload/e_sepia:20/face_top`
     );

diff --git a/tests/unit/Transformation/img+transform_chained.spec.js b/tests/unit/Transformation/img+transform_chained.spec.js
@@ -18,7 +18,6 @@ describe("CldImage with CldTransformation ", () => {
 
     await Vue.nextTick();
 
-    expect(wrapper.is("img")).toBe(true);
     expect(wrapper.attributes("src")).toEqual(
       "http://res.cloudinary.com/demo/image/upload/c_scale,w_100/c_pad,w_200/a_30/sample"
     );

diff --git a/tests/unit/Video/poster.spec.js b/tests/unit/Video/poster.spec.js
@@ -19,7 +19,6 @@ describe("CldVideo Component tests", () => {
     await Vue.nextTick();
 
     const video = wrapper.find('video');
-    expect(video.is("video")).toBe(true);
 
     expect(video.attributes("poster")).toBe(
       "http://res.cloudinary.com/demo/image/upload/small_dinosaur"
@@ -34,7 +33,6 @@ describe("CldVideo Component tests", () => {
 
     const video = wrapper.find('video');
 
-    expect(video.is("video")).toBe(true);
     expect(video.attributes("poster")).toBe("zxc");
   });
 
@@ -56,7 +54,6 @@ describe("CldVideo Component tests", () => {
     await Vue.nextTick();
     wrapper.vm.$forceUpdate();
 
-    expect(video.is("video")).toBe(true);
     expect(video.attributes("poster")).toBe(
       "http://res.cloudinary.com/demo/video/upload/e_blur/face_top.jpeg"
     );
@@ -80,7 +77,6 @@ describe("CldVideo Component tests", () => {
     await Vue.nextTick();
     wrapper.vm.$forceUpdate();
 
-    expect(video.is("video")).toBe(true);
     expect(video.attributes("poster")).toBe(
       "http://res.cloudinary.com/demo/image/upload/e_blur/small_dinosaur"
     );
@@ -94,7 +90,6 @@ describe("CldVideo Component tests", () => {
 
     const video = wrapper.find('video');
 
-    expect(video.is("video")).toBe(true);
     expect(video.attributes("poster")).toBe(
       "http://res.cloudinary.com/demo/video/upload/face_top.jpeg"
     );
@@ -114,7 +109,6 @@ describe("CldVideo Component tests", () => {
 
     const video = wrapper.find('video');
 
-    expect(video.is("video")).toBe(true);
     expect(video.attributes("poster")).toBe(
       "http://res.cloudinary.com/demo/image/upload/e_blur/small_dinosaur"
     );

diff --git a/tests/unit/Video/video.spec.js b/tests/unit/Video/video.spec.js
@@ -14,7 +14,6 @@ describe("CldVideo Component tests", () => {
 
     const video = wrapper.find('video');
 
-    expect(video.is("video")).toBe(true);
     expect(sourcesOfVideo(video)).toEqual({
       "video/webm": "http://res.cloudinary.com/demo/video/upload/face_top.webm",
       "video/mp4": "http://res.cloudinary.com/demo/video/upload/face_top.mp4",
@@ -30,7 +29,6 @@ describe("CldVideo Component tests", () => {
 
     const video = wrapper.find('video');
 
-    expect(video.is("video")).toBe(true);
     expect(sourcesOfVideo(video)).toEqual({});
   });
 
@@ -44,7 +42,6 @@ describe("CldVideo Component tests", () => {
 
     const video = wrapper.find('video');
 
-    expect(video.is("video")).toBe(true);
     expect(sourcesOfVideo(wrapper)).toEqual({
       "video/webm":"http://res.cloudinary.com/demo/video/upload/e_sepia/face_top.webm",
       "video/mp4":"http://res.cloudinary.com/demo/video/upload/e_sepia/face_top.mp4",
@@ -62,7 +59,6 @@ describe("CldVideo Component tests", () => {
 
     const video = wrapper.find('video');
 
-    expect(video.is("video")).toBe(true);
     expect(video.attributes("aria-hidden")).toBe("true");
     expect(video.attributes("cloudName")).toBe(undefined);
   });