diff --git a/src/PrismicRichText.ts b/src/PrismicRichText.ts deleted file mode 100644 index 33b51d0..0000000 --- a/src/PrismicRichText.ts +++ /dev/null @@ -1,282 +0,0 @@ -import type { - HTMLFunctionSerializer, - HTMLMapSerializer, - LinkResolverFunction, - RichTextField, -} from "@prismicio/client" -import { asHTML, isFilled } from "@prismicio/client" -import type { - AllowedComponentProps, - Component, - ComponentCustomProps, - ComputedRef, - ConcreteComponent, - DefineComponent, - PropType, - Raw, - VNodeProps, -} from "vue" -import { - computed, - defineComponent, - h, - inject, - nextTick, - onBeforeUnmount, - ref, - unref, - watch, -} from "vue" -import { routerKey } from "vue-router" - -import { isInternalURL } from "./lib/isInternalURL" -import { simplyResolveComponent } from "./lib/simplyResolveComponent" - -import type { VueUseOptions } from "./types" - -import { usePrismic } from "./usePrismic" - -/** - * The default component rendered to wrap the HTML output. - */ -const defaultWrapper = "div" - -/** - * Props for ``. - */ -export type PrismicRichTextProps = { - /** - * The Prismic rich text or title field to render. - */ - field: RichTextField | null | undefined - - /** - * A link resolver function used to resolve link when not using the route - * resolver parameter with `@prismicio/client`. - * - * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured. - * - * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver} - */ - linkResolver?: LinkResolverFunction - - /** - * An HTML serializer to customize the way rich text fields are rendered. - * - * @defaultValue The HTML serializer provided to `@prismicio/vue` plugin if configured. - * - * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer} - */ - serializer?: HTMLFunctionSerializer | HTMLMapSerializer - - /** - * An HTML serializer to customize the way rich text fields are rendered. - * - * @deprecated Use `serializer` instead. - * - * @defaultValue The HTML serializer provided to `@prismicio/vue` plugin if configured. - * - * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer} - */ - htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer - - /** - * An HTML tag name or a component used to wrap the output. - * - * @defaultValue `"div"` - */ - wrapper?: string | ConcreteComponent | Raw - - /** - * The HTML value to be rendered when the field is empty. If a fallback is not - * given, `""` (nothing) will be rendered. - */ - fallback?: string -} - -/** - * Options for {@link usePrismicRichText}. - */ -export type UsePrismicRichTextOptions = VueUseOptions< - Omit -> - -/** - * Return type of {@link usePrismicRichText}. - */ -export type UsePrismicRichTextReturnType = { - /** - * Serialized rich text field as HTML. - */ - html: ComputedRef -} - -/** - * A low level composable that returns a serialized rich text field as HTML. - * - * @param props - {@link UsePrismicRichTextOptions} - * - * @returns - Serialized rich text field as HTML - * {@link UsePrismicRichTextReturnType} - */ -export const usePrismicRichText = ( - props: UsePrismicRichTextOptions, -): UsePrismicRichTextReturnType => { - const { options } = usePrismic() - - const html = computed(() => { - const field = unref(props.field) - - if (!isFilled.richText(field)) { - return unref(props.fallback) ?? "" - } - - const linkResolver = unref(props.linkResolver) ?? options.linkResolver - const serializer = - unref(props.serializer) ?? - unref(props.htmlSerializer) ?? - options.richTextSerializer ?? - options.htmlSerializer - - return asHTML(unref(field), linkResolver, serializer) - }) - - return { - html, - } -} - -/** - * `` implementation. - * - * @internal - */ -export const PrismicRichTextImpl = /*#__PURE__*/ defineComponent({ - name: "PrismicRichText", - props: { - field: { - type: Array as unknown as PropType, - default: undefined, - required: false, - }, - linkResolver: { - type: Function as PropType, - default: undefined, - required: false, - }, - serializer: { - type: [Function, Object] as PropType< - HTMLFunctionSerializer | HTMLMapSerializer - >, - default: undefined, - required: false, - }, - htmlSerializer: { - type: [Function, Object] as PropType< - HTMLFunctionSerializer | HTMLMapSerializer - >, - default: undefined, - required: false, - }, - wrapper: { - type: [String, Object, Function] as PropType< - string | ConcreteComponent | Raw - >, - default: undefined, - required: false, - }, - fallback: { - type: String as PropType, - default: undefined, - required: false, - }, - }, - setup(props) { - const { html } = usePrismicRichText(props) - - const root = ref(null) - - const maybeRouter = inject(routerKey, null) - if (maybeRouter) { - type InternalLink = { - element: HTMLAnchorElement - listener: EventListener - } - let links: InternalLink[] = [] - - const navigate: EventListener = function ( - this: { href: string }, - event: Event, - ) { - event.preventDefault() - maybeRouter.push(this.href) - } - - const addListeners = () => { - const node: HTMLElement | Comment | null = - root.value && "$el" in root.value ? root.value.$el : root.value - if (node && "querySelectorAll" in node) { - // Get all internal link tags and add listeners on them - links = Array.from(node.querySelectorAll("a")) - .map((element) => { - const href = element.getAttribute("href") - - if (href && isInternalURL(href)) { - const listener = navigate.bind({ href }) - element.addEventListener("click", listener) - - return { element, listener } - } else { - return false - } - }) - .filter((link): link is InternalLink => link as boolean) - } - } - - const removeListeners = () => { - links.forEach(({ element, listener }) => - element.removeEventListener("click", listener), - ) - links = [] - } - - watch( - html, - () => { - removeListeners() - nextTick(addListeners) - }, - { immediate: true }, - ) - - onBeforeUnmount(() => { - removeListeners() - }) - } - - return () => { - return h(simplyResolveComponent(props.wrapper || defaultWrapper), { - innerHTML: html.value, - ref: root, - }) - } - }, -}) - -// export the public type for h/tsx inference -// also to avoid inline import() in generated d.ts files -/** - * Component to render a Prismic rich text field as HTML. - * - * @see Component props {@link PrismicRichTextProps} - * @see Templating rich text and title fields {@link https://prismic.io/docs/technologies/vue-template-content#rich-text-and-titles} - */ -export const PrismicRichText = PrismicRichTextImpl as unknown as { - new (): { - $props: AllowedComponentProps & - ComponentCustomProps & - VNodeProps & - PrismicRichTextProps - } -} diff --git a/src/PrismicRichText/PrismicRichText.vue b/src/PrismicRichText/PrismicRichText.vue new file mode 100644 index 0000000..6524670 --- /dev/null +++ b/src/PrismicRichText/PrismicRichText.vue @@ -0,0 +1,158 @@ + + + diff --git a/src/createPrismic.ts b/src/createPrismic.ts index f9e068e..b8859ff 100644 --- a/src/createPrismic.ts +++ b/src/createPrismic.ts @@ -28,12 +28,12 @@ import type { PrismicPluginOptions, } from "./types" +import PrismicRichText from "./PrismicRichText/PrismicRichText.vue" import SliceZone from "./SliceZone/SliceZone.vue" import PrismicEmbed from "./PrismicEmbed.vue" import PrismicImage from "./PrismicImage.vue" import PrismicLink from "./PrismicLink.vue" -import { PrismicRichText } from "./PrismicRichText" import PrismicText from "./PrismicText.vue" import { prismicKey } from "./usePrismic" @@ -77,13 +77,11 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => { serializer: (maybeHTMLSerializer as | HTMLRichTextFunctionSerializer - | HTMLRichTextMapSerializer) || - options.richTextSerializer || - options.htmlSerializer, + | HTMLRichTextMapSerializer) || options.richTextSerializer, } : { linkResolver: options.linkResolver, - serializer: options.richTextSerializer || options.htmlSerializer, + serializer: options.richTextSerializer, ...configOrLinkResolver, }, ) @@ -133,7 +131,7 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => { app.component(PrismicEmbed.name!, PrismicEmbed) app.component(PrismicImage.name!, PrismicImage) app.component(PrismicText.name!, PrismicText) - app.component(PrismicRichText.name, PrismicRichText) + app.component(PrismicRichText.name!, PrismicRichText) app.component(SliceZone.name!, SliceZone) } }, diff --git a/src/index.ts b/src/index.ts index 7915f5d..116ecbb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ +import PrismicRichText from "./PrismicRichText/PrismicRichText.vue" import SliceZone from "./SliceZone/SliceZone.vue" import PrismicEmbed from "./PrismicEmbed.vue" @@ -6,23 +7,21 @@ import PrismicLink from "./PrismicLink.vue" import PrismicText from "./PrismicText.vue" export type { SliceZoneProps } from "./SliceZone/SliceZone.vue" +export type { PrismicRichTextProps } from "./PrismicRichText/PrismicRichText.vue" export type { PrismicEmbedProps } from "./PrismicEmbed.vue" export type { PrismicImageProps } from "./PrismicImage.vue" export type { PrismicLinkProps } from "./PrismicLink.vue" export type { PrismicTextProps } from "./PrismicText.vue" -export { SliceZone, PrismicEmbed, PrismicImage, PrismicLink, PrismicText } - export { - usePrismicRichText, - PrismicRichTextImpl, + SliceZone, PrismicRichText, -} from "./PrismicRichText" -export type { - UsePrismicRichTextOptions, - PrismicRichTextProps, -} from "./PrismicRichText" + PrismicEmbed, + PrismicImage, + PrismicLink, + PrismicText, +} export { TODOSliceComponent, diff --git a/src/lib/simplyResolveComponent.ts b/src/lib/simplyResolveComponent.ts deleted file mode 100644 index f57fbef..0000000 --- a/src/lib/simplyResolveComponent.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { ConcreteComponent, DefineComponent, Raw, VNode } from "vue" -import { resolveDynamicComponent } from "vue" - -/** - * A stricter version of {@link resolveDynamicComponent} that resolves only type - * {@link VNode} for existing components or provided `string`. - * - * @param component - An HTML tag name or a component. - * - * @returns Resolved component as a {@link VNode} or provided `string`. - * - * @internal - */ -export const simplyResolveComponent = ( - component: string | ConcreteComponent | Raw, -): string | VNode => { - return resolveDynamicComponent(component) as string | VNode -} diff --git a/src/types.ts b/src/types.ts index 9238ca6..2e2afb6 100644 --- a/src/types.ts +++ b/src/types.ts @@ -128,17 +128,6 @@ type PrismicPluginOptionsBase = { | HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer - /** - * An optional HTML serializer to customize the way rich text fields are - * rendered. - * - * @deprecated Use `richTextSerializer` instead. - * - * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer} - */ - // TODO: Remove in v5 - htmlSerializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer - /** * Whether or not to inject components globally. * diff --git a/test/__snapshots__/components-PrismicRichText.test.ts.snap b/test/__snapshots__/components-PrismicRichText.test.ts.snap deleted file mode 100644 index 9dc18ce..0000000 --- a/test/__snapshots__/components-PrismicRichText.test.ts.snap +++ /dev/null @@ -1,109 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`renders rich text field as HTML 1`] = ` -"
-

Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet.

-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet.
-

Lorem ipsum dolor sit amet.

-

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
    -
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  2. -
  3. Lorem ipsum dolor sit amet.
  4. -
  5. Lorem ipsum dolor sit amet.
  6. -
-
    -
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • -
  • Lorem ipsum dolor sit amet.
  • -
  • Lorem ipsum dolor sit amet.
  • -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

An Atlantic Puffin

-

An Atlantic Puffin

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

An Atlantic Puffin

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

An Atlantic Puffin

-
" -`; - -exports[`uses provided wrapper component 1`] = ` -"
-

Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet.

-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet.
-

Lorem ipsum dolor sit amet.

-

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
    -
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  2. -
  3. Lorem ipsum dolor sit amet.
  4. -
  5. Lorem ipsum dolor sit amet.
  6. -
-
    -
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • -
  • Lorem ipsum dolor sit amet.
  • -
  • Lorem ipsum dolor sit amet.
  • -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

An Atlantic Puffin

-

An Atlantic Puffin

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

An Atlantic Puffin

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

An Atlantic Puffin

-
" -`; - -exports[`uses provided wrapper tag 1`] = ` -"
-

Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet.

-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet.
-

Lorem ipsum dolor sit amet.

-

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
    -
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  2. -
  3. Lorem ipsum dolor sit amet.
  4. -
  5. Lorem ipsum dolor sit amet.
  6. -
-
    -
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • -
  • Lorem ipsum dolor sit amet.
  • -
  • Lorem ipsum dolor sit amet.
  • -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

An Atlantic Puffin

-

An Atlantic Puffin

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

An Atlantic Puffin

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

An Atlantic Puffin

-
" -`; diff --git a/test/components-PrismicImage.test.ts b/test/components-PrismicImage.test.ts index 2e44da5..3eb7516 100644 --- a/test/components-PrismicImage.test.ts +++ b/test/components-PrismicImage.test.ts @@ -150,6 +150,10 @@ describe("renders a pixel-density srcset", () => { }) it("prioritizes widths prop over pixelDensities", (ctx) => { + const consoleWarnSpy = vi + .spyOn(console, "warn") + .mockImplementation(() => void 0) + const wrapper = mount(PrismicImage, { props: { field: ctx.mock.value.image(), @@ -163,6 +167,8 @@ it("prioritizes widths prop over pixelDensities", (ctx) => { expect(wrapper.html()).toMatchInlineSnapshot( `"Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat semper viverra"`, ) + + consoleWarnSpy.mockRestore() }) it("warns if both widths and pixelDensites are given", (ctx) => { diff --git a/test/components-PrismicRichText.test.ts b/test/components-PrismicRichText.test.ts index b50ae09..26ecb25 100644 --- a/test/components-PrismicRichText.test.ts +++ b/test/components-PrismicRichText.test.ts @@ -1,4 +1,4 @@ -import { expect, it, vi } from "vitest" +import { describe, expect, it, vi } from "vitest" import type { RichTextField, RichTextNodeTypes } from "@prismicio/client" import { RichTextNodeType } from "@prismicio/client" @@ -9,358 +9,399 @@ import { routerKey } from "vue-router" import { WrapperComponent } from "./__fixtures__/WrapperComponent" import { richTextFixture } from "./__fixtures__/richText" -import { PrismicRichTextImpl, createPrismic } from "../src" +import { PrismicRichText, createPrismic } from "../src" -it("renders rich text field as HTML", () => { - const wrapper = mount(PrismicRichTextImpl, { - props: { field: richTextFixture.en }, - }) - - expect(wrapper.html()).toMatchSnapshot() -}) +describe("renders a rich text field", () => { + it("as HTML", () => { + const wrapper = mount(PrismicRichText, { + props: { + field: [ + { + type: RichTextNodeType.heading1, + text: "Heading 1", + spans: [], + }, + ], + }, + }) -it("renders fallback when rich text is empty", () => { - const wrapper1 = mount(PrismicRichTextImpl, { - props: { field: [] }, + expect(wrapper.html()).toBe(`
+

Heading 1

+
`) }) - expect(wrapper1.html()).toBe("
") + it("as nothing when passed an empty field", () => { + const wrapper = mount(PrismicRichText, { + props: { field: [] }, + }) - const wrapper2 = mount(PrismicRichTextImpl, { - props: { field: [], fallback: "foo" }, + expect(wrapper.html()).toBe("") }) +}) - expect(wrapper2.html()).toBe("
foo
") +describe("renders fallback value", () => { + it.skip("when passed an empty field", () => { + const nullField = mount(PrismicRichText, { + props: { field: null, fallback: "fallback" }, + }) - const wrapper3 = mount(PrismicRichTextImpl, { - props: { field: null, fallback: "bar" }, - }) + const undefinedField = mount(PrismicRichText, { + props: { field: undefined, fallback: "fallback" }, + }) - expect(wrapper3.html()).toBe("
bar
") + const emptyField = mount(PrismicRichText, { + props: { field: [], fallback: "fallback" }, + }) - const wrapper4 = mount(PrismicRichTextImpl, { - props: { field: undefined, fallback: "baz" }, + expect(nullField.html()).toBe("fallback") + expect(undefinedField.html()).toBe("fallback") + expect(emptyField.html()).toBe("fallback") }) - expect(wrapper4.html()).toBe("
baz
") -}) + it("when passed an empty field with wrapper", () => { + const nullField = mount(PrismicRichText, { + props: { field: null, fallback: "fallback", wrapper: "p" }, + }) -it("uses provided wrapper tag", () => { - const wrapper = mount(PrismicRichTextImpl, { - props: { field: richTextFixture.en, wrapper: "section" }, - }) + const undefinedField = mount(PrismicRichText, { + props: { field: undefined, fallback: "fallback", wrapper: "p" }, + }) - expect(wrapper.html()).toMatchSnapshot() -}) + const emptyField = mount(PrismicRichText, { + props: { field: [], fallback: "fallback", wrapper: "p" }, + }) -it("uses provided wrapper component", () => { - const wrapper = mount(PrismicRichTextImpl, { - props: { field: richTextFixture.en, wrapper: markRaw(WrapperComponent) }, + expect(nullField.html()).toBe("

fallback

") + expect(undefinedField.html()).toBe("

fallback

") + expect(emptyField.html()).toBe("

fallback

") }) - - expect(wrapper.html()).toMatchSnapshot() }) -it("uses plugin provided link resolver", (ctx) => { - const spiedLinkResolver = vi.fn(() => ctx.task.name) +describe("renders with wrapper", () => { + it("tag", () => { + const wrapper = mount(PrismicRichText, { + props: { + field: [ + { + type: RichTextNodeType.heading1, + text: "Heading 1", + spans: [], + }, + ], + wrapper: "section", + }, + }) - const prismic = createPrismic({ - endpoint: "test", - linkResolver: spiedLinkResolver, + expect(wrapper.html()).toBe(`
+

Heading 1

+
`) }) - const wrapper = mount(PrismicRichTextImpl, { - props: { field: richTextFixture.en }, - global: { plugins: [prismic] }, - }) + it("component", () => { + const wrapper = mount(PrismicRichText, { + props: { + field: [ + { + type: RichTextNodeType.heading1, + text: "Heading 1", + spans: [], + }, + ], + wrapper: markRaw(WrapperComponent), + }, + }) - expect(spiedLinkResolver).toHaveBeenCalled() - expect(wrapper.html()).toMatch(`href="${ctx.task.name}"`) -}) + expect(wrapper.html()).toBe( + `
+

Heading 1

+
`, + ) + }) -it("uses provided link resolver over plugin provided", (ctx) => { - const spiedLinkResolver1 = vi.fn(() => `${ctx.task.name}1`) - const spiedLinkResolver2 = vi.fn(() => `${ctx.task.name}2`) + it("forwards attributes to wrapper", () => { + const wrapper = mount(PrismicRichText, { + props: { + field: [ + { + type: RichTextNodeType.heading1, + text: "Heading 1", + spans: [], + }, + ], + wrapper: "section", + }, + attrs: { + class: "foo", + }, + }) - const prismic = createPrismic({ - endpoint: "test", - linkResolver: spiedLinkResolver1, + expect(wrapper.html()).toBe( + `
+

Heading 1

+
`, + ) }) +}) - const wrapper = mount(PrismicRichTextImpl, { - props: { field: richTextFixture.en, linkResolver: spiedLinkResolver2 }, - global: { plugins: [prismic] }, - }) +describe("uses link resolver", () => { + it("from plugin", (ctx) => { + const spiedLinkResolver = vi.fn(() => ctx.task.name) - expect(spiedLinkResolver1).not.toHaveBeenCalled() - expect(spiedLinkResolver2).toHaveBeenCalled() - expect(wrapper.html()).toMatch(`href="${ctx.task.name}2"`) -}) + const prismic = createPrismic({ + endpoint: "test", + linkResolver: spiedLinkResolver, + }) -it("uses plugin provided HTML function serializer", (ctx) => { - const spiedSerializer = vi.fn((type: RichTextNodeTypes) => - type === RichTextNodeType.paragraph ? `

${ctx.task.name}

` : null, - ) + const wrapper = mount(PrismicRichText, { + props: { field: richTextFixture.en }, + global: { plugins: [prismic] }, + }) - const prismic = createPrismic({ - endpoint: "test", - richTextSerializer: spiedSerializer, + expect(spiedLinkResolver).toHaveBeenCalled() + expect(wrapper.html()).toMatch(`href="${ctx.task.name}"`) }) - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.en, - }, - global: { plugins: [prismic] }, - }) + it("from props (priority over plugin)", (ctx) => { + const spiedLinkResolver1 = vi.fn(() => `${ctx.task.name}1`) + const spiedLinkResolver2 = vi.fn(() => `${ctx.task.name}2`) - expect(spiedSerializer).toHaveBeenCalled() - expect(wrapper.html()).toMatch(`

${ctx.task.name}

`) -}) + const prismic = createPrismic({ + endpoint: "test", + linkResolver: spiedLinkResolver1, + }) -it("uses provided HTML function serializer over plugin provided", (ctx) => { - const spiedSerializer1 = vi.fn((type: RichTextNodeTypes) => - type === RichTextNodeType.paragraph ? `

${ctx.task.name}1

` : null, - ) - const spiedSerializer2 = vi.fn((type: RichTextNodeTypes) => - type === RichTextNodeType.paragraph ? `

${ctx.task.name}2

` : null, - ) + const wrapper = mount(PrismicRichText, { + props: { field: richTextFixture.en, linkResolver: spiedLinkResolver2 }, + global: { plugins: [prismic] }, + }) - const prismic = createPrismic({ - endpoint: "test", - richTextSerializer: spiedSerializer1, + expect(spiedLinkResolver1).not.toHaveBeenCalled() + expect(spiedLinkResolver2).toHaveBeenCalled() + expect(wrapper.html()).toMatch(`href="${ctx.task.name}2"`) }) +}) - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.en, - serializer: spiedSerializer2, - }, - global: { plugins: [prismic] }, - }) +// TODO: Remove in v6 +describe("uses HTML serializer", () => { + it("function from plugin", (ctx) => { + const spiedSerializer = vi.fn((type: RichTextNodeTypes) => + type === RichTextNodeType.paragraph ? `

${ctx.task.name}

` : null, + ) - expect(spiedSerializer1).not.toHaveBeenCalled() - expect(spiedSerializer2).toHaveBeenCalled() - expect(wrapper.html()).toMatch(`

${ctx.task.name}2

`) -}) + const prismic = createPrismic({ + endpoint: "test", + richTextSerializer: spiedSerializer, + }) -it("uses plugin provided HTML map serializer", (ctx) => { - const spiedSerializer = { - paragraph: vi.fn(() => `

${ctx.task.name}

`), - } + const wrapper = mount(PrismicRichText, { + props: { + field: richTextFixture.en, + }, + global: { plugins: [prismic] }, + }) - const prismic = createPrismic({ - endpoint: "test", - richTextSerializer: spiedSerializer, + expect(spiedSerializer).toHaveBeenCalled() + expect(wrapper.html()).toMatch(`

${ctx.task.name}

`) }) - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.en, - }, - global: { plugins: [prismic] }, - }) + it("map from plugin", (ctx) => { + const spiedSerializer = { + paragraph: vi.fn(() => `

${ctx.task.name}

`), + } - expect(spiedSerializer.paragraph).toHaveBeenCalled() - expect(wrapper.html()).toMatch(`

${ctx.task.name}

`) -}) + const prismic = createPrismic({ + endpoint: "test", + richTextSerializer: spiedSerializer, + }) -it("uses provided HTML map serializer over plugin provided", (ctx) => { - const spiedSerializer1 = { - paragraph: vi.fn(() => `

${ctx.task.name}1

`), - } - const spiedSerializer2 = { - paragraph: vi.fn(() => `

${ctx.task.name}2

`), - } - - const prismic = createPrismic({ - endpoint: "test", - richTextSerializer: spiedSerializer1, - }) + const wrapper = mount(PrismicRichText, { + props: { + field: richTextFixture.en, + }, + global: { plugins: [prismic] }, + }) - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.en, - serializer: spiedSerializer2, - }, - global: { plugins: [prismic] }, + expect(spiedSerializer.paragraph).toHaveBeenCalled() + expect(wrapper.html()).toMatch(`

${ctx.task.name}

`) }) - expect(spiedSerializer1.paragraph).not.toHaveBeenCalled() - expect(spiedSerializer2.paragraph).toHaveBeenCalled() - expect(wrapper.html()).toMatch(`

${ctx.task.name}2

`) -}) + it("function from props (priority over plugin)", (ctx) => { + const spiedSerializer1 = vi.fn((type: RichTextNodeTypes) => + type === RichTextNodeType.paragraph ? `

${ctx.task.name}1

` : null, + ) + const spiedSerializer2 = vi.fn((type: RichTextNodeTypes) => + type === RichTextNodeType.paragraph ? `

${ctx.task.name}2

` : null, + ) + + const prismic = createPrismic({ + endpoint: "test", + richTextSerializer: spiedSerializer1, + }) -// TODO: Remove in v5 -it("uses plugin provided deprecated HTML serializer", (ctx) => { - const spiedSerializer = { - paragraph: vi.fn(() => `

${ctx.task.name}

`), - } + const wrapper = mount(PrismicRichText, { + props: { + field: richTextFixture.en, + serializer: spiedSerializer2, + }, + global: { plugins: [prismic] }, + }) - const prismic = createPrismic({ - endpoint: "test", - htmlSerializer: spiedSerializer, + expect(spiedSerializer1).not.toHaveBeenCalled() + expect(spiedSerializer2).toHaveBeenCalled() + expect(wrapper.html()).toMatch(`

${ctx.task.name}2

`) }) - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.en, - }, - global: { plugins: [prismic] }, - }) + it("map from props (priority over plugin)", (ctx) => { + const spiedSerializer1 = { + paragraph: vi.fn(() => `

${ctx.task.name}1

`), + } + const spiedSerializer2 = { + paragraph: vi.fn(() => `

${ctx.task.name}2

`), + } + + const prismic = createPrismic({ + endpoint: "test", + richTextSerializer: spiedSerializer1, + }) - expect(spiedSerializer.paragraph).toHaveBeenCalled() - expect(wrapper.html()).toMatch(`

${ctx.task.name}

`) -}) + const wrapper = mount(PrismicRichText, { + props: { + field: richTextFixture.en, + serializer: spiedSerializer2, + }, + global: { plugins: [prismic] }, + }) -// TODO: Remove in v5 -it("uses provided deprecated HTML serializer over plugin provided", (ctx) => { - const spiedSerializer1 = { - paragraph: vi.fn(() => `

${ctx.task.name}1

`), - } - const spiedSerializer2 = { - paragraph: vi.fn(() => `

${ctx.task.name}2

`), - } - - const prismic = createPrismic({ - endpoint: "test", - richTextSerializer: spiedSerializer1, + expect(spiedSerializer1.paragraph).not.toHaveBeenCalled() + expect(spiedSerializer2.paragraph).toHaveBeenCalled() + expect(wrapper.html()).toMatch(`

${ctx.task.name}2

`) }) - - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.en, - htmlSerializer: spiedSerializer2, - }, - global: { plugins: [prismic] }, - }) - - expect(spiedSerializer1.paragraph).not.toHaveBeenCalled() - expect(spiedSerializer2.paragraph).toHaveBeenCalled() - expect(wrapper.html()).toMatch(`

${ctx.task.name}2

`) }) -it("navigates internal links using Vue Router if available on click", async () => { - const spiedPush = vi.fn() +// TODO: Remove in v6 +describe("navigates internal links using Vue Router if available", () => { + it("on click", async () => { + const spiedPush = vi.fn() - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.link, - serializer: { - hyperlink: () => `link`, + const wrapper = mount(PrismicRichText, { + props: { + field: richTextFixture.link, + serializer: { + hyperlink: () => `link`, + }, }, - }, - global: { - provide: { - [routerKey as unknown as string]: { - push: spiedPush, + global: { + provide: { + [routerKey as unknown as string]: { + push: spiedPush, + }, }, }, - }, - }) + }) - // Click doesn't propagate if we don't wait here - await flushPromises() + // Click doesn't propagate if we don't wait here + await flushPromises() - await wrapper.get("a").trigger("click") + await wrapper.get("a").trigger("click") - expect(spiedPush).toHaveBeenCalledOnce() - expect(spiedPush).toHaveBeenCalledWith(`/foo`) + expect(spiedPush).toHaveBeenCalledOnce() + expect(spiedPush).toHaveBeenCalledWith(`/foo`) - // This is used to make sure `removeListeners()` is called upon unmount - wrapper.unmount() -}) + // This is used to make sure `removeListeners()` is called upon unmount + wrapper.unmount() + }) -it("navigates internal links using Vue Router if available on click when using custom wrapper", async () => { - const spiedPush = vi.fn() + it("on click when using custom wrapper", async () => { + const spiedPush = vi.fn() - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.link, - wrapper: markRaw(WrapperComponent), - serializer: { - hyperlink: () => `link`, + const wrapper = mount(PrismicRichText, { + props: { + field: richTextFixture.link, + wrapper: markRaw(WrapperComponent), + serializer: { + hyperlink: () => `link`, + }, }, - }, - global: { - provide: { - [routerKey as unknown as string]: { - push: spiedPush, + global: { + provide: { + [routerKey as unknown as string]: { + push: spiedPush, + }, }, }, - }, - }) + }) - // Click doesn't propagate if we don't wait here - await flushPromises() + // Click doesn't propagate if we don't wait here + await flushPromises() - await wrapper.get("a").trigger("click") + await wrapper.get("a").trigger("click") - expect(spiedPush).toHaveBeenCalledOnce() - expect(spiedPush).toHaveBeenCalledWith(`/foo`) -}) + expect(spiedPush).toHaveBeenCalledOnce() + expect(spiedPush).toHaveBeenCalledWith(`/foo`) + }) -it("navigates internal links using Vue Router if available on inner tag click", async () => { - const spiedPush = vi.fn() + it("on inner tag click", async () => { + const spiedPush = vi.fn() - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.link, - serializer: { - hyperlink: () => `link`, + const wrapper = mount(PrismicRichText, { + props: { + field: richTextFixture.link, + serializer: { + hyperlink: () => `link`, + }, }, - }, - global: { - provide: { - [routerKey as unknown as string]: { - push: spiedPush, + global: { + provide: { + [routerKey as unknown as string]: { + push: spiedPush, + }, }, }, - }, - }) + }) - // Click doesn't propagate if we don't wait here - await flushPromises() + // Click doesn't propagate if we don't wait here + await flushPromises() - await wrapper.get("a em").trigger("click") + await wrapper.get("a em").trigger("click") - expect(spiedPush).toHaveBeenCalledOnce() - expect(spiedPush).toHaveBeenCalledWith(`/foo`) -}) + expect(spiedPush).toHaveBeenCalledOnce() + expect(spiedPush).toHaveBeenCalledWith(`/foo`) + }) -it("navigates internal links using Vue Router if available on deep inner tag click", async () => { - const spiedPush = vi.fn() + it("on deep inner tag click", async () => { + const spiedPush = vi.fn() - const wrapper = mount(PrismicRichTextImpl, { - props: { - field: richTextFixture.link, - serializer: { - hyperlink: () => - `link`, + const wrapper = mount(PrismicRichText, { + props: { + field: richTextFixture.link, + serializer: { + hyperlink: () => + `link`, + }, }, - }, - global: { - provide: { - [routerKey as unknown as string]: { - push: spiedPush, + global: { + provide: { + [routerKey as unknown as string]: { + push: spiedPush, + }, }, }, - }, - }) + }) - // Click doesn't propagate if we don't wait here - await flushPromises() + // Click doesn't propagate if we don't wait here + await flushPromises() - await wrapper.get("a em").trigger("click") + await wrapper.get("a em").trigger("click") - expect(spiedPush).toHaveBeenCalledOnce() - expect(spiedPush).toHaveBeenCalledWith(`/foo`) + expect(spiedPush).toHaveBeenCalledOnce() + expect(spiedPush).toHaveBeenCalledWith(`/foo`) + }) }) it("doesn't navigate external links using Vue Router if available on click (navigation error is expected)", async () => { const spiedPush = vi.fn() - const wrapper = mount(PrismicRichTextImpl, { + const wrapper = mount(PrismicRichText, { props: { field: richTextFixture.link, serializer: { @@ -394,7 +435,7 @@ it("doesn't try to bind on click events when Vue Router is available when render await expect(async () => { const spiedPush = vi.fn() - mount(PrismicRichTextImpl, { + mount(PrismicRichText, { props: { field: richTextFixture.link, wrapper: markRaw(() => null), @@ -417,7 +458,7 @@ it("doesn't try to bind on click events when Vue Router is available when render }) it("reacts to changes properly", async () => { - const wrapper = mount(PrismicRichTextImpl, { + const wrapper = mount(PrismicRichText, { props: { field: richTextFixture.en }, }) diff --git a/test/components-PrismicText.test.ts b/test/components-PrismicText.test.ts index 0bf4a2b..f488be3 100644 --- a/test/components-PrismicText.test.ts +++ b/test/components-PrismicText.test.ts @@ -27,7 +27,7 @@ describe("renders a rich text field", () => { it("as nothing when passed an empty field", () => { const wrapper = mount(PrismicText, { - props: { field: null }, + props: { field: [] }, }) expect(wrapper.html()).toBe("") diff --git a/test/createPrismic-helpers.test.ts b/test/createPrismic-helpers.test.ts index 1a315c1..6c840f6 100644 --- a/test/createPrismic-helpers.test.ts +++ b/test/createPrismic-helpers.test.ts @@ -68,49 +68,6 @@ it("`asHTML` uses provided default serializer", () => { expect(spiedRichTextSerializer).toHaveBeenCalled() }) -// TODO: Remove in v5, we prefer `richTextSerializer` now -it("`asHTML` uses provided default deprecated serializer", () => { - const spiedRichTextSerializer = vi.fn() - - const prismic = createPrismic({ - endpoint: "test", - htmlSerializer: spiedRichTextSerializer, - }) - - const wrapper = mount(WrapperComponent, { - global: { - plugins: [prismic], - }, - }) - - wrapper.vm.$prismic.asHTML(richTextFixture.en) - - expect(spiedRichTextSerializer).toHaveBeenCalled() -}) - -// TODO: Remove in v5, we prefer `richTextSerializer` now -it("`asHTML` uses provided serializer over default deprecated serializer", () => { - const spiedRichTextSerializer1 = vi.fn() - const spiedRichTextSerializer2 = vi.fn() - - const prismic = createPrismic({ - endpoint: "test", - htmlSerializer: spiedRichTextSerializer1, - }) - - const wrapper = mount(WrapperComponent, { - global: { - plugins: [prismic], - }, - }) - - wrapper.vm.$prismic.asHTML(richTextFixture.en, { - serializer: spiedRichTextSerializer2, - }) - - expect(spiedRichTextSerializer2).toHaveBeenCalled() -}) - it("`asHTML` uses provided serializer over default provided", () => { const spiedRichTextSerializer1 = vi.fn() const spiedRichTextSerializer2 = vi.fn()