@akinon/pz-theme 2.0.164-rc.1 → 2.0.164

package/src/__tests__/theme-text-defaults-code-owned.test.tsx

@@ -0,0 +1,340 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import CouponBannerSection from '../sections/coupon-banner-section';
+import TabsSection from '../sections/tabs-section';
+import AccordionBlock from '../blocks/accordion-block';
+import HotspotBlock from '../blocks/hotspot-block';
+import { ThemeSettingsProvider } from '../theme-settings-context';
+import { buildThemeElementDefaultsCss } from '../utils/theme-settings-css';
+import type { Section } from '../theme-section';
+
+/**
+ * Boxes drawn by a renderer that paint the text of the blocks inside them —
+ * a colour from a section setting, a size from a class list, a part colour —
+ * must keep that text out of the theme's rich-text defaults, or the theme's
+ * Paragraf colour and style repaint it (a light Koyu text colour on the
+ * coupon's white code box is about 1.6:1).
+ */
+
+/** The Koyu preset's text roles plus an edited Paragraf style. */
+const THEMED = {
+  textColor: '#C8C8C8',
+  headingColor: '#FFFFFF',
+  linkColor: '#F2C35B',
+  typography: [
+    {
+      key: 'body',
+      fontFamily: 'Jost',
+      fontWeight: '400',
+      fontSize: 14,
+      lineHeight: 22,
+      letterSpacing: 0,
+      textTransform: 'none'
+    }
+  ]
+};
+
+/** Saved by the old settings page: no text default at all. */
+const LEGACY = {
+  primaryColor: '#000000',
+  typography: [{ key: 'body', fontFamily: 'Jost', fontSize: 12 }]
+};
+
+const rules = buildThemeElementDefaultsCss(THEMED)
+  .split('}')
+  .filter(Boolean)
+  .map((rule) => {
+    const [selector, declarations] = rule.split('{');
+    return { selector, declarations };
+  });
+
+const selectorsSetting = (property: string) =>
+  rules
+    .filter(({ declarations }) => declarations.startsWith(`${property}:`))
+    .map(({ selector }) => selector);
+
+const COLOR_SELECTORS = selectorsSetting('color');
+const TYPE_SELECTORS = selectorsSetting('font-family');
+
+/** Whether a theme colour default reaches `el`. */
+const painted = (el: Element) =>
+  COLOR_SELECTORS.some((selector) => el.matches(selector));
+/** Whether the theme's managed typography reaches `el`. */
+const typeset = (el: Element) =>
+  TYPE_SELECTORS.some((selector) => el.matches(selector));
+
+const text = (
+  id: string,
+  value: string,
+  extra: Record<string, unknown> = {}
+) => ({
+  id,
+  type: 'text',
+  label: id,
+  order: 0,
+  hidden: false,
+  properties: {},
+  styles: {},
+  value,
+  blocks: [],
+  ...extra
+});
+
+const mount = (settings: Record<string, unknown>, node: React.ReactNode) =>
+  render(
+    <ThemeSettingsProvider value={settings}>
+      <div className="theme-placeholder">{node}</div>
+    </ThemeSettingsProvider>
+  );
+
+/** The paragraph of text block `id`. */
+const paragraphOf = (container: HTMLElement, id: string) => {
+  const p = container.querySelector(`[data-block-id="${id}"] p`);
+  if (!p) throw new Error(`no paragraph in ${id}`);
+  return p;
+};
+
+describe('the coupon banner code box', () => {
+  const section = (withBoxBlock: boolean) =>
+    ({
+      id: 'coupon',
+      type: 'coupon-banner',
+      name: 'coupon',
+      label: 'Coupon',
+      order: 0,
+      hidden: false,
+      properties: { 'coupon-code': 'SAVE20' },
+      styles: {},
+      blocks: [
+        text('title', '<p>Weekend sale</p>'),
+        ...(withBoxBlock
+          ? [
+              {
+                ...text('box', ''),
+                type: 'group',
+                order: 1,
+                properties: { couponBannerRole: 'coupon-code-box' }
+              }
+            ]
+          : []),
+        text('code', '', {
+          order: 2,
+          properties: { couponBannerRole: 'coupon-code-text' }
+        })
+      ]
+    } as unknown as Section);
+
+  it.each([
+    ['a box block', true],
+    ['the built-in box', false]
+  ])('keeps its colour and type on the code inside %s', (_label, withBox) => {
+    const { container } = mount(
+      THEMED,
+      <CouponBannerSection
+        section={section(withBox)}
+        currentBreakpoint="desktop"
+      />
+    );
+    const code = paragraphOf(container, 'code');
+    expect(code).toHaveTextContent('SAVE20');
+
+    // The box paints the colour inline and the type with its classes.
+    const box = code.closest('[data-pz-own-type]');
+    expect(box).toHaveClass('uppercase', 'tracking-[0.12em]');
+    expect(box).toHaveAttribute('data-pz-own-color', '');
+    expect(painted(code)).toBe(false);
+    expect(typeset(code)).toBe(false);
+
+    // The banner's own copy still takes the theme defaults.
+    const title = paragraphOf(container, 'title');
+    expect(painted(title)).toBe(true);
+    expect(typeset(title)).toBe(true);
+  });
+
+  it('adds no marker for a theme without text defaults', () => {
+    const { container } = mount(
+      LEGACY,
+      <CouponBannerSection
+        section={section(true)}
+        currentBreakpoint="desktop"
+      />
+    );
+    expect(container.innerHTML).not.toContain('data-pz-');
+  });
+});
+
+describe('the tabs section', () => {
+  const pane = (
+    id: string,
+    headerStyles: Record<string, unknown>,
+    contentStyles: Record<string, unknown>,
+    order: number
+  ) => ({
+    id,
+    type: 'tab',
+    label: id,
+    order,
+    hidden: false,
+    properties: {},
+    styles: {},
+    blocks: [
+      {
+        ...text(`${id}-header`, ''),
+        type: 'group',
+        label: 'Tab Header',
+        styles: headerStyles,
+        blocks: [text(`${id}-title`, `<p>${id}</p>`)]
+      },
+      {
+        ...text(`${id}-content`, ''),
+        type: 'group',
+        label: 'Tab Content',
+        order: 1,
+        styles: contentStyles,
+        blocks: [text(`${id}-body`, '<p>Body</p>')]
+      }
+    ]
+  });
+
+  const section = {
+    id: 'tabs',
+    type: 'tabs',
+    name: 'tabs',
+    label: 'Tabs',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    blocks: [
+      pane(
+        'one',
+        { 'font-size': { desktop: '18px' } },
+        { color: { desktop: '#ff0000' } },
+        0
+      ),
+      pane('two', {}, {}, 1)
+    ]
+  } as unknown as Section;
+
+  it('lets the active colour and the header and content styles reach their text', () => {
+    const { container } = mount(
+      THEMED,
+      <TabsSection section={section} currentBreakpoint="desktop" />
+    );
+
+    // Active: the tab paints the title with its active colour, and the
+    // header block's size reaches it.
+    expect(painted(paragraphOf(container, 'one-title'))).toBe(false);
+    expect(typeset(paragraphOf(container, 'one-title'))).toBe(false);
+    // Inactive, with nothing authored: the theme's defaults.
+    expect(painted(paragraphOf(container, 'two-title'))).toBe(true);
+    expect(typeset(paragraphOf(container, 'two-title'))).toBe(true);
+    // The content block's own colour, painted on the pane.
+    expect(painted(paragraphOf(container, 'one-body'))).toBe(false);
+    expect(typeset(paragraphOf(container, 'one-body'))).toBe(true);
+
+    fireEvent.click(paragraphOf(container, 'two-title'));
+
+    expect(painted(paragraphOf(container, 'two-title'))).toBe(false);
+    expect(painted(paragraphOf(container, 'one-title'))).toBe(true);
+    expect(typeset(paragraphOf(container, 'one-title'))).toBe(false);
+    expect(painted(paragraphOf(container, 'two-body'))).toBe(true);
+  });
+});
+
+describe('the accordion parts', () => {
+  const accordion = (styles: Record<string, unknown>) => ({
+    id: 'acc',
+    type: 'accordion',
+    label: 'acc',
+    order: 0,
+    hidden: false,
+    properties: { defaultOpen: true },
+    styles,
+    blocks: [
+      {
+        ...text('acc-heading', ''),
+        type: 'group',
+        label: 'Accordion Heading',
+        blocks: [text('question', '<p>Question</p>')]
+      },
+      {
+        ...text('acc-content', ''),
+        type: 'group',
+        label: 'Accordion Content',
+        order: 1,
+        blocks: [text('answer', '<p>Answer</p>')]
+      }
+    ]
+  });
+
+  const mountAccordion = (styles: Record<string, unknown>) =>
+    mount(
+      THEMED,
+      <AccordionBlock
+        block={accordion(styles) as never}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        currentBreakpoint="desktop"
+      />
+    );
+
+  it('keep a part colour or type, at rest or open, on the blocks inside', () => {
+    const { container } = mountAccordion({
+      'header/open/color': { desktop: '#ff0000' },
+      'content/color': { desktop: '#00aa00' },
+      'content/font-size': { desktop: '18px' }
+    });
+
+    expect(container.querySelector('[data-part="header"]')).toHaveAttribute(
+      'data-pz-own-color',
+      ''
+    );
+    expect(painted(paragraphOf(container, 'question'))).toBe(false);
+    expect(typeset(paragraphOf(container, 'question'))).toBe(true);
+    expect(painted(paragraphOf(container, 'answer'))).toBe(false);
+    expect(typeset(paragraphOf(container, 'answer'))).toBe(false);
+  });
+
+  it('mark no part without an authored part colour or type', () => {
+    const { container } = mountAccordion({
+      'header/background-color': { desktop: '#000000' }
+    });
+
+    expect(container.querySelector('[data-part="header"]')).not.toHaveAttribute(
+      'data-pz-own-color'
+    );
+    expect(painted(paragraphOf(container, 'question'))).toBe(true);
+    expect(painted(paragraphOf(container, 'answer'))).toBe(true);
+  });
+});
+
+describe('the hotspot tooltip', () => {
+  it('keeps its class-set size on the blocks inside', () => {
+    const { container } = mount(
+      THEMED,
+      <HotspotBlock
+        block={
+          {
+            ...text('spot', ''),
+            type: 'hotspot',
+            properties: { title: 'Look' },
+            blocks: [text('tip', '<p>Tip</p>')]
+          } as never
+        }
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        currentBreakpoint="desktop"
+      />
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Look' }));
+
+    const tip = paragraphOf(container, 'tip');
+    expect(typeset(tip)).toBe(false);
+    // Its text colour is not the tooltip's: the theme's still applies.
+    expect(painted(tip)).toBe(true);
+  });
+});

package/src/blocks/__tests__/breadcrumb-theme-separator.test.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import type { BlockRendererProps } from '../block-renderer-registry';
+import ListingBreadcrumbBlock from '../listing-breadcrumb-block';
+import ProductBreadcrumbBlock from '../product-breadcrumb-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+import { ThemeSettingsProvider } from '../../theme-settings-context';
+
+/**
+ * The settings page's "Breadcrumb ayırıcı" (`breadcrumbSeparator`)
+ * is the theme-wide default for both breadcrumb blocks. It only fills a block
+ * whose own `separator` is absent — the editor stops persisting '/' for new
+ * blocks — so every block saved before keeps the separator it renders today.
+ */
+
+const LISTING_PAGE = {
+  listing: {
+    products: [],
+    breadcrumbs: [
+      { label: 'Women', url: '/women' },
+      { label: 'Dresses', url: '/women/dresses' }
+    ]
+  }
+};
+
+const PRODUCT_PAGE = {
+  product: {
+    pk: 7,
+    name: 'Linen dress',
+    categories: [{ name: 'Women', url: '/women' }]
+  }
+};
+
+const blockProps = (
+  type: string,
+  properties: Record<string, unknown>
+): BlockRendererProps =>
+  ({
+    block: {
+      id: `${type}-1`,
+      type,
+      label: 'Breadcrumb',
+      value: '',
+      properties,
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    currentBreakpoint: 'desktop'
+  } as unknown as BlockRendererProps);
+
+type Variant = {
+  name: string;
+  Block: React.ComponentType<BlockRendererProps>;
+  type: string;
+  page: Record<string, unknown>;
+};
+
+const VARIANTS: Variant[] = [
+  {
+    name: 'listing breadcrumb',
+    Block: ListingBreadcrumbBlock,
+    type: 'listing-breadcrumb',
+    page: LISTING_PAGE
+  },
+  {
+    name: 'product breadcrumb',
+    Block: ProductBreadcrumbBlock,
+    type: 'product-breadcrumb',
+    page: PRODUCT_PAGE
+  }
+];
+
+const separators = (
+  variant: Variant,
+  properties: Record<string, unknown>,
+  settings: Record<string, unknown> | null
+) => {
+  const { Block, type, page } = variant;
+  const { container } = render(
+    <ThemeSettingsProvider value={settings}>
+      <ThemePageContextProvider value={page}>
+        <Block {...blockProps(type, properties)} />
+      </ThemePageContextProvider>
+    </ThemeSettingsProvider>
+  );
+
+  return Array.from(
+    container.querySelectorAll('[data-breadcrumb-separator]')
+  ).map((node) => node.textContent);
+};
+
+describe.each(VARIANTS)('$name — theme breadcrumb separator', (variant) => {
+  it('uses the theme separator when the block sets none', () => {
+    const seen = separators(variant, {}, { breadcrumbSeparator: '›' });
+
+    expect(seen.length).toBeGreaterThan(0);
+    expect(seen.every((text) => text === '›')).toBe(true);
+  });
+
+  it('keeps a stored separator, including the old default "/"', () => {
+    const settings = { breadcrumbSeparator: '›' };
+
+    expect(
+      separators(variant, { separator: { desktop: '/' } }, settings)
+    ).toEqual(expect.arrayContaining(['/']));
+    expect(
+      separators(variant, { separator: { desktop: '/' } }, settings).includes(
+        '›'
+      )
+    ).toBe(false);
+    expect(separators(variant, { separator: '|' }, settings)[0]).toBe('|');
+  });
+
+  it('keeps a stored empty separator empty', () => {
+    const seen = separators(
+      variant,
+      { separator: { desktop: '' } },
+      { breadcrumbSeparator: '›' }
+    );
+
+    expect(seen.length).toBeGreaterThan(0);
+    expect(seen.every((text) => text === '')).toBe(true);
+  });
+
+  it('falls back to "/" with no theme separator', () => {
+    expect(separators(variant, {}, null)[0]).toBe('/');
+    expect(separators(variant, {}, {})[0]).toBe('/');
+    expect(separators(variant, {}, { breadcrumbSeparator: '' })[0]).toBe('/');
+  });
+
+  it('ignores a theme separator that is not a separator', () => {
+    // Too long, blank, or not a string: none of them may reach the trail.
+    for (const breadcrumbSeparator of ['a very long separator', '   ', 42]) {
+      expect(separators(variant, {}, { breadcrumbSeparator })[0]).toBe('/');
+    }
+  });
+
+  it('trims the theme separator', () => {
+    expect(separators(variant, {}, { breadcrumbSeparator: ' > ' })[0]).toBe(
+      '>'
+    );
+  });
+});