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

package/src/__tests__/row-visibility.test.ts

@@ -0,0 +1,672 @@
+import { buildIteratorBlock } from '../utils/iterator-utils';
+import {
+  isVisibleForItem,
+  readRowVisibility
+} from '../utils/row-visibility';
+import type { Block } from '../theme-block';
+
+const rowWith = (properties: Record<string, unknown>): Block =>
+  ({
+    id: 'card',
+    type: 'group',
+    label: 'Card',
+    order: 0,
+    hidden: false,
+    value: '',
+    properties: {},
+    styles: {},
+    blocks: [
+      {
+        id: 'badge',
+        type: 'text',
+        label: 'Badge',
+        order: 0,
+        hidden: false,
+        value: '',
+        properties,
+        styles: {},
+        blocks: []
+      }
+    ]
+  } as Block);
+
+const expand = (properties: Record<string, unknown>, items: Record<string, unknown>[]) =>
+  buildIteratorBlock({
+    iteratorBlock: {
+      id: 'grid',
+      type: 'product-grid',
+      label: 'Grid',
+      order: 0,
+      hidden: false,
+      value: '',
+      properties: {},
+      styles: {},
+      isIterator: true,
+      blocks: [rowWith(properties)]
+    } as Block,
+    items,
+    isDesigner: false
+  });
+
+const badgeHidden = (result: ReturnType<typeof expand>) =>
+  (result.blocks || []).map((clone) => (clone.blocks || [])[0]?.hidden);
+
+describe('reading the rule', () => {
+  it('treats an unset or always rule as no rule', () => {
+    expect(readRowVisibility({})).toBeNull();
+    expect(readRowVisibility({ visibleWhenMode: 'always' })).toBeNull();
+  });
+
+  it('unwraps the responsive wrapper', () => {
+    const rule = readRowVisibility({
+      visibleWhenMode: { desktop: 'not-empty' },
+      visibleWhenField: { desktop: 'item.badge' }
+    });
+
+    expect(rule).toEqual({ mode: 'not-empty', field: 'item.badge', value: '' });
+  });
+});
+
+describe('evaluating the rule', () => {
+  const rule = (mode: string, field = 'item.badge', value?: string) =>
+    ({ mode, field, value } as never);
+
+  it('shows when the field has content', () => {
+    expect(isVisibleForItem(rule('not-empty'), { badge: 'OUTLET' })).toBe(true);
+    expect(isVisibleForItem(rule('not-empty'), { badge: '' })).toBe(false);
+    expect(isVisibleForItem(rule('not-empty'), {})).toBe(false);
+    expect(isVisibleForItem(rule('not-empty'), { badge: [] })).toBe(false);
+  });
+
+  it('supports the inverse', () => {
+    expect(isVisibleForItem(rule('empty'), { badge: '' })).toBe(true);
+    expect(isVisibleForItem(rule('empty'), { badge: 'OUTLET' })).toBe(false);
+  });
+
+  it('reads booleans the way commerce sends them', () => {
+    expect(isVisibleForItem(rule('truthy', 'item.hasDiscount'), { hasDiscount: true })).toBe(true);
+    expect(isVisibleForItem(rule('truthy', 'item.hasDiscount'), { hasDiscount: false })).toBe(false);
+    // Commerce and the editor both stringify booleans in places.
+    expect(isVisibleForItem(rule('truthy', 'item.hasDiscount'), { hasDiscount: 'false' })).toBe(false);
+  });
+
+  it('compares a value', () => {
+    expect(isVisibleForItem(rule('equals', 'item.type', 'outlet'), { type: 'outlet' })).toBe(true);
+    expect(isVisibleForItem(rule('not-equals', 'item.type', 'outlet'), { type: 'outlet' })).toBe(false);
+  });
+
+  it('walks a nested path like the bindings do', () => {
+    expect(
+      isVisibleForItem(rule('not-empty', 'item.basketOffers[0].label'), {
+        basketOffers: [{ label: 'SEPETTE 2.999 TL' }]
+      })
+    ).toBe(true);
+  });
+
+  it('shows the element when the rule is unusable', () => {
+    // A misconfigured condition must never silently empty a page.
+    expect(isVisibleForItem(rule('not-empty', ''), {})).toBe(true);
+    expect(isVisibleForItem(null, {})).toBe(true);
+  });
+});
+
+describe('per item inside a repeated row', () => {
+  it('hides the element only on the items that fail', () => {
+    const result = expand(
+      { visibleWhenMode: 'not-empty', visibleWhenField: 'item.badge' },
+      [{ badge: 'OUTLET' }, { badge: '' }, { badge: 'ONLINE ÖZEL' }]
+    );
+
+    // The passing rows keep the template's own value, the failing one flips.
+    expect(badgeHidden(result)).toEqual([false, true, false]);
+  });
+
+  it('leaves rows untouched when no rule is set', () => {
+    const result = expand({}, [{ badge: 'OUTLET' }, { badge: '' }]);
+
+    expect(badgeHidden(result)).toEqual([false, false]);
+  });
+
+  it('does not hide anything in the designer placeholder rows', () => {
+    // With no data every field is empty; hiding would leave the canvas blank
+    // and the designer with nothing to arrange.
+    const result = expand(
+      { visibleWhenMode: 'not-empty', visibleWhenField: 'item.badge' },
+      [{}, {}]
+    );
+
+    expect(badgeHidden(result)).toEqual([false, false]);
+  });
+});
+
+describe('per entry inside a nested repeat', () => {
+  // A colour strip inside a product card: the rule on a swatch names a colour
+  // field, so it has to be answered by the colour it is drawn for. Answered by
+  // the product instead it decides every swatch at once — and once the outer
+  // row has written `hidden`, the nested repeat has no way to take it back.
+  const swatchStrip = (properties: Record<string, unknown>): Block =>
+    ({
+      id: 'strip',
+      type: 'group',
+      label: 'Colours',
+      order: 0,
+      hidden: false,
+      value: '',
+      isIterator: true,
+      iteratorDataPath: 'item.colors',
+      properties: { iteratorDataPath: 'item.colors' },
+      styles: {},
+      blocks: [
+        {
+          id: 'swatch',
+          type: 'text',
+          label: 'Swatch',
+          order: 0,
+          hidden: false,
+          value: '',
+          properties,
+          styles: {},
+          blocks: []
+        }
+      ]
+    } as Block);
+
+  const expandStrip = (
+    properties: Record<string, unknown>,
+    row: Record<string, unknown>
+  ) => {
+    const outer = buildIteratorBlock({
+      iteratorBlock: {
+        id: 'grid',
+        type: 'group',
+        label: 'Grid',
+        order: 0,
+        hidden: false,
+        value: '',
+        properties: {},
+        styles: {},
+        isIterator: true,
+        blocks: [
+          {
+            id: 'card',
+            type: 'group',
+            label: 'Card',
+            order: 0,
+            hidden: false,
+            value: '',
+            properties: {},
+            styles: {},
+            blocks: [swatchStrip(properties)]
+          } as Block
+        ]
+      } as Block,
+      items: [row],
+      isDesigner: false
+    });
+
+    const expanded = buildIteratorBlock({
+      iteratorBlock: ((outer.blocks || [])[0].blocks || [])[0]
+    });
+
+    return (expanded.blocks || []).map((clone) => clone.hidden);
+  };
+
+  it('reads the entry the swatch is drawn for, not the product row', () => {
+    expect(
+      expandStrip(
+        { visibleWhenMode: 'not-empty', visibleWhenField: 'item.stock' },
+        { colors: [{ label: 'Red', stock: 3 }, { label: 'Blue' }] }
+      )
+    ).toEqual([false, true]);
+  });
+
+  it('does not let a product field decide every swatch at once', () => {
+    // The product carries `stock` too. Answered by the product, both swatches
+    // show — including the colour that is out of stock.
+    expect(
+      expandStrip(
+        { visibleWhenMode: 'not-empty', visibleWhenField: 'item.stock' },
+        { stock: 12, colors: [{ label: 'Red', stock: 3 }, { label: 'Blue' }] }
+      )
+    ).toEqual([false, true]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Numeric / field / percentage comparison.
+// ---------------------------------------------------------------------------
+
+const numericRule = (
+  mode: string,
+  value: string,
+  extra: Record<string, unknown> = {},
+  field = 'item.previousPrice'
+) => ({ mode, field, value, ...extra } as never);
+
+describe('a rule that sets none of the new keys', () => {
+  // The default-unchanged proof: every mode that existed before, evaluated
+  // through a rule carrying only the three original keys, over the same data.
+  // If any new branch leaked into an old mode, one of these flips.
+  const legacyCases: [string, string, Record<string, unknown>, boolean][] = [
+    ['not-empty', '', { badge: 'OUTLET' }, true],
+    ['not-empty', '', { badge: '' }, false],
+    ['not-empty', '', { badge: 0 }, true],
+    ['empty', '', { badge: '' }, true],
+    ['empty', '', { badge: 'OUTLET' }, false],
+    ['truthy', '', { badge: '1' }, true],
+    ['truthy', '', { badge: '0' }, false],
+    ['truthy', '', { badge: 'false' }, false],
+    ['falsy', '', { badge: '' }, true],
+    ['falsy', '', { badge: 'x' }, false],
+    ['equals', '5', { badge: 5 }, true],
+    ['equals', '5', { badge: '5' }, true],
+    ['equals', '5.0', { badge: 5 }, false],
+    ['equals', '', {}, true],
+    ['not-equals', '5', { badge: 5 }, false],
+    ['not-equals', '5.0', { badge: 5 }, true],
+    ['always', '', { badge: '' }, true]
+  ];
+
+  it.each(legacyCases)(
+    '%s against %p keeps its result',
+    (mode, value, item, expected) => {
+      expect(
+        isVisibleForItem(
+          { mode, field: 'item.badge', value } as never,
+          item as Record<string, unknown>
+        )
+      ).toBe(expected);
+    }
+  );
+
+  it('still reads back as exactly the three keys it always had', () => {
+    // `equals` on a numeric-looking string stayed a string comparison: '5.0'
+    // and 5 differ as text and must keep differing.
+    const rule = readRowVisibility({
+      visibleWhenMode: 'equals',
+      visibleWhenField: 'item.type',
+      visibleWhenValue: 'outlet'
+    });
+
+    expect(Object.keys(rule || {}).sort()).toEqual(['field', 'mode', 'value']);
+    expect(rule).toEqual({
+      mode: 'equals',
+      field: 'item.type',
+      value: 'outlet'
+    });
+  });
+});
+
+describe('reading the two-operand keys', () => {
+  it('carries the field operand and the threshold only when set', () => {
+    expect(
+      readRowVisibility({
+        visibleWhenMode: 'percent-above',
+        visibleWhenField: 'item.previousPrice',
+        visibleWhenValue: 'item.price',
+        visibleWhenCompareTo: 'field',
+        visibleWhenThreshold: '5'
+      })
+    ).toEqual({
+      mode: 'percent-above',
+      field: 'item.previousPrice',
+      value: 'item.price',
+      compareTo: 'field',
+      threshold: '5'
+    });
+  });
+
+  it('ignores a compare-to that is not the field opt-in', () => {
+    const rule = readRowVisibility({
+      visibleWhenMode: 'greater-than',
+      visibleWhenField: 'item.price',
+      visibleWhenValue: '100',
+      visibleWhenCompareTo: 'value'
+    });
+
+    expect(rule?.compareTo).toBeUndefined();
+  });
+
+  it('accepts a numeric threshold and unwraps it responsively', () => {
+    expect(
+      readRowVisibility({
+        visibleWhenMode: 'percent-above',
+        visibleWhenField: 'item.previousPrice',
+        visibleWhenValue: 'item.price',
+        visibleWhenCompareTo: { desktop: 'field' },
+        visibleWhenThreshold: { desktop: 5 }
+      })
+    ).toMatchObject({ compareTo: 'field', threshold: '5' });
+  });
+});
+
+describe('comparing numbers', () => {
+  it('orders against a typed value', () => {
+    expect(isVisibleForItem(numericRule('greater-than', '100'), { previousPrice: 101 })).toBe(true);
+    expect(isVisibleForItem(numericRule('greater-than', '100'), { previousPrice: 100 })).toBe(false);
+    expect(isVisibleForItem(numericRule('greater-or-equal', '100'), { previousPrice: 100 })).toBe(true);
+    expect(isVisibleForItem(numericRule('less-than', '100'), { previousPrice: 99 })).toBe(true);
+    expect(isVisibleForItem(numericRule('less-than', '100'), { previousPrice: 100 })).toBe(false);
+    expect(isVisibleForItem(numericRule('less-or-equal', '100'), { previousPrice: 100 })).toBe(true);
+  });
+
+  it('refuses to compare when either side is not a number', () => {
+    // The whole point: "abc" must not become 0 and switch the row on.
+    expect(isVisibleForItem(numericRule('greater-than', '100'), { previousPrice: 'abc' })).toBe(false);
+    expect(isVisibleForItem(numericRule('less-than', '100'), { previousPrice: 'abc' })).toBe(false);
+    expect(isVisibleForItem(numericRule('greater-than', 'abc'), { previousPrice: 500 })).toBe(false);
+    expect(isVisibleForItem(numericRule('less-than', '100'), { previousPrice: '' })).toBe(false);
+    expect(isVisibleForItem(numericRule('less-than', '100'), { previousPrice: false })).toBe(false);
+    expect(isVisibleForItem(numericRule('less-than', '100'), {})).toBe(false);
+  });
+
+  it('reads the money strings a listing row actually publishes', () => {
+    // `price` / `previousPrice` reach the row already formatted, so Number()
+    // would call every one of them NaN.
+    expect(
+      isVisibleForItem(numericRule('greater-than', '1000'), {
+        previousPrice: '1.299,90 TL'
+      })
+    ).toBe(true);
+  });
+
+  it('shows the element while the second box is still empty', () => {
+    expect(isVisibleForItem(numericRule('greater-than', ''), { previousPrice: 5 })).toBe(true);
+    expect(isVisibleForItem(numericRule('greater-than', '   '), { previousPrice: 5 })).toBe(true);
+  });
+});
+
+describe('comparing against another field', () => {
+  const withField = (mode: string, other: string) =>
+    numericRule(mode, other, { compareTo: 'field' });
+
+  const row = {
+    price: '999,90 TL',
+    previousPrice: '1.299,90 TL',
+    retailPrice: '1.499,90 TL'
+  };
+
+  it('states "previous price is higher than the current price"', () => {
+    expect(isVisibleForItem(withField('greater-than', 'item.price'), row)).toBe(true);
+    expect(isVisibleForItem(withField('less-than', 'item.price'), row)).toBe(false);
+  });
+
+  it('hides the caption when the named field is missing on that row', () => {
+    expect(
+      isVisibleForItem(withField('greater-than', 'item.price'), { previousPrice: 10 })
+    ).toBe(false);
+  });
+
+  it('does not read the path as a literal', () => {
+    // Without the opt-in the same rule compares against the text
+    // "item.price", which is not a number — so it refuses.
+    expect(
+      isVisibleForItem(numericRule('greater-than', 'item.price'), row)
+    ).toBe(false);
+  });
+
+  it('also serves the text comparisons', () => {
+    expect(
+      isVisibleForItem(
+        { mode: 'equals', field: 'item.a', value: 'item.b', compareTo: 'field' } as never,
+        { a: 'X', b: 'X' }
+      )
+    ).toBe(true);
+    expect(
+      isVisibleForItem(
+        { mode: 'not-equals', field: 'item.a', value: 'item.b', compareTo: 'field' } as never,
+        { a: 'X', b: 'Y' }
+      )
+    ).toBe(true);
+  });
+});
+
+describe('comparing by percentage', () => {
+  const percentRule = (mode: string, threshold: string) =>
+    numericRule(mode, 'item.price', { compareTo: 'field', threshold });
+
+  it('applies the brand\'s 5% threshold', () => {
+    // 1.299,90 is 30% above 999,90 — well past the threshold.
+    expect(
+      isVisibleForItem(percentRule('percent-above', '5'), {
+        price: '999,90 TL',
+        previousPrice: '1.299,90 TL'
+      })
+    ).toBe(true);
+
+    // 1.020,00 is 2% above 1.000,00 — the caption stays off.
+    expect(
+      isVisibleForItem(percentRule('percent-above', '5'), {
+        price: '1.000,00 TL',
+        previousPrice: '1.020,00 TL'
+      })
+    ).toBe(false);
+  });
+
+  it('measures the gap against the other side, in both directions', () => {
+    expect(isVisibleForItem(percentRule('percent-above', '5'), { price: 100, previousPrice: 105 })).toBe(true);
+    expect(isVisibleForItem(percentRule('percent-below', '5'), { price: 100, previousPrice: 95 })).toBe(true);
+    expect(isVisibleForItem(percentRule('percent-below', '5'), { price: 100, previousPrice: 96 })).toBe(false);
+  });
+
+  it('treats an unset threshold as "by any amount"', () => {
+    expect(
+      isVisibleForItem(numericRule('percent-above', 'item.price', { compareTo: 'field' }), {
+        price: 100,
+        previousPrice: 100.5
+      })
+    ).toBe(true);
+  });
+
+  it('refuses a percentage of zero', () => {
+    expect(isVisibleForItem(percentRule('percent-above', '5'), { price: 0, previousPrice: 10 })).toBe(false);
+  });
+
+  it('falls back to "any difference" when the threshold is mistyped', () => {
+    // Config the designer has not finished. The rule keeps working — it just
+    // loses the bar it could not read — rather than turning into "every row",
+    // which would print the caption on a product with no discount at all.
+    expect(
+      isVisibleForItem(percentRule('percent-above', 'five'), {
+        price: 1,
+        previousPrice: 100
+      })
+    ).toBe(true);
+
+    expect(
+      isVisibleForItem(percentRule('percent-above', 'five'), {
+        price: 100,
+        previousPrice: 100
+      })
+    ).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Boundaries. The table above asserts the middle of each range; a caption that
+// claims a discount is decided at the edges — equality, zero, a negative gap,
+// a zero divisor and a non-numeric side.
+// ---------------------------------------------------------------------------
+
+describe('comparison boundaries', () => {
+  // Both sides are fields on the row, which is how the shipped panel defaults
+  // wire a price caption: field item.retailPrice, compare to field item.price.
+  const boundaryRule = (mode: string, threshold?: string) =>
+    ({
+      mode,
+      field: 'item.left',
+      value: 'item.right',
+      compareTo: 'field',
+      ...(threshold === undefined ? {} : { threshold })
+    } as never);
+
+  const evaluate = (
+    mode: string,
+    left: unknown,
+    right: unknown,
+    threshold?: string
+  ) => isVisibleForItem(boundaryRule(mode, threshold), { left, right });
+
+  const cases: [string, unknown, unknown, string | undefined, boolean][] = [
+    // Equality. `>=` / `<=` include it by name; nothing else may.
+    ['greater-than', 100, 100, undefined, false],
+    ['greater-or-equal', 100, 100, undefined, true],
+    ['less-than', 100, 100, undefined, false],
+    ['less-or-equal', 100, 100, undefined, true],
+    // A full-price product: commerce sends retail_price === price, and the
+    // Percentage box is empty because that is the panel's default state.
+    ['percent-above', '₺999,90', '₺999,90', undefined, false],
+    ['percent-below', '₺999,90', '₺999,90', undefined, false],
+    ['percent-above', 100, 100, '0', false],
+    ['percent-below', 100, 100, '0', false],
+
+    // Zero on either side.
+    ['greater-than', 0, 0, undefined, false],
+    ['greater-or-equal', 0, 0, undefined, true],
+    ['greater-than', 0, -1, undefined, true],
+    ['less-than', -5, 0, undefined, true],
+    // Nothing is a percentage of zero, in either direction.
+    ['percent-above', 10, 0, undefined, false],
+    ['percent-below', -10, 0, undefined, false],
+    ['percent-above', 0, 0, undefined, false],
+    ['percent-below', 0, 0, undefined, false],
+    // Zero on the measured side is still a real gap against a non-zero base.
+    ['percent-below', 0, 100, undefined, true],
+
+    // A negative gap must not satisfy the opposite direction.
+    ['percent-above', 95, 100, undefined, false],
+    ['percent-below', 105, 100, undefined, false],
+    ['percent-above', 95, 100, '5', false],
+    ['percent-below', 105, 100, '5', false],
+    // Negative operands compare on the same axis: -5 is 50% above -10.
+    ['percent-above', -5, -10, undefined, true],
+    ['percent-below', -10, -5, undefined, true],
+
+    // The threshold itself, exactly on and just under.
+    ['percent-above', 105, 100, '5', true],
+    ['percent-above', 104.9, 100, '5', false],
+    ['percent-below', 95, 100, '5', true],
+    ['percent-below', 95.1, 100, '5', false],
+    // "By any amount" still means any real gap, however small.
+    ['percent-above', 100.5, 100, undefined, true],
+    ['percent-below', 99.5, 100, undefined, true],
+
+    // A non-numeric operand on either side refuses, it never coerces to 0.
+    ['greater-than', 'abc', 100, undefined, false],
+    ['greater-than', 100, 'abc', undefined, false],
+    ['less-or-equal', '', 100, undefined, false],
+    ['less-or-equal', 100, '', undefined, false],
+    ['greater-or-equal', false, 100, undefined, false],
+    ['greater-or-equal', 100, false, undefined, false],
+    ['percent-above', 'abc', 100, undefined, false],
+    ['percent-above', 100, 'abc', undefined, false],
+    ['percent-below', 'abc', 100, undefined, false],
+    ['percent-below', 100, 'abc', undefined, false],
+    ['percent-above', undefined, 100, undefined, false],
+    ['percent-above', 100, undefined, undefined, false],
+    ['percent-below', null, 100, undefined, false],
+    ['percent-below', 100, null, undefined, false]
+  ];
+
+  it.each(cases)(
+    '%s of %p against %p at threshold %p',
+    (mode, left, right, threshold, expected) => {
+      expect(evaluate(mode, left, right, threshold)).toBe(expected);
+    }
+  );
+
+  it('never satisfies both percent directions at once', () => {
+    const pairs: [unknown, unknown][] = [
+      ['₺999,90', '₺999,90'],
+      [100, 100],
+      [0, 0],
+      [0, 100],
+      [100, 0],
+      [105, 100],
+      [95, 100],
+      [-5, -10],
+      [-10, -5],
+      ['abc', 100]
+    ];
+
+    for (const [left, right] of pairs) {
+      // 'five' is in the list because an unreadable box used to bypass the
+      // gap floor entirely and satisfy both directions on a full-price row.
+      for (const threshold of [undefined, '0', '5', '-5', 'five']) {
+        const above = evaluate('percent-above', left, right, threshold);
+        const below = evaluate('percent-below', left, right, threshold);
+
+        expect(above && below).toBe(false);
+      }
+    }
+  });
+
+  it('degrades a mistyped threshold to "any difference", not to "always"', () => {
+    // An unreadable box is a config problem, but it must not be a licence to
+    // print a discount caption on a product whose two prices are identical —
+    // which is the same lie the gap floor exists to refuse.
+    expect(evaluate('percent-above', 100, 100, 'five')).toBe(false);
+    expect(evaluate('percent-below', 100, 100, 'five')).toBe(false);
+    // A real gap still shows, so a typo never empties the page.
+    expect(evaluate('percent-above', 105, 100, 'five')).toBe(true);
+    expect(evaluate('percent-below', 95, 100, 'five')).toBe(true);
+  });
+
+  it('ignores a threshold left behind by an ordering mode', () => {
+    // The panel stops rendering the Percentage box once the mode is no longer
+    // a percent form, but the stored property survives the switch. A value the
+    // comparison never uses must not be able to decide it.
+    expect(evaluate('greater-than', 200, 100, 'five')).toBe(true);
+    expect(evaluate('greater-than', 100, 200, 'five')).toBe(false);
+    expect(evaluate('less-or-equal', 100, 100, 'five')).toBe(true);
+    expect(evaluate('greater-than', 100, 100, '99')).toBe(false);
+  });
+
+  it('still needs a real gap when the threshold is negative', () => {
+    // A negative "how far apart" is meaningless; it must not become a licence
+    // to print the caption on a product whose two prices are identical.
+    expect(evaluate('percent-above', 100, 100, '-5')).toBe(false);
+    expect(evaluate('percent-below', 100, 100, '-5')).toBe(false);
+    expect(evaluate('percent-above', 95, 100, '-5')).toBe(false);
+  });
+});
+
+describe('the price caption rule, end to end', () => {
+  it('prints "lowest price in 30 days" only on the rows that earn it', () => {
+    const result = expand(
+      {
+        visibleWhenMode: 'percent-above',
+        visibleWhenField: 'item.previousPrice',
+        visibleWhenValue: 'item.price',
+        visibleWhenCompareTo: 'field',
+        visibleWhenThreshold: '5'
+      },
+      [
+        { price: '999,90 TL', previousPrice: '1.299,90 TL' },
+        { price: '1.000,00 TL', previousPrice: '1.020,00 TL' },
+        { price: '999,90 TL', previousPrice: '899,90 TL' },
+        { price: '999,90 TL' }
+      ]
+    );
+
+    expect(badgeHidden(result)).toEqual([false, true, true, true]);
+  });
+
+  it('prints "advantage price" on the mirrored rows', () => {
+    const result = expand(
+      {
+        visibleWhenMode: 'less-than',
+        visibleWhenField: 'item.previousPrice',
+        visibleWhenValue: 'item.price',
+        visibleWhenCompareTo: 'field'
+      },
+      [
+        { price: '999,90 TL', previousPrice: '1.299,90 TL' },
+        { price: '999,90 TL', previousPrice: '899,90 TL' },
+        { price: '999,90 TL' }
+      ]
+    );
+
+    expect(badgeHidden(result)).toEqual([true, false, true]);
+  });
+});