github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-21 18:38:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

[web] Fix button-link loading state in subscription page (#23640)

Browse source 
* Fix inline loading button style

* Fix frontend test

GitOrigin-RevId: 59cdf68b8f2ad50f042a4457dc37f5c3d33d6c87
This commit is contained in:
Antoine Clausse 2025-02-25 14:16:34 +01:00 • committed by Copybot
parent 59fb97d874
commit d9a9fbb242
2 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/cancel-subscription.tsx
View file

@ -38,10 +38,7 @@ function ConfirmCancelSubscriptionButton({
isLoading={isLoading}
disabled={disabled}
onClick={onClick}
className={showNoThanks ? 'btn-inline-link' : undefined}
bs3Props={{
loading: isLoading ? t('processing_uppercase') + '…' : text,
}}
variant={showNoThanks ? 'link' : undefined}
>
{text}
</OLButton>

33
services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx
View file

@ -11,7 +11,7 @@ import {
trialCollaboratorSubscription,
trialSubscription,
} from '../../../../fixtures/subscriptions'
import sinon from 'sinon'
import sinon, { type SinonStub } from 'sinon'
import { cleanUpContext } from '../../../../helpers/render-with-subscription-dash-context'
import { renderActiveSubscription } from '../../../../helpers/render-active-subscription'
import { cloneDeep } from 'lodash'
@ -20,12 +20,22 @@ import {
cancelSubscriptionUrl,
extendTrialUrl,
subscriptionUpdateUrl,
} from '../../../../../../../../frontend/js/features/subscription/data/subscription-url'
} from '@/features/subscription/data/subscription-url'
import * as useLocationModule from '../../../../../../../../frontend/js/shared/hooks/use-location'
import { MetaTag } from '@/utils/meta'
import * as bootstrapUtils from '@/features/utils/bootstrap-5'
describe('<ActiveSubscription />', function () {
let sendMBSpy: sinon.SinonSpy
let isBootstrap5Stub: SinonStub
before(function () {
isBootstrap5Stub = sinon.stub(bootstrapUtils, 'isBootstrap5').returns(true)
})
after(function () {
isBootstrap5Stub.restore()
})
beforeEach(function () {
sendMBSpy = sinon.spy(eventTracking, 'sendMB')
@ -301,7 +311,7 @@ describe('<ActiveSubscription />', function () {
})
})
it('disables cancels subscription button after clicking and updates text', async function () {
it('disables cancels subscription button after clicking and shows loading spinner', async function () {
renderActiveSubscription(annualActiveSubscription)
showConfirmCancelUI()
screen.getByRole('button', {
@ -312,12 +322,13 @@ describe('<ActiveSubscription />', function () {
})
fireEvent.click(button)
const cancelButtton = screen.getByRole('button', {
name: 'Processing…',
const cancelButton = screen.getByRole('button', {
name: 'Loading',
}) as HTMLButtonElement
expect(cancelButtton.disabled).to.be.true
expect(cancelButton.disabled).to.be.true
expect(screen.queryByText('Cancel my subscription')).to.be.null
const hiddenText = screen.getByText('Cancel my subscription')
expect(hiddenText.getAttribute('aria-hidden')).to.equal('true')
})
describe('extend trial', function () {
@ -357,7 +368,7 @@ describe('<ActiveSubscription />', function () {
name: cancelButtonText,
})
screen.getByRole('button', {
name: 'Processing…',
name: 'Loading',
})
})
@ -374,7 +385,7 @@ describe('<ActiveSubscription />', function () {
expect(buttons[0].getAttribute('disabled')).to.equal('')
expect(buttons[1].getAttribute('disabled')).to.equal('')
screen.getByRole('button', {
name: 'Processing…',
name: 'Loading',
})
screen.getByRole('button', {
name: extendTrialButtonText,
@ -445,7 +456,7 @@ describe('<ActiveSubscription />', function () {
name: cancelButtonText,
})
screen.getByRole('button', {
name: 'Processing…',
name: 'Loading',
})
})
@ -462,7 +473,7 @@ describe('<ActiveSubscription />', function () {
expect(buttons[0].getAttribute('disabled')).to.equal('')
expect(buttons[1].getAttribute('disabled')).to.equal('')
screen.getByRole('button', {
name: 'Processing…',
name: 'Loading',
})
screen.getByRole('button', {
name: downgradeButtonText,