@407dev/cms-astro 0.1.0

package/src/preview/bridge-script.test.ts

@@ -0,0 +1,683 @@
+// @vitest-environment jsdom
+import { PREVIEW_BRIDGE_PROTOCOL_VERSION } from '@407dev/api-client';
+import { describe, expect, it, vi } from 'vitest';
+import { BRIDGE_PROTOCOL_VERSION, buildBridgeScript } from './bridge-script';
+
+describe('bridge-script protocol parity', () => {
+  it('matches PREVIEW_BRIDGE_PROTOCOL_VERSION exactly', () => {
+    expect(BRIDGE_PROTOCOL_VERSION).toBe(PREVIEW_BRIDGE_PROTOCOL_VERSION);
+  });
+
+  it('builds a self-contained IIFE with default or custom origins', () => {
+    const scriptDefault = buildBridgeScript();
+    expect(scriptDefault).toContain('https://web.localhost');
+    expect(scriptDefault).toContain('http://localhost:5173');
+    expect(scriptDefault).toContain('window.__CMS_BRIDGE_INITIALIZED__');
+
+    const scriptCustom = buildBridgeScript({
+      editorOrigins: ['https://studio.example.com', 'http://localhost:3000'],
+    });
+    expect(scriptCustom).toContain('https://studio.example.com');
+    expect(scriptCustom).toContain('http://localhost:3000');
+  });
+
+  it('contains handlers for all preview-to-editor message types', () => {
+    const script = buildBridgeScript();
+    // Emitted message types
+    expect(script).toContain("type: 'ready'");
+    expect(script).toContain("type: 'field-click'");
+    expect(script).toContain("type: 'group-click'");
+    expect(script).toContain("type: 'rects-update'");
+    expect(script).toContain("type: 'rendered-fields'");
+
+    // Handled editor message types
+    expect(script).toContain("data.type === 'hello'");
+    expect(script).toContain("data.type === 'highlight-mode'");
+    expect(script).toContain("data.type === 'patch'");
+    expect(script).toContain("data.type === 'scroll-to'");
+    expect(script).toContain("data.type === 'reload'");
+
+    // Verifies entry-scoped selector logic is present
+    expect(script).toContain('data-cms-collection');
+    expect(script).toContain('data-cms-entry');
+  });
+
+  it('writes rich record array to __CMS_FIELDS__, exposes __CMS_RESCAN__, and dispatches cms:fields-updated', () => {
+    document.body.innerHTML = `
+      <div data-cms-group="Hero:home.hero">
+        <h1 data-cms-field="home.hero.heading">Welcome</h1>
+        <p data-cms-field="home.hero.subheading">Subheading text</p>
+      </div>
+      <div data-cms-collection="blog" data-cms-entry="hello-world">
+        <h2 data-cms-entry-field="title">Hello World</h2>
+      </div>
+    `;
+
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+
+    const fieldsUpdatedListener = vi.fn();
+    document.addEventListener('cms:fields-updated', fieldsUpdatedListener);
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    const win = window as unknown as {
+      __CMS_FIELDS__?: Array<{
+        key: string;
+        kind: string;
+        group?: string;
+        entryRef?: { collection: string; slug: string; path: string };
+        instances: number;
+      }>;
+      __CMS_RESCAN__?: () => void;
+    };
+
+    expect(Array.isArray(win.__CMS_FIELDS__)).toBe(true);
+    expect(win.__CMS_FIELDS__?.length).toBe(3);
+
+    const heroHeading = win.__CMS_FIELDS__?.find((f) => f.key === 'home.hero.heading');
+    expect(heroHeading).toBeDefined();
+    expect(heroHeading?.group).toBe('Hero');
+    expect(heroHeading?.kind).toBe('text');
+
+    const blogTitle = win.__CMS_FIELDS__?.find((f) => f.key === 'title');
+    expect(blogTitle).toBeDefined();
+    expect(blogTitle?.entryRef).toEqual({
+      collection: 'blog',
+      slug: 'hello-world',
+      path: 'title',
+    });
+
+    expect(typeof win.__CMS_RESCAN__).toBe('function');
+    expect(fieldsUpdatedListener).toHaveBeenCalled();
+  });
+
+  it('scopes patch updates to specific entry without contaminating other entries sharing field keys', () => {
+    // Set up a mock DOM environment
+    document.body.innerHTML = `
+      <div data-cms-collection="blog" data-cms-entry="post-1">
+        <h2 data-cms-entry-field="title">Original Title 1</h2>
+        <span data-cms-entry-field="excerpt">Excerpt 1</span>
+      </div>
+      <div data-cms-collection="blog" data-cms-entry="post-2">
+        <h2 data-cms-entry-field="title">Original Title 2</h2>
+        <span data-cms-entry-field="excerpt">Excerpt 2</span>
+      </div>
+      <h1 data-cms-field="site.title">Global Site Title</h1>
+    `;
+
+    // Initialize the bridge script in window
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+    const scriptCode = buildBridgeScript({ editorOrigins: ['http://localhost:5173'] });
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    // 1. Establish connection via hello message
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        origin: 'http://localhost:5173',
+        source: window,
+        data: {
+          source: 'cms-editor',
+          v: PREVIEW_BRIDGE_PROTOCOL_VERSION,
+          type: 'hello',
+          protocolVersion: PREVIEW_BRIDGE_PROTOCOL_VERSION,
+        },
+      }),
+    );
+
+    // 2. Dispatch patch for post-1 title
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        origin: 'http://localhost:5173',
+        source: window,
+        data: {
+          source: 'cms-editor',
+          v: PREVIEW_BRIDGE_PROTOCOL_VERSION,
+          type: 'patch',
+          key: 'title',
+          kind: 'text',
+          value: 'Patched Title 1 Only',
+          entryRef: {
+            collection: 'blog',
+            slug: 'post-1',
+            path: 'title',
+          },
+        },
+      }),
+    );
+
+    const post1Title = document.querySelector(
+      '[data-cms-collection="blog"][data-cms-entry="post-1"] [data-cms-entry-field="title"]',
+    );
+    const post2Title = document.querySelector(
+      '[data-cms-collection="blog"][data-cms-entry="post-2"] [data-cms-entry-field="title"]',
+    );
+
+    expect(post1Title?.textContent).toBe('Patched Title 1 Only');
+    expect(post2Title?.textContent).toBe('Original Title 2');
+
+    // 3. Dispatch patch for global site field
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        origin: 'http://localhost:5173',
+        source: window,
+        data: {
+          source: 'cms-editor',
+          v: PREVIEW_BRIDGE_PROTOCOL_VERSION,
+          type: 'patch',
+          key: 'site.title',
+          kind: 'text',
+          value: 'Patched Global Site Title',
+        },
+      }),
+    );
+
+    const globalTitle = document.querySelector('[data-cms-field="site.title"]');
+    expect(globalTitle?.textContent).toBe('Patched Global Site Title');
+  });
+
+  it('dispatches cms:field-selected CustomEvent on document when field element is clicked in edit mode', () => {
+    document.body.innerHTML = `
+      <h1 data-cms-field="home.hero.heading">Click Me</h1>
+    `;
+    document.documentElement.setAttribute('data-cms-edit-mode', 'true');
+
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+
+    const selectedListener = vi.fn();
+    document.addEventListener('cms:field-selected', selectedListener);
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    const heading = document.querySelector('[data-cms-field="home.hero.heading"]');
+    heading?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+
+    expect(selectedListener).toHaveBeenCalled();
+    const customEvent = selectedListener.mock.calls[0][0] as CustomEvent;
+    expect(customEvent.detail.key).toBe('home.hero.heading');
+  });
+
+  it('skips textContent replacement when patching structured non-image object values', () => {
+    document.body.innerHTML = `
+      <div data-cms-field="home.videoFeed.videos">
+        <video src="/video1.mp4"></video>
+      </div>
+    `;
+
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+    const scriptCode = buildBridgeScript({ editorOrigins: ['http://localhost:5173'] });
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    // 1. Establish connection via hello message
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        origin: 'http://localhost:5173',
+        source: window,
+        data: {
+          source: 'cms-editor',
+          v: PREVIEW_BRIDGE_PROTOCOL_VERSION,
+          type: 'hello',
+          protocolVersion: PREVIEW_BRIDGE_PROTOCOL_VERSION,
+        },
+      }),
+    );
+
+    // 2. Dispatch structured patch (array of video objects)
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        origin: 'http://localhost:5173',
+        source: window,
+        data: {
+          source: 'cms-editor',
+          v: PREVIEW_BRIDGE_PROTOCOL_VERSION,
+          type: 'patch',
+          key: 'home.videoFeed.videos',
+          kind: 'media.videoList',
+          value: [{ src: '/video2.mp4' }],
+        },
+      }),
+    );
+
+    const videoEl = document.querySelector('[data-cms-field="home.videoFeed.videos"]');
+    // Ensure textContent was NOT set to "[object Object]"
+    expect(videoEl?.textContent).not.toContain('[object Object]');
+    expect(videoEl?.querySelector('video')).not.toBeNull();
+  });
+
+  it('hides astro-dev-toolbar when embedded in an iframe', () => {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+
+    const iframeDoc = iframe.contentDocument;
+    const iframeWin = iframe.contentWindow as Window & typeof globalThis;
+    expect(iframeWin).toBeDefined();
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new iframeWin.Function(scriptCode);
+    runScript();
+
+    const injectedStyle = iframeDoc?.getElementById('cms-bridge-styles');
+    expect(injectedStyle).not.toBeNull();
+    expect(injectedStyle?.textContent).toContain('astro-dev-toolbar { display: none !important; }');
+
+    iframe.remove();
+  });
+
+  it('restores toolbar suppression after page swap (astro:after-swap / astro:page-load)', () => {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+
+    const iframeDoc = iframe.contentDocument;
+    const iframeWin = iframe.contentWindow as Window & typeof globalThis;
+    expect(iframeWin).toBeDefined();
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new iframeWin.Function(scriptCode);
+    runScript();
+
+    expect(iframeDoc?.getElementById('cms-bridge-styles')).not.toBeNull();
+
+    // Simulate Astro ViewTransitions swap removing head styles
+    const styleEl = iframeDoc?.getElementById('cms-bridge-styles');
+    styleEl?.remove();
+    expect(iframeDoc?.getElementById('cms-bridge-styles')).toBeNull();
+
+    // Simulate toolbar element added to new body
+    const toolbar = iframeDoc?.createElement('astro-dev-toolbar');
+    if (toolbar && iframeDoc?.body) {
+      iframeDoc.body.appendChild(toolbar);
+    }
+
+    // Trigger after-swap event
+    iframeDoc?.dispatchEvent(new Event('astro:after-swap'));
+
+    const reInjectedStyle = iframeDoc?.getElementById('cms-bridge-styles');
+    expect(reInjectedStyle).not.toBeNull();
+    expect(reInjectedStyle?.textContent).toContain(
+      'astro-dev-toolbar { display: none !important; }',
+    );
+    expect(toolbar?.style.display).toBe('none');
+
+    iframe.remove();
+  });
+
+  it('does not hide astro-dev-toolbar when loaded top-level', () => {
+    const oldStyle = document.getElementById('cms-bridge-styles');
+    if (oldStyle) oldStyle.remove();
+
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    const injectedStyle = document.getElementById('cms-bridge-styles');
+    expect(injectedStyle).not.toBeNull();
+    expect(injectedStyle?.textContent).not.toContain('astro-dev-toolbar');
+  });
+
+  it('includes comments capability and handles comment-mode messages', () => {
+    const script = buildBridgeScript();
+    expect(script).toContain("capabilities: ['comments']");
+    expect(script).toContain("data.type === 'comment-mode'");
+    expect(script).toContain("data.type === 'watch-anchors'");
+    expect(script).toContain("data.type === 'scroll-to-anchor'");
+    expect(script).toContain("type: 'comment-click'");
+    expect(script).toContain("type: 'anchor-rects'");
+  });
+
+  it('suppresses default clicks and emits comment-click with full anchor chain in comment mode', () => {
+    document.body.innerHTML = `
+      <div data-cms-group="Hero:home.hero">
+        <a href="https://example.com" id="test-link">
+          <h1 data-cms-field="home.hero.heading" id="test-heading">Welcome to Site</h1>
+        </a>
+      </div>
+    `;
+
+    document.documentElement.setAttribute('data-cms-comment-mode', 'true');
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    // Mock parent postMessage
+    const messages: unknown[] = [];
+    const mockParent = {
+      postMessage: (msg: unknown) => messages.push(msg),
+    };
+
+    // Simulate hello handshake to connect origin
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: { source: 'cms-editor', v: 1, type: 'hello', protocolVersion: 1 },
+        origin: 'https://web.localhost',
+        source: mockParent as unknown as MessageEventSource,
+      }),
+    );
+
+    const heading = document.getElementById('test-heading');
+    expect(heading).toBeDefined();
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      clientX: 100,
+      clientY: 150,
+    });
+
+    const defaultPrevented = heading ? !heading.dispatchEvent(clickEvent) : false;
+    expect(defaultPrevented).toBe(true);
+
+    const commentClickMsg = messages.find(
+      (m) => (m as { type?: string }).type === 'comment-click',
+    ) as
+      | {
+          type: string;
+          chain: Array<{ selector: string; kind: string; label: string; instance: number }>;
+          point: { pageXPct: number; pageYPct: number };
+        }
+      | undefined;
+
+    expect(commentClickMsg).toBeDefined();
+    expect(commentClickMsg?.chain.length).toBe(2);
+    expect(commentClickMsg?.chain[0]).toMatchObject({
+      selector: '[data-cms-field="home.hero.heading"]',
+      kind: 'text',
+      label: 'home.hero.heading',
+      instance: 0,
+    });
+    expect(commentClickMsg?.chain[1]).toMatchObject({
+      selector: '[data-cms-group="Hero:home.hero"]',
+      kind: 'group',
+      label: 'Hero',
+      instance: 0,
+    });
+
+    document.documentElement.removeAttribute('data-cms-comment-mode');
+  });
+
+  it('resolves orphan anchors to null in anchor-rects message', async () => {
+    document.body.innerHTML = `
+      <div data-cms-field="existing.field">Existing</div>
+    `;
+
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    const messages: unknown[] = [];
+    const mockParent = {
+      postMessage: (msg: unknown) => messages.push(msg),
+    };
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: { source: 'cms-editor', v: 1, type: 'hello', protocolVersion: 1 },
+        origin: 'https://web.localhost',
+        source: mockParent as unknown as MessageEventSource,
+      }),
+    );
+
+    // Watch both an existing anchor and an orphaned anchor
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          source: 'cms-editor',
+          v: 1,
+          type: 'watch-anchors',
+          anchors: [
+            { id: 'comment-1', selector: '[data-cms-field="existing.field"]', instance: 0 },
+            { id: 'comment-orphan', selector: '[data-cms-field="deleted.field"]', instance: 0 },
+          ],
+        },
+        origin: 'https://web.localhost',
+        source: mockParent as unknown as MessageEventSource,
+      }),
+    );
+
+    // Allow requestAnimationFrame to run
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+
+    const anchorRectsMsg = messages.find((m) => (m as { type?: string }).type === 'anchor-rects') as
+      | {
+          type: string;
+          rects: Record<string, unknown>;
+        }
+      | undefined;
+
+    expect(anchorRectsMsg).toBeDefined();
+    expect(anchorRectsMsg?.rects['comment-1']).not.toBeNull();
+    expect(anchorRectsMsg?.rects['comment-orphan']).toBeNull();
+  });
+
+  it('emits comment-click with generic structural anchor chain on elements without data-cms-* ancestors', () => {
+    document.body.innerHTML = `
+      <nav class="site-nav">
+        <a href="/about">About Us</a>
+      </nav>
+    `;
+
+    document.documentElement.setAttribute('data-cms-comment-mode', 'true');
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    const messages: unknown[] = [];
+    const mockParent = {
+      postMessage: (msg: unknown) => messages.push(msg),
+    };
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: { source: 'cms-editor', v: 1, type: 'hello', protocolVersion: 1 },
+        origin: 'https://web.localhost',
+        source: mockParent as unknown as MessageEventSource,
+      }),
+    );
+
+    const link = document.querySelector('a');
+    expect(link).toBeDefined();
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      clientX: 50,
+      clientY: 60,
+    });
+
+    const defaultPrevented = link ? !link.dispatchEvent(clickEvent) : false;
+    expect(defaultPrevented).toBe(true);
+
+    const commentClickMsg = messages.find(
+      (m) => (m as { type?: string }).type === 'comment-click',
+    ) as
+      | {
+          type: string;
+          chain: Array<{
+            selector: string;
+            kind: string;
+            label: string;
+            instance: number;
+            rect: { top: number; left: number; width: number; height: number };
+          }>;
+          point: { pageXPct: number; pageYPct: number };
+          rect: { top: number; left: number; width: number; height: number };
+        }
+      | undefined;
+
+    expect(commentClickMsg).toBeDefined();
+    expect(commentClickMsg?.chain.length).toBe(2);
+    expect(commentClickMsg?.chain[0]).toMatchObject({
+      selector: 'body > nav:nth-of-type(1) > a:nth-of-type(1)',
+      kind: 'element',
+      label: 'About Us',
+      instance: 0,
+    });
+    expect(commentClickMsg?.chain[1]).toMatchObject({
+      selector: 'body > nav:nth-of-type(1)',
+      kind: 'element',
+      label: 'Navigation',
+      instance: 0,
+    });
+    expect(commentClickMsg?.rect).toBeDefined();
+    expect(commentClickMsg?.point).toBeDefined();
+
+    document.documentElement.removeAttribute('data-cms-comment-mode');
+  });
+
+  it('resolves generic structural anchors to non-null rects in anchor-rects message', async () => {
+    document.body.innerHTML = `
+      <header id="site-header">
+        <nav>
+          <a href="/pricing">Pricing</a>
+        </nav>
+      </header>
+    `;
+
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    const messages: unknown[] = [];
+    const mockParent = {
+      postMessage: (msg: unknown) => messages.push(msg),
+    };
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: { source: 'cms-editor', v: 1, type: 'hello', protocolVersion: 1 },
+        origin: 'https://web.localhost',
+        source: mockParent as unknown as MessageEventSource,
+      }),
+    );
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          source: 'cms-editor',
+          v: 1,
+          type: 'watch-anchors',
+          anchors: [
+            {
+              id: 'comment-generic-link',
+              selector: '#site-header > nav:nth-of-type(1) > a:nth-of-type(1)',
+              instance: 0,
+            },
+            { id: 'comment-generic-header', selector: '#site-header', instance: 0 },
+            {
+              id: 'comment-generic-orphan',
+              selector: '#site-header > footer:nth-of-type(1)',
+              instance: 0,
+            },
+          ],
+        },
+        origin: 'https://web.localhost',
+        source: mockParent as unknown as MessageEventSource,
+      }),
+    );
+
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+
+    const anchorRectsMsg = messages.find((m) => (m as { type?: string }).type === 'anchor-rects') as
+      | {
+          type: string;
+          rects: Record<string, unknown>;
+        }
+      | undefined;
+
+    expect(anchorRectsMsg).toBeDefined();
+    expect(anchorRectsMsg?.rects['comment-generic-link']).not.toBeNull();
+    expect(anchorRectsMsg?.rects['comment-generic-header']).not.toBeNull();
+    expect(anchorRectsMsg?.rects['comment-generic-orphan']).toBeNull();
+  });
+
+  it('anchors deep icon-in-button clicks to enclosing button and landmark', () => {
+    document.body.innerHTML = `
+      <nav id="navbar">
+        <button aria-label="Search site">
+          <svg><path id="icon-path" d="M0 0"></path></svg>
+          <span>Search</span>
+        </button>
+      </nav>
+    `;
+
+    document.documentElement.setAttribute('data-cms-comment-mode', 'true');
+    (window as unknown as { __CMS_BRIDGE_INITIALIZED__?: boolean }).__CMS_BRIDGE_INITIALIZED__ =
+      false;
+
+    const scriptCode = buildBridgeScript();
+    const runScript = new Function(scriptCode);
+    runScript();
+
+    const messages: unknown[] = [];
+    const mockParent = {
+      postMessage: (msg: unknown) => messages.push(msg),
+    };
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: { source: 'cms-editor', v: 1, type: 'hello', protocolVersion: 1 },
+        origin: 'https://web.localhost',
+        source: mockParent as unknown as MessageEventSource,
+      }),
+    );
+
+    const path = document.getElementById('icon-path');
+    expect(path).toBeDefined();
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      clientX: 20,
+      clientY: 30,
+    });
+
+    const defaultPrevented = path ? !path.dispatchEvent(clickEvent) : false;
+    expect(defaultPrevented).toBe(true);
+
+    const commentClickMsg = messages.find(
+      (m) => (m as { type?: string }).type === 'comment-click',
+    ) as
+      | {
+          type: string;
+          chain: Array<{ selector: string; kind: string; label: string; instance: number }>;
+        }
+      | undefined;
+
+    expect(commentClickMsg).toBeDefined();
+    expect(commentClickMsg?.chain.length).toBe(2);
+    expect(commentClickMsg?.chain[0]).toMatchObject({
+      selector: '#navbar > button:nth-of-type(1)',
+      kind: 'element',
+      label: 'Search site',
+      instance: 0,
+    });
+    expect(commentClickMsg?.chain[1]).toMatchObject({
+      selector: '#navbar',
+      kind: 'element',
+      label: '#navbar',
+      instance: 0,
+    });
+
+    document.documentElement.removeAttribute('data-cms-comment-mode');
+  });
+});