@looker/api-explorer 0.9.35 → 0.9.37

package/src/routes/AppRouter.tsx

@@ -27,9 +27,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
-import type { ApiModel, SpecList } from '@looker/sdk-codegen'
+import type { ApiModel } from '@looker/sdk-codegen'
 
 import {
+  ErrorDetailScene,
   HomeScene,
   MethodScene,
   MethodTagScene,
@@ -41,7 +42,6 @@ import { diffPath } from '../utils'
 
 interface AppRouterProps {
   specKey: string
-  specs: SpecList
   api: ApiModel
   toggleNavigation: (target?: boolean) => void
 }
@@ -49,13 +49,15 @@ interface AppRouterProps {
 export const AppRouter: FC<AppRouterProps> = ({
   api,
   specKey,
-  specs,
   toggleNavigation,
 }) => (
   <Switch>
     <Redirect from="/" to={`/${specKey}/`} exact />
-    <Route path={`/${diffPath}/:l?/:r?`}>
-      <DiffScene specs={specs} toggleNavigation={toggleNavigation} />
+    <Route path="/:specKey/err/:statusCode/:verb/*">
+      <ErrorDetailScene api={api} />
+    </Route>
+    <Route path={`/:specKey/${diffPath}/:compareSpecKey?`}>
+      <DiffScene toggleNavigation={toggleNavigation} />
     </Route>
     <Route path="/:specKey/(methods|types)?" exact>
       <HomeScene api={api} />

package/src/scenes/DiffScene/DiffScene.tsx

@@ -27,7 +27,7 @@
 import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
 import type { ApiModel, DiffRow, SpecList } from '@looker/sdk-codegen'
-import { useHistory, useRouteMatch } from 'react-router-dom'
+import { useRouteMatch } from 'react-router-dom'
 import {
   Box,
   Flex,
@@ -41,8 +41,8 @@ import { SyncAlt } from '@styled-icons/material/SyncAlt'
 import { useSelector } from 'react-redux'
 
 import { ApixSection } from '../../components'
-import { selectCurrentSpec } from '../../state'
-import { diffPath, getApixAdaptor } from '../../utils'
+import { selectCurrentSpec, selectSpecs } from '../../state'
+import { diffPath, getApixAdaptor, useNavigation } from '../../utils'
 import { diffSpecs, standardDiffToggles } from './diffUtils'
 import { DocDiff } from './DocDiff'
 
@@ -74,7 +74,6 @@ const diffToggles = [
 ]
 
 export interface DiffSceneProps {
-  specs: SpecList
   toggleNavigation: (target?: boolean) => void
 }
 
@@ -82,12 +81,13 @@ const validateParam = (specs: SpecList, specKey = '') => {
   return specs[specKey] ? specKey : ''
 }
 
-export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
+export const DiffScene: FC<DiffSceneProps> = ({ toggleNavigation }) => {
   const adaptor = getApixAdaptor()
-  const history = useHistory()
+  const { navigate } = useNavigation()
   const spec = useSelector(selectCurrentSpec)
+  const specs = useSelector(selectSpecs)
   const currentSpecKey = spec.key
-  const match = useRouteMatch<{ l: string; r: string }>(`/${diffPath}/:l?/:r?`)
+  const match = useRouteMatch<{ l: string; r: string }>(`/:l/${diffPath}/:r?`)
   const l = validateParam(specs, match?.params.l)
   const r = validateParam(specs, match?.params.r)
 
@@ -123,14 +123,14 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   const [delta, setDelta] = useState<DiffRow[]>([])
 
   const handleLeftChange = (newLeft: string) => {
-    history.push(`/${diffPath}/${newLeft}/${rightKey}`)
+    navigate(`/${newLeft}/${diffPath}/${rightKey}`)
   }
   const handleRightChange = (newRight: string) => {
-    history.push(`/${diffPath}/${leftKey}/${newRight}`)
+    navigate(`/${leftKey}/${diffPath}/${newRight}`)
   }
 
   const handleSwitch = () => {
-    history.push(`/${diffPath}/${rightKey}/${leftKey}`)
+    navigate(`/${rightKey}/${diffPath}/${leftKey}`)
   }
 
   useEffect(() => {

package/src/scenes/DiffScene/DocDiff/DiffItem.spec.tsx

@@ -51,9 +51,10 @@ describe('DiffMethodLink', () => {
     const link = screen.getByRole('link')
     expect(link).toHaveTextContent(`${method.name} for ${specKey}`)
     fireEvent.click(link)
-    expect(pushSpy).toHaveBeenCalledWith(
-      `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`
-    )
+    expect(pushSpy).toHaveBeenCalledWith({
+      pathname: `/${specKey}/methods/${method.schema.tags[0]}/${method.name}`,
+      search: '',
+    })
   })
 
   test('it renders missing method and does not navigate on click', () => {

package/src/scenes/DiffScene/DocDiff/DiffItem.tsx

@@ -25,7 +25,6 @@
  */
 import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
-import { useHistory } from 'react-router'
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
 import styled from 'styled-components'
 import { Accordion2, Box, Card, Grid, Heading, Link } from '@looker/components'
@@ -33,7 +32,7 @@ import type { DiffRow } from '@looker/sdk-codegen/src'
 import type { ApiModel, IMethod } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
 import { selectSdkLanguage } from '../../../state'
-import { buildMethodPath } from '../../../utils'
+import { buildMethodPath, useNavigation } from '../../../utils'
 import { DiffBanner } from './DiffBanner'
 import { differ } from './docDiffUtils'
 
@@ -60,7 +59,7 @@ export const DiffMethodLink: FC<DiffMethodLinkProps> = ({
   method,
   specKey,
 }) => {
-  const history = useHistory()
+  const { navigate } = useNavigation()
 
   if (!method) return <Heading as="h4">{`Missing in ${specKey}`}</Heading>
 
@@ -71,7 +70,7 @@ export const DiffMethodLink: FC<DiffMethodLinkProps> = ({
     <DiffLink
       role="link"
       onClick={() => {
-        history.push(path)
+        navigate(path)
       }}
     >{`${method.name} for ${specKey}`}</DiffLink>
   )

package/src/scenes/DiffScene/DocDiff/DocDiff.spec.tsx

@@ -38,9 +38,9 @@ describe('DocDiff', () => {
   const rightKey = specs['4.0'].key
   const leftApi = specs['3.1'].api!
   const rightApi = specs['4.0'].api!
+  const delta = diffSpecs(leftApi, rightApi, standardDiffToggles)
 
   it('renders', () => {
-    const delta = diffSpecs(leftApi, rightApi, standardDiffToggles)
     renderWithReduxProvider(
       <DocDiff
         leftKey={leftKey}
@@ -61,6 +61,7 @@ describe('DocDiff', () => {
       screen.getByRole('button', { name: 'Next page of results' })
     ).toBeInTheDocument()
   })
+
   it('renders when there is no delta', () => {
     renderWithReduxProvider(
       <DocDiff
@@ -75,7 +76,6 @@ describe('DocDiff', () => {
   })
 
   it('paginates', async () => {
-    const delta = diffSpecs(leftApi, rightApi, standardDiffToggles)
     renderWithReduxProvider(
       <DocDiff
         leftKey={leftKey}
@@ -109,4 +109,75 @@ describe('DocDiff', () => {
       ).toBeInTheDocument()
     })
   })
+
+  it('paginates with correct number of entries per page', async () => {
+    const pageSize = 5
+    renderWithReduxProvider(
+      <DocDiff
+        leftKey={leftKey}
+        leftSpec={leftApi}
+        rightKey={rightKey}
+        rightSpec={rightApi}
+        delta={delta}
+        pageSize={pageSize}
+      />
+    )
+
+    for (let i = 0; i < pageSize; i++) {
+      const row = delta[i]
+      expect(screen.getByText(row.name)).toBeInTheDocument()
+      expect(screen.getByText(row.id)).toBeInTheDocument()
+      expect(
+        screen.getByText(rightApi.methods[row.name].summary)
+      ).toBeInTheDocument()
+    }
+    const notDisplayedRow = delta[pageSize]
+    expect(screen.queryByText(notDisplayedRow.name)).not.toBeInTheDocument()
+  })
+
+  it('paginates with correct total page count', async () => {
+    const pageSize = 5
+    renderWithReduxProvider(
+      <DocDiff
+        leftKey={leftKey}
+        leftSpec={leftApi}
+        rightKey={rightKey}
+        rightSpec={rightApi}
+        delta={delta}
+        pageSize={pageSize}
+      />
+    )
+    const expectedPageCount = Math.ceil(delta.length / pageSize)
+    expect(screen.getByText(`of ${expectedPageCount}`)).toBeInTheDocument()
+  })
+
+  it('final diff entry of one page does not appear in next page', async () => {
+    const pageSize = 5
+    renderWithReduxProvider(
+      <DocDiff
+        leftKey={leftKey}
+        leftSpec={leftApi}
+        rightKey={rightKey}
+        rightSpec={rightApi}
+        delta={delta}
+        pageSize={pageSize}
+      />
+    )
+    const lastPageEntry = delta[pageSize - 1]
+    expect(screen.getByText(lastPageEntry.name)).toBeInTheDocument()
+    expect(screen.getByText(lastPageEntry.id)).toBeInTheDocument()
+    expect(
+      screen.getByText(rightApi.methods[lastPageEntry.name].summary)
+    ).toBeInTheDocument()
+
+    // go to page 2
+    userEvent.click(
+      screen.getByRole('button', { name: 'Next page of results' })
+    )
+
+    await waitFor(() => {
+      expect(screen.queryByText(lastPageEntry.name)).not.toBeInTheDocument()
+      expect(screen.queryByText(lastPageEntry.id)).not.toBeInTheDocument()
+    })
+  })
 })

package/src/scenes/DiffScene/DocDiff/DocDiff.tsx

@@ -63,8 +63,8 @@ export const DocDiff: FC<DocDiffProps> = ({
 
   if (delta.length === 0) return <Text>{'No differences found'}</Text>
 
-  const pageCount = Math.round((delta.length - 1) / pageSize)
-  const pageItemData = delta.slice((page - 1) * pageSize, page * pageSize + 1)
+  const pageCount = Math.ceil(delta.length / pageSize)
+  const pageItemData = delta.slice((page - 1) * pageSize, page * pageSize)
 
   return (
     <>
@@ -76,9 +76,9 @@ export const DocDiff: FC<DocDiffProps> = ({
             <Heading as="h2">{`${delta.length} differences between ${leftKey} and ${rightKey}`}</Heading>
           </Space>
           <SpaceVertical mt="large" gap="xxsmall">
-            {pageItemData.map((item, index) => (
+            {pageItemData.map((item) => (
               <DiffItem
-                key={`page-${page} item-${index}`}
+                key={item.name}
                 item={item}
                 leftKey={leftKey}
                 leftSpec={leftSpec}

package/src/scenes/ErrorDetailScene/ErrorDetailScene.tsx

@@ -0,0 +1,72 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2022 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { Redirect, useRouteMatch } from 'react-router-dom'
+import { getEnvAdaptor } from '@looker/extension-utils'
+import { ErrorDoc } from '@looker/sdk-rtl'
+import React from 'react'
+import type { IApiModel } from '@looker/sdk-codegen'
+
+import { useNavigation } from '../../utils'
+
+interface ErrorDetailSceneProps {
+  api: IApiModel
+}
+
+/**
+ * Scene responsible for redirecting users from an error doc link to a specific
+ * method scene
+ */
+export const ErrorDetailScene = ({ api }: ErrorDetailSceneProps) => {
+  const match = useRouteMatch<{
+    specKey: string
+    statusCode: string
+    verb: string
+  }>(`/:specKey/err/:statusCode/:verb/*`)
+  const methodPath = match?.params[0]
+  const adaptor = getEnvAdaptor()
+  const errorDoc = new ErrorDoc(adaptor.sdk)
+  const restPath = errorDoc.specPath(methodPath)
+
+  const methodId = `${match?.params.verb} /${restPath}`.toLocaleLowerCase()
+  const specKey = match?.params.specKey
+  const statusCode = match?.params.statusCode
+
+  const method = Object.values(api.methods).find(
+    (method) => method.id.toLocaleLowerCase() === methodId
+  )
+
+  const methodTag = method?.schema.tags[0]
+  const methodName = method?.operationId
+
+  const { buildPathWithGlobalParams } = useNavigation()
+
+  const redirectPath = buildPathWithGlobalParams(
+    `/${specKey}/methods/${methodTag}/${methodName}`,
+    { e: statusCode }
+  )
+
+  return <Redirect to={redirectPath} />
+}

package/src/scenes/ErrorDetailScene/index.ts

@@ -0,0 +1,26 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2022 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+export { ErrorDetailScene } from './ErrorDetailScene'

package/src/scenes/MethodScene/MethodScene.tsx

@@ -25,7 +25,7 @@
  */
 
 import type { FC } from 'react'
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import {
   Aside,
   Button,
@@ -33,6 +33,7 @@ import {
   Space,
   useToggle,
   ExtendComponentsThemeProvider,
+  Span,
 } from '@looker/components'
 import { Beaker } from '@looker/icons'
 import { useHistory, useParams } from 'react-router-dom'
@@ -42,14 +43,13 @@ import { typeRefs } from '@looker/sdk-codegen'
 import { useSelector } from 'react-redux'
 import type { IEnvironmentAdaptor } from '@looker/extension-utils'
 
-import { getApixAdaptor } from '../../utils'
+import { getApixAdaptor, useNavigation, useQuery } from '../../utils'
 import {
   ApixSection,
   DocActivityType,
   DocMarkdown,
   DocRateLimited,
   DocReferences,
-  DocResponses,
   DocSDKs,
   DocSdkUsage,
   DocSource,
@@ -58,7 +58,7 @@ import {
   DocSchema,
 } from '../../components'
 import { selectSdkLanguage } from '../../state'
-import { DocOperation, DocRequestBody } from './components'
+import { DocOperation, DocRequestBody, DocResponses } from './components'
 
 interface MethodSceneProps {
   api: ApiModel
@@ -78,13 +78,16 @@ const showRunIt = async (adaptor: IEnvironmentAdaptor) => {
 export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
   const adaptor = getApixAdaptor()
   const history = useHistory()
+  const { navigate } = useNavigation()
   const sdkLanguage = useSelector(selectSdkLanguage)
   const { specKey, methodTag, methodName } = useParams<MethodSceneParams>()
   const { value, toggle, setOn } = useToggle()
   const [method, setMethod] = useState(api.methods[methodName])
   const seeTypes = typeRefs(api, method?.customTypes)
-
+  const query = useQuery()
+  const errorCode = query.get('e') ?? undefined
   const RunItButton = value ? Button : ButtonOutline
+  const docResponsesRef = useRef<HTMLElement>(null)
 
   useEffect(() => {
     const foundMethod = api.methods[methodName]
@@ -94,9 +97,9 @@ export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
       // Invalid method
       if (api.tags[methodTag]) {
         // Found tag though
-        history.push(`/${specKey}/methods/${methodTag}`)
+        navigate(`/${specKey}/methods/${methodTag}`)
       } else {
-        history.push(`/${specKey}/methods`)
+        navigate(`/${specKey}/methods`)
       }
     }
   }, [api, history, methodName, methodTag, specKey])
@@ -115,6 +118,16 @@ export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
     checkRunIt()
   }, [adaptor, setOn])
 
+  useEffect(() => {
+    if (method.responses && errorCode) {
+      if (docResponsesRef.current) {
+        window.setTimeout(() => {
+          docResponsesRef.current!.scrollIntoView()
+        }, 300)
+      }
+    }
+  }, [method])
+
   const runItToggle = (
     <RunItButton
       color={value ? 'key' : 'neutral'}
@@ -147,7 +160,9 @@ export const MethodScene: FC<MethodSceneProps> = ({ api }) => {
           <DocRequestBody api={api} method={method} />
           <DocSdkUsage method={method} />
           <DocReferences typesUsed={seeTypes} api={api} specKey={specKey} />
-          <DocResponses api={api} responses={method.responses} />
+          <Span ref={docResponsesRef}>
+            <DocResponses api={api} method={method} errorCode={errorCode} />
+          </Span>
           <DocSchema object={method.schema} />
         </ApixSection>
       )}

package/src/{components → scenes/MethodScene/components}/DocResponses/DocResponseTypes.tsx

@@ -24,7 +24,6 @@
 
  */
 
-import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
 import { ButtonToggle, ButtonItem } from '@looker/components'
 import type {
@@ -33,10 +32,11 @@ import type {
   IMethodResponse,
 } from '@looker/sdk-codegen'
 
-import { ExploreType } from '..'
+import { ExploreType } from '../../../../components'
 
 interface DocResponseTypesProps {
   api: ApiModel
+  /** responses to render */
   responses: KeyedCollection<IMethodResponse>
 }
 
@@ -45,10 +45,7 @@ interface DocResponseTypesProps {
  * toggling media type and render the response
  * @param response
  */
-export const DocResponseTypes: FC<DocResponseTypesProps> = ({
-  api,
-  responses,
-}) => {
+export const DocResponseTypes = ({ api, responses }: DocResponseTypesProps) => {
   const mediaTypes = Object.keys(responses)
   const [selectedMediaType, setSelectedMediaType] = useState(mediaTypes[0])
   const [resps, setResps] = useState(responses)

package/src/scenes/MethodScene/components/DocResponses/DocResponses.spec.tsx

@@ -0,0 +1,153 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import React from 'react'
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  registerTestEnvAdaptor,
+  unregisterEnvAdaptor,
+} from '@looker/extension-utils'
+
+import { api } from '../../../../test-data'
+import { renderWithRouter } from '../../../../test-utils'
+import { DocResponses } from './DocResponses'
+import { buildResponseTree } from './utils'
+
+describe('DocResponses', () => {
+  beforeAll(() => {
+    registerTestEnvAdaptor()
+  })
+
+  afterAll(() => {
+    unregisterEnvAdaptor()
+  })
+
+  test('it renders all response statuses and their types', async () => {
+    const responses = api.methods.run_look.responses
+    renderWithRouter(<DocResponses api={api} method={api.methods.run_look} />)
+
+    expect(screen.getByText('Response Models')).toBeInTheDocument()
+
+    const responseTree = buildResponseTree(responses)
+    const expectedRespStatuses = Object.keys(responseTree)
+    expect(
+      screen.getAllByRole('tab', {
+        name: new RegExp(`${expectedRespStatuses.join('|')}`),
+      })
+    ).toHaveLength(expectedRespStatuses.length)
+
+    userEvent.click(screen.getByRole('tab', { name: '200: Look' }))
+    const successRespTypes = Object.keys(responseTree['200: Look'])
+    await waitFor(() => {
+      expect(
+        screen.getAllByRole('button', {
+          name: new RegExp(`${successRespTypes.join('|')}`),
+        })
+      ).toHaveLength(successRespTypes.length)
+    })
+  })
+
+  test('selects tab corresponding to error code query param if present', async () => {
+    const sampleIndex = {
+      '404': {
+        url: '404.md',
+      },
+      '404/post/login': {
+        url: 'login_404.md',
+      },
+    }
+
+    const badLoginMd = `## API Response 404 for \`login\`
+
+## Description
+
+A 404 Error response from the /login endpoint most often means that an attempt to login at a valid Looker URL was made but the combination of client_id and client_secret provided do not match an existing valid credential on that instance.
+
+See [HTTP 404 - Not Found](https://docs.looker.com/r/reference/looker-http-codes/404) for general information about this HTTP response from Looker.`
+
+    const mockResponse = async (val: string): Promise<Response> => {
+      const resp: Response = {
+        bodyUsed: false,
+        ok: true,
+        redirected: false,
+        statusText: '',
+        url: '',
+        text(): Promise<string> {
+          return Promise.resolve(val)
+        },
+        status: 200,
+        headers: {} as Headers,
+        type: 'basic',
+        clone: function (): Response {
+          throw new Error('Function not implemented.')
+        },
+        body: null,
+        arrayBuffer: function (): Promise<ArrayBuffer> {
+          throw new Error('Function not implemented.')
+        },
+        blob: function (): Promise<Blob> {
+          throw new Error('Function not implemented.')
+        },
+        formData: function (): Promise<FormData> {
+          throw new Error('Function not implemented.')
+        },
+        json: function (): Promise<any> {
+          throw new Error('Function not implemented.')
+        },
+      }
+      return Promise.resolve(resp)
+    }
+    const fetcher = global.fetch
+    global.fetch = jest.fn((input: RequestInfo, _init?: RequestInit) => {
+      const url = input.toString()
+      let result = 'I dunno'
+      if (url.endsWith('index.json')) {
+        result = JSON.stringify(sampleIndex)
+      }
+      if (url.endsWith('login_404.md')) {
+        result = badLoginMd
+      }
+      return mockResponse(result)
+    })
+
+    renderWithRouter(
+      <DocResponses api={api} method={api.methods.login} errorCode="404" />
+    )
+    expect(screen.getByText('Response Models')).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(screen.getByRole('tab', { name: /^404: \w+/ })).toHaveAttribute(
+        'aria-selected',
+        'true'
+      )
+      expect(
+        screen.getByRole('heading', { name: 'Description' })
+      ).toBeInTheDocument()
+    })
+
+    global.fetch = fetcher
+  })
+})