test/vue3 lazyload (#158)

Author: Nir Maoz

packages/react/__tests__/lazyload.test.tsx

@@ -2,7 +2,7 @@ import { AdvancedImage, lazyload } from '../src'
 import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';
 import { mount } from 'enzyme';
 import React from 'react';
-import testWithMockedIntersectionObserver from './testUtils/setupIntersectionObserverMock';
+import { testWithMockedIntersectionObserver } from '../../../testUtils/testWithMockedIntersectionObserver'
 
 const cloudinaryImage = new CloudinaryImage('sample', { cloudName: 'demo' }, { analytics: false });
 

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

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { AdvancedImage } from "../../src/index";
 import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
-import { nextTick } from "vue";
+import { waitTicks } from "./utils";
 
 const cloudinaryImage = new CloudinaryImage(
  "sample",
@@ -20,7 +20,7 @@ describe("AdvancedImage.vue", () => {
  });
 
  // wait because @cloudinary/html takes time to update the img element
- await nextTick();
+ await waitTicks(1);
 
  expect(component.html()).toContain(
  '<img src="https://res.cloudinary.com/demo/image/upload/sample"'
@@ -36,7 +36,7 @@ describe("AdvancedImage.vue", () => {
  });
 
  // wait because @cloudinary/html takes time to update the img element
- await nextTick();
+ await waitTicks(1);
 
  expect(component.html()).toContain('style="opacity: 0.5;"');
  });

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

@@ -0,0 +1,81 @@
+import { AdvancedImage, lazyload } from "../../src/index";
+import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";
+import { mount } from "@vue/test-utils";
+import { waitTicks } from "./utils";
+import { testWithMockedIntersectionObserver } from "../../../../testUtils/testWithMockedIntersectionObserver";
+
+const cloudinaryImage = new CloudinaryImage(
+ "sample",
+ { cloudName: "demo" },
+ { analytics: false }
+);
+
+describe("lazy-load", () => {
+ it("should not have src pre-scroll", async () => {
+ const rootDiv = document.createElement("div");
+ rootDiv.id = "root";
+ const div = document.createElement("div");
+ div.style.setProperty("height", "10000px");
+ rootDiv.appendChild(div);
+ document.body.appendChild(rootDiv);
+
+ testWithMockedIntersectionObserver(
+ // eslint-disable-next-line no-empty-pattern
+ async (mockIntersectionEvent: ({}) => void) => {
+ const component = mount(AdvancedImage, {
+ props: { cldImg: cloudinaryImage, plugins: [lazyload()] },
+ attachTo: "#root",
+ });
+ mockIntersectionEvent([
+ { isIntersecting: false, target: component.element },
+ ]);
+ await waitTicks(2);
+ // no src pre scroll
+ expect(component.html()).toBe("<img>");
+ expect(component.html()).not.toContain(
+ 'src="https://res.cloudinary.com/demo/image/upload/sample"'
+ );
+ }
+ );
+ });
+
+ it("should have src when in view", async () => {
+ testWithMockedIntersectionObserver(
+ // eslint-disable-next-line no-empty-pattern
+ async (mockIntersectionEvent: ({}) => void) => {
+ const component = mount(AdvancedImage, {
+ props: { cldImg: cloudinaryImage, plugins: [lazyload()] },
+ });
+ mockIntersectionEvent([
+ { isIntersecting: true, target: component.element },
+ ]);
+ await waitTicks(2);
+
+ expect(component.html()).toContain(
+ 'src="https://res.cloudinary.com/demo/image/upload/sample"'
+ );
+ }
+ );
+ });
+
+ it("should set lazyload root margin and threshold", async () => {
+ testWithMockedIntersectionObserver(
+ // eslint-disable-next-line no-empty-pattern
+ async (mockIntersectionEvent: ({}) => void) => {
+ const component = mount(AdvancedImage, {
+ props: {
+ cldImg: cloudinaryImage,
+ plugins: [lazyload({ rootMargin: "10px", threshold: 0.5 })],
+ },
+ });
+ mockIntersectionEvent([
+ { isIntersecting: true, target: component.element },
+ ]);
+ await waitTicks(2);
+ expect(component.html()).toContain(
+ 'src="https://res.cloudinary.com/demo/image/upload/sample"'
+ );
+ }
+ );
+ });
+});

packages/vue3/tests/unit/utils.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { nextTick } from "vue";
 
 /**

packages/react/__tests__/testUtils/setupIntersectionObserverMock.tsx renamed to testUtils/testWithMockedIntersectionObserver.ts

@@ -1,12 +1,21 @@
-function testWithMockedIntersectionObserver(cb: (...args:any) => void) {
- let intersectCallback: (root?: Element, rootMargin?: string, thresholds?: number) => void = () => {}; // will be
+export const testWithMockedIntersectionObserver = (
+ cb: (...args: any) => void
+) => {
+ let intersectCallback: (
+ root?: Element,
+ rootMargin?: string,
+ thresholds?: number
+ ) => void = () => {}; // will be
  // populated later
- let nativeIntersectionObserver = global.IntersectionObserver;
+ const nativeIntersectionObserver = global.IntersectionObserver;
 
  // Mock IntersectionObserver
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  global.IntersectionObserver = class {
- constructor(cb: (root?: Element, rootMargin?: string, thresholds?: number) => any) {
+ constructor(
+ cb: (root?: Element, rootMargin?: string, thresholds?: number) => any
+ ) {
  // This is the callback that notifies when an intersection occurs
  // We'll store it to use it later
  intersectCallback = cb;
@@ -20,6 +29,4 @@ function testWithMockedIntersectionObserver(cb: (...args:any) => void) {
 
  // restore
  global.IntersectionObserver = nativeIntersectionObserver;
-}
-
-export default testWithMockedIntersectionObserver;
+};