@privyid/persona 1.2.0 → 1.2.1

package/dist/components/cropper/Cropper.spec.mjs

@@ -1,417 +0,0 @@
-import { fireEvent, render } from "@testing-library/vue";
-import { vi } from "vitest";
-import { cropImage } from "./__mocks__/crop-image.mjs";
-import {
-  triggerDrag,
-  triggerPinch,
-  usePinch
-} from "./__mocks__/use-pinch.mjs";
-import Cropper from "./Cropper.vue";
-import img from "./assets/sample-1.jpg";
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-import { delay } from "nanodelay";
-import { nextTick, ref } from "vue-demi";
-import { createSpinner } from "../avatar/utils/create-image.mjs";
-const blob = readFileSync(resolve(__dirname, "../../public/assets/images/img-sample-crop.jpg"));
-const file = new globalThis.File([blob], "image.jpg", { type: "image/jpeg" });
-vi.mock("./utils/crop-image.ts", () => ({ cropImage }));
-vi.mock("./utils/use-pinch.ts", () => ({ usePinch }));
-vi.mock("../input-range/utils/use-drag.ts", () => ({ default: vi.fn() }));
-vi.mock("@vueuse/core", async () => {
-  const vueuse = await vi.importActual("@vueuse/core");
-  const useThrottleFn = (handler) => {
-    return (...args) => {
-      handler.apply(this, args);
-    };
-  };
-  return {
-    ...vueuse,
-    useThrottleFn
-  };
-});
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-it("should render properly", () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const cropper = screen.getByTestId("cropper");
-  expect(cropper).toBeInTheDocument();
-});
-it("should able to zoomOut if button zoomOut clicked", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const zoomOut = screen.getByTestId("cropper-zoom-out");
-  const preview = screen.getByTestId("cropper-preview");
-  await fireEvent.click(zoomOut);
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(0px, 0px) scale(0.9)" });
-});
-it("should able to zoomIn if button zoomIn clicked", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const zoomIn = screen.getByTestId("cropper-zoom-in");
-  const preview = screen.getByTestId("cropper-preview");
-  await fireEvent.click(zoomIn);
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(0px, 0px) scale(1.1)" });
-});
-it("should able to rotate counter-clockwise if rotate left is clicked", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const rotateLeft = screen.getByTestId("cropper-rotate-left");
-  const preview = screen.getByTestId("cropper-preview");
-  await fireEvent.click(rotateLeft);
-  expect(preview).toHaveStyle({ transform: "rotate(-90deg) translate(0px, 0px) scale(0.5)" });
-});
-it("should able to rotate clockwise if rotate right is clicked", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const rotateRight = screen.getByTestId("cropper-rotate-right");
-  const preview = screen.getByTestId("cropper-preview");
-  await fireEvent.click(rotateRight);
-  expect(preview).toHaveStyle({ transform: "rotate(90deg) translate(0px, 0px) scale(0.5)" });
-});
-it("should able to reset all movement if reset button clicked", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const rotateRight = screen.getByTestId("cropper-rotate-right");
-  const zoomIn = screen.getByTestId("cropper-zoom-in");
-  const reset = screen.getByTestId("cropper-reset");
-  const preview = screen.getByTestId("cropper-preview");
-  await fireEvent.click(rotateRight);
-  await fireEvent.click(rotateRight);
-  await fireEvent.click(zoomIn);
-  await fireEvent.click(zoomIn);
-  expect(preview).toHaveStyle({ transform: "rotate(180deg) translate(0px, 0px) scale(0.7)" });
-  await fireEvent.click(reset);
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(0px, 0px) scale(0.5)" });
-});
-it("should able to move position using drag", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const preview = screen.getByTestId("cropper-preview");
-  await triggerDrag(100, 100);
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(100px, 100px) scale(1)" });
-});
-it("should able to move position and zoomIn/zoomOut using pinch", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const preview = screen.getByTestId("cropper-preview");
-  await triggerPinch(1.5, -300, 100);
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(-300px, 100px) scale(1.5)" });
-});
-it("should able to zoomIn / zoomOut using mouse wheel", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const preview = screen.getByTestId("cropper-preview");
-  const container = screen.getByTestId("cropper-container");
-  await fireEvent.wheel(container, { deltaY: 60 });
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(0px, 0px) scale(1.6)" });
-  await fireEvent.wheel(container, { deltaY: -60 });
-  await fireEvent.wheel(container, { deltaY: -60 });
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(0px, 0px) scale(0.5)" });
-});
-it("should able to move using keyboard arrow", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" />',
-    setup() {
-      return { img };
-    }
-  });
-  const preview = screen.getByTestId("cropper-preview");
-  await fireEvent.keyDown(preview, { key: "ArrowUp" });
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(0px, -1px) scale(1)" });
-  await fireEvent.keyDown(preview, { key: "ArrowDown" });
-  await fireEvent.keyDown(preview, { key: "ArrowDown" });
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(0px, 1px) scale(1)" });
-  await fireEvent.keyDown(preview, { key: "ArrowLeft" });
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(-1px, 1px) scale(1)" });
-  await fireEvent.keyDown(preview, { key: "ArrowRight" });
-  await fireEvent.keyDown(preview, { key: "ArrowRight" });
-  expect(preview).toHaveStyle({ transform: "rotate(0deg) translate(1px, 1px) scale(1)" });
-});
-it("should able to use File object as image source", async () => {
-  vi.spyOn(window.URL, "createObjectURL").mockImplementation((file2) => {
-    return `blob://${file2.name}`;
-  });
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="file" />',
-    setup() {
-      return { file };
-    }
-  });
-  await delay(0);
-  const preview = screen.getByTestId("cropper-preview");
-  expect(preview).toHaveAttribute("src", "blob://image.jpg");
-});
-it("should able to set crop width and height using prop width and height", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" width="500" height="200" />',
-    setup() {
-      return { img };
-    }
-  });
-  const preview = screen.queryByTestId("cropper-preview");
-  const mask = screen.queryByTestId("cropper-mask");
-  const canvas = screen.queryByTestId("cropper-canvas");
-  expect(mask).toHaveStyle({ width: "500px" });
-  expect(mask.style.aspectRatio).toBe("2.5");
-  await fireEvent.load(preview);
-  expect(cropImage).toBeCalledWith({
-    canvas,
-    image: preview,
-    width: 500,
-    height: 200,
-    x: 0,
-    y: 0,
-    angle: 0,
-    scale: 0.5,
-    rounded: false
-  });
-});
-it("should scale down the crop mask if crop width larger than viewport", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" width="500" height="200" />',
-    setup() {
-      return { img };
-    }
-  });
-  const container = screen.queryByTestId("cropper-container");
-  vi.spyOn(container, "clientWidth", "get").mockReturnValue(300);
-  const preview = screen.queryByTestId("cropper-preview");
-  const canvas = screen.queryByTestId("cropper-canvas");
-  await fireEvent.load(preview);
-  expect(cropImage).toBeCalledWith({
-    canvas,
-    image: preview,
-    width: 500,
-    height: 200,
-    x: 0,
-    y: 0,
-    angle: 0,
-    scale: 0.5 * (500 / (300 * 2 / 3)),
-    rounded: false
-  });
-});
-it("should able to crop using ratio", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" :ratio="4/3" />',
-    setup() {
-      return { img };
-    }
-  });
-  const container = screen.queryByTestId("cropper-container");
-  vi.spyOn(container, "clientWidth", "get").mockReturnValue(1e3);
-  const preview = screen.queryByTestId("cropper-preview");
-  const canvas = screen.queryByTestId("cropper-canvas");
-  await fireEvent.load(preview);
-  expect(cropImage).toBeCalledWith({
-    canvas,
-    image: preview,
-    width: 1e3 * 2 / 3,
-    height: 1e3 * 2 / 3 * (3 / 4),
-    x: 0,
-    y: 0,
-    angle: 0,
-    scale: 0.5,
-    rounded: false
-  });
-});
-it("should crop rounded if prop `rounded` was provided", async () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" rounded />',
-    setup() {
-      return { img };
-    }
-  });
-  const container = screen.queryByTestId("cropper-container");
-  vi.spyOn(container, "clientWidth", "get").mockReturnValue(600);
-  const cropper = screen.queryByTestId("cropper");
-  const preview = screen.queryByTestId("cropper-preview");
-  const canvas = screen.queryByTestId("cropper-canvas");
-  await fireEvent.load(preview);
-  expect(cropper).toHaveClass("cropper--rounded");
-  expect(cropImage).toBeCalledWith({
-    canvas,
-    image: preview,
-    width: 400,
-    height: 400,
-    x: 0,
-    y: 0,
-    angle: 0,
-    scale: 0.5,
-    rounded: true
-  });
-});
-it("should re-run the cropping process if image changed (drag, zoom, rotate)", async () => {
-  vi.useFakeTimers();
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" width="400" :ratio="4/3" />',
-    setup() {
-      return { img };
-    }
-  });
-  const rotateRight = screen.getByTestId("cropper-rotate-right");
-  const zoomIn = screen.getByTestId("cropper-zoom-in");
-  const canvas = screen.queryByTestId("cropper-canvas");
-  const preview = screen.queryByTestId("cropper-preview");
-  await fireEvent.load(preview);
-  expect(cropImage).toBeCalledTimes(1);
-  await fireEvent.click(rotateRight);
-  await fireEvent.click(rotateRight);
-  await fireEvent.click(zoomIn);
-  await fireEvent.click(zoomIn);
-  await triggerDrag(50, 50);
-  vi.advanceTimersByTime(501);
-  await nextTick();
-  expect(cropImage).toBeCalledTimes(2);
-  expect(cropImage).lastCalledWith({
-    canvas,
-    image: preview,
-    width: 400,
-    height: 300,
-    x: -49.99999999999999,
-    y: -50.00000000000001,
-    angle: 180,
-    scale: 0.7,
-    rounded: false
-  });
-  vi.useRealTimers();
-});
-it("should not re-run the cropping process if prop `no-autocrop` was provided", async () => {
-  vi.useFakeTimers();
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" no-autocrop />',
-    setup() {
-      return { img };
-    }
-  });
-  const rotateRight = screen.getByTestId("cropper-rotate-right");
-  const zoomIn = screen.getByTestId("cropper-zoom-in");
-  const preview = screen.queryByTestId("cropper-preview");
-  await fireEvent.load(preview);
-  expect(cropImage).toBeCalledTimes(0);
-  await fireEvent.click(rotateRight);
-  await fireEvent.click(rotateRight);
-  await fireEvent.click(zoomIn);
-  await fireEvent.click(zoomIn);
-  await triggerDrag(50, 50);
-  vi.advanceTimersByTime(501);
-  await nextTick();
-  expect(cropImage).toBeCalledTimes(0);
-  vi.useRealTimers();
-});
-it("should disabled crop mode if prop `no-crop` was provided", () => {
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" no-crop />',
-    setup() {
-      return { img };
-    }
-  });
-  const cropper = screen.queryByTestId("cropper");
-  const mask = screen.queryByTestId("cropper-mask");
-  expect(cropper).toHaveClass("cropper--no-crop");
-  expect(mask).not.toBeInTheDocument();
-});
-it("should re-load the image if prop `src` was changed", async () => {
-  vi.spyOn(window.URL, "createObjectURL").mockImplementation((file2) => {
-    return `blob://${file2.name}`;
-  });
-  const src = ref(img);
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="src" />',
-    setup() {
-      return { src };
-    }
-  });
-  await delay(0);
-  const preview = screen.queryByTestId("cropper-preview");
-  expect(preview).toHaveAttribute("src", img);
-  src.value = file;
-  await nextTick();
-  expect(preview).toHaveAttribute("src", "blob://image.jpg");
-  src.value = void 0;
-  await nextTick();
-  expect(preview).toHaveAttribute("src", createSpinner(512, 512));
-});
-it("should binding value in v-model", async () => {
-  const result = ref();
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" v-model="result" />',
-    setup() {
-      return { img, result };
-    }
-  });
-  const preview = screen.queryByTestId("cropper-preview");
-  await fireEvent.load(preview);
-  expect(result.value).toBeInstanceOf(File);
-});
-it("should convert value in v-model to base64 if modifier .base64 was provided", async () => {
-  const result = ref();
-  const screen = render({
-    components: { Cropper },
-    template: '<Cropper :src="img" v-model.base64="result" />',
-    setup() {
-      return { img, result };
-    }
-  });
-  const preview = screen.queryByTestId("cropper-preview");
-  await fireEvent.load(preview);
-  expect(result.value).toStartWith("data:image/png;base64");
-});