fix(template): testing helper POC 2

storyblok · Nov 14, 2023 · 9330de9 · 9330de9
1 parent 7f7df22
commit 9330de9
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 90 deletions.
diff --git a/packages/cli/templates/react/src/components/FieldPluginExample/index.spec.tsx b/packages/cli/templates/react/src/components/FieldPluginExample/index.spec.tsx
@@ -5,14 +5,15 @@ import {
   isModalChangeMessage,
   isPluginLoadedMessage,
   isValueChangeMessage,
+  type CreateFieldPlugin,
 } from '@storyblok/field-plugin'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, test, expect, vi } from 'vitest'
 
 import FieldPlugin from '.'
 
-const fakeContainer = (sendToFieldPlugin) => {
+function fakeContainer() {
   const schema = {
     field_type: 'test-field-plugin',
     options: [],
@@ -27,6 +28,8 @@ const fakeContainer = (sendToFieldPlugin) => {
   let spaceId = 'test-space-id'
   let token = 'test-token'
 
+  let onMessage
+
   const stateMessage = ({ action, callbackId }) => ({
     callbackId: callbackId,
     schema,
@@ -44,8 +47,13 @@ const fakeContainer = (sendToFieldPlugin) => {
     action,
   })
 
+  const sendToFieldPlugin = (message) => {
+    onMessage!(message)
+  }
+
   return {
-    receive: ({ data, origin }) => {
+    setOnMessage: (_onMessage) => (onMessage = _onMessage),
+    receive: (data) => {
       if (isPluginLoadedMessage(data)) {
         sendToFieldPlugin(
           stateMessage({
@@ -105,12 +113,35 @@ const fakeContainer = (sendToFieldPlugin) => {
   }
 }
 
-const setup = () => {
-  let handleEvent
-  const listener = (data) => {
-    handleEvent({ data })
+vi.mock('@storyblok/field-plugin', async () => {
+  const mod = await vi.importActual<typeof import('@storyblok/field-plugin')>(
+    '@storyblok/field-plugin',
+  )
+  const container = fakeContainer()
+  const mockedCreateFieldPlugin: CreateFieldPlugin = ({
+    onUpdateState,
+    validateContent,
+  }) =>
+    mod.internalCreateFieldPlugin({
+      onUpdateState,
+      validateContent,
+      postToContainer: (message) => {
+        return container.receive(message)
+      },
+      listenToContainer: (handleMessage) => {
+        container.setOnMessage((message) => {
+          return handleMessage(message)
+        })
+        return () => {}
+      },
+    })
+  return {
+    ...mod,
+    createFieldPlugin: mockedCreateFieldPlugin,
   }
-  const container = fakeContainer(listener)
+})
+
+const setup = () => {
   global.ResizeObserver = class ResizeObserver {
     observe() {
       // do nothing
@@ -124,24 +155,12 @@ const setup = () => {
   }
   vi.stubGlobal('parent', {
     ...global.parent,
-    postMessage: vi.mocked((data: unknown, origin: string) => {
-      container.receive({ data, origin })
-    }),
   })
   vi.stubGlobal('location', {
     ...window.location,
     search:
       '?protocol=https%3A&host=plugin-sandbox.storyblok.com&uid=test-uid&preview=1',
   })
-  const addEventListenerFallback = global.addEventListener
-
-  vi.stubGlobal('addEventListener', (name: string, callback: EventListener) => {
-    if (name === 'message') {
-      handleEvent = callback
-    } else {
-      addEventListenerFallback.call(global, name, callback)
-    }
-  })
 }
 
 describe('FieldPluginExammple', () => {

diff --git a/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts b/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts
@@ -3,9 +3,9 @@ import { createHeightChangeListener } from './createHeightChangeListener'
 import { disableDefaultStoryblokStyles } from './disableDefaultStoryblokStyles'
 import { pluginUrlParamsFromUrl } from '../messaging'
 import { FieldPluginResponse } from './FieldPluginResponse'
-import { createPluginMessageListener } from './createPluginActions/createPluginMessageListener'
 import { sandboxUrl } from './sandboxUrl'
 import { isCloneable } from '../utils/isCloneable'
+import { handlePluginMessage } from './createPluginActions/createPluginMessageListener/handlePluginMessage'
 
 export type CreateFieldPluginOptions<Content> = {
   onUpdateState: (state: FieldPluginResponse<Content>) => void
@@ -16,12 +16,67 @@ export type CreateFieldPlugin = <Content = unknown>(
   options: CreateFieldPluginOptions<Content>,
 ) => () => void
 
+export const createFieldPlugin: CreateFieldPlugin = ({
+  onUpdateState,
+  validateContent,
+}) =>
+  internalCreateFieldPlugin({
+    onUpdateState,
+    validateContent,
+    listenToContainer: (handleMessage) => {
+      const handleEvent = (event: MessageEvent<unknown>) => {
+        handleMessage(event.data)
+      }
+      window.addEventListener('message', handleEvent, false)
+
+      return () => {
+        window.removeEventListener('message', handleEvent, false)
+      }
+    },
+    postToContainer: (message: unknown) => {
+      try {
+        // TODO specify https://app.storyblok.com/ in production mode, * in dev mode
+        const origin = '*'
+        window.parent.postMessage(message, origin)
+      } catch (err) {
+        if (isCloneable(message)) {
+          // eslint-disable-next-line functional/no-throw-statement
+          throw err
+        }
+
+        // eslint-disable-next-line functional/no-throw-statement
+        throw new Error(
+          'The argument could not be cloned. ' +
+            'The argument must be cloneable with structuredClone(), so that it can be sent to other windows with window.postMessage(). ' +
+            'Does your object contain functions, getters, setters, proxies, or any other value that is not cloneable? Did you try to pass a reactive object? ' +
+            'For a full description on the structuredClone algorithm, see: ' +
+            'https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm',
+          {
+            cause: err,
+          },
+        )
+      }
+    },
+  })
+
+type InternalCreateFieldPlugin = <Content = unknown>(
+  options: InternalCreateFieldPluginOptions<Content>,
+) => () => void
+
+type InternalCreateFieldPluginOptions<Content> =
+  CreateFieldPluginOptions<Content> & {
+    listenToContainer: (handleMessage: (data: unknown) => void) => () => void
+    postToContainer: (message: unknown) => void
+  }
+
 /**
  * @returns cleanup function for side effects
  */
-export const createFieldPlugin: CreateFieldPlugin = ({
+export const internalCreateFieldPlugin: InternalCreateFieldPlugin = ({
   onUpdateState,
   validateContent,
+  listenToContainer,
+  postToContainer,
 }) => {
   const isEmbedded = window.parent !== window
 
@@ -49,31 +104,6 @@ export const createFieldPlugin: CreateFieldPlugin = ({
 
   const { uid } = params
 
-  const postToContainer = (message: unknown) => {
-    try {
-      // TODO specify https://app.storyblok.com/ in production mode, * in dev mode
-      const origin = '*'
-      window.parent.postMessage(message, origin)
-    } catch (err) {
-      if (isCloneable(message)) {
-        // eslint-disable-next-line functional/no-throw-statement
-        throw err
-      }
-
-      // eslint-disable-next-line functional/no-throw-statement
-      throw new Error(
-        'The argument could not be cloned. ' +
-          'The argument must be cloneable with structuredClone(), so that it can be sent to other windows with window.postMessage(). ' +
-          'Does your object contain functions, getters, setters, proxies, or any other value that is not cloneable? Did you try to pass a reactive object? ' +
-          'For a full description on the structuredClone algorithm, see: ' +
-          'https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm',
-        {
-          cause: err,
-        },
-      )
-    }
-  }
-
   const cleanupStyleSideEffects = disableDefaultStoryblokStyles()
 
   // This is basically the `Content` inferred from the `validateContent`.
@@ -99,10 +129,9 @@ export const createFieldPlugin: CreateFieldPlugin = ({
 
   const cleanupHeightChangeListener = createHeightChangeListener(onHeightChange)
 
-  const cleanupMessageListenerSideEffects = createPluginMessageListener(
-    params.uid,
-    messageCallbacks,
-  )
+  const cleanupMessageListenerSideEffects = listenToContainer((data) => {
+    handlePluginMessage(data, params.uid, messageCallbacks)
+  })
 
   void initialize()
 

diff --git a/...ieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts b/...ieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts
diff --git a/.../createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.ts b/.../createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.ts
@@ -1,12 +1,24 @@
 import {
+  OnAssetSelectMessage,
+  OnContextRequestMessage,
+  OnLoadedMessage,
+  OnStateChangeMessage,
+  OnUnknownPluginMessage,
   isAssetSelectedMessage,
   isMessageToPlugin,
   isLoadedMessage,
 } from '../../../messaging'
 import { isContextRequestMessage } from '../../../messaging'
-import { PluginMessageCallbacks } from './createPluginMessageListener'
 import { isStateMessage } from '../../../messaging/pluginMessage/containerToPluginMessage/StateChangedMessage'
 
+export type PluginMessageCallbacks = {
+  onStateChange: OnStateChangeMessage
+  onLoaded: OnLoadedMessage
+  onContextRequest: OnContextRequestMessage
+  onAssetSelect: OnAssetSelectMessage
+  onUnknownMessage: OnUnknownPluginMessage
+}
+
 export const handlePluginMessage = (
   data: unknown,
   uid: string,