@akinon/pz-theme 2.0.30-beta.0 → 2.0.30

package/CHANGELOG.md

@@ -1,11 +1,14 @@
 # @akinon/pz-theme
 
-## 2.0.30-beta.0
+## 2.0.30
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.30-beta.0
+- ad612b5: ZERO-4588: Stop leaking the "Unknown block type" debug text to production for unregistered block types; the hint is now shown only in the designer (production renders nothing).
+- ad612b5: ZERO-4588: Fix icon-block ignoring the active breakpoint (it was hardcoded to 'desktop'); mobile value/size/color overrides now apply on the mobile breakpoint.
+- ad612b5: ZERO-4588: Fix counter-block dropping hidden child blocks in the designer (missing isDesigner guard); hidden children are now selectable in the editor, production rendering unchanged.
+- af4cd11: ZERO-4588: Fix three render bugs found while adding component tests — video-block now renders the invalid-URL placeholder instead of crashing on a non-string value; group-block resolves its `tag` using the active breakpoint (was hardcoded to desktop); coupon-banner no longer collapses a numeric `12` border-radius (e.g. 12px/12rem) to 0px.
+  - @akinon/next@2.0.30
 
 ## 2.0.29
 

package/jest/__mocks__/akinon-next-hooks.js

@@ -0,0 +1,15 @@
+// Mock for @akinon/next/hooks (only useLocalization is consumed by pz-theme).
+const useLocalization = () => ({
+  t: (path) => path,
+  setLocale: () => {},
+  setCurrency: () => {},
+  locale: 'en-us',
+  currency: 'USD',
+  locales: [{ value: 'en-us' }, { value: 'tr-tr' }],
+  currencies: ['USD'],
+  defaultLocaleValue: 'en-us',
+  defaultCurrencyCode: 'USD',
+  localeUrlStrategy: 'hide-default-locale'
+});
+
+module.exports = { __esModule: true, useLocalization };

package/jest/__mocks__/akinon-next-image.js

@@ -0,0 +1,22 @@
+// Mock for @akinon/next/components/image — a dumb <img> that drops next/image-only props.
+const React = require('react');
+
+const Image = (props) => {
+  const {
+    src,
+    alt = '',
+    fill,
+    priority,
+    loader,
+    quality,
+    placeholder,
+    blurDataURL,
+    unoptimized,
+    loading,
+    fetchPriority,
+    ...domProps
+  } = props || {};
+  return React.createElement('img', { src, alt, ...domProps });
+};
+
+module.exports = { __esModule: true, Image, default: Image };

package/jest/__mocks__/akinon-next-loader-spinner.js

@@ -0,0 +1,7 @@
+// Mock for @akinon/next/components/loader-spinner.
+const React = require('react');
+
+const LoaderSpinner = () =>
+  React.createElement('span', { 'data-testid': 'loader-spinner' });
+
+module.exports = { __esModule: true, LoaderSpinner, default: LoaderSpinner };

package/jest/__mocks__/akinon-next-localization.js

@@ -0,0 +1,10 @@
+// Mock for @akinon/next/localization — values mirror the real enum.
+module.exports = {
+  __esModule: true,
+  LocaleUrlStrategy: {
+    HideAllLocales: 'hide-all-locales',
+    HideDefaultLocale: 'hide-default-locale',
+    ShowAllLocales: 'show-all-locales',
+    Subdomain: 'subdomain'
+  }
+};

package/jest/__mocks__/akinon-next-modal.js

@@ -0,0 +1,11 @@
+// Mock for @akinon/next/components/modal — renders children when open, else nothing.
+const React = require('react');
+
+const Modal = (props) => {
+  const { open, isOpen, show, children } = props || {};
+  return open || isOpen || show
+    ? React.createElement(React.Fragment, null, children)
+    : null;
+};
+
+module.exports = { __esModule: true, Modal, default: Modal };

package/jest/__mocks__/akinon-next-price.js

@@ -0,0 +1,9 @@
+// Mock for @akinon/next/components/price — renders a simple span.
+const React = require('react');
+
+const Price = (props) => {
+  const { value, children } = props || {};
+  return React.createElement('span', { 'data-testid': 'price' }, children ?? value ?? '');
+};
+
+module.exports = { __esModule: true, Price, default: Price };

package/jest/__mocks__/akinon-next-rtk.js

@@ -0,0 +1,30 @@
+// Catch-all mock for @akinon/next/data/client/* RTK Query hooks.
+// *Query hooks -> a result object; *Mutation hooks -> [trigger, state] tuple.
+const queryResult = () => ({
+  data: undefined,
+  isLoading: false,
+  isFetching: false,
+  isSuccess: true,
+  isError: false,
+  error: undefined,
+  refetch: jest.fn()
+});
+
+const mutationTuple = () => [
+  jest.fn(() => ({ unwrap: () => Promise.resolve({}) })),
+  { isLoading: false, isSuccess: false, isError: false, reset: jest.fn() }
+];
+
+const handler = {
+  get(_target, prop) {
+    if (prop === '__esModule') return true;
+    if (typeof prop !== 'string') return undefined;
+    if (prop === 'default') return proxy;
+    if (prop.endsWith('Mutation')) return () => mutationTuple();
+    if (prop.endsWith('Query')) return () => queryResult();
+    return () => undefined;
+  }
+};
+
+const proxy = new Proxy({}, handler);
+module.exports = proxy;

package/jest/__mocks__/akinon-next-utils.js

@@ -0,0 +1,8 @@
+// Mock for @akinon/next/utils (only these three are consumed by pz-theme).
+// urlLocaleMatcherRegex MUST be a real RegExp (link-block calls String#replace with it).
+module.exports = {
+  __esModule: true,
+  buildClientRequestUrl: (path) => path,
+  urlLocaleMatcherRegex: /^\/(?:[a-z]{2}-[a-z]{2})(?=\/|$)/i,
+  urlSchemes: ['http', 'tel:', 'mailto:', 'sms:', 'whatsapp:', 'skype:', 'ftp:', 'file:']
+};

package/jest/__mocks__/next-link.js

@@ -0,0 +1,11 @@
+// Mock for next/link — a plain <a> (no app-router context needed in tests).
+const React = require('react');
+
+const Link = (props) => {
+  const { href, children, ...rest } = props || {};
+  const resolved =
+    typeof href === 'string' ? href : (href && href.pathname) || '#';
+  return React.createElement('a', { href: resolved, ...rest }, children);
+};
+
+module.exports = { __esModule: true, default: Link };

package/jest/__mocks__/settings.js

@@ -0,0 +1,13 @@
+// Safety-net stub for the `settings` module (real one lives in the consuming app).
+const settings = {
+  localization: {
+    locales: [{ value: 'en-us' }, { value: 'tr-tr' }],
+    defaultLocaleValue: 'en-us',
+    localeUrlStrategy: 'hide-default-locale',
+    currencies: ['USD'],
+    defaultCurrencyCode: 'USD'
+  }
+};
+
+module.exports = settings;
+module.exports.default = settings;

package/jest/setup.ts

@@ -0,0 +1,33 @@
+import '@testing-library/jest-dom';
+
+// jsdom does not implement these; provide no-op shims so components that touch
+// them on mount don't crash under test.
+if (!window.matchMedia) {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false
+  })) as unknown as typeof window.matchMedia;
+}
+
+window.scrollTo = (() => {}) as typeof window.scrollTo;
+
+class NoopObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords() {
+    return [];
+  }
+}
+
+(window as unknown as Record<string, unknown>).IntersectionObserver =
+  (window as unknown as Record<string, unknown>).IntersectionObserver ||
+  NoopObserver;
+(window as unknown as Record<string, unknown>).ResizeObserver =
+  (window as unknown as Record<string, unknown>).ResizeObserver || NoopObserver;

package/jest.config.js

@@ -6,10 +6,31 @@ module.exports = {
   testEnvironment: 'jsdom',
   roots: ['<rootDir>/src'],
   testMatch: ['**/*.test.ts', '**/*.test.tsx'],
-  // Stub side-effect CSS imports (e.g. react-multi-carousel styles) so that
-  // importing a component never fails on a missing CSS transform.
+  setupFilesAfterEnv: ['<rootDir>/jest/setup.ts'],
+  // Component tests render block/section renderers which import @akinon/next
+  // subpaths and `settings`. We map each consumed subpath to a tiny mock so
+  // the real (app-coupled / RTK) modules are never loaded. Order matters:
+  // specific patterns must precede the data/client catch-all.
   moduleNameMapper: {
-    '\\.(css|less|scss|sass)$': '<rootDir>/jest/style-mock.js'
+    '\\.(css|less|scss|sass)$': '<rootDir>/jest/style-mock.js',
+    '^settings$': '<rootDir>/jest/__mocks__/settings.js',
+    '^next/link$': '<rootDir>/jest/__mocks__/next-link.js',
+    '^@akinon/next/hooks$': '<rootDir>/jest/__mocks__/akinon-next-hooks.js',
+    '^@akinon/next/hooks/use-localization$':
+      '<rootDir>/jest/__mocks__/akinon-next-hooks.js',
+    '^@akinon/next/utils$': '<rootDir>/jest/__mocks__/akinon-next-utils.js',
+    '^@akinon/next/localization$':
+      '<rootDir>/jest/__mocks__/akinon-next-localization.js',
+    '^@akinon/next/components/image$':
+      '<rootDir>/jest/__mocks__/akinon-next-image.js',
+    '^@akinon/next/components/modal$':
+      '<rootDir>/jest/__mocks__/akinon-next-modal.js',
+    '^@akinon/next/components/price$':
+      '<rootDir>/jest/__mocks__/akinon-next-price.js',
+    '^@akinon/next/components/loader-spinner$':
+      '<rootDir>/jest/__mocks__/akinon-next-loader-spinner.js',
+    '^@akinon/next/data/client/(.*)$':
+      '<rootDir>/jest/__mocks__/akinon-next-rtk.js'
   },
   transform: {
     '^.+\\.(ts|tsx)$': [

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.30-beta.0",
+  "version": "2.0.30",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.30-beta.0",
+    "@akinon/next": "2.0.30",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -18,7 +18,10 @@
     "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.30-beta.0",
+    "@akinon/next": "2.0.30",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.1.1",
     "@types/jest": "29.5.14",
     "@types/node": "^18.7.8",
     "@types/react": "^18.0.17",

package/src/__tests__/theme-block.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// Registry is a DEFAULT export; force an unregistered type.
+jest.mock('../blocks/block-renderer-registry', () => ({
+  __esModule: true,
+  default: { getRenderer: () => undefined, hasRenderer: () => false }
+}));
+jest.mock('../components/with-designer-features', () => ({
+  __esModule: true,
+  WithDesignerFeatures: ({ children }: { children: React.ReactNode }) => children
+}));
+
+import ThemeBlock from '../theme-block';
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'x',
+      type: 'nonexistent-xyz',
+      label: 'x',
+      properties: {},
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+describe('ThemeBlock — unknown block type', () => {
+  it('renders nothing in production (no debug text leaks to end users)', () => {
+    const { container } = render(<ThemeBlock {...props({ isDesigner: false })} />);
+    expect(container.textContent).not.toMatch(/Unknown block type/);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('shows the debug hint in the designer', () => {
+    const { container } = render(<ThemeBlock {...props({ isDesigner: true })} />);
+    expect(container.textContent).toContain(
+      'Unknown block type: nonexistent-xyz'
+    );
+  });
+});

package/src/blocks/__tests__/accordion-block.test.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AccordionBlock from '../accordion-block';
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: any) => <div data-testid="tb" data-id={block.id} />
+}));
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: { id: 'acc', type: 'accordion', label: 'acc', blocks: [] },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+const child = (over: Record<string, unknown> = {}) => ({
+  id: 'c',
+  type: 'text',
+  label: 'child',
+  hidden: false,
+  order: 0,
+  ...over
+});
+
+describe('AccordionBlock', () => {
+  it('renders empty placeholder when no heading/content blocks', () => {
+    render(<AccordionBlock {...props()} />);
+    expect(screen.getByText('No accordion content')).toBeInTheDocument();
+    expect(screen.queryAllByTestId('tb')).toHaveLength(0);
+  });
+
+  it('renders heading and content children via ThemeBlock', () => {
+    render(
+      <AccordionBlock
+        {...props({
+          block: {
+            id: 'acc',
+            blocks: [
+              {
+                id: 'h',
+                label: 'Accordion Heading',
+                blocks: [child({ id: 'h1' })]
+              },
+              {
+                id: 'co',
+                label: 'Accordion Content',
+                blocks: [child({ id: 'c1' })]
+              }
+            ]
+          }
+        })}
+      />
+    );
+    const ids = screen.getAllByTestId('tb').map((el) => el.getAttribute('data-id'));
+    expect(ids).toEqual(['h1', 'c1']);
+  });
+
+  it('drops hidden children when not designer', () => {
+    render(
+      <AccordionBlock
+        {...props({
+          isDesigner: false,
+          block: {
+            id: 'acc',
+            blocks: [
+              {
+                id: 'h',
+                label: 'Accordion Heading',
+                blocks: [
+                  child({ id: 'visible', hidden: false }),
+                  child({ id: 'gone', hidden: true })
+                ]
+              }
+            ]
+          }
+        })}
+      />
+    );
+    const ids = screen.getAllByTestId('tb').map((el) => el.getAttribute('data-id'));
+    expect(ids).toEqual(['visible']);
+  });
+
+  it('keeps hidden children when designer', () => {
+    render(
+      <AccordionBlock
+        {...props({
+          isDesigner: true,
+          block: {
+            id: 'acc',
+            blocks: [
+              {
+                id: 'h',
+                label: 'Accordion Heading',
+                blocks: [
+                  child({ id: 'visible', hidden: false }),
+                  child({ id: 'kept', hidden: true })
+                ]
+              }
+            ]
+          }
+        })}
+      />
+    );
+    const ids = screen.getAllByTestId('tb').map((el) => el.getAttribute('data-id'));
+    expect(ids).toEqual(['visible', 'kept']);
+  });
+
+  it('orders children by ascending order', () => {
+    render(
+      <AccordionBlock
+        {...props({
+          block: {
+            id: 'acc',
+            blocks: [
+              {
+                id: 'h',
+                label: 'Accordion Heading',
+                blocks: [
+                  child({ id: 'second', order: 2 }),
+                  child({ id: 'first', order: 1 })
+                ]
+              }
+            ]
+          }
+        })}
+      />
+    );
+    const ids = screen.getAllByTestId('tb').map((el) => el.getAttribute('data-id'));
+    expect(ids).toEqual(['first', 'second']);
+  });
+
+  it('is closed by default (gridTemplateRows 0fr)', () => {
+    const { container } = render(
+      <AccordionBlock
+        {...props({
+          block: {
+            id: 'acc',
+            blocks: [
+              {
+                id: 'co',
+                label: 'Accordion Content',
+                blocks: [child({ id: 'c1' })]
+              }
+            ]
+          }
+        })}
+      />
+    );
+    const grid = container.querySelector('div[style*="grid"]') as HTMLElement;
+    expect(grid).toBeTruthy();
+    expect(grid.style.gridTemplateRows).toBe('0fr');
+  });
+
+  it('is open when properties.defaultOpen is true (gridTemplateRows 1fr)', () => {
+    const { container } = render(
+      <AccordionBlock
+        {...props({
+          block: {
+            id: 'acc',
+            properties: { defaultOpen: true },
+            blocks: [
+              {
+                id: 'co',
+                label: 'Accordion Content',
+                blocks: [child({ id: 'c1' })]
+              }
+            ]
+          }
+        })}
+      />
+    );
+    const grid = container.querySelector('div[style*="grid"]') as HTMLElement;
+    expect(grid.style.gridTemplateRows).toBe('1fr');
+  });
+});

package/src/blocks/__tests__/button-block.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ButtonBlock from '../button-block';
+
+// useLocalization is globally mocked to return locale: 'en-us'.
+// getResponsiveValue / colorToRgba / resolveThemeCssVariables come from the
+// real ../utils module (not mocked). The Modal mock renders nothing while
+// closed, so only the <a>/<button> is in the DOM by default.
+
+const renderBlock = (block: any, extraProps: any = {}) =>
+  render(<ButtonBlock block={block} {...extraProps} />);
+
+describe('ButtonBlock', () => {
+  describe('getLocalizedText', () => {
+    it('falls back to "Click Me" when text is undefined', () => {
+      renderBlock({ id: 'b1' });
+      expect(screen.getByText('Click Me')).toBeInTheDocument();
+    });
+
+    it('renders a plain string text as-is', () => {
+      renderBlock({ id: 'b2', properties: { text: 'Buy Now' } });
+      expect(screen.getByText('Buy Now')).toBeInTheDocument();
+    });
+
+    it('renders the active locale value from a localized object (en-us)', () => {
+      renderBlock({
+        id: 'b3',
+        properties: { text: { 'en-us': 'Hello', 'tr-tr': 'Merhaba' } }
+      });
+      expect(screen.getByText('Hello')).toBeInTheDocument();
+      expect(screen.queryByText('Merhaba')).not.toBeInTheDocument();
+    });
+
+    it('parses a JSON-string localized object', () => {
+      renderBlock({
+        id: 'b3b',
+        properties: { text: '{"en-us":"Subscribe","tr-tr":"Abone"}' }
+      });
+      expect(screen.getByText('Subscribe')).toBeInTheDocument();
+    });
+
+    it('resolves a responsive object via the current breakpoint', () => {
+      const block = {
+        id: 'b4',
+        properties: { text: { desktop: 'Desktop Text', mobile: 'Mobile Text' } }
+      };
+      renderBlock(block, { currentBreakpoint: 'mobile' });
+      expect(screen.getByText('Mobile Text')).toBeInTheDocument();
+    });
+
+    it('falls back to the desktop value of a responsive object by default', () => {
+      renderBlock({
+        id: 'b5',
+        properties: { text: { desktop: 'Desktop Text', mobile: 'Mobile Text' } }
+      });
+      expect(screen.getByText('Desktop Text')).toBeInTheDocument();
+    });
+  });
+
+  describe('tag / href defaults', () => {
+    it('renders an <a> with href "#" by default', () => {
+      renderBlock({ id: 'b6', properties: { text: 'Link' } });
+      const anchor = screen.getByText('Link').closest('a');
+      expect(anchor).toBeInTheDocument();
+      expect(anchor).toHaveAttribute('href', '#');
+      expect(anchor).toHaveAttribute('target', '_self');
+    });
+
+    it('uses the provided url for the anchor href', () => {
+      renderBlock({
+        id: 'b7',
+        properties: { text: 'Go', url: 'https://example.com' }
+      });
+      const anchor = screen.getByText('Go').closest('a');
+      expect(anchor).toHaveAttribute('href', 'https://example.com');
+    });
+
+    it('renders a <button> when tag is "button"', () => {
+      renderBlock({
+        id: 'b8',
+        properties: { text: 'Submit', tag: 'button' }
+      });
+      const btn = screen.getByRole('button');
+      expect(btn).toBeInTheDocument();
+      expect(btn.tagName).toBe('BUTTON');
+      expect(btn).toHaveAttribute('type', 'button');
+      expect(screen.getByText('Submit')).toBeInTheDocument();
+    });
+
+    it('sets rel noopener noreferrer when target is _blank', () => {
+      renderBlock({
+        id: 'b9',
+        properties: { text: 'External', target: '_blank' }
+      });
+      const anchor = screen.getByText('External').closest('a');
+      expect(anchor).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+  });
+});

package/src/blocks/__tests__/counter-block.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// Stub the recursive ThemeBlock (default export) with a countable marker.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import CounterBlock from '../counter-block';
+
+const child = (id: string, hidden = false, order = 0) => ({
+  id,
+  type: 'text',
+  label: id,
+  value: '',
+  properties: {},
+  styles: {},
+  order,
+  hidden
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'c',
+      type: 'counter',
+      label: 'c',
+      value: '',
+      properties: {}, // no endAt -> no timers in this test
+      styles: {},
+      order: 0,
+      hidden: false,
+      blocks: [child('c1', false), child('c2', true)]
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+const markerCount = (container: HTMLElement) =>
+  container.querySelectorAll('[data-testid="tb"]').length;
+
+describe('CounterBlock — hidden children (BUG-1 fix)', () => {
+  it('drops hidden children in production', () => {
+    const { container } = render(<CounterBlock {...props({ isDesigner: false })} />);
+    expect(markerCount(container)).toBe(1);
+  });
+
+  it('keeps hidden children in the designer so they remain selectable', () => {
+    const { container } = render(<CounterBlock {...props({ isDesigner: true })} />);
+    expect(markerCount(container)).toBe(2);
+  });
+});