import { expect } from 'chai' import { screen, fireEvent, waitForElementToBeRemoved, within, } from '@testing-library/react' import PersonalSubscription from '../../../../../../frontend/js/features/subscription/components/dashboard/personal-subscription' import { annualActiveSubscription, canceledSubscription, customSubscription, pastDueExpiredSubscription, } from '../../fixtures/subscriptions' import { cleanUpContext, renderWithSubscriptionDashContext, } from '../../helpers/render-with-subscription-dash-context' import { reactivateSubscriptionUrl } from '../../../../../../frontend/js/features/subscription/data/subscription-url' import fetchMock from 'fetch-mock' import sinon from 'sinon' import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location' describe('', function () { afterEach(function () { cleanUpContext() }) describe('no subscription', function () { it('returns empty container', function () { const { container } = renderWithSubscriptionDashContext( ) expect(container.firstChild).to.be.null }) }) describe('custom subscription', function () { it('displays contact support message', function () { renderWithSubscriptionDashContext(, { metaTags: [{ name: 'ol-subscription', value: customSubscription }], }) screen.getByText('Please', { exact: false }) screen.getByText('contact support', { exact: false }) screen.getByText('to make changes to your plan', { exact: false }) }) }) describe('subscription states ', function () { let reloadStub: sinon.SinonStub beforeEach(function () { reloadStub = sinon.stub() this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({ assign: sinon.stub(), replace: sinon.stub(), reload: reloadStub, }) }) afterEach(function () { this.locationStub.restore() }) it('renders the active dash', function () { renderWithSubscriptionDashContext(, { metaTags: [ { name: 'ol-subscription', value: annualActiveSubscription }, ], }) screen.getByText('You are currently subscribed to the', { exact: false }) }) it('renders the canceled dash', function () { renderWithSubscriptionDashContext(, { metaTags: [{ name: 'ol-subscription', value: canceledSubscription }], }) 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.getByRole('link', { name: 'View Your Invoices' }) screen.getByRole('button', { name: 'Reactivate your subscription' }) }) it('reactivates canceled plan', async function () { renderWithSubscriptionDashContext(, { metaTags: [{ name: 'ol-subscription', value: canceledSubscription }], }) const reactivateBtn = screen.getByRole('button', { name: 'Reactivate your subscription', }) // 1st click - fail fetchMock.postOnce(reactivateSubscriptionUrl, 400) fireEvent.click(reactivateBtn) expect(reactivateBtn.disabled).to.be.true await fetchMock.flush(true) expect(reactivateBtn.disabled).to.be.false expect(reloadStub).not.to.have.been.called fetchMock.reset() // 2nd click - success fetchMock.postOnce(reactivateSubscriptionUrl, 200) fireEvent.click(reactivateBtn) await fetchMock.flush(true) expect(reloadStub).to.have.been.calledOnce expect(reactivateBtn.disabled).to.be.true fetchMock.reset() }) it('renders the expired dash', function () { renderWithSubscriptionDashContext(, { metaTags: [ { name: 'ol-subscription', value: pastDueExpiredSubscription }, ], }) 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 renderWithSubscriptionDashContext(, { metaTags: [{ name: 'ol-subscription', value: withStateDeleted }], }) 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 () { renderWithSubscriptionDashContext(, { metaTags: [ { name: 'ol-subscription', value: pastDueExpiredSubscription }, ], }) 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 () { renderWithSubscriptionDashContext(, { metaTags: [ { name: 'ol-subscription', value: annualActiveSubscription }, ], recurlyNotLoaded: true, }) 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 () { renderWithSubscriptionDashContext(, { metaTags: [ { name: 'ol-subscription', value: annualActiveSubscription }, ], }) expect(screen.queryByRole('alert')).to.be.null screen.getByText('Change plan') }) }) it('shows different recurly email address section', async function () { fetchMock.post('/user/subscription/account/email', 200) const usersEmail = 'foo@example.com' renderWithSubscriptionDashContext(, { metaTags: [ { name: 'ol-subscription', value: annualActiveSubscription }, { name: 'ol-usersEmail', value: usersEmail }, ], }) const billingText = screen.getByText( /your billing email address is currently/i ).textContent expect(billingText).to.contain( `Your billing email address is currently ${annualActiveSubscription.recurly.account.email}.` + ` If needed you can update your billing address to ${usersEmail}` ) const submitBtn = screen.getByRole('button', { name: /update/i, }) expect(submitBtn.disabled).to.be.false fireEvent.click(submitBtn) expect(submitBtn.disabled).to.be.true expect( screen.getByRole('button', { name: /updating/i }) .disabled ).to.be.true await waitForElementToBeRemoved(() => screen.getByText(/your billing email address is currently/i) ) within(screen.getByRole('alert')).getByText( /your billing email address was successfully updated/i ) expect(screen.queryByRole('button', { name: /update/i })).to.be.null expect(screen.queryByRole('button', { name: /updating/i })).to.be.null }) })