@akinon/pz-theme 2.0.36-rc.0 → 2.0.36

package/src/utils/visibility-rules.test.ts

@@ -1,9 +1,11 @@
 import {
+  applyVisibilityRulesToSections,
   evaluateVisibilityRules,
   normalizeVisibilityRules,
   VisibilityRuleContext
 } from './visibility-rules';
 import { resetDevWarnCacheForTests } from './dev-warn';
+import type { Section } from '../theme-section';
 
 const makeContext = (
   overrides: Partial<VisibilityRuleContext> = {}
@@ -156,6 +158,583 @@ describe('evaluateVisibilityRules', () => {
   });
 });
 
+describe('data conditions', () => {
+  const pageContext = {
+    product: {
+      sku: 'TS-1',
+      stock: 3,
+      inStock: true,
+      attributes: { gender: 'Women', category: 'tops' },
+      tags: ['sale', 'new-season'],
+      images: [{ url: 'https://cdn.example.com/a.jpg' }]
+    },
+    listing: { totalCount: 0 },
+    category: { slug: 'kadin-ust-giyim' }
+  };
+
+  const evaluate = (
+    conditions: unknown,
+    overrides: Partial<VisibilityRuleContext> = {},
+    extraRules: Record<string, unknown> = {}
+  ) =>
+    evaluateVisibilityRules(
+      { enabled: true, dataConditions: conditions, ...extraRules },
+      makeContext({ pageContext, ...overrides })
+    );
+
+  it('the size guide picks its partial by gender AND category (default match mode)', () => {
+    expect(
+      evaluate([
+        { path: 'product.attributes.gender', operator: 'equals', value: 'women' },
+        { path: 'product.attributes.category', operator: 'equals', value: 'tops' }
+      ])
+    ).toBe(true);
+
+    expect(
+      evaluate([
+        { path: 'product.attributes.gender', operator: 'equals', value: 'women' },
+        { path: 'product.attributes.category', operator: 'equals', value: 'shoes' }
+      ])
+    ).toBe(false);
+  });
+
+  it('matches text case-insensitively, since the API says "Women"', () => {
+    expect(
+      evaluate([
+        { path: 'product.attributes.gender', operator: 'equals', value: 'WOMEN' }
+      ])
+    ).toBe(true);
+  });
+
+  it('drives the no-results page off a numeric zero', () => {
+    expect(
+      evaluate([{ path: 'listing.totalCount', operator: 'equals', value: '0' }])
+    ).toBe(true);
+    expect(
+      evaluate([{ path: 'listing.totalCount', operator: 'gt', value: '0' }])
+    ).toBe(false);
+  });
+
+  it('compares numbers as numbers, not as text', () => {
+    // '3' < '10' is false as text; the block depends on it being true.
+    expect(
+      evaluate([{ path: 'product.stock', operator: 'lt', value: '10' }])
+    ).toBe(true);
+    expect(
+      evaluate([{ path: 'product.stock', operator: 'gte', value: '3' }])
+    ).toBe(true);
+    expect(
+      evaluate([{ path: 'product.stock', operator: 'lte', value: '2' }])
+    ).toBe(false);
+  });
+
+  it('a numeric comparison against non-numeric data hides rather than guesses', () => {
+    expect(
+      evaluate([{ path: 'product.sku', operator: 'gt', value: '5' }])
+    ).toBe(false);
+    expect(
+      evaluate([{ path: 'product.stock', operator: 'gt', value: 'many' }])
+    ).toBe(false);
+  });
+
+  it('drives attribute layout off existence, including array membership', () => {
+    expect(
+      evaluate([{ path: 'product.attributes.gender', operator: 'exists' }])
+    ).toBe(true);
+    expect(
+      evaluate([{ path: 'product.attributes.fit', operator: 'exists' }])
+    ).toBe(false);
+    expect(
+      evaluate([{ path: 'product.tags', operator: 'contains', value: 'sale' }])
+    ).toBe(true);
+    expect(
+      evaluate([{ path: 'product.tags', operator: 'contains', value: 'outlet' }])
+    ).toBe(false);
+  });
+
+  it('walks indexes the same way bindings do', () => {
+    expect(
+      evaluate([{ path: 'product.images[0].url', operator: 'contains', value: 'cdn' }])
+    ).toBe(true);
+    expect(
+      evaluate([{ path: 'product.images[4].url', operator: 'exists' }])
+    ).toBe(false);
+  });
+
+  describe('[] — the shape the field picker offers for an array', () => {
+    // The picker walks arrays as `listing.products[].price`, so the evaluator
+    // has to answer for that shape or every array field it lists is a rule
+    // that hides the block forever.
+    const listingContext = {
+      listing: {
+        products: [
+          { sku: 'A', stock: 0, badge: '', price: { value: 10 } },
+          { sku: 'B', stock: 4, price: { value: 20 } }
+        ]
+      },
+      product: {
+        images: [
+          { url: 'https://cdn.example.com/a.jpg' },
+          { url: 'https://cdn.example.com/b.jpg' }
+        ],
+        tags: ['sale', 'new-season']
+      }
+    };
+
+    const evaluateOn = (
+      conditions: unknown,
+      pageContextOverride: Record<string, unknown> = listingContext,
+      extraRules: Record<string, unknown> = {}
+    ) =>
+      evaluateVisibilityRules(
+        { enabled: true, dataConditions: conditions, ...extraRules },
+        makeContext({ pageContext: pageContextOverride })
+      );
+
+    it('means "any element matches" for a comparison', () => {
+      expect(
+        evaluateOn([
+          { path: 'listing.products[].stock', operator: 'gt', value: '0' }
+        ])
+      ).toBe(true);
+      expect(
+        evaluateOn([
+          { path: 'listing.products[].stock', operator: 'gt', value: '99' }
+        ])
+      ).toBe(false);
+      expect(
+        evaluateOn([
+          { path: 'product.images[].url', operator: 'contains', value: 'cdn' }
+        ])
+      ).toBe(true);
+      expect(
+        evaluateOn([{ path: 'product.tags[]', operator: 'equals', value: 'sale' }])
+      ).toBe(true);
+    });
+
+    it('means "any element has it" for exists, and its exact dual for notExists', () => {
+      expect(
+        evaluateOn([{ path: 'listing.products[].price.value', operator: 'exists' }])
+      ).toBe(true);
+      // Only the first product carries `badge`, and it is empty: no element has one.
+      expect(
+        evaluateOn([{ path: 'listing.products[].badge', operator: 'exists' }])
+      ).toBe(false);
+      expect(
+        evaluateOn([{ path: 'listing.products[].badge', operator: 'notExists' }])
+      ).toBe(true);
+      expect(
+        evaluateOn([{ path: 'listing.products[].sku', operator: 'notExists' }])
+      ).toBe(false);
+    });
+
+    it('hides when the array is empty or missing', () => {
+      expect(
+        evaluateOn([{ path: 'listing.products[].sku', operator: 'exists' }], {
+          listing: { products: [] }
+        })
+      ).toBe(false);
+      expect(
+        evaluateOn([{ path: 'listing.products[].sku', operator: 'exists' }], {
+          listing: {}
+        })
+      ).toBe(false);
+    });
+
+    it('walks nested arrays', () => {
+      expect(
+        evaluateOn(
+          [{ path: 'listing.rows[][].sku', operator: 'equals', value: 'B' }],
+          { listing: { rows: [[{ sku: 'A' }], [{ sku: 'B' }]] } }
+        )
+      ).toBe(true);
+    });
+
+    it('reaches the same answer on the server and after client serialization', () => {
+      const rules = {
+        enabled: true,
+        dataConditions: [
+          { path: 'listing.products[].stock', operator: 'gt', value: '0' },
+          { path: 'listing.products[].badge', operator: 'notExists' }
+        ]
+      };
+
+      const serverAnswer = evaluateVisibilityRules(
+        rules,
+        makeContext({ pageContext: listingContext })
+      );
+      const clientAnswer = evaluateVisibilityRules(
+        rules,
+        makeContext({
+          pageContext: JSON.parse(JSON.stringify(listingContext))
+        })
+      );
+
+      expect(serverAnswer).toBe(true);
+      expect(clientAnswer).toBe(serverAnswer);
+    });
+  });
+
+  describe('a path the evaluator cannot read at all', () => {
+    beforeEach(() => {
+      resetDevWarnCacheForTests();
+      jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+    });
+
+    afterEach(() => {
+      (console.warn as jest.Mock).mockRestore();
+    });
+
+    const unreadable = [
+      'product.images[*].url',
+      'product.attributes.',
+      '.product.sku',
+      'product..sku',
+      'product[attributes].gender',
+      'product.__proto__.polluted',
+      'product.constructor.name'
+    ];
+
+    it('never satisfies a condition — not even notExists', () => {
+      unreadable.forEach(path => {
+        expect(evaluate([{ path, operator: 'exists' }])).toBe(false);
+        expect(evaluate([{ path, operator: 'notExists' }])).toBe(false);
+        expect(evaluate([{ path, operator: 'equals', value: 'women' }])).toBe(
+          false
+        );
+      });
+    });
+
+    it('says so in development instead of failing silently', () => {
+      evaluate([{ path: 'product.images[*].url', operator: 'exists' }]);
+
+      expect(console.warn).toHaveBeenCalledWith(
+        '[pz-theme:visibilityRules] Cannot read the field path "product.images[*].url"; the condition never passes (content stays hidden)'
+      );
+    });
+  });
+
+  describe('a path that reaches past the payload onto the prototype', () => {
+    // Naming __proto__/constructor/prototype is a blocklist, and the rest of
+    // Object.prototype answers the same way: every one of these resolves to a
+    // function, which is neither null nor empty, so `exists` would pass on
+    // every page ever rendered.
+    const inherited = [
+      'product.toString',
+      'product.valueOf',
+      'product.hasOwnProperty',
+      'product.isPrototypeOf',
+      'product.toLocaleString',
+      'product.propertyIsEnumerable'
+    ];
+
+    it('reads as absent rather than as a value present on every page', () => {
+      inherited.forEach(path => {
+        expect(evaluate([{ path, operator: 'exists' }])).toBe(false);
+        // Absent, not unreadable: the shape is fine, the payload lacks it.
+        expect(evaluate([{ path, operator: 'notExists' }])).toBe(true);
+        expect(evaluate([{ path, operator: 'equals', value: 'x' }])).toBe(false);
+      });
+    });
+
+    it('ignores a value inherited from a prototype the server would not serialize', () => {
+      const product = Object.create({ leaked: 'yes' }) as Record<string, unknown>;
+      product.sku = 'TS-1';
+
+      expect(
+        evaluateVisibilityRules(
+          {
+            enabled: true,
+            dataConditions: [{ path: 'product.leaked', operator: 'exists' }]
+          },
+          makeContext({ pageContext: { product } })
+        )
+      ).toBe(false);
+      expect(
+        evaluateVisibilityRules(
+          {
+            enabled: true,
+            dataConditions: [{ path: 'product.sku', operator: 'exists' }]
+          },
+          makeContext({ pageContext: { product } })
+        )
+      ).toBe(true);
+    });
+
+    it('still reads own members that share a name with a built-in', () => {
+      expect(
+        evaluateVisibilityRules(
+          {
+            enabled: true,
+            dataConditions: [
+              { path: 'product.images.length', operator: 'equals', value: '2' }
+            ]
+          },
+          makeContext({ pageContext: { product: { images: ['a', 'b'] } } })
+        )
+      ).toBe(true);
+    });
+  });
+
+  describe('a path that does not resolve', () => {
+    it('hides for every comparison operator — never "visible by accident"', () => {
+      const operators = ['equals', 'contains', 'gt', 'gte', 'lt', 'lte'];
+      operators.forEach(operator => {
+        expect(
+          evaluate([{ path: 'product.attributes.gendr', operator, value: '1' }])
+        ).toBe(false);
+      });
+    });
+
+    it('hides for notEquals too: absence is not a different value', () => {
+      expect(
+        evaluate([
+          { path: 'product.attributes.gendr', operator: 'notEquals', value: 'men' }
+        ])
+      ).toBe(false);
+    });
+
+    it('answers true only for notExists, the operator that asks about absence', () => {
+      expect(
+        evaluate([{ path: 'product.sizeChart', operator: 'notExists' }])
+      ).toBe(true);
+    });
+
+    it('treats an empty object as absent — no attributes means no attribute', () => {
+      expect(
+        evaluateVisibilityRules(
+          {
+            enabled: true,
+            dataConditions: [{ path: 'product.attributes', operator: 'exists' }]
+          },
+          makeContext({ pageContext: { product: { attributes: {} } } })
+        )
+      ).toBe(false);
+    });
+
+    it('treats an empty string and an empty array as absent', () => {
+      expect(
+        evaluateVisibilityRules(
+          {
+            enabled: true,
+            dataConditions: [{ path: 'product.badge', operator: 'exists' }]
+          },
+          makeContext({ pageContext: { product: { badge: '   ', tags: [] } } })
+        )
+      ).toBe(false);
+      expect(
+        evaluateVisibilityRules(
+          {
+            enabled: true,
+            dataConditions: [{ path: 'product.tags', operator: 'notExists' }]
+          },
+          makeContext({ pageContext: { product: { badge: '', tags: [] } } })
+        )
+      ).toBe(true);
+    });
+
+    it('hides when there is no page context at all (wrong page type)', () => {
+      expect(
+        evaluateVisibilityRules(
+          {
+            enabled: true,
+            dataConditions: [
+              { path: 'product.attributes.gender', operator: 'equals', value: 'women' }
+            ]
+          },
+          makeContext()
+        )
+      ).toBe(false);
+    });
+  });
+
+  it('supports any-of for per-category banners', () => {
+    const conditions = [
+      { path: 'category.slug', operator: 'equals', value: 'erkek' },
+      { path: 'category.slug', operator: 'equals', value: 'kadin-ust-giyim' }
+    ];
+
+    expect(evaluate(conditions, {}, { dataMatchMode: 'any' })).toBe(true);
+    expect(evaluate(conditions)).toBe(false);
+  });
+
+  it('ignores an unfinished row instead of blanking the block', () => {
+    expect(evaluate([{ path: '   ', operator: 'equals', value: 'women' }])).toBe(
+      true
+    );
+    expect(evaluate([{ operator: 'exists' }, 'nonsense', null])).toBe(true);
+  });
+
+  it('is skipped on the designer canvas so a hidden block stays styleable', () => {
+    const rules = {
+      enabled: true,
+      dataConditions: [
+        { path: 'product.attributes.gender', operator: 'equals', value: 'men' }
+      ]
+    };
+
+    expect(evaluateVisibilityRules(rules, makeContext({ pageContext }))).toBe(
+      false
+    );
+    expect(
+      evaluateVisibilityRules(
+        rules,
+        makeContext({ pageContext, isDesigner: true })
+      )
+    ).toBe(true);
+  });
+
+  it('still applies visitor conditions on the canvas', () => {
+    expect(
+      evaluateVisibilityRules(
+        {
+          enabled: true,
+          allowedBreakpoints: ['mobile'],
+          dataConditions: [{ path: 'product.sku', operator: 'exists' }]
+        },
+        makeContext({ pageContext, isDesigner: true, breakpoint: 'desktop' })
+      )
+    ).toBe(false);
+  });
+
+  it('reaches the same answer on the server and after client serialization', () => {
+    const rules = {
+      enabled: true,
+      dataMatchMode: 'all',
+      dataConditions: [
+        { path: 'product.attributes.gender', operator: 'equals', value: 'women' },
+        { path: 'product.stock', operator: 'gt', value: '0' },
+        { path: 'product.tags', operator: 'contains', value: 'sale' },
+        { path: 'product.sizeChart', operator: 'notExists' }
+      ]
+    };
+
+    // The client receives the page context as serialized props; a rule that
+    // answered differently after that round trip would hydrate a different tree.
+    const serverAnswer = evaluateVisibilityRules(
+      rules,
+      makeContext({ pageContext })
+    );
+    const clientAnswer = evaluateVisibilityRules(
+      rules,
+      makeContext({ pageContext: JSON.parse(JSON.stringify(pageContext)) })
+    );
+
+    expect(serverAnswer).toBe(true);
+    expect(clientAnswer).toBe(serverAnswer);
+  });
+
+  it('normalizes conditions to a stable shape', () => {
+    const rules = normalizeVisibilityRules({
+      enabled: true,
+      dataMatchMode: 'weird',
+      dataConditions: [
+        { path: '  product.sku  ', operator: 'unsupported', value: 12 },
+        { path: '' }
+      ]
+    });
+
+    expect(rules.dataMatchMode).toBe('all');
+    expect(rules.dataConditions).toEqual([
+      { path: 'product.sku', operator: 'exists', value: '12' }
+    ]);
+  });
+});
+
+describe('nothing that renders today changes', () => {
+  const legacyRuleShapes: unknown[] = [
+    undefined,
+    null,
+    {},
+    { enabled: false, authState: 'authenticated' },
+    { enabled: true },
+    { enabled: true, authState: 'guest' },
+    { enabled: true, authState: 'authenticated' },
+    { enabled: true, allowedBreakpoints: ['mobile'] },
+    { enabled: true, allowedBreakpoints: ['desktop'] },
+    { enabled: true, allowedLocales: ['en'] },
+    { enabled: true, allowedLocales: ['tr'] },
+    { enabled: true, allowedCurrencies: ['usd'] },
+    { enabled: true, allowedCurrencies: ['TRY'] },
+    { enabled: true, pathnameMatchType: 'equals', pathnameValue: '/' },
+    { enabled: true, pathnameMatchType: 'startsWith', pathnameValue: '/account' },
+    { enabled: true, pathnameMatchType: 'contains', pathnameValue: 'x' },
+    { enabled: true, pathnameMatchType: 'equals', pathnameValue: '' },
+    { enabled: true, queryParamKey: 'campaign' },
+    { enabled: true, queryParamKey: 'campaign', queryParamValue: 'x' },
+    'malformed',
+    [1, 2, 3]
+  ];
+
+  it('a rule authored before data conditions answers the same with data present', () => {
+    // Page context and designer mode are new inputs; for every rule shape that
+    // exists in the wild today they must be inert.
+    legacyRuleShapes.forEach(rules => {
+      const before = evaluateVisibilityRules(rules, makeContext());
+      const withData = evaluateVisibilityRules(
+        rules,
+        makeContext({
+          pageContext: { product: { sku: 'X' }, listing: { totalCount: 12 } }
+        })
+      );
+      const withDesigner = evaluateVisibilityRules(
+        rules,
+        makeContext({
+          pageContext: { product: { sku: 'X' } },
+          isDesigner: true
+        })
+      );
+
+      expect([withData, withDesigner]).toEqual([before, before]);
+    });
+  });
+
+  it('leaves the section tree byte-identical when no rule opts in', () => {
+    const sections: Section[] = [
+      {
+        id: 'section-1',
+        type: 'default',
+        name: 'hero',
+        label: 'Hero',
+        order: 0,
+        hidden: false,
+        properties: {},
+        styles: {},
+        blocks: [
+          {
+            id: 'block-1',
+            type: 'text',
+            label: 'Title',
+            order: 0,
+            hidden: false,
+            properties: {},
+            styles: {},
+            blocks: [
+              {
+                id: 'block-1-1',
+                type: 'text',
+                label: 'Nested',
+                order: 0,
+                hidden: true,
+                properties: {},
+                styles: {},
+                blocks: []
+              }
+            ]
+          }
+        ]
+      }
+    ] as unknown as Section[];
+
+    const applied = applyVisibilityRulesToSections(
+      sections,
+      makeContext({ pageContext: { product: { sku: 'X' } } })
+    );
+
+    expect(JSON.stringify(applied)).toBe(JSON.stringify(sections));
+  });
+});
+
 describe('normalizeVisibilityRules — malformed input', () => {
   let warnSpy: jest.SpyInstance;