chore(playground): added playground and tests for component resolver

README.md

@@ -144,11 +144,11 @@ You can render rich-text fields by using the `StoryblokRichtext` component:
 
 #### Overriding the default resolvers
 
-You can override the default resolvers by passing a `resolver` prop to the `StoryblokRichtext` component, for example, to use vue-router links or add a custom codeblok component: :
+You can override the default resolvers by passing a `resolver` prop to the `StoryblokRichText` component, for example, to use vue-router links or add a custom codeblok component: :
 
 ```html
 <script setup>
-  import { StoryblokRichtext, BlockTypes } from "@storyblok/vue";
+  import { StoryblokRichText, BlockTypes } from "@storyblok/vue";
   import { RouterLink } from "vue-router";
   import CodeBlok from "./components/CodeBlok.vue";
 
@@ -175,15 +175,15 @@ You can override the default resolvers by passing a `resolver` prop to the `Stor
 </script>
 
 <template>
-  <StoryblokRichtext :doc="blok.articleContent" :resolvers="resolvers" />
+  <StoryblokRichText :doc="blok.articleContent" :resolvers="resolvers" />
 </template>
 ```
 
-Or you can have more control by using the `useRichText` composable:
+Or you can have more control by using the `useStoryblokRichText` composable:
 
 ```html
 <script setup>
-  import { useRichText } from "@storyblok/vue";
+  import { useStoryblokRichText } from "@storyblok/vue";
   import { RouterLink } from "vue-router";
 
   const resolvers = {
@@ -201,7 +201,7 @@ Or you can have more control by using the `useRichText` composable:
     },
   }
 
-  const { render } = useStoryblokRichtext({
+  const { render } = useStoryblokRichText({
     resolvers,
   })
 

lib/cypress/components/index.cy.js

@@ -5,9 +5,11 @@ import Page from "@storyblok/vue-playground/components/Page.vue";
 import Feature from "@storyblok/vue-playground/components/Feature.vue";
 import MyCustomFallback from "@storyblok/vue-playground/components/MyCustomFallback.vue";
 import { StoryblokVue, apiPlugin } from "@storyblok/vue";
+import IframeEmbed from "../testing-components/IFrameEmbed.vue";
 
 import Essential from "../testing-components/Essential.vue";
 import RealApi from "../testing-components/RealApi.vue";
+import RichText from "../testing-components/RichText.vue";
 
 const prepare = (pluginOpts = {}, comp = Essential, globalOpts = {}) => {
   mount(comp, {
@@ -195,4 +197,85 @@ describe("@storyblok/vue", () => {
       );
     });
   });
+
+  describe("StoryblokRichText", () => {
+    it("Renders the rich text using StoryblokRichText component", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { Teaser, Grid, Page, Feature },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("h1")
+        .should("have.text", "Headline 1");
+    });
+
+    it("Should render headline tags correctly", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { Teaser, Grid, Page, Feature },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("h1")
+        .should("have.text", "Headline 1");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h2")
+        .should("have.text", "Headline 2");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h3")
+        .should("have.text", "Headline 3");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h4")
+        .should("have.text", "Headline 4");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h5")
+        .should("have.text", "Headline 5");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h6")
+        .should("have.text", "Headline 6");
+    });
+
+    it("Should render images correctly", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { Teaser, Grid, Page, Feature },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("img")
+        .should(
+          "have.attr",
+          "src",
+          "https://a.storyblok.com/f/279818/710x528/c53330ed26/tresjs-doge.jpg"
+        );
+    });
+
+    it("Should render links correctly", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { Teaser, Grid, Page, Feature },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("a")
+        .should("have.attr", "href", "https://storyblok.com/");
+    });
+
+    it("should render a custom iframe-embed blok component", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { IframeEmbed },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("iframe")
+        .should("have.attr", "src", "https://storyblok.com/");
+    });
+  });
 });

lib/cypress/testing-components/IFrameEmbed.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <iframe
+    :src="blok.url.url"
+    class="w-full aspect-video"
+    frameborder="0"
+  ></iframe>
+</template>

lib/cypress/testing-components/RichText.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import RichTextChild from "./RichTextChild.vue";
+</script>
+<template>
+  <div data-test="root">
+    <Suspense>
+      <RichTextChild />
+    </Suspense>
+  </div>
+</template>

lib/cypress/testing-components/RichTextChild.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { useStoryblok, StoryblokRichText } from "@storyblok/vue";
+const story = await useStoryblok("vue/test-richtext", { version: "draft" });
+</script>
+
+<template>
+  <h2>RichText</h2>
+  <!-- <pre>{{ story.content.richText }}</pre> -->
+  <StoryblokRichText v-if="story.content" :doc="story.content.richText" />
+</template>

lib/types.ts

@@ -33,7 +33,6 @@ export type {
   ISbAlternateObject,
   ISbStoriesParams,
   ISbStoryParams,
-  IStoryblokRichtext,
   SbBlokData,
   SbBlokKeyDataTypes,
   SbSDKOptions,

playground/App.vue

@@ -1,11 +1,22 @@
-<script setup>
-import Home from "./pages/Home.vue";
+<script setup lang="ts">
+import { watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
+
+console.log(router.getRoutes());
+const route = useRoute();
+function setBodyClass(routeName: string) {
+  document.title = `Core Playground - ${routeName}`;
+  document.body.className = routeName;
+}
+watch([route], () => setBodyClass(route.name?.toString() ?? ""));
 </script>
 
 <template>
   <Suspense>
     <template #default>
-      <Home />
+      <RouterView />
     </template>
 
     <template #fallback>