overleaf/services/web/test/frontend/features/subscription/components/dashboard/personal-subscription.test.tsx
Jessica Lawshe c36b872ae3 Merge pull request #11509 from overleaf/jel-react-personal-subscription-dash-pt-4
[web] Continue migration of personal subscription dash to React

GitOrigin-RevId: f2d913099d727725f04697003516c90616faf014
2023-02-08 09:06:21 +00:00

169 lines
5.2 KiB
TypeScript

import { expect } from 'chai'
import { render, screen } from '@testing-library/react'
import PersonalSubscription from '../../../../../../frontend/js/features/subscription/components/dashboard/personal-subscription'
import { SubscriptionDashboardProvider } from '../../../../../../frontend/js/features/subscription/context/subscription-dashboard-context'
import {
annualActiveSubscription,
canceledSubscription,
pastDueExpiredSubscription,
} from '../../fixtures/subscriptions'
describe('<PersonalSubscription />', function () {
beforeEach(function () {
window.metaAttributesCache = new Map()
// @ts-ignore
window.recurly = {}
})
afterEach(function () {
window.metaAttributesCache = new Map()
// @ts-ignore
delete window.recurly
})
describe('no subscription', function () {
it('returns empty container', function () {
const { container } = render(
<SubscriptionDashboardProvider>
<PersonalSubscription />
</SubscriptionDashboardProvider>
)
expect(container.firstChild).to.be.null
})
})
describe('subscription states ', function () {
it('renders the active dash', function () {
window.metaAttributesCache.set(
'ol-subscription',
annualActiveSubscription
)
render(
<SubscriptionDashboardProvider>
<PersonalSubscription />
</SubscriptionDashboardProvider>
)
screen.getByText('You are currently subscribed to the', { exact: false })
})
it('renders the canceled dash', function () {
window.metaAttributesCache.set('ol-subscription', canceledSubscription)
render(
<SubscriptionDashboardProvider>
<PersonalSubscription />
</SubscriptionDashboardProvider>
)
screen.getByText(
'Your subscription has been canceled and will terminate on',
{ exact: false }
)
screen.getByText(canceledSubscription.recurly.nextPaymentDueAt, {
exact: false,
})
screen.getByText('No further payments will be taken.', { exact: false })
screen.getByText(
'Get the most out of your Overleaf subscription by checking out the list of',
{ exact: false }
)
screen.getByRole('link', { name: 'View Your Invoices' })
screen.getByRole('button', { name: 'Reactivate your subscription' })
})
it('renders the expired dash', function () {
window.metaAttributesCache.set(
'ol-subscription',
pastDueExpiredSubscription
)
render(
<SubscriptionDashboardProvider>
<PersonalSubscription />
</SubscriptionDashboardProvider>
)
screen.getByText('Your subscription has expired.')
})
it('renders error message when an unknown subscription state', function () {
const withStateDeleted = Object.assign(
{},
JSON.parse(JSON.stringify(annualActiveSubscription))
)
withStateDeleted.recurly.state = undefined
window.metaAttributesCache.set('ol-subscription', withStateDeleted)
render(
<SubscriptionDashboardProvider>
<PersonalSubscription />
</SubscriptionDashboardProvider>
)
screen.getByText(
'There is a problem with your subscription. Please contact us for more information.'
)
})
})
describe('past due subscription', function () {
it('renders error alert', function () {
window.metaAttributesCache.set(
'ol-subscription',
pastDueExpiredSubscription
)
render(
<SubscriptionDashboardProvider>
<PersonalSubscription />
</SubscriptionDashboardProvider>
)
screen.getByRole('alert')
screen.getByText(
'Your account currently has a past due invoice. You will not be able to change your plan until this is resolved.',
{ exact: false }
)
const invoiceLinks = screen.getAllByText('View Your Invoices', {
exact: false,
})
expect(invoiceLinks.length).to.equal(2)
})
})
describe('Recurly JS', function () {
const recurlyFailedToLoadText =
'Sorry, there was an error talking to our payment provider. Please try again in a few moments. If you are using any ad or script blocking extensions in your browser, you may need to temporarily disable them.'
it('shows an alert and hides "Change plan" option when Recurly did not load', function () {
// @ts-ignore
delete window.recurly
window.metaAttributesCache.set(
'ol-subscription',
annualActiveSubscription
)
render(
<SubscriptionDashboardProvider>
<PersonalSubscription />
</SubscriptionDashboardProvider>
)
screen.getByRole('alert')
screen.getByText(recurlyFailedToLoadText)
expect(screen.queryByText('Change plan')).to.be.null
})
it('should not show an alert and should show "Change plan" option when Recurly did load', function () {
window.metaAttributesCache.set(
'ol-subscription',
annualActiveSubscription
)
render(
<SubscriptionDashboardProvider>
<PersonalSubscription />
</SubscriptionDashboardProvider>
)
expect(screen.queryByRole('alert')).to.be.null
screen.getByText('Change plan')
})
})
})