Try to make tests run

.docker/frontend/modules.ts

@@ -19,9 +19,18 @@ import { Storyblok } from './vsf-storyblok-module'
 
 import { registerModule } from '@vue-storefront/core/lib/modules'
 
+import { extendMappingFallback } from './vsf-mapping-fallback' 
+import { forProduct, forCategory, tap } from './vsf-mapping-fallback/builtin'
+import { forStoryblok } from './vsf-storyblok-module/mappingFallback' 
+
+const extendUrlModule = extendMappingFallback(
+  tap, forProduct, forCategory, forStoryblok
+)
+
 // TODO:distributed across proper pages BEFORE 1.11
 export function registerClientModules () {
   registerModule(UrlModule)
+  registerModule(extendUrlModule)
   registerModule(CatalogModule)
   registerModule(CheckoutModule) // To Checkout
   registerModule(CartModule)

docker-compose.yml

@@ -79,6 +79,7 @@ services:
       - './theme/components/storyblok:/var/www/src/themes/default/components/storyblok'
       - './theme/head.js:/var/www/src/themes/default/head.js'
       - './theme/index.js:/var/www/src/themes/default/index.js'
+      - './.docker/vsf-mapping-fallback:/var/www/src/modules/vsf-mapping-fallback'
       # Module
       - './packages/vsf-storyblok-module:/var/www/src/modules/vsf-storyblok-module:delegated'
     healthcheck:

packages/vsf-storyblok-module/components/Debug.vue → packages/vsf-storyblok-module/components/defaults/Debug.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { Blok } from '.'
+import { Blok } from '..'
 
 export default {
   name: 'DebugBlok',

packages/vsf-storyblok-module/components/Grid.vue → packages/vsf-storyblok-module/components/defaults/Grid.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { Blok } from '.'
+import { Blok } from '..'
 
 export default {
   extends: Blok,

packages/vsf-storyblok-module/components/Page.vue → packages/vsf-storyblok-module/components/defaults/Page.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { Blok } from '.'
+import { Blok } from '..'
 
 export default {
   extends: Blok,

packages/vsf-storyblok-module/components/Tile.vue → packages/vsf-storyblok-module/components/defaults/Tile.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { Blok } from '.'
+import { Blok } from '..'
 
 export default {
   name: 'TileBlok',

packages/vsf-storyblok-module/components/index.ts

@@ -1,8 +1,8 @@
 export const components = {
-  debug: () => import('./Debug.vue'),
-  page: () => import('./Page.vue'),
-  grid: () => import('./Grid.vue'),
-  tile: () => import('./Tile.vue')
+  debug: () => import('./defaults/Debug.vue'),
+  page: () => import('./defaults/Page.vue'),
+  grid: () => import('./defaults/Grid.vue'),
+  tile: () => import('./defaults/Tile.vue'),
 }
 
 export function add (key: string, component: any, options: any = {}) {

packages/vsf-storyblok-module/store/actions.ts

@@ -6,7 +6,7 @@ import { TaskQueue } from '@vue-storefront/core/lib/sync'
 import qs from 'qs'
 
 const fetchStory = async url => {
-  const { result: { story } }: any = await TaskQueue.execute({
+  const { result: story }: any = await TaskQueue.execute({
     url,
     payload: {
       headers: { 'Content-Type': 'application/json' },
@@ -66,7 +66,7 @@ export const actions: ActionTree<StoryblokState, RootState> = {
       return cachedStory
     }
 
-    const url = `${config.storyblok.endpoint}/story/${key}`
+    const url = `${config.storyblok.endpoint}/story/${key}`.replace(/([^:]\/)\/+/g, "$1")
     const story = await fetchStory(url)
 
     commit('setStory', { key, story })

theme/components/storyblok/RichText.vue

@@ -0,0 +1,12 @@
+<template>
+  <sb-rich-text v-if="item.text" :text="item.text" />
+</template>
+
+<script>
+import { Blok } from 'src/modules/vsf-storyblok-module/components'
+
+export default {
+  name: 'RichTextBlok',
+  extends: Blok
+}
+</script>

theme/components/storyblok/index.ts

@@ -3,5 +3,6 @@ import { add } from 'src/modules/vsf-storyblok-module/components'
 add('hero', () => import('./Hero.vue'))
 add('demoImage', () => import('./Image.vue'))
 add('ciLink', () => import('./Link.vue'))
+add('RichText', () => import('./RichText.vue'))
 // Overwrite an existing component
 // add('tile', () => import('./Tile.vue'), { force: true })