From 9540f194ff4a6795adbf6144dab131883c5fa5ed Mon Sep 17 00:00:00 2001
From: Rola <rola.abuhasna@sentry.io>
Date: Fri, 20 Sep 2024 15:03:16 +0200
Subject: [PATCH] more tests

---
 .../TokenlessSection.spec.tsx                 | 73 ++++++++++++++++---
 1 file changed, 64 insertions(+), 9 deletions(-)

diff --git a/src/pages/AccountSettings/tabs/OrgUploadToken/TokenlessSection/TokenlessSection.spec.tsx b/src/pages/AccountSettings/tabs/OrgUploadToken/TokenlessSection/TokenlessSection.spec.tsx
index 23761bb5f7..be18add0e4 100644
--- a/src/pages/AccountSettings/tabs/OrgUploadToken/TokenlessSection/TokenlessSection.spec.tsx
+++ b/src/pages/AccountSettings/tabs/OrgUploadToken/TokenlessSection/TokenlessSection.spec.tsx
@@ -4,8 +4,6 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import TokenlessSection from './TokenlessSection'
 
-jest.mock('./TokenRequiredModal', () => () => 'Mocked TokenRequiredModal')
-
 const Wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/account/github/codecov/org-upload-token']}>
     <Route path="/account/:provider/:owner/org-upload-token">{children}</Route>
@@ -15,30 +13,38 @@ const Wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
 describe('TokenlessSection', () => {
   const setup = () => {
     const user = userEvent.setup()
-    render(<TokenlessSection />, { wrapper: Wrapper })
+
     return { user }
   }
 
   it('renders the token authentication title', () => {
+    render(<TokenlessSection />, { wrapper: Wrapper })
     setup()
+
     const title = screen.getByText('Token authentication')
     expect(title).toBeInTheDocument()
   })
 
   it('renders the learn more link', () => {
+    render(<TokenlessSection />, { wrapper: Wrapper })
     setup()
+
     const learnMoreLink = screen.getByText('learn more')
     expect(learnMoreLink).toBeInTheDocument()
   })
 
   it('renders the authentication option selection text', () => {
+    render(<TokenlessSection />, { wrapper: Wrapper })
     setup()
+
     const optionText = screen.getByText('Select an authentication option')
     expect(optionText).toBeInTheDocument()
   })
 
   it('renders "Not required" option description', () => {
+    render(<TokenlessSection />, { wrapper: Wrapper })
     setup()
+
     const notRequiredDescription = screen.getByText(
       'When a token is not required, your team can upload coverage reports without one. Existing tokens will still work, and no action is needed for past uploads. Designed for public open-source projects.'
     )
@@ -46,24 +52,73 @@ describe('TokenlessSection', () => {
   })
 
   it('renders "Required" option description', () => {
+    render(<TokenlessSection />, { wrapper: Wrapper })
     setup()
+
     const requiredDescription = screen.getByText(
       'When a token is required, your team must use a global or repo-specific token for uploads. Designed for private repositories and closed-source projects.'
     )
     expect(requiredDescription).toBeInTheDocument()
   })
 
-  it('renders and opens the token required modal when "Required" option is selected', async () => {
-    const { user } = setup()
+  describe('when "Required" option is selected', () => {
+    it('renders the "Cancel" button', async () => {
+      render(<TokenlessSection />, { wrapper: Wrapper })
+      const { user } = setup()
 
-    const requiredOption = screen.getByLabelText('Required')
-    await user.click(requiredOption)
+      const requiredOption = screen.getByLabelText('Required')
+      await user.click(requiredOption)
+
+      const cancelButton = screen.getByRole('button', { name: /Cancel/ })
+      expect(cancelButton).toBeInTheDocument()
+    })
+
+    it('renders the "Require token for upload" button', async () => {
+      render(<TokenlessSection />, { wrapper: Wrapper })
+      const { user } = setup()
+
+      const requiredOption = screen.getByLabelText('Required')
+      await user.click(requiredOption)
+
+      const requireTokenButton = screen.getByRole('button', {
+        name: /Require token for upload/,
+      })
+      expect(requireTokenButton).toBeInTheDocument()
+    })
+
+    it('removes modal and defaults to not required when "Cancel" button is clicked', async () => {
+      render(<TokenlessSection />, { wrapper: Wrapper })
+      const { user } = setup()
 
-    const modal = screen.getByText('Mocked TokenRequiredModal')
-    expect(modal).toBeInTheDocument()
+      const requiredOption = screen.getByLabelText('Required')
+      await user.click(requiredOption)
+
+      const cancelButton = screen.getByRole('button', { name: /Cancel/ })
+      await user.click(cancelButton)
+
+      const notRequiredOption = screen.getByLabelText('Not required')
+      expect(notRequiredOption).toBeChecked()
+    })
+
+    it('removes modal and switches to required when "Require token for upload" button is clicked', async () => {
+      render(<TokenlessSection />, { wrapper: Wrapper })
+      const { user } = setup()
+
+      const requiredOption = screen.getByLabelText('Required')
+      await user.click(requiredOption)
+
+      const requireTokenButton = screen.getByRole('button', {
+        name: /Require token for upload/,
+      })
+      await user.click(requireTokenButton)
+
+      const requiredOptionAfterClick = screen.getByLabelText('Required')
+      expect(requiredOptionAfterClick).toBeChecked()
+    })
   })
 
   it("switches to 'Not required' option when not required is selected", async () => {
+    render(<TokenlessSection />, { wrapper: Wrapper })
     const { user } = setup()
 
     const requiredOption = screen.getByLabelText('Required')