From afe6ecd9f1a602bbe7d5d14a277a0d85a308eddd Mon Sep 17 00:00:00 2001
From: Alex <1353716+alexstojda@users.noreply.github.com>
Date: Mon, 31 Jul 2023 21:41:18 -0400
Subject: [PATCH] test(leagues-frontend): Increase coverage

---
 web/app/src/pages/Leagues/Form.test.tsx | 75 +++++++++++++++++++++----
 web/app/src/pages/Leagues/Form.tsx      | 10 +++-
 2 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/web/app/src/pages/Leagues/Form.test.tsx b/web/app/src/pages/Leagues/Form.test.tsx
index 9b851f5..724e402 100644
--- a/web/app/src/pages/Leagues/Form.test.tsx
+++ b/web/app/src/pages/Leagues/Form.test.tsx
@@ -17,16 +17,15 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockedNavigate,
 }));
 
+let mockLocation: LocationOption
 jest.mock('../../components/LocationSelect', () => ({
   __esModule: true,
   LocationSelect: (props: { onChange: (o: LocationOption) => void }) => <input
     type='text'
     onChange={(e) => {
       props.onChange({
-        label: 'test-location',
-        type: 'pinman',
+        ...mockLocation,
         value: e.target.value,
-        pinballMapId: '1',
       })
     }}
     placeholder={'test-location'}
@@ -34,11 +33,21 @@ jest.mock('../../components/LocationSelect', () => ({
 }));
 
 beforeEach(() => {
+  mockLocation = {
+    label: faker.lorem.words(2),
+    value: '1234',
+    type: 'pinman',
+    pinballMapId: randomInt(1000).toString(),
+  }
   mockedNavigate.mockReset()
   mockApi.prototype.leaguesApi.mockReset()
   mockApi.prototype.parseError.mockReset()
 })
 
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
 describe('LeagueForm', function () {
   it('should render', function () {
     render(
@@ -93,7 +102,7 @@ describe('LeagueForm', function () {
     })
   })
   it(
-    'creates new location with pinball map location and redirects to /leagues if successful',
+    'creates new location with existing location and redirects to /leagues if successful',
     async function () {
       jest.mocked(LeaguesApi).prototype.leaguesPost.mockResolvedValue({
         config: {},
@@ -107,6 +116,8 @@ describe('LeagueForm', function () {
       })
       mockApi.prototype.leaguesApi.mockReturnValue(new LeaguesApi())
 
+      mockLocation.type = 'pinmap'
+
       jest.mocked(LocationsApi).prototype.locationsPost.mockResolvedValue({
         config: {},
         data: {
@@ -131,10 +142,50 @@ describe('LeagueForm', function () {
 
       await waitFor(() => expect(mockedNavigate).toBeCalledWith('/leagues'))
     })
-});
+  it('shows error when create new location fails', async function () {
+    mockLocation.type = 'pinmap'
 
+    jest.mocked(LocationsApi).prototype.locationsPost.mockRejectedValue(false)
+    mockApi.prototype.locationsApi.mockReturnValue(new LocationsApi())
+    const mockError = fake.errorResponse()
+    mockApi.prototype.parseError.mockReturnValue(mockError)
 
-async function typeLeagueInfo(result: RenderResult) {
+    const result = render(
+      <LeagueForm mode={'create'}/>
+    )
+    await typeLeagueInfo(result)
+
+    const submitButton = await result.findByText("Create")
+    act(() => {
+      Simulate.click(submitButton)
+    })
+
+    const error = await result.findByText(mockError.detail)
+    await waitFor(() => {
+      expect(error).toBeInTheDocument()
+      expect(mockedNavigate).not.toBeCalled()
+    })
+  })
+  it('shows error if submitting and no location specified', async function () {
+    const result = render(
+      <LeagueForm mode={'create'}/>
+    )
+    await typeLeagueInfo(result, true)
+
+    const submitButton = await result.findByText("Create")
+    act(() => {
+      Simulate.click(submitButton)
+    })
+
+    const error = await result.findByText('Please select a location for your league')
+    await waitFor(() => {
+      expect(error).toBeInTheDocument()
+      expect(mockedNavigate).not.toBeCalled()
+    })
+  })
+});
+
+async function typeLeagueInfo(result: RenderResult, omitLocation?: boolean) {
   const name = faker.random.words(randomInt(3, 10))
 
   const nameField = await result.findByPlaceholderText("name")
@@ -149,9 +200,11 @@ async function typeLeagueInfo(result: RenderResult) {
     Simulate.change(slugField)
   })
 
-  const locationSelectValue = await result.findByPlaceholderText('test-location')
-  slugField.setAttribute("value", faker.datatype.uuid())
-  act(() => {
-    Simulate.change(locationSelectValue)
-  })
+  if (!omitLocation) {
+    const locationSelectValue = await result.findByPlaceholderText('test-location')
+    slugField.setAttribute("value", faker.datatype.uuid())
+    act(() => {
+      Simulate.change(locationSelectValue)
+    })
+  }
 }
diff --git a/web/app/src/pages/Leagues/Form.tsx b/web/app/src/pages/Leagues/Form.tsx
index 110714d..ce9d850 100644
--- a/web/app/src/pages/Leagues/Form.tsx
+++ b/web/app/src/pages/Leagues/Form.tsx
@@ -41,7 +41,7 @@ export default function LeagueForm(props: LeagueFormProps) {
   });
 
   async function submitForm() {
-    let locationId: string
+    let locationId: string | undefined
     if (locationValue === undefined) {
       setAlert({
         status: "error",
@@ -60,8 +60,11 @@ export default function LeagueForm(props: LeagueFormProps) {
           title: err.title,
           detail: err.detail
         })
-        throw new Error(err.detail)
+        return undefined
       })
+      if (locationId === undefined) {
+        return
+      }
     } else {
       locationId = locationValue.value
     }
@@ -109,7 +112,8 @@ export default function LeagueForm(props: LeagueFormProps) {
       if (validSlug !== e.target.value) {
         setSlugError(
           <p>
-            Slug must be url-friendly. Try <code>{validSlug}</code> instead, or clear the field to use the generated
+            Slug must be url-friendly. Try <code>{validSlug}</code> instead, or clear the field to use the
+            generated
             slug.
           </p>
         )