Merge pull request #7723 from overleaf/ta-settings-refactor

[SettingsPage] Refactor Linking Section GitOrigin-RevId: 49aa27cdcb3669c59c9a9c46edd3249cee876dd0
2026-11-15 14:43:46 +01:00 · 2022-04-26 08:03:59 +00:00
parent bc574ef9e9
commit 146a207fd1
16 changed files with 217 additions and 205 deletions
@@ -0,0 +1,100 @@
+import { expect } from 'chai'
+import { screen, fireEvent, render, waitFor } from '@testing-library/react'
+import { IntegrationLinkingWidget } from '../../../../../../frontend/js/features/settings/components/linking/integration-widget'
+
+describe('<IntegrationLinkingWidgetTest/>', function () {
+  const defaultProps = {
+    logoSrc: '/logo',
+    title: 'Integration',
+    description: ['paragraph1', 'paragraph2'],
+    linkPath: '/link',
+    unlinkPath: '/unlink',
+    unlinkConfirmationTitle: 'confirm unlink',
+    unlinkConfirmationText: 'you will be unlinked',
+  }
+
+  describe('when the feature is not available', function () {
+    beforeEach(function () {
+      render(<IntegrationLinkingWidget {...defaultProps} hasFeature={false} />)
+    })
+
+    it("should render 'Premium feature' label", function () {
+      screen.getByText('Premium feature')
+    })
+
+    it('should render a link to upgrade the account', function () {
+      expect(
+        screen.getByRole('link', { name: 'Upgrade' }).getAttribute('href')
+      ).to.equal('user/subscription/plans')
+    })
+  })
+
+  describe('when the integration is not linked', function () {
+    beforeEach(function () {
+      render(
+        <IntegrationLinkingWidget {...defaultProps} hasFeature linked={false} />
+      )
+    })
+
+    it('should render a link to initiate integration linking', function () {
+      expect(
+        screen.getByRole('link', { name: 'Link' }).getAttribute('href')
+      ).to.equal('/link')
+    })
+
+    it("should not render 'premium feature' labels", function () {
+      expect(screen.queryByText('premium_feature')).to.not.exist
+      expect(screen.queryByText('integration_is_a_premium_feature')).to.not
+        .exist
+    })
+  })
+
+  describe('when the integration is linked', function () {
+    beforeEach(function () {
+      render(
+        <IntegrationLinkingWidget
+          {...defaultProps}
+          hasFeature
+          linked
+          statusIndicator={<div>status indicator</div>}
+        />
+      )
+    })
+
+    it('should render a status indicator', function () {
+      screen.getByText('status indicator')
+    })
+
+    it("should not render 'premium feature' labels", function () {
+      expect(screen.queryByText('premium_feature')).to.not.exist
+      expect(screen.queryByText('integration_is_a_premium_feature')).to.not
+        .exist
+    })
+
+    it('should display an `unlink` button', function () {
+      screen.getByRole('button', { name: 'Unlink' })
+    })
+
+    it('should open a modal with a link to confirm integration unlinking', function () {
+      fireEvent.click(screen.getByRole('button', { name: 'Unlink' }))
+      screen.getByText('confirm unlink')
+      screen.getByText('you will be unlinked')
+      expect(
+        screen.getByRole('link', { name: 'Unlink' }).getAttribute('href')
+      ).to.equal('/unlink')
+    })
+
+    it('should cancel unlinking when clicking "cancel" in the confirmation modal', async function () {
+      fireEvent.click(screen.getByRole('button', { name: 'Unlink' }))
+      screen.getByText('confirm unlink')
+      const cancelBtn = screen.getByRole('button', {
+        name: 'Cancel',
+        hidden: false,
+      })
+      fireEvent.click(cancelBtn)
+      await waitFor(() =>
+        screen.getByRole('button', { name: 'Cancel', hidden: true })
+      )
+    })
+  })
+})
@@ -0,0 +1,126 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { screen, fireEvent, render, waitFor } from '@testing-library/react'
+import { SSOLinkingWidget } from '../../../../../../frontend/js/features/settings/components/linking/sso-widget'
+
+describe('<SSOLinkingWidget />', function () {
+  const defaultProps = {
+    providerId: 'integration_id',
+    title: 'integration',
+    description: 'integration description',
+    helpPath: '/help/integration',
+    linkPath: 'integration/link',
+    onUnlink: () => Promise.resolve(),
+  }
+
+  it('should render', function () {
+    render(<SSOLinkingWidget {...defaultProps} />)
+    screen.getByText('integration')
+    screen.getByText('integration description')
+    expect(
+      screen.getByRole('link', { name: 'Learn more' }).getAttribute('href')
+    ).to.equal('/help/integration')
+  })
+
+  describe('when unlinked', function () {
+    it('should render a link to `linkPath`', function () {
+      render(<SSOLinkingWidget {...defaultProps} linked={false} />)
+      expect(
+        screen.getByRole('link', { name: 'Link' }).getAttribute('href')
+      ).to.equal('integration/link')
+    })
+  })
+
+  describe('when linked', function () {
+    let unlinkFunction
+
+    beforeEach(function () {
+      unlinkFunction = sinon.stub()
+      render(
+        <SSOLinkingWidget {...defaultProps} linked onUnlink={unlinkFunction} />
+      )
+    })
+
+    it('should display an `unlink` button', function () {
+      screen.getByRole('button', { name: 'Unlink' })
+    })
+
+    it('should open a modal to confirm integration unlinking', function () {
+      fireEvent.click(screen.getByRole('button', { name: 'Unlink' }))
+      screen.getByText('Unlink integration Account')
+      screen.getByText(
+        'Warning: When you unlink your account from integration you will not be able to sign in using integration anymore.'
+      )
+    })
+
+    it('should cancel unlinking when clicking cancel in the confirmation modal', async function () {
+      fireEvent.click(screen.getByRole('button', { name: 'Unlink' }))
+      const cancelBtn = screen.getByRole('button', {
+        name: 'Cancel',
+        hidden: false,
+      })
+      fireEvent.click(cancelBtn)
+      await waitFor(() =>
+        screen.getByRole('button', { name: 'Cancel', hidden: true })
+      )
+      expect(unlinkFunction).not.to.have.been.called
+    })
+  })
+
+  describe('unlinking an account', function () {
+    let confirmBtn, unlinkFunction
+
+    beforeEach(function () {
+      unlinkFunction = sinon.stub()
+      render(
+        <SSOLinkingWidget {...defaultProps} linked onUnlink={unlinkFunction} />
+      )
+      fireEvent.click(screen.getByRole('button', { name: 'Unlink' }))
+      confirmBtn = screen.getByRole('button', {
+        name: 'Unlink',
+        hidden: false,
+      })
+    })
+
+    it('should make an `unlink` request', function () {
+      unlinkFunction.resolves()
+      fireEvent.click(confirmBtn)
+      expect(unlinkFunction).to.have.been.called
+    })
+
+    it('should display feedback while the request is inflight', async function () {
+      unlinkFunction.returns(
+        new Promise<void>(resolve => {
+          setTimeout(resolve, 500)
+        })
+      )
+      fireEvent.click(confirmBtn)
+      await waitFor(() =>
+        expect(screen.getByRole('button', { name: 'Unlinking' }))
+      )
+    })
+  })
+
+  describe('when unlinking fails', function () {
+    beforeEach(function () {
+      const unlinkFunction = sinon.stub().rejects(new Error('unlinking failed'))
+      render(
+        <SSOLinkingWidget {...defaultProps} linked onUnlink={unlinkFunction} />
+      )
+      fireEvent.click(screen.getByRole('button', { name: 'Unlink' }))
+      const confirmBtn = screen.getByRole('button', {
+        name: 'Unlink',
+        hidden: false,
+      })
+      fireEvent.click(confirmBtn)
+    })
+
+    it('should display an error message ', async function () {
+      await waitFor(() => screen.getByText('unlinking failed'))
+    })
+
+    it('should display the unlink button ', async function () {
+      await waitFor(() => screen.getByRole('button', { name: 'Unlink' }))
+    })
+  })
+})