@ordergroove/offers 2.45.6 → 2.46.1-alpha-PR-1285-2.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.45.6",
+  "version": "2.46.1-alpha-PR-1285-2.53+40747106",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -46,8 +46,8 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.9.8",
+    "@ordergroove/offers-templates": "^0.10.0",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "60f759b8f2452b4569e6e5d0f6c8e06c96581d8e"
+  "gitHead": "407471063d9ba2bbeac751d0cd76bc46ab2ee279"
 }

package/src/components/Offer.js

@@ -76,7 +76,9 @@ export class Offer extends TemplateElement {
       productFrequency: { type: String },
       isCart: { type: Boolean, attribute: 'cart' },
       optedin: { type: Object },
-      variationId: { type: String }
+      variationId: { type: String },
+      /** Attribute to force reading prices from the Offer response instead of the selling plan. Only used for testing. */
+      overrideSellingPlanPrice: { type: Boolean, attribute: 'dev-override-selling-plan-price' }
     };
   }
 

package/src/components/Price.js

@@ -3,7 +3,11 @@ import { connect } from '../core/connect';
 
 import { withProduct } from '../core/resolveProperties';
 import { TemplateElement } from '../core/base';
-import { makeProductDefaultFrequencySelector, makeProductFrequencyOptedInSelector } from '../core/selectors';
+import {
+  makeDiscountedProductPriceSelector,
+  makeProductDefaultFrequencySelector,
+  makeProductFrequencyOptedInSelector
+} from '../core/selectors';
 import { safeProductId } from '../core/utils';
 
 export class Price extends withProduct(TemplateElement) {
@@ -13,9 +17,13 @@ export class Price extends withProduct(TemplateElement) {
       regular: { type: Boolean, reflect: true },
       subscription: { type: Boolean, reflect: true },
       discount: { type: Boolean, reflect: true },
+      /** Force displaying the pay-as-you-go price. This is relevant when there is a prepaid plan that the user has opted into, and you still want to display the pay-as-you-go price for comparison */
       payAsYouGo: { type: Boolean, reflect: true, attribute: 'pay-as-you-go' },
       frequency: { type: Object },
-      productPlans: { type: Object }
+      /** If Shopify, this is derived from the selling plans attached to the product */
+      productPlans: { type: Object },
+      /** The discounted price, as calculated from the Offers API response */
+      discountedProductPriceFromOffers: { type: Object }
     };
   }
 
@@ -46,17 +54,28 @@ export class Price extends withProduct(TemplateElement) {
     const frequency = this.frequency || this.configDefaultFrequency || this.offer?.defaultFrequency;
     const plans = this.productPlans[realProductId] || [];
 
-    if (this.payAsYouGo) {
-      const payAsYouGoPlan = plans.find(plan => plan.prepaidShipments === null || plan.prepaidShipments === undefined);
-      if (!payAsYouGoPlan) return '';
-      return payAsYouGoPlan.subscriptionPrice;
-    }
+    let currentPlan = this.payAsYouGo
+      ? plans.find(plan => plan.prepaidShipments === null || plan.prepaidShipments === undefined)
+      : plans.find(plan => plan.frequency === frequency);
 
-    const currentPlan = plans.find(plan => plan.frequency === frequency);
     if (!currentPlan) return '';
-    const { regularPrice, discountRate, subscriptionPrice } = currentPlan;
 
-    if (subscriptionPrice === regularPrice) return '';
+    // default to pulling from the selling plan
+    let { regularPrice, discountRate, subscriptionPrice } = currentPlan;
+    // if the selling plan has no price adjustments, then use the offer response to determine the discounted price
+    // this will be true for merchants on standardized offer profiles
+    // we still rely on the selling plan for prepaid subscriptions, for simplicity
+    if (
+      // overrideSellingPlanPrice is a dev flag to force using the offer price for testing purposes
+      (currentPlan.hasPriceAdjustments === false || this.offer?.overrideSellingPlanPrice) &&
+      !currentPlan.prepaidShipments
+    ) {
+      ({ regularPrice, discountRate, subscriptionPrice } = this.discountedProductPriceFromOffers);
+    }
+
+    // if payAsYouGo, always show the price even if no discount
+    // it's unclear if this was the original intention, but preserving existing behavior
+    if (subscriptionPrice === regularPrice && !this.payAsYouGo) return '';
 
     if (this.regular) {
       return regularPrice;
@@ -82,7 +101,8 @@ export class Price extends withProduct(TemplateElement) {
 const mapStateToProps = (state, ownProps) => ({
   productPlans: state.productPlans,
   configDefaultFrequency: makeProductDefaultFrequencySelector(ownProps.product?.id)(state),
-  frequency: makeProductFrequencyOptedInSelector(ownProps.product)(state)
+  frequency: makeProductFrequencyOptedInSelector(ownProps.product)(state),
+  discountedProductPriceFromOffers: makeDiscountedProductPriceSelector(ownProps.product?.id)(state)
 });
 
 export default connect(mapStateToProps)(Price);

package/src/components/Tooltip.js

@@ -1,9 +1,32 @@
 import { LitElement, html, css } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+
+const ACTIVATION_TYPES = {
+  AUTOMATIC: 'automatic',
+  MANUAL: 'manual'
+};
 
 export class Tooltip extends LitElement {
+  constructor() {
+    super();
+    this.triggerLabel = 'Show tooltip';
+    this.open = false;
+    /** Default is "automatic" for backwards compatibility with existing templates */
+    this.activationType = ACTIVATION_TYPES.AUTOMATIC;
+  }
+
   static get properties() {
     return {
-      placement: { type: String, default: 'bottom' }
+      placement: { type: String, default: 'bottom' },
+      /** Set the aria-label attribute of the trigger. */
+      triggerLabel: { type: String, attribute: 'trigger-label' },
+      /**
+       * "automatic" - show tooltip on hover and focus
+       * "manual" - show tooltip on hover and click
+       */
+      activationType: { type: String, attribute: 'activation-type' },
+      /** Whether the tooltip is showing. Internal property; only here so that we re-render when it changes */
+      open: { type: Boolean, attribute: false }
     };
   }
 
@@ -19,11 +42,27 @@ export class Tooltip extends LitElement {
         z-index: 9;
       }
 
+      /* reset default button styles */
+      button.trigger {
+        all: unset;
+      }
+
+      /* do not reset the button's default focus outline */
+      button.trigger:focus {
+        outline: revert;
+      }
+
       .trigger {
         display: block;
         cursor: pointer;
       }
 
+      /* for manual activation, hide the content completely from screen readers when the tooltip is closed */
+      /* otherwise, interactive elements may receive focus even when they are not visible */
+      [data-manual] .content {
+        visibility: hidden;
+      }
+
       .content {
         box-sizing: border-box;
         font-family: var(--og-tooltip-family, inherit);
@@ -152,9 +191,8 @@ export class Tooltip extends LitElement {
         border-left: solid var(--og-tooltip-background, #ececec) 10px;
       }
 
-      .tooltip:hover .content,
-      .trigger:focus + .content,
-      .content:focus-within {
+      .tooltip[data-open] .content {
+        visibility: visible;
         opacity: 1;
         width: 200px;
         pointer-events: auto;
@@ -165,12 +203,22 @@ export class Tooltip extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.recalculatePosition = this.recalculatePosition.bind(this);
-    this.addEventListener('mouseenter', this.recalculatePosition);
-    this.addEventListener('focusin', this.recalculatePosition);
+    this.abortController = new AbortController();
+    const signal = this.abortController.signal;
+
+    this.addEventListener('mouseenter', this.handleMouseEnter.bind(this), { signal });
+    this.addEventListener('mouseleave', this.handleMouseLeave.bind(this), { signal });
+    this.addEventListener('focusin', this.handleFocusIn.bind(this), { signal });
+    this.addEventListener('focusout', this.handleFocusOut.bind(this), { signal });
+    this.addEventListener('keydown', this.handleKeyDown.bind(this), { signal });
+
+    document.addEventListener('click', this.handleDocumentClick.bind(this), { signal });
   }
 
-  recalculatePosition() {
+  async recalculatePosition() {
+    // wait for state changes to apply
+    await this.updateComplete;
+    if (!this.open) return;
     const trigger = this.shadowRoot.querySelector('.trigger');
     const triggerRect = trigger.getBoundingClientRect();
     const content = this.shadowRoot.querySelector('.content');
@@ -181,19 +229,83 @@ export class Tooltip extends LitElement {
       content.style.top = `${(-1 * contentRect.height + triggerRect.height) / 2}px`;
   }
 
+  handleMouseEnter() {
+    this.open = true;
+    this.recalculatePosition();
+  }
+
+  handleMouseLeave() {
+    this.open = false;
+  }
+
+  handleFocusIn() {
+    if (this.activationType !== ACTIVATION_TYPES.AUTOMATIC) return;
+    this.open = true;
+    this.recalculatePosition();
+  }
+
+  handleFocusOut(event) {
+    if (this.activationType !== ACTIVATION_TYPES.AUTOMATIC) return;
+    // keep the tooltip open if we're moving focus to another element inside the tooltip
+    if (!this.contains(event.relatedTarget)) {
+      this.open = false;
+    }
+  }
+
+  handleKeyDown(event) {
+    if (this.activationType !== ACTIVATION_TYPES.MANUAL) return;
+    // close the tooltip on Escape press
+    if (event.key === 'Escape' && this.open) {
+      this.open = false;
+      event.stopPropagation();
+    }
+  }
+
+  handleClick() {
+    if (this.activationType !== ACTIVATION_TYPES.MANUAL) return;
+    this.open = !this.open;
+    this.recalculatePosition();
+  }
+
+  handleDocumentClick(event) {
+    if (this.activationType !== ACTIVATION_TYPES.MANUAL || !this.open) return;
+    // close the tooltip if the user clicks outside of it
+    if (!this.contains(event.target)) {
+      this.open = false;
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener('mouseenter', this.recalculatePosition);
-    this.removeEventListener('focusin', this.recalculatePosition);
+    // remove event listeners
+    this.abortController.abort();
   }
 
   render() {
+    // allow removing aria-label by setting trigger-label to any falsy value
+    // e.g. if the content inside the tooltip is sufficient
+    const triggerLabel = this.triggerLabel ? this.triggerLabel : undefined;
+
     return html`
-      <span class="tooltip">
-        <span class="trigger" tabindex="0">
-          <slot name="trigger">${this.trigger}</slot>
-        </span>
-        <div class="content ${this.placement || 'bottom'}">
+      <span class="tooltip" ?data-open="${this.open}" ?data-manual="${this.activationType === ACTIVATION_TYPES.MANUAL}">
+        ${this.activationType === ACTIVATION_TYPES.MANUAL
+          ? html`
+              <button
+                class="trigger"
+                aria-label="${ifDefined(triggerLabel)}"
+                aria-expanded="${this.open}"
+                aria-controls="tooltip-content"
+                @click="${this.handleClick}"
+              >
+                <slot name="trigger">${this.trigger}</slot>
+              </button>
+            `
+          : html`
+              <span class="trigger" tabindex="0" aria-label="${ifDefined(triggerLabel)}">
+                <slot name="trigger">${this.trigger}</slot>
+              </span>
+            `}
+        <div class="content ${this.placement || 'bottom'}" role="tooltip" id="tooltip-content">
           <slot name="content">${this.content}</slot>
         </div>
       </span>

package/src/components/__tests__/Price.spec.js

@@ -18,7 +18,8 @@ async function renderPriceTemplate(
           subscriptionPrice: '$0.90'
         }
       ]
-    }
+    },
+    discountedProductPriceFromOffers: {}
   }
 ) {
   // make sure the element was cleaned up
@@ -27,6 +28,7 @@ async function renderPriceTemplate(
   const element = document.querySelector(TAG_NAME_UNDER_TEST);
   element.frequency = properties.frequency;
   element.productPlans = properties.productPlans;
+  element.discountedProductPriceFromOffers = properties.discountedProductPriceFromOffers;
   await element.updateComplete;
   return element;
 }
@@ -141,6 +143,28 @@ describe('Price', () => {
     expect(ogPriceNullPrepaid).toContain('$4.50');
   });
 
+  // note: it's unclear whether this behavior was intentional when first implemented, but codifying it with a test in case any merchant is relying on it
+  it('should render payAsYouGo price even if no discount', async () => {
+    const template = html`
+      <og-some-price pay-as-you-go product="yum id"></og-some-price>
+    `;
+
+    const priceDiv = await renderPriceTemplate(template, {
+      frequency: '1_3',
+      productPlans: {
+        'yum id': [
+          {
+            frequency: '1_3',
+            regularPrice: '$5.00',
+            discountRate: '$0.00',
+            subscriptionPrice: '$5.00'
+          }
+        ]
+      }
+    });
+    expect(priceDiv.shadowRoot.innerHTML).toContain('$5.00');
+  });
+
   it('should render empty price when subscription is equal to regular', async () => {
     const template = html`
       <og-some-price discount product="yum id"></og-some-price>
@@ -162,4 +186,53 @@ describe('Price', () => {
     expect(ogPrice).not.toContain('10%');
     expect(ogPrice).not.toContain('$1.00');
   });
+
+  describe('discountedProductPriceFromOffers', () => {
+    async function setupDiscountedProductPriceTest(hasPriceAdjustments, extraPlanProps = {}) {
+      const template = html`
+        <og-some-price product="yum id"></og-some-price>
+      `;
+      return renderPriceTemplate(template, {
+        frequency: '1_3',
+        productPlans: {
+          'yum id': [
+            {
+              frequency: '1_3',
+              regularPrice: '$1.00',
+              discountRate: '10%',
+              subscriptionPrice: '$PLAN_PRICE',
+              hasPriceAdjustments: hasPriceAdjustments,
+              ...extraPlanProps
+            }
+          ]
+        },
+        discountedProductPriceFromOffers: {
+          regularPrice: '$1.00',
+          discountRate: '20%',
+          subscriptionPrice: '$OFFER_PRICE'
+        }
+      });
+    }
+
+    it('should render discountedProductPriceFromOffers when selling plan has no price adjustments', async () => {
+      const priceDiv = await setupDiscountedProductPriceTest(false);
+
+      const insideText = priceDiv.shadowRoot.textContent.trim();
+      expect(insideText).toBe('$OFFER_PRICE');
+    });
+
+    it('should not use discountedProductPriceFromOffers when selling plan has price adjustments', async () => {
+      const priceDiv = await setupDiscountedProductPriceTest(true);
+
+      const insideText = priceDiv.shadowRoot.textContent.trim();
+      expect(insideText).toBe('$PLAN_PRICE');
+    });
+
+    it('should use discountedProductPriceFromOffers for prepaid subscriptions even when plan does not have price adjustments', async () => {
+      const priceDiv = await setupDiscountedProductPriceTest(false, { prepaidShipments: 3 });
+
+      const insideText = priceDiv.shadowRoot.textContent.trim();
+      expect(insideText).toBe('$PLAN_PRICE');
+    });
+  });
 });

package/src/components/__tests__/Tooltip.spec.js

@@ -16,17 +16,20 @@ describe('Tooltip', () => {
     );
   });
 
-  const getTooltip = async placement => {
+  const getTooltip = async ({ placement, activationType } = {}) => {
     const element = new Tooltip();
     if (placement) {
       element.setAttribute('placement', placement);
     }
+    if (activationType) {
+      element.setAttribute('activation-type', activationType);
+    }
     await appendToBody(element);
     return element;
   };
 
   const checkContentStyles = async (expectedStyles, placement, contentStyles) => {
-    const element = await getTooltip(placement);
+    const element = await getTooltip({ placement });
     const contentDiv = element.shadowRoot.querySelector('.content');
 
     // Modify shadow content
@@ -36,7 +39,8 @@ describe('Tooltip', () => {
       });
     }
 
-    element.recalculatePosition();
+    element.open = true;
+    await element.recalculatePosition();
     Object.keys(expectedStyles).forEach(key => expect(contentDiv.style[key]).toEqual(expectedStyles[key]));
   };
 
@@ -75,4 +79,211 @@ describe('Tooltip', () => {
   it('should not set style properties if placement is top-left', async () => {
     await checkContentStyles({ top: '', left: '' }, 'top-left');
   });
+
+  const ACTIVATION_TYPES = ['automatic', 'manual'];
+
+  ACTIVATION_TYPES.forEach(activationType => {
+    it(`${activationType} should show tooltip on mouseenter`, async () => {
+      const element = await getTooltip({ activationType });
+      expect(element.open).toBe(false);
+
+      element.dispatchEvent(new Event('mouseenter'));
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+
+    it(`${activationType} should hide tooltip on mouseleave`, async () => {
+      const element = await getTooltip();
+      element.open = true;
+      await element.updateComplete;
+
+      element.dispatchEvent(new Event('mouseleave'));
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it(`${activationType} should remove aria-label when trigger-label is empty`, async () => {
+      const element = await getTooltip({ activationType });
+      element.setAttribute('trigger-label', '');
+      await element.updateComplete;
+
+      const trigger = element.shadowRoot.querySelector('.trigger');
+      expect(trigger.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it(`${activationType} should set aria-label when trigger-label has value`, async () => {
+      const element = await getTooltip({ activationType });
+      element.setAttribute('trigger-label', 'Custom tooltip label');
+      await element.updateComplete;
+
+      const trigger = element.shadowRoot.querySelector('.trigger');
+      expect(trigger.getAttribute('aria-label')).toBe('Custom tooltip label');
+    });
+  });
+
+  describe('automatic activation behavior', () => {
+    it('should show tooltip on focusin', async () => {
+      const element = await getTooltip();
+      expect(element.open).toBe(false);
+
+      element.dispatchEvent(new Event('focusin'));
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+
+    it('should hide tooltip on focusout when focus moves outside', async () => {
+      const element = await getTooltip();
+      const externalElement = document.createElement('div');
+      document.body.appendChild(externalElement);
+
+      element.open = true;
+      await element.updateComplete;
+
+      const focusOutEvent = new FocusEvent('focusout', { relatedTarget: externalElement });
+      element.dispatchEvent(focusOutEvent);
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+      document.body.removeChild(externalElement);
+    });
+
+    it('should keep tooltip open on focusout when focus stays within tooltip', async () => {
+      const element = await getTooltip();
+      const trigger = element.shadowRoot.querySelector('.trigger');
+
+      element.open = true;
+      await element.updateComplete;
+
+      // focus moving out of one element and back to the trigger
+      const focusOutEvent = new FocusEvent('focusout', { relatedTarget: trigger });
+      element.dispatchEvent(focusOutEvent);
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+
+    it('should not open tooltip on click', async () => {
+      const element = await getTooltip();
+      const trigger = element.shadowRoot.querySelector('.trigger');
+
+      expect(element.open).toBe(false);
+
+      trigger.click();
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it('should not do anything when clicking outside tooltip', async () => {
+      const element = await getTooltip();
+      element.open = true;
+      await element.updateComplete;
+
+      const outsideClick = new Event('click', { bubbles: true });
+      document.body.dispatchEvent(outsideClick);
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+
+    it('updates attributes', async () => {
+      const element = await getTooltip();
+      element.open = true;
+      await element.updateComplete;
+
+      let style = getComputedStyle(element.shadowRoot.querySelector('.content'));
+      expect(style.opacity).toBe('1');
+
+      element.open = false;
+      await element.updateComplete;
+      style = getComputedStyle(element.shadowRoot.querySelector('.content'));
+      expect(style.opacity).toBe('0');
+    });
+  });
+
+  describe('manual activation behavior', () => {
+    it('should toggle tooltip on click', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      const trigger = element.shadowRoot.querySelector('.trigger');
+
+      expect(element.open).toBe(false);
+
+      trigger.click();
+      await element.updateComplete;
+      expect(element.open).toBe(true);
+
+      trigger.click();
+      await element.updateComplete;
+      expect(element.open).toBe(false);
+    });
+
+    it('should not open tooltip on focus', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+
+      expect(element.open).toBe(false);
+
+      element.dispatchEvent(new Event('focusin'));
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it('should close tooltip when clicking outside', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      element.open = true;
+      await element.updateComplete;
+
+      const outsideClick = new Event('click', { bubbles: true });
+      document.body.dispatchEvent(outsideClick);
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it('updates attributes', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      element.open = true;
+      await element.updateComplete;
+      expect(element.shadowRoot.querySelector('.trigger').ariaExpanded).toBe('true');
+      let style = getComputedStyle(element.shadowRoot.querySelector('.content'));
+      expect(style.visibility).toBe('visible');
+      expect(style.opacity).toBe('1');
+
+      element.open = false;
+      await element.updateComplete;
+      expect(element.shadowRoot.querySelector('.trigger').ariaExpanded).toBe('false');
+      style = getComputedStyle(element.shadowRoot.querySelector('.content'));
+      expect(style.visibility).toBe('hidden');
+      expect(style.opacity).toBe('0');
+    });
+
+    it('should close tooltip on Escape key', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      element.open = true;
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+
+      const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+      element.dispatchEvent(escapeEvent);
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it('should not close tooltip on other keys', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      element.open = true;
+      await element.updateComplete;
+
+      const enterEvent = new KeyboardEvent('keydown', { key: 'Alt' });
+      element.dispatchEvent(enterEvent);
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+  });
 });

package/src/core/__tests__/experiments.spec.js

@@ -281,6 +281,19 @@ describe('experiments.shopify', () => {
 
   const session_A = 'cda';
   const session_B = 'abc';
+
+  function expectPlanFrequenciesToMatch(actualProductPlans, expectedProductPlans) {
+    for (const productId in expectedProductPlans) {
+      const actualPlans = actualProductPlans[productId];
+      const expectedPlans = expectedProductPlans[productId];
+
+      const actualFrequencies = actualPlans.map(plan => plan.frequency).sort();
+      const expectedFrequencies = expectedPlans.map(plan => plan.frequency).sort();
+
+      expect(actualFrequencies).toEqual(expectedFrequencies);
+    }
+  }
+
   it('should not change selling plan groups if no experiment matches', async () => {
     const experiments = {
       public_id: '123',
@@ -302,7 +315,7 @@ describe('experiments.shopify', () => {
 
     await new Promise(r => setTimeout(r, 10));
 
-    expect(store.getState().productPlans).toEqual(expectedNoModifiedProductPlans);
+    expectPlanFrequenciesToMatch(store.getState().productPlans, expectedNoModifiedProductPlans);
   });
 
   it('should change selling plan groups if experiment matches variant A', async () => {
@@ -360,7 +373,7 @@ describe('experiments.shopify', () => {
         }
       ]
     };
-    expect(store.getState().productPlans).toEqual(expectedVariantAProductPlans);
+    expectPlanFrequenciesToMatch(store.getState().productPlans, expectedVariantAProductPlans);
   });
 
   it('should change selling plan groups if experiment matches variant B', async () => {
@@ -413,6 +426,6 @@ describe('experiments.shopify', () => {
       ]
     };
 
-    expect(store.getState().productPlans).toEqual(expectedVariantBProductPlans);
+    expectPlanFrequenciesToMatch(store.getState().productPlans, expectedVariantBProductPlans);
   });
 });