@dfosco/storyboard-react 4.0.0-beta.3 → 4.0.0-beta.31

package/src/canvas/widgets/snapshotDisplay.test.jsx

@@ -0,0 +1,259 @@
+/**
+ * Tests for iframe snapshot display — single snapshot prop.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, fireEvent, waitFor, act } from '@testing-library/react'
+import PrototypeEmbed from './PrototypeEmbed.jsx'
+import StoryWidget from './StoryWidget.jsx'
+
+vi.mock('@dfosco/storyboard-core', () => ({
+  buildPrototypeIndex: () => ({
+    folders: [],
+    prototypes: [
+      {
+        name: 'Design Overview',
+        dirName: 'examples',
+        isExternal: false,
+        hideFlows: true,
+        flows: [{ route: '/test', name: 'default', meta: { title: 'Design Overview' } }],
+      },
+    ],
+    globalFlows: [],
+    sorted: { title: { prototypes: [], folders: [] } },
+  }),
+  getStoryData: (storyId) => ({ _route: `/components/${storyId}` }),
+}))
+
+vi.mock('./WidgetWrapper.jsx', () => ({
+  default: ({ children }) => <div data-testid="widget-wrapper">{children}</div>,
+}))
+
+vi.mock('@dfosco/storyboard-core/inspector/highlighter', () => ({
+  createInspectorHighlighter: async () => ({
+    codeToHtml: () => '<pre><code></code></pre>',
+  }),
+}), { virtual: true })
+
+vi.mock('./ResizeHandle.jsx', () => ({
+  default: () => <div data-testid="resize-handle" />,
+}))
+
+/**
+ * Render inside a wrapper with data-sb-canvas-theme, matching the real
+ * CanvasPage DOM structure that subscribeCanvasTheme reads from.
+ */
+function renderInCanvas(ui, theme = 'light') {
+  const wrapper = document.createElement('div')
+  wrapper.setAttribute('data-sb-canvas-theme', theme)
+  document.body.appendChild(wrapper)
+  const result = render(ui, { container: wrapper })
+  return { ...result, wrapper }
+}
+
+afterEach(() => {
+  document.querySelectorAll('[data-sb-canvas-theme]').forEach(el => el.remove())
+})
+
+describe('Snapshot display', () => {
+  describe('PrototypeEmbed', () => {
+    it('shows snapshot image when valid snapshot prop exists', () => {
+      const { wrapper } = renderInCanvas(
+        <PrototypeEmbed
+          id="proto-abc123"
+          props={{
+            src: '/test',
+            width: 400,
+            height: 300,
+            zoom: 100,
+            snapshot: '/_storyboard/canvas/images/snapshot-proto-abc123.webp?v=123',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = wrapper.querySelector('img')
+      expect(img).toBeInTheDocument()
+      expect(img.src).toContain('snapshot-proto-abc123.webp')
+      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
+    })
+
+    it('falls back to snapshotLight for backward compat', () => {
+      const { wrapper } = renderInCanvas(
+        <PrototypeEmbed
+          id="proto-abc123"
+          props={{
+            src: '/test',
+            width: 400,
+            height: 300,
+            zoom: 100,
+            snapshotLight: '/_storyboard/canvas/images/snapshot-proto-abc123--light.webp?v=1',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = wrapper.querySelector('img')
+      expect(img).toBeInTheDocument()
+      expect(img.src).toContain('snapshot-proto-abc123--light.webp')
+    })
+
+    it('shows placeholder when no snapshot exists', () => {
+      const { wrapper } = renderInCanvas(
+        <PrototypeEmbed
+          id="proto-xyz"
+          props={{ src: '/test', width: 400, height: 300, zoom: 100 }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
+    })
+
+    it('falls back to placeholder when snapshot image fails to load', () => {
+      const { wrapper } = renderInCanvas(
+        <PrototypeEmbed
+          id="proto-abc123"
+          props={{
+            src: '/test',
+            width: 400,
+            height: 300,
+            zoom: 100,
+            snapshot: '/_storyboard/canvas/images/snapshot-proto-abc123.webp?v=123',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = wrapper.querySelector('img')
+      expect(img).toBeInTheDocument()
+      fireEvent.error(img)
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+    })
+
+    it('ignores snapshot that does not match widget ID', () => {
+      const { wrapper } = renderInCanvas(
+        <PrototypeEmbed
+          id="proto-abc123"
+          props={{
+            src: '/test',
+            width: 400,
+            height: 300,
+            zoom: 100,
+            snapshot: '/_storyboard/canvas/images/snapshot-other-widget.webp?v=123',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+    })
+
+    it('does not show snapshot for external URLs', () => {
+      const { wrapper } = renderInCanvas(
+        <PrototypeEmbed
+          id="proto-ext"
+          props={{
+            src: 'https://example.com',
+            width: 400,
+            height: 300,
+            zoom: 100,
+            snapshot: '/_storyboard/canvas/images/snapshot-proto-ext.webp?v=123',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('StoryWidget', () => {
+    it('shows snapshot image when valid snapshot prop exists', () => {
+      const { wrapper } = renderInCanvas(
+        <StoryWidget
+          id="story-abc123"
+          props={{
+            storyId: 'button-patterns',
+            exportName: 'Primary',
+            width: 400,
+            height: 300,
+            snapshot: '/_storyboard/canvas/images/snapshot-story-abc123.webp?v=456',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = wrapper.querySelector('img')
+      expect(img).toBeInTheDocument()
+      expect(img.src).toContain('snapshot-story-abc123.webp')
+      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
+    })
+
+    it('falls back to snapshotDark for backward compat', () => {
+      const { wrapper } = renderInCanvas(
+        <StoryWidget
+          id="story-abc123"
+          props={{
+            storyId: 'button-patterns',
+            snapshotDark: '/_storyboard/canvas/images/snapshot-story-abc123--dark.webp?v=1',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = wrapper.querySelector('img')
+      expect(img).toBeInTheDocument()
+      expect(img.src).toContain('snapshot-story-abc123--dark.webp')
+    })
+
+    it('shows placeholder when no snapshot exists', () => {
+      const { wrapper } = renderInCanvas(
+        <StoryWidget
+          id="story-xyz"
+          props={{
+            storyId: 'button-patterns',
+            exportName: 'Primary',
+            width: 400,
+            height: 300,
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+      expect(wrapper.querySelector('iframe')).not.toBeInTheDocument()
+    })
+
+    it('falls back to placeholder when snapshot image fails to load', () => {
+      const { wrapper } = renderInCanvas(
+        <StoryWidget
+          id="story-abc123"
+          props={{
+            storyId: 'button-patterns',
+            exportName: 'Primary',
+            width: 400,
+            height: 300,
+            snapshot: '/_storyboard/canvas/images/snapshot-story-abc123.webp?v=456',
+          }}
+          onUpdate={vi.fn()}
+          resizable={false}
+        />
+      )
+
+      const img = wrapper.querySelector('img')
+      expect(img).toBeInTheDocument()
+      fireEvent.error(img)
+      expect(wrapper.querySelector('img')).not.toBeInTheDocument()
+    })
+  })
+})

package/src/canvas/widgets/useSnapshotCapture.js

@@ -0,0 +1,157 @@
+/**
+ * useSnapshotCapture — parent-side capture orchestration hook.
+ *
+ * Listens for snapshot-ready signals from an embedded iframe and
+ * provides a requestCapture() function that triggers a single capture
+ * of whatever the iframe is currently showing.
+ *
+ * Saves a single `snapshot` prop — overwritten every time.
+ * Only active in dev mode (when onUpdate is provided).
+ */
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { uploadImage } from '../canvasApi.js'
+
+const CAPTURE_TIMEOUT = 3000
+
+/**
+ * Run a single capture request against the iframe.
+ * Returns the dataUrl or null on failure.
+ */
+function captureOnce(iframeContentWindow, requestId, listeners) {
+  return new Promise((resolve) => {
+    const timer = setTimeout(() => {
+      cleanup()
+      resolve(null)
+    }, CAPTURE_TIMEOUT)
+
+    function cleanup() {
+      clearTimeout(timer)
+      const idx = listeners.indexOf(handler)
+      if (idx !== -1) listeners.splice(idx, 1)
+    }
+
+    function handler(data) {
+      if (data.requestId !== requestId) return
+      cleanup()
+      if (data.error || !data.dataUrl) {
+        if (data.error) console.warn('[snapshot] Capture failed:', data.error)
+        resolve(null)
+      } else {
+        resolve(data.dataUrl)
+      }
+    }
+
+    listeners.push(handler)
+    iframeContentWindow.postMessage({
+      type: 'storyboard:embed:capture',
+      requestId,
+    }, '*')
+  })
+}
+
+export function useSnapshotCapture({
+  iframeRef,
+  widgetId,
+  onUpdate,
+  showIframe,
+}) {
+  const [iframeReady, setIframeReady] = useState(false)
+  const iframeReadyRef = useRef(false)
+  const capturingRef = useRef(false)
+  const requestIdCounter = useRef(0)
+  const captureGeneration = useRef(0)
+  const responseHandlers = useRef([])
+  // Track the iframe contentWindow to reset readiness on remount
+  const lastContentWindowRef = useRef(null)
+
+  // Reset ready state when iframe is unmounted/remounted
+  useEffect(() => {
+    setIframeReady(false)
+    iframeReadyRef.current = false
+  }, [widgetId])
+
+  // Reset readiness when iframe is torn down so remount waits for new snapshot-ready
+  useEffect(() => {
+    if (!showIframe) {
+      setIframeReady(false)
+      iframeReadyRef.current = false
+      lastContentWindowRef.current = null
+    }
+  }, [showIframe])
+
+  // Listen for postMessage events from the embedded iframe
+  useEffect(() => {
+    if (!onUpdate) return
+
+    function handler(e) {
+      if (!iframeRef.current) return
+      if (e.source !== iframeRef.current.contentWindow) return
+
+      // Detect new iframe instance → reset readiness
+      if (e.source !== lastContentWindowRef.current) {
+        lastContentWindowRef.current = e.source
+        setIframeReady(false)
+        iframeReadyRef.current = false
+      }
+
+      if (e.data?.type === 'storyboard:embed:snapshot-ready') {
+        setIframeReady(true)
+        iframeReadyRef.current = true
+      }
+
+      if (e.data?.type === 'storyboard:embed:snapshot') {
+        for (const fn of responseHandlers.current) {
+          fn(e.data)
+        }
+      }
+    }
+
+    window.addEventListener('message', handler)
+    return () => window.removeEventListener('message', handler)
+  }, [iframeRef, onUpdate])
+
+  /**
+   * Capture a single snapshot of the current iframe state.
+   * Uploads and saves as `snapshot` prop, overwriting any previous value.
+   */
+  const requestCapture = useCallback(async ({ force = false } = {}) => {
+    if (!onUpdate) return {}
+    if (!iframeRef.current?.contentWindow) return {}
+    if (capturingRef.current) return {}
+    if (!force && !iframeReadyRef.current) return {}
+
+    capturingRef.current = true
+    const gen = ++captureGeneration.current
+    const cw = iframeRef.current.contentWindow
+    const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+
+    try {
+      const reqId = ++requestIdCounter.current
+      const dataUrl = await captureOnce(cw, reqId, responseHandlers.current)
+
+      if (gen !== captureGeneration.current) return {}
+      if (!dataUrl) return {}
+
+      const filename = `snapshot-${widgetId}.webp`
+      const result = await uploadImage(dataUrl, `snapshot-${widgetId}`, filename)
+
+      if (gen !== captureGeneration.current) return {}
+
+      if (result?.filename) {
+        const cacheBust = `?v=${Date.now()}`
+        const url = `${base}/_storyboard/canvas/images/${result.filename}${cacheBust}`
+        const updates = { snapshot: url }
+        onUpdate?.(updates)
+        return updates
+      }
+      return {}
+    } catch (err) {
+      console.warn('[snapshot] Capture failed:', err)
+      return {}
+    } finally {
+      capturingRef.current = false
+    }
+  }, [onUpdate, iframeRef, widgetId])
+
+  return { iframeReady, requestCapture }
+}

package/src/canvas/widgets/useSnapshotCapture.test.jsx

@@ -0,0 +1,164 @@
+/**
+ * Tests for useSnapshotCapture hook — single-capture orchestration.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useSnapshotCapture } from './useSnapshotCapture.js'
+
+vi.mock('../canvasApi.js', () => ({
+  uploadImage: vi.fn().mockResolvedValue({ filename: 'snapshot-test-widget.webp' }),
+}))
+
+import { uploadImage } from '../canvasApi.js'
+
+function createMockIframeRef(contentWindow = null) {
+  return { current: contentWindow ? { contentWindow } : null }
+}
+
+function createMockContentWindow() {
+  return { postMessage: vi.fn() }
+}
+
+describe('useSnapshotCapture', () => {
+  let listeners = []
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    listeners = []
+    const origAdd = window.addEventListener
+    const origRemove = window.removeEventListener
+    vi.spyOn(window, 'addEventListener').mockImplementation((type, fn, opts) => {
+      if (type === 'message') listeners.push(fn)
+      origAdd.call(window, type, fn, opts)
+    })
+    vi.spyOn(window, 'removeEventListener').mockImplementation((type, fn, opts) => {
+      if (type === 'message') listeners = listeners.filter(l => l !== fn)
+      origRemove.call(window, type, fn, opts)
+    })
+  })
+
+  afterEach(() => { vi.restoreAllMocks() })
+
+  function dispatchMessage(source, data) {
+    const event = new MessageEvent('message', { source, data })
+    listeners.forEach(fn => fn(event))
+  }
+
+  it('returns iframeReady=false initially', () => {
+    const iframeRef = createMockIframeRef()
+    const { result } = renderHook(() =>
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn() })
+    )
+    expect(result.current.iframeReady).toBe(false)
+  })
+
+  it('sets iframeReady=true on snapshot-ready message', () => {
+    const cw = createMockContentWindow()
+    const iframeRef = createMockIframeRef(cw)
+    const { result } = renderHook(() =>
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn() })
+    )
+    act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
+    expect(result.current.iframeReady).toBe(true)
+  })
+
+  it('no-ops when onUpdate is null', async () => {
+    const cw = createMockContentWindow()
+    const iframeRef = createMockIframeRef(cw)
+    const { result } = renderHook(() =>
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: null })
+    )
+    await act(async () => { await result.current.requestCapture() })
+    expect(cw.postMessage).not.toHaveBeenCalled()
+  })
+
+  it('no-ops when iframe not ready', async () => {
+    const cw = createMockContentWindow()
+    const iframeRef = createMockIframeRef(cw)
+    const { result } = renderHook(() =>
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate: vi.fn() })
+    )
+    await act(async () => { await result.current.requestCapture() })
+    expect(cw.postMessage).not.toHaveBeenCalled()
+  })
+
+  it('sends single capture and calls onUpdate with snapshot', async () => {
+    const cw = createMockContentWindow()
+    const iframeRef = createMockIframeRef(cw)
+    const onUpdate = vi.fn()
+    const { result } = renderHook(() =>
+      useSnapshotCapture({ iframeRef, widgetId: 'test-widget', onUpdate })
+    )
+
+    act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
+
+    uploadImage.mockResolvedValueOnce({ filename: 'snapshot-test-widget.webp' })
+
+    await act(async () => {
+      const promise = result.current.requestCapture()
+
+      await new Promise(r => setTimeout(r, 10))
+      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,IMG' })
+
+      await promise
+    })
+
+    // Single capture, single postMessage
+    expect(cw.postMessage).toHaveBeenCalledTimes(1)
+    expect(uploadImage).toHaveBeenCalledTimes(1)
+    expect(onUpdate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        snapshot: expect.stringContaining('snapshot-test-widget.webp'),
+      })
+    )
+  })
+
+  it('guards against concurrent captures', async () => {
+    const cw = createMockContentWindow()
+    const iframeRef = createMockIframeRef(cw)
+    const onUpdate = vi.fn()
+    const { result } = renderHook(() =>
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate })
+    )
+
+    act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
+    uploadImage.mockResolvedValue({ filename: 'snapshot-w1.webp' })
+
+    await act(async () => {
+      const p1 = result.current.requestCapture()
+      // Second call while first is in-flight should no-op
+      const p2 = result.current.requestCapture()
+
+      await new Promise(r => setTimeout(r, 10))
+      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,IMG' })
+
+      await p1
+      await p2
+    })
+
+    expect(cw.postMessage).toHaveBeenCalledTimes(1)
+  })
+
+  it('handles capture failure gracefully', async () => {
+    const cw = createMockContentWindow()
+    const iframeRef = createMockIframeRef(cw)
+    const onUpdate = vi.fn()
+    const { result } = renderHook(() =>
+      useSnapshotCapture({ iframeRef, widgetId: 'w1', onUpdate })
+    )
+
+    act(() => { dispatchMessage(cw, { type: 'storyboard:embed:snapshot-ready' }) })
+    uploadImage.mockRejectedValueOnce(new Error('upload failed'))
+
+    await act(async () => {
+      const promise = result.current.requestCapture()
+
+      await new Promise(r => setTimeout(r, 10))
+      dispatchMessage(cw, { type: 'storyboard:embed:snapshot', requestId: 1, dataUrl: 'data:image/webp;base64,FAIL' })
+
+      await promise
+    })
+
+    expect(onUpdate).not.toHaveBeenCalled()
+  })
+})

package/src/canvas/widgets/widgetConfig.js

@@ -34,7 +34,16 @@ function resolveFeature(feature) {
     if (key === 'items' && Array.isArray(val)) {
       resolved[key] = val.map((item) => {
         const r = {}
-        for (const [k, v] of Object.entries(item)) r[k] = resolveVar(v)
+        for (const [k, v] of Object.entries(item)) {
+          // Resolve nested alt object inside items
+          if (k === 'alt' && v && typeof v === 'object') {
+            const altResolved = {}
+            for (const [ak, av] of Object.entries(v)) altResolved[ak] = resolveVar(av)
+            r[k] = altResolved
+          } else {
+            r[k] = resolveVar(v)
+          }
+        }
         return r
       })
     } else if (key === 'alt' && val && typeof val === 'object') {
@@ -103,14 +112,16 @@ export const widgetTypes = buildWidgetTypes()
 
 /**
  * Get the feature list for a widget type.
- * In production, only features with `prod: true` are returned.
+ * In production (or when isLocalDev is false, e.g. ?prodMode simulation),
+ * only features with `prod: true` are returned.
  * In dev, all features are returned.
  * @param {string} type — widget type string
+ * @param {{ isLocalDev?: boolean }} [options]
  * @returns {Array} features array from config (variables resolved), or empty array
  */
-export function getFeatures(type) {
+export function getFeatures(type, { isLocalDev = true } = {}) {
   const features = widgetTypes[type]?.features ?? []
-  if (import.meta.env?.PROD) {
+  if (import.meta.env?.PROD || !isLocalDev) {
     return features.filter(f => f.prod)
   }
   return features
@@ -146,6 +157,6 @@ export function getWidgetMeta(type) {
  */
 export function getMenuWidgetTypes() {
   return Object.entries(widgetTypes)
-    .filter(([type]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed')
+    .filter(([type]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed' && type !== 'codepen-embed' && type !== 'story')
     .map(([type, def]) => ({ type, label: def.label, icon: def.icon }))
 }

package/src/canvas/widgets/widgetConfig.test.js

@@ -2,21 +2,24 @@ import { describe, expect, it } from 'vitest'
 import { isResizable, getFeatures, getWidgetMeta } from './widgetConfig.js'
 
 describe('isResizable', () => {
-  // Vitest runs with import.meta.env.PROD = true, so prod: false widgets
-  // correctly return false. This tests the production behavior.
-  it('returns false for resize-enabled widgets when prod is false (production env)', () => {
-    expect(isResizable('sticky-note')).toBe(false)
-    expect(isResizable('prototype')).toBe(false)
-    expect(isResizable('figma-embed')).toBe(false)
-    expect(isResizable('image')).toBe(false)
-    expect(isResizable('component')).toBe(false)
-  })
-
-  it('returns false for widget types with resize disabled', () => {
-    expect(isResizable('markdown')).toBe(false)
+  // Vitest runs in dev mode by default (import.meta.env.PROD = false)
+  // In dev mode, all resize-enabled widgets are resizable
+  it('returns true for resize-enabled widgets in dev mode', () => {
+    expect(isResizable('sticky-note')).toBe(true)
+    expect(isResizable('prototype')).toBe(true)
+    expect(isResizable('figma-embed')).toBe(true)
+    expect(isResizable('image')).toBe(true)
+    expect(isResizable('component')).toBe(true)
+  })
+
+  it('returns false for link-preview (resize disabled)', () => {
     expect(isResizable('link-preview')).toBe(false)
   })
 
+  it('returns true for markdown (resize enabled, dev only)', () => {
+    expect(isResizable('markdown')).toBe(true)
+  })
+
   it('returns false for unknown widget types', () => {
     expect(isResizable('nonexistent')).toBe(false)
   })
@@ -32,6 +35,25 @@ describe('getFeatures', () => {
   it('returns empty array for unknown widget types', () => {
     expect(getFeatures('nonexistent')).toEqual([])
   })
+
+  it('returns only prod features when isLocalDev is false', () => {
+    const features = getFeatures('figma-embed', { isLocalDev: false })
+    expect(features.length).toBeGreaterThan(0)
+    expect(features.every(f => f.prod === true)).toBe(true)
+  })
+
+  it('returns all features when isLocalDev is true (default)', () => {
+    const allFeatures = getFeatures('figma-embed')
+    const prodFeatures = getFeatures('figma-embed', { isLocalDev: false })
+    expect(allFeatures.length).toBeGreaterThan(prodFeatures.length)
+  })
+
+  it('includes menu-only prod features when isLocalDev is false', () => {
+    const features = getFeatures('figma-embed', { isLocalDev: false })
+    const menuFeature = features.find(f => f.menu)
+    expect(menuFeature).toBeDefined()
+    expect(menuFeature.prod).toBe(true)
+  })
 })
 
 describe('getWidgetMeta', () => {