first commit

services/web/test/frontend/features/subscription/helpers/render-active-subscription.tsx

@@ -0,0 +1,32 @@
+import { ActiveSubscription } from '../../../../../frontend/js/features/subscription/components/dashboard/states/active/active'
+import { PaidSubscription } from '../../../../../types/subscription/dashboard/subscription'
+import { groupPlans, plans } from '../fixtures/plans'
+import { renderWithSubscriptionDashContext } from './render-with-subscription-dash-context'
+import { MetaTag } from '@/utils/meta'
+import { CurrencyCode } from '../../../../../types/subscription/currency'
+
+export function renderActiveSubscription(
+  subscription: PaidSubscription,
+  tags: MetaTag[] = [],
+  currencyCode?: CurrencyCode
+) {
+  renderWithSubscriptionDashContext(
+    <ActiveSubscription subscription={subscription} />,
+    {
+      currencyCode,
+      metaTags: [
+        ...tags,
+        { name: 'ol-plans', value: plans },
+        {
+          name: 'ol-groupPlans',
+          value: groupPlans,
+        },
+        { name: 'ol-subscription', value: subscription },
+        {
+          name: 'ol-recommendedCurrency',
+          value: currencyCode || 'USD',
+        },
+      ],
+    }
+  )
+}

services/web/test/frontend/features/subscription/helpers/render-with-subscription-dash-context.tsx

@@ -0,0 +1,94 @@
+import { render } from '@testing-library/react'
+import _ from 'lodash'
+import { SubscriptionDashboardProvider } from '../../../../../frontend/js/features/subscription/context/subscription-dashboard-context'
+import { groupPriceByUsageTypeAndSize, plans } from '../fixtures/plans'
+import fetchMock from 'fetch-mock'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
+import { MetaTag } from '@/utils/meta'
+
+export function renderWithSubscriptionDashContext(
+  component: React.ReactElement,
+  options?: {
+    metaTags?: MetaTag[]
+    recurlyNotLoaded?: boolean
+    queryingRecurly?: boolean
+    currencyCode?: string
+  }
+) {
+  const SubscriptionDashboardProviderWrapper = ({
+    children,
+  }: {
+    children: React.ReactNode
+  }) => (
+    <SplitTestProvider>
+      <SubscriptionDashboardProvider>{children}</SubscriptionDashboardProvider>
+    </SplitTestProvider>
+  )
+
+  options?.metaTags?.forEach(tag =>
+    window.metaAttributesCache.set(tag!.name, tag!.value)
+  )
+  window.metaAttributesCache.set('ol-user', {})
+
+  if (!options?.recurlyNotLoaded) {
+    // @ts-ignore
+    global.recurly = {
+      configure: () => {},
+      Pricing: {
+        Subscription: () => {
+          return {
+            plan: (planCode: string) => {
+              let plan
+              const isGroupPlan = planCode.includes('group')
+              if (isGroupPlan) {
+                const [, planType, size, usage] = planCode.split('_')
+                const currencyCode = options?.currencyCode || 'USD'
+                plan = _.get(groupPriceByUsageTypeAndSize, [
+                  usage,
+                  planType,
+                  currencyCode,
+                  size,
+                ])
+              } else {
+                plan = plans.find(p => p.planCode === planCode)
+              }
+
+              const response = {
+                next: {
+                  total: plan?.price_in_cents
+                    ? plan.price_in_cents / 100
+                    : undefined,
+                },
+              }
+              return {
+                currency: () => {
+                  return {
+                    catch: () => {
+                      return {
+                        done: (callback: (response: object) => void) => {
+                          if (!options?.queryingRecurly) {
+                            return callback(response)
+                          }
+                        },
+                      }
+                    },
+                  }
+                },
+              }
+            },
+          }
+        },
+      },
+    }
+  }
+
+  return render(component, {
+    wrapper: SubscriptionDashboardProviderWrapper,
+  })
+}
+
+export function cleanUpContext() {
+  // @ts-ignore
+  delete global.recurly
+  fetchMock.removeRoutes().clearHistory()
+}