@privyid/persona 1.1.1 → 1.2.0

package/dist/components/signature-text/SignatureText.spec.mjs

@@ -0,0 +1,369 @@
+import { vi } from "vitest";
+import { render } from "@testing-library/vue";
+import generate from "./__mocks__/generate-text.mjs";
+import SignatureText from "./SignatureText.vue";
+import { nextTick, ref } from "vue-demi";
+import { delay } from "nanodelay";
+vi.mock("@vueuse/core", async () => {
+  const vueuse = await vi.importActual("@vueuse/core");
+  const vueDemi = await vi.importActual("vue-demi");
+  return {
+    ...vueuse,
+    watchDebounced: vueDemi.watch
+  };
+});
+vi.mock("./utils/generate-text.ts", () => {
+  return { default: generate };
+});
+beforeEach(() => {
+  vi.spyOn(window.URL, "createObjectURL").mockImplementation((file) => {
+    return `blob://${file.name}`;
+  });
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+it("should render properly", () => {
+  const screen = render({
+    components: { SignatureText },
+    template: "<SignatureText />"
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledWith({
+    text: "- No Image -",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should render based on prop text", () => {
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum" />'
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should change width if prop `width` was provided", () => {
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum" :width="230" />'
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 230,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should change height if prop `height` was provided", () => {
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum" :height="500" />'
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 500,
+    color: "#000000"
+  });
+});
+it("should change font if prop `font` was provided", () => {
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum" font="DM Sans" />'
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "DM Sans",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should change color if prop `color` was provided", () => {
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum" color="#123456" />'
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#123456"
+  });
+});
+it("should limit text following `maxwords`'s prop", () => {
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum dolor" :maxwords="1" />'
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledWith({
+    text: "Lorem",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should limit text following `maxlength`'s prop", () => {
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="loremmmmmmmmmmm" :maxlength="5" />'
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledWith({
+    text: "Lorem",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should passing result data-uri to v-model", async () => {
+  const model = ref("");
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText v-model.base64="model" />',
+    setup() {
+      return { model };
+    }
+  });
+  const signature = screen.queryByTestId("signature-text");
+  await delay(0);
+  expect(signature).toBeInTheDocument();
+  expect(model.value).toBe("data:image/png;base64,dataSample123456789");
+});
+it("should re-render if `text` changed", async () => {
+  const text = ref("lorem ipsum");
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText :text="text" />',
+    setup() {
+      return { text };
+    }
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledTimes(1);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+  text.value = "ipsum lorem";
+  await nextTick();
+  expect(generate).toBeCalledTimes(2);
+  expect(generate).toBeCalledWith({
+    text: "Ipsum Lorem",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should re-render if `width` changed", async () => {
+  const width = ref(430);
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum" :width="width" />',
+    setup() {
+      return { width };
+    }
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledTimes(1);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+  width.value = 500;
+  await nextTick();
+  expect(generate).toBeCalledTimes(2);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 500,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should re-render if `width` changed", async () => {
+  const height = ref(230);
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum" :height="height" />',
+    setup() {
+      return { height };
+    }
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledTimes(1);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+  height.value = 500;
+  await nextTick();
+  expect(generate).toBeCalledTimes(2);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 500,
+    color: "#000000"
+  });
+});
+it("should re-render if `font` changed", async () => {
+  const font = ref("Herr Von Muellerhoff");
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum" :font="font" />',
+    setup() {
+      return { font };
+    }
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledTimes(1);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+  font.value = "DM Sans";
+  await nextTick();
+  expect(generate).toBeCalledTimes(2);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "DM Sans",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should re-render if `color` changed", async () => {
+  const color = ref("#000000");
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum" :color="color" />',
+    setup() {
+      return { color };
+    }
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledTimes(1);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+  color.value = "#123456";
+  await nextTick();
+  expect(generate).toBeCalledTimes(2);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#123456"
+  });
+});
+it("should re-render if `maxwords` changed", async () => {
+  const maxwords = ref(3);
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="lorem ipsum dolor" :maxwords="maxwords" />',
+    setup() {
+      return { maxwords };
+    }
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledTimes(1);
+  expect(generate).toBeCalledWith({
+    text: "Lorem Ipsum Dolor",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+  maxwords.value = 1;
+  await nextTick();
+  expect(generate).toBeCalledTimes(2);
+  expect(generate).toBeCalledWith({
+    text: "Lorem",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+});
+it("should re-render if `maxlength` changed", async () => {
+  const maxlength = ref(5);
+  const screen = render({
+    components: { SignatureText },
+    template: '<SignatureText text="abcdefghijklmno" :maxlength="maxlength" />',
+    setup() {
+      return { maxlength };
+    }
+  });
+  const signature = screen.queryByTestId("signature-text");
+  expect(signature).toBeInTheDocument();
+  expect(generate).toBeCalledTimes(1);
+  expect(generate).toBeCalledWith({
+    text: "Abcde",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+  maxlength.value = 10;
+  await nextTick();
+  expect(generate).toBeCalledTimes(2);
+  expect(generate).toBeCalledWith({
+    text: "Abcdefghij",
+    font: "Herr Von Muellerhoff",
+    width: 430,
+    height: 230,
+    color: "#000000"
+  });
+});

package/dist/components/signature-text/SignatureText.vue

@@ -8,91 +8,74 @@
     :srcset="srcset">
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+<script setup>
 import {
   ref,
   computed,
-  onMounted,
-} from 'vue-demi'
-import { useVModel } from '../input'
-import { createSpinner } from '../avatar/utils/create-image'
-import { formatName } from './utils/formatter'
-import generate from './utils/generate-text'
-import { usePreview } from '../cropper'
-import type { ModelModifier } from '../dropzone'
-import { fromBase64 } from '../utils/base64'
-import { watchDebounced } from '@vueuse/core'
-
+  onMounted
+} from "vue-demi";
+import { useVModel } from "../input";
+import { createSpinner } from "../avatar/utils/create-image";
+import { formatName } from "./utils/formatter";
+import generate from "./utils/generate-text";
+import { usePreview } from "../cropper";
+import { fromBase64 } from "../utils/base64";
+import { watchDebounced } from "@vueuse/core";
 const props = defineProps({
   modelValue: {
-    type   : [String, globalThis.File],
-    default: '',
+    type: [String, globalThis.File],
+    default: ""
   },
   modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
+    type: Object,
+    default: () => ({})
   },
   width: {
-    type   : Number,
-    default: 430,
+    type: Number,
+    default: 430
   },
   height: {
-    type   : Number,
-    default: 230,
+    type: Number,
+    default: 230
   },
   text: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   maxwords: {
-    type   : [Number, String],
-    default: 2,
+    type: [Number, String],
+    default: 2
   },
   maxlength: {
-    type   : [Number, String],
-    default: 50,
+    type: [Number, String],
+    default: 50
   },
   font: {
-    type   : String,
-    default: 'Herr Von Muellerhoff',
+    type: String,
+    default: "Herr Von Muellerhoff"
   },
   color: {
-    type   : String,
-    default: '#000000',
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [unknown],
-}>()
-
-const ready   = ref(false)
-const srcset  = ref('')
-const model   = useVModel(props)
-const preview = usePreview(model)
-
+    type: String,
+    default: "#000000"
+  }
+});
+defineEmits(["update:modelValue"]);
+const ready = ref(false);
+const srcset = ref("");
+const model = useVModel(props);
+const preview = usePreview(model);
 const src = computed(() => {
   if (!ready.value)
-    return createSpinner(props.width, props.height)
-
-  return preview.value
-})
-
+    return createSpinner(props.width, props.height);
+  return preview.value;
+});
 const name = computed(() => {
   if (!props.text)
-    return '- No Image -'
-
+    return "- No Image -";
   return formatName(
-    String(props.text)
-      .split(' ')
-      .filter(Boolean)
-      .slice(0, Number.parseInt(`${props.maxwords}`))
-      .join(' ')
-      .slice(0, Number.parseInt(`${props.maxlength}`)),
-  )
-})
-
+    String(props.text).split(" ").filter(Boolean).slice(0, Number.parseInt(`${props.maxwords}`)).join(" ").slice(0, Number.parseInt(`${props.maxlength}`))
+  );
+});
 watchDebounced(() => [
   props.text,
   props.font,
@@ -100,34 +83,27 @@ watchDebounced(() => [
   props.width,
   props.height,
   props.maxwords,
-  props.maxlength,
+  props.maxlength
 ], () => {
-  load()
-}, { debounce: 300 })
-
+  load();
+}, { debounce: 300 });
 onMounted(() => {
-  load()
-})
-
-async function load () {
-  ready.value = false
-
+  load();
+});
+async function load() {
+  ready.value = false;
   const options = {
-    text  : name.value,
-    font  : props.font,
-    width : props.width,
+    text: name.value,
+    font: props.font,
+    width: props.width,
     height: props.height,
-    color : props.color,
-  }
-
-  const result = await generate(options)
-  const value  = props.modelModifiers.base64
-    ? result
-    : fromBase64(result)
-
-  model.value  = value
-  srcset.value = `${await generate(options, 2)} 2x`
-  ready.value  = true
+    color: props.color
+  };
+  const result = await generate(options);
+  const value = props.modelModifiers.base64 ? result : fromBase64(result);
+  model.value = value;
+  srcset.value = `${await generate(options, 2)} 2x`;
+  ready.value = true;
 }
 </script>
 

package/dist/components/signature-text/SignatureText.vue.d.ts

@@ -0,0 +1,98 @@
+import type { PropType } from 'vue-demi';
+import type { ModelModifier } from '../dropzone';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxwords: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    maxlength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    font: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxwords: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    maxlength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    font: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    text: string;
+    modelValue: string | File;
+    width: number;
+    height: number;
+    color: string;
+    font: string;
+    modelModifiers: ModelModifier;
+    maxlength: string | number;
+    maxwords: string | number;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/signature-text/__mocks__/generate-text.d.ts

@@ -0,0 +1,3 @@
+import type { GenerateOptions } from '../utils/generate-text';
+declare const generate: import("vitest").Mock<[options: GenerateOptions], Promise<string>>;
+export default generate;

package/dist/components/signature-text/__mocks__/generate-text.mjs

@@ -0,0 +1,7 @@
+import { vi } from "vitest";
+const generate = vi.fn(async (options) => {
+  if (options.text === "failed")
+    throw new Error("Should throw error");
+  return "data:image/png;base64,dataSample123456789";
+});
+export default generate;