Merge pull request #23940 from overleaf/td-react-18

Upgrade to React 18 GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8
2025-05-02 08:05:29 +00:00
parent 4464320757
commit 7abafb01ea
213 changed files with 2469 additions and 2105 deletions
@@ -15,7 +15,7 @@ import {
  groupActiveSubscription,
  groupActiveSubscriptionWithPendingLicenseChange,
 } from '../../fixtures/subscriptions'
-import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
+import { location } from '@/shared/components/location'
 import { UserId } from '../../../../../../types/user'
 import { SplitTestProvider } from '@/shared/context/split-test-context'

@@ -73,16 +73,9 @@ describe('<GroupSubscriptionMemberships />', function () {
  })

  describe('opens leave group modal when button is clicked', 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,
-        setHash: sinon.stub(),
-      })
+      this.locationWrapperSandbox = sinon.createSandbox()
+      this.locationWrapperStub = this.locationWrapperSandbox.stub(location)

      render(
        <SplitTestProvider>
@@ -111,7 +104,7 @@ describe('<GroupSubscriptionMemberships />', function () {
    })

    afterEach(function () {
-      this.locationStub.restore()
+      this.locationWrapperSandbox.restore()
    })

    it('close the modal', function () {
@@ -130,6 +123,7 @@ describe('<GroupSubscriptionMemberships />', function () {
      fireEvent.click(this.leaveNowButton)

      expect(leaveGroupApiMock.callHistory.called()).to.be.true
+      const reloadStub = this.locationWrapperStub.reload
      await waitFor(() => {
        expect(reloadStub).to.have.been.called
      })
@@ -97,7 +97,7 @@ describe('<ManagedInstitutions />', function () {
    )

    const unsubscribeLink = screen.getByText('Unsubscribe')
-    await fireEvent.click(unsubscribeLink)
+    fireEvent.click(unsubscribeLink)
    await waitFor(
      () => expect(fetchMock.callHistory.called(unsubscribeUrl)).to.be.true
    )
@@ -126,7 +126,7 @@ describe('<ManagedInstitutions />', function () {

    const subscribeLink = await screen.findByText('Subscribe')

-    await fireEvent.click(subscribeLink)
+    fireEvent.click(subscribeLink)
    await waitFor(
      () => expect(fetchMock.callHistory.called(subscribeUrl)).to.be.true
    )
@@ -9,7 +9,7 @@ import {
  trialSubscription,
 } from '../../fixtures/subscriptions'
 import { renderActiveSubscription } from '../../helpers/render-active-subscription'
-import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
+import { location } from '@/shared/components/location'
 import { MetaTag } from '@/utils/meta'

 const pauseSubscriptionSplitTestMeta: MetaTag[] = [
@@ -45,22 +45,17 @@ function clickSubmitButton() {

 describe('<PauseSubscriptionModal />', function () {
  beforeEach(function () {
-    reloadStub = sinon.stub()
-    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
-      assign: sinon.stub(),
-      replace: sinon.stub(),
-      reload: reloadStub,
-      setHash: sinon.stub(),
-      toString: sinon
-        .stub()
-        .returns('https://www.dev-overleaf.com/user/subscription'),
-    })
+    this.locationWrapperSandbox = sinon.createSandbox()
+    this.locationWrapperStub = this.locationWrapperSandbox.stub(location)
+    this.locationWrapperStub.toString.returns(
+      'https://www.dev-overleaf.com/user/subscription'
+    )
    this.replaceStateStub = sinon.stub(window.history, 'replaceState')
  })

  afterEach(function () {
    fetchMock.removeRoutes().clearHistory()
-    this.locationStub.restore()
+    this.locationWrapperSandbox.restore()
    this.replaceStateStub.restore()
  })

@@ -89,7 +84,6 @@ describe('<PauseSubscriptionModal />', function () {
    clickCancelButton()
    await screen.findByText('Pause instead, to pick up where you left off')
  })
-  let reloadStub: sinon.SinonStub

  it('renders options for pause duration', async function () {
    renderSubscriptionWithPauseSupport()
@@ -135,6 +129,7 @@ describe('<PauseSubscriptionModal />', function () {
    renderSubscriptionWithPauseSupport()
    clickCancelButton()
    clickSubmitButton()
+    const reloadStub = this.locationWrapperStub.reload
    await waitFor(() => {
      expect(reloadStub).to.have.been.called
    })
@@ -4,6 +4,7 @@ import {
  fireEvent,
  waitForElementToBeRemoved,
  within,
+  waitFor,
 } from '@testing-library/react'
 import PersonalSubscription from '../../../../../../frontend/js/features/subscription/components/dashboard/personal-subscription'
 import {
@@ -19,7 +20,7 @@ import {
 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'
+import { location } from '@/shared/components/location'

 describe('<PersonalSubscription />', function () {
  afterEach(function () {
@@ -48,21 +49,13 @@ describe('<PersonalSubscription />', function () {
  })

  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,
-        setHash: sinon.stub(),
-        toString: sinon.stub(),
-      })
+      this.locationWrapperSandbox = sinon.createSandbox()
+      this.locationWrapperStub = this.locationWrapperSandbox.stub(location)
    })

    afterEach(function () {
-      this.locationStub.restore()
+      this.locationWrapperSandbox.restore()
    })

    it('renders the active dash', function () {
@@ -107,15 +100,17 @@ describe('<PersonalSubscription />', function () {
      fireEvent.click(reactivateBtn)
      expect(reactivateBtn.disabled).to.be.true
      await fetchMock.callHistory.flush(true)
-      expect(reactivateBtn.disabled).to.be.false
-      expect(reloadStub).not.to.have.been.called
+      await waitFor(() => expect(reactivateBtn.disabled).to.be.false)
+      expect(this.locationWrapperStub.reload).not.to.have.been.called
      fetchMock.removeRoutes().clearHistory()

      // 2nd click - success
      fetchMock.postOnce(reactivateSubscriptionUrl, 200)
      fireEvent.click(reactivateBtn)
      await fetchMock.callHistory.flush(true)
-      expect(reloadStub).to.have.been.calledOnce
+      await waitFor(() => {
+        expect(this.locationWrapperStub.reload).to.have.been.calledOnce
+      })
      expect(reactivateBtn.disabled).to.be.true
      fetchMock.removeRoutes().clearHistory()
    })
@@ -21,7 +21,7 @@ import {
  extendTrialUrl,
  subscriptionUpdateUrl,
 } from '@/features/subscription/data/subscription-url'
-import * as useLocationModule from '../../../../../../../../frontend/js/shared/hooks/use-location'
+import { location } from '@/shared/components/location'
 import { MetaTag } from '@/utils/meta'

 describe('<ActiveSubscription />', function () {
@@ -77,9 +77,13 @@ describe('<ActiveSubscription />', function () {
    screen.getByText('You are currently subscribed to the', { exact: false })

    await screen.findByRole('heading', { name: 'Change plan' })
-    expect(
-      screen.getAllByRole('button', { name: 'Change to this plan' }).length > 0
-    ).to.be.true
+    await waitFor(
+      () =>
+        expect(
+          screen.getAllByRole('button', { name: 'Change to this plan' })
+            .length > 0
+        ).to.be.true
+    )
  })

  it('notes when user is changing plan at end of current plan term', function () {
@@ -193,21 +197,13 @@ describe('<ActiveSubscription />', function () {
  })

  describe('cancel plan', function () {
-    const assignStub = sinon.stub()
-    const reloadStub = sinon.stub()
-
    beforeEach(function () {
-      this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
-        assign: assignStub,
-        replace: sinon.stub(),
-        reload: reloadStub,
-        setHash: sinon.stub(),
-        toString: sinon.stub(),
-      })
+      this.locationWrapperSandbox = sinon.createSandbox()
+      this.locationWrapperStub = this.locationWrapperSandbox.stub(location)
    })

    afterEach(function () {
-      this.locationStub.restore()
+      this.locationWrapperSandbox.restore()
      fetchMock.removeRoutes().clearHistory()
    })

@@ -277,6 +273,7 @@ describe('<ActiveSubscription />', function () {
        name: 'Cancel my subscription',
      })
      fireEvent.click(button)
+      const assignStub = this.locationWrapperStub.assign
      await waitFor(() => {
        expect(assignStub).to.have.been.called
      })
@@ -406,6 +403,7 @@ describe('<ActiveSubscription />', function () {
        })
        fireEvent.click(extendTrialButton)
        // page is reloaded on success
+        const reloadStub = this.locationWrapperStub.reload
        await waitFor(() => {
          expect(reloadStub).to.have.been.called
        })
@@ -499,7 +497,10 @@ describe('<ActiveSubscription />', function () {
        const endPointResponse = {
          status: 200,
        }
-        fetchMock.post(subscriptionUpdateUrl, endPointResponse)
+        fetchMock.post(
+          `${subscriptionUpdateUrl}?downgradeToPaidPersonal`,
+          endPointResponse
+        )
        renderActiveSubscription(monthlyActiveCollaborator)
        showConfirmCancelUI()
        const downgradeButton = await screen.findByRole('button', {
@@ -507,6 +508,7 @@ describe('<ActiveSubscription />', function () {
        })
        fireEvent.click(downgradeButton)
        // page is reloaded on success
+        const reloadStub = this.locationWrapperStub.reload
        await waitFor(() => {
          expect(reloadStub).to.have.been.called
        })
@@ -20,26 +20,18 @@ import {
  subscriptionUpdateUrl,
 } from '../../../../../../../../../frontend/js/features/subscription/data/subscription-url'
 import { renderActiveSubscription } from '../../../../../helpers/render-active-subscription'
-import * as useLocationModule from '../../../../../../../../../frontend/js/shared/hooks/use-location'
+import { location } from '@/shared/components/location'

 describe('<ChangePlanModal />', 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,
-      setHash: sinon.stub(),
-      toString: sinon.stub(),
-    })
+    this.locationWrapperSandbox = sinon.createSandbox()
+    this.locationWrapperStub = this.locationWrapperSandbox.stub(location)
  })

  afterEach(function () {
    cleanUpContext()
    fetchMock.removeRoutes().clearHistory()
-    this.locationStub.restore()
+    this.locationWrapperSandbox.restore()
  })

  it('renders the individual plans table and group plans UI', async function () {
@@ -210,6 +202,7 @@ describe('<ChangePlanModal />', function () {
      screen.getByRole('button', { name: 'Processing…' })

      // page is reloaded on success
+      const reloadStub = this.locationWrapperStub.reload
      await waitFor(() => {
        expect(reloadStub).to.have.been.called
      })
@@ -299,6 +292,7 @@ describe('<ChangePlanModal />', function () {
      screen.getByRole('button', { name: 'Processing…' })

      // page is reloaded on success
+      const reloadStub = this.locationWrapperStub.reload
      await waitFor(() => {
        expect(reloadStub).to.have.been.called
      })
@@ -530,7 +524,8 @@ describe('<ChangePlanModal />', function () {

      screen.getByRole('button', { name: 'Processing…' })

-      // // page is reloaded on success
+      // page is reloaded on success
+      const reloadStub = this.locationWrapperStub.reload
      await waitFor(() => {
        expect(reloadStub).to.have.been.called
      })