Skip to content

Commit

Permalink
fix: forwards attributes to <PrismicText />
Browse files Browse the repository at this point in the history
  • Loading branch information
lihbr committed Dec 5, 2024
1 parent 89df916 commit b179f9d
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/components/PrismicText.vue
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {

<template>
<template v-if="isFilled.richText(field) || fallback">
<Component v-if="wrapper" :is="wrapper">
<Component v-if="wrapper" :is="wrapper" v-bind="$attrs">
{{ asText(field) || fallback }}
</Component>
<template v-else>
Expand Down
26 changes: 23 additions & 3 deletions test/components-PrismicText.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ it("renders plain text representation", () => {
expect(wrapper.html()).toBe("Heading 1")
})

it("returns null when passed empty field", () => {
it("renders nothing when passed an empty field", () => {
const wrapper = mount(PrismicText, {
props: { field: null },
})

expect(wrapper.html()).toBe("<!--v-if-->")
})

it("returns fallback when passed empty field", () => {
it("returns fallback when passed an empty field", () => {
const nullField = mount(PrismicText, {
props: { field: null, fallback: "fallback" },
})
Expand All @@ -50,7 +50,7 @@ it("returns fallback when passed empty field", () => {
expect(emptyField.html()).toBe("fallback")
})

it("returns fallback when passed empty field with wrapper", () => {
it("returns fallback when passed an empty field with wrapper", () => {
const nullField = mount(PrismicText, {
props: { field: null, fallback: "fallback", wrapper: "p" },
})
Expand Down Expand Up @@ -102,6 +102,26 @@ it("uses provided wrapper component", () => {
expect(wrapper.html()).toBe(`<div class="wrapperComponent">Heading 1</div>`)
})

it("forwards attributes to wrapper", () => {
const wrapper = mount(PrismicText, {
props: {
field: [
{
type: RichTextNodeType.heading1,
text: "Heading 1",
spans: [],
},
],
wrapper: "p",
},
attrs: {
class: "foo",
},
})

expect(wrapper.html()).toBe(`<p class="foo">Heading 1</p>`)
})

it("throws error if passed a string-based field (e.g. Key Text or Select)", () => {
// The error is only thrown in "development".
const originalNodeEnv = process.env.NODE_ENV
Expand Down

0 comments on commit b179f9d

Please sign in to comment.