test(leagues-frontend): Increase coverage

web/app/src/pages/Leagues/Form.test.tsx

@@ -17,28 +17,37 @@ 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'}
  />,
 }));
 
 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)
+ })
+ }
 }

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>
  )