@looker/api-explorer 0.9.18 → 0.9.24

package/src/components/Header/Header.spec.tsx

@@ -29,7 +29,7 @@ import { codeGenerators } from '@looker/sdk-codegen'
 import userEvent from '@testing-library/user-event'
 
 import { specs, specState } from '../../test-data'
-import { renderWithRouter, withReduxProvider } from '../../test-utils'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
 import { defaultSettingsState } from '../../state'
 import { Header } from './Header'
 
@@ -43,15 +43,13 @@ describe('Header', () => {
   })
 
   test('it renders a title', () => {
-    renderWithRouter(
-      withReduxProvider(
-        <Header
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-          toggleNavigation={toggleNavigation}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <Header
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+        toggleNavigation={toggleNavigation}
+      />
     )
     expect(screen.getByText('API Explorer').closest('a')).toHaveAttribute(
       'href',
@@ -60,15 +58,13 @@ describe('Header', () => {
   })
 
   test('it renders a spec selector with the correct default value and options', async () => {
-    renderWithRouter(
-      withReduxProvider(
-        <Header
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-          toggleNavigation={toggleNavigation}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <Header
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+        toggleNavigation={toggleNavigation}
+      />
     )
     const selector = screen.getByLabelText('spec selector')
     expect(selector).toHaveValue(`${specState.spec.key}`)
@@ -83,15 +79,13 @@ describe('Header', () => {
   })
 
   test('it renders an sdk language selector with the correct value and options', async () => {
-    renderWithRouter(
-      withReduxProvider(
-        <Header
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-          toggleNavigation={toggleNavigation}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <Header
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+        toggleNavigation={toggleNavigation}
+      />
     )
     const selector = screen.getByLabelText('sdk language selector')
     expect(selector).toHaveValue(defaultSettingsState.sdkLanguage)
@@ -106,15 +100,13 @@ describe('Header', () => {
   })
 
   test('it renders an icon button for the differ', () => {
-    renderWithRouter(
-      withReduxProvider(
-        <Header
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-          toggleNavigation={toggleNavigation}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <Header
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+        toggleNavigation={toggleNavigation}
+      />
     )
     expect(
       screen

package/src/components/Header/Header.tsx

@@ -24,7 +24,8 @@
 
  */
 
-import React, { FC, Dispatch } from 'react'
+import type { FC, Dispatch } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import {
   Icon,
@@ -35,10 +36,10 @@ import {
 } from '@looker/components'
 import { LookerLogo } from '@looker/icons'
 import { Menu } from '@styled-icons/material/Menu'
-import { SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { SpecList, SpecItem } from '@looker/sdk-codegen'
 
 import { Link } from '../Link'
-import { SpecAction } from '../../reducers'
+import type { SpecAction } from '../../reducers'
 import { SelectorContainer } from '../SelectorContainer'
 
 interface HeaderProps {
@@ -55,6 +56,8 @@ interface HeaderProps {
 
 export const HEADER_REM = 4
 
+export const HEADER_TOGGLE_LABEL = 'Toggle Navigation'
+
 /**
  * Renders the API Explorer header
  */
@@ -76,7 +79,8 @@ export const HeaderLayout: FC<HeaderProps> = ({
         size="small"
         onClick={() => toggleNavigation()}
         icon={<Menu />}
-        label="Toggle Navigation"
+        aria-label="nav toggle"
+        label={HEADER_TOGGLE_LABEL}
       />
 
       <Link to={`/${spec.key}`}>

package/src/components/Header/index.ts

@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { Header, HEADER_REM } from './Header'
+export { Header, HEADER_REM, HEADER_TOGGLE_LABEL } from './Header'

package/src/components/SelectorContainer/ApiSpecSelector.spec.tsx

@@ -29,11 +29,21 @@ import { renderWithTheme } from '@looker/components-test-utils'
 import userEvent from '@testing-library/user-event'
 
 import { specs, getLoadedSpecState } from '../../test-data'
-import { renderWithRouter } from '../../test-utils'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
 import { ApiSpecSelector } from './ApiSpecSelector'
 
 const specState = getLoadedSpecState()
 
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useLocation: () => ({
+      pathname: '/4.0/methods/Dashboard/dashboard',
+    }),
+  }
+})
+
 describe('ApiSpecSelector', () => {
   const specDispatch = jest.fn()
   Element.prototype.scrollIntoView = jest.fn()
@@ -68,7 +78,7 @@ describe('ApiSpecSelector', () => {
   })
 
   test('it fires a SELECT_SPEC action when another spec is selected', async () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <ApiSpecSelector
         specs={specs}
         spec={specState.spec}

package/src/components/SelectorContainer/ApiSpecSelector.tsx

@@ -24,12 +24,14 @@
 
  */
 
-import React, { FC, Dispatch } from 'react'
+import type { FC, Dispatch } from 'react'
+import React from 'react'
 import { Select } from '@looker/components'
-import { useHistory } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 
-import { SpecList, SpecItem } from '@looker/sdk-codegen'
-import { SpecAction, selectSpec } from '../../reducers'
+import type { SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { SpecAction } from '../../reducers'
+import { selectSpec } from '../../reducers'
 
 interface ApiSpecSelectorProps {
   specs: SpecList
@@ -43,6 +45,7 @@ export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({
   specDispatch,
 }) => {
   const history = useHistory()
+  const location = useLocation()
   const options = Object.entries(specs).map(([key, spec]) => ({
     value: key,
     label: key,
@@ -51,7 +54,8 @@ export const ApiSpecSelector: FC<ApiSpecSelectorProps> = ({
 
   const handleChange = (specKey: string) => {
     specDispatch(selectSpec(specKey))
-    history.push(`/${specKey}`)
+    const matchPath = location.pathname.replace(`/${spec.key}`, `/${specKey}`)
+    history.push(matchPath)
   }
 
   return (

package/src/components/SelectorContainer/SdkLanguageSelector.spec.tsx

@@ -27,10 +27,11 @@ import React from 'react'
 import { act, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { codeGenerators } from '@looker/sdk-codegen'
+import * as reactRedux from 'react-redux'
 
-import { defaultSettingsState } from '../../state'
+import { registerTestEnvAdaptor } from '@looker/extension-utils'
+import { defaultSettingsState, settingsSlice } from '../../state'
 import { renderWithReduxProvider } from '../../test-utils'
-import { EnvAdaptorConstants } from '../../utils'
 import { SdkLanguageSelector } from './SdkLanguageSelector'
 
 describe('SdkLanguageSelector', () => {
@@ -60,18 +61,23 @@ describe('SdkLanguageSelector', () => {
   })
 
   test('it stores the selected language in localStorage', async () => {
+    registerTestEnvAdaptor()
+    const mockDispatch = jest.fn()
+    jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch)
     renderWithReduxProvider(<SdkLanguageSelector />)
+
     const selector = screen.getByRole('textbox')
     expect(defaultSettingsState.sdkLanguage).toEqual('Python')
     expect(selector).toHaveValue('Python')
 
+    userEvent.click(selector)
     await act(async () => {
-      await userEvent.click(selector)
       await userEvent.click(screen.getByRole('option', { name: 'TypeScript' }))
-      await waitFor(() => {
-        expect(localStorage.setItem).toHaveBeenLastCalledWith(
-          EnvAdaptorConstants.LOCALSTORAGE_SDK_LANGUAGE_KEY,
-          'TypeScript'
+      await waitFor(async () => {
+        expect(mockDispatch).toHaveBeenLastCalledWith(
+          settingsSlice.actions.setSdkLanguageAction({
+            sdkLanguage: 'TypeScript',
+          })
         )
       })
     })

package/src/components/SelectorContainer/SdkLanguageSelector.tsx

@@ -23,24 +23,21 @@
  SOFTWARE.
 
  */
-import React, { FC, useContext } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 import { codeGenerators } from '@looker/sdk-codegen'
 import { Select } from '@looker/components'
 import { useSelector } from 'react-redux'
-import { SelectOptionProps } from '@looker/components/lib/Form/Inputs/Select'
+import type { SelectOptionProps } from '@looker/components'
 
-import { useActions } from '../../hooks'
-import { getSelectedSdkLanguage } from '../../state'
-import { EnvAdaptorContext } from '../../context'
-import { EnvAdaptorConstants } from '../../utils'
+import { useSettingActions, selectSdkLanguage } from '../../state'
 
 /**
  * Allows the user to select their preferred SDK language
  */
 export const SdkLanguageSelector: FC = () => {
-  const { setSdkLanguageAction } = useActions()
-  const selectedSdkLanguage = useSelector(getSelectedSdkLanguage)
-  const { envAdaptor } = useContext(EnvAdaptorContext)
+  const { setSdkLanguageAction } = useSettingActions()
+  const selectedSdkLanguage = useSelector(selectSdkLanguage)
 
   const allSdkLanguages: SelectOptionProps[] = codeGenerators.map((gen) => ({
     value: gen.language,
@@ -55,11 +52,7 @@ export const SdkLanguageSelector: FC = () => {
   })
 
   const handleChange = (language: string) => {
-    setSdkLanguageAction(language)
-    envAdaptor.localStorageSetItem(
-      EnvAdaptorConstants.LOCALSTORAGE_SDK_LANGUAGE_KEY,
-      language
-    )
+    setSdkLanguageAction({ sdkLanguage: language })
   }
 
   return (

package/src/components/SelectorContainer/SelectorContainer.spec.tsx

@@ -29,7 +29,7 @@ import { codeGenerators } from '@looker/sdk-codegen'
 import userEvent from '@testing-library/user-event'
 
 import { specs, specState } from '../../test-data'
-import { renderWithRouter, withReduxProvider } from '../../test-utils'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
 import { defaultSettingsState } from '../../state'
 import { SelectorContainer } from './SelectorContainer'
 
@@ -41,14 +41,12 @@ describe('SelectorContainer', () => {
   })
 
   test('it renders a spec selector with the correct default value and options', async () => {
-    renderWithRouter(
-      withReduxProvider(
-        <SelectorContainer
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <SelectorContainer
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+      />
     )
     const selector = screen.getByLabelText('spec selector')
     expect(selector).toHaveValue(`${specState.spec.key}`)
@@ -63,14 +61,12 @@ describe('SelectorContainer', () => {
   })
 
   test('it renders an sdk language selector with the correct value and options', async () => {
-    renderWithRouter(
-      withReduxProvider(
-        <SelectorContainer
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <SelectorContainer
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+      />
     )
     const selector = screen.getByLabelText('sdk language selector')
     expect(selector).toHaveValue(defaultSettingsState.sdkLanguage)
@@ -85,14 +81,12 @@ describe('SelectorContainer', () => {
   })
 
   test('it renders an icon button for the differ', () => {
-    renderWithRouter(
-      withReduxProvider(
-        <SelectorContainer
-          specs={specs}
-          spec={specState.spec}
-          specDispatch={specDispatch}
-        />
-      )
+    renderWithRouterAndReduxProvider(
+      <SelectorContainer
+        specs={specs}
+        spec={specState.spec}
+        specDispatch={specDispatch}
+      />
     )
     expect(
       screen

package/src/components/SelectorContainer/SelectorContainer.tsx

@@ -24,17 +24,19 @@
 
  */
 
-import React, { FC, Dispatch } from 'react'
+import type { FC, Dispatch } from 'react'
+import React from 'react'
+import type { SpaceHelperProps } from '@looker/components'
 import { Space, IconButton } from '@looker/components'
 import { ChangeHistory } from '@styled-icons/material/ChangeHistory'
-import { SpecList, SpecItem } from '@looker/sdk-codegen'
+import type { SpecList, SpecItem } from '@looker/sdk-codegen'
 import { Link } from '../Link'
-import { SpecAction } from '../../reducers'
+import type { SpecAction } from '../../reducers'
 import { diffPath } from '../../utils'
 import { SdkLanguageSelector } from './SdkLanguageSelector'
 import { ApiSpecSelector } from './ApiSpecSelector'
 
-interface SelectorContainerProps {
+interface SelectorContainerProps extends SpaceHelperProps {
   /** Specs to choose from */
   specs: SpecList
   /** Current selected spec */
@@ -52,8 +54,9 @@ export const SelectorContainer: FC<SelectorContainerProps> = ({
   specs,
   spec,
   specDispatch,
+  ...spaceProps
 }) => (
-  <Space width="auto">
+  <Space width="auto" {...spaceProps}>
     <SdkLanguageSelector />
     <ApiSpecSelector specs={specs} spec={spec} specDispatch={specDispatch} />
     <Link to={`/${diffPath}/${spec.key}/`}>

package/src/components/SideNav/SearchMessage.tsx

@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import React, { FC } from 'react'
-import { ISearchResult } from '@looker/sdk-codegen'
+import type { FC } from 'react'
+import React from 'react'
+import type { ISearchResult } from '@looker/sdk-codegen'
 import { Heading, Icon, Flex } from '@looker/components'
 import { Error } from '@styled-icons/material/Error'
 

package/src/components/SideNav/SideNav.spec.tsx

@@ -24,13 +24,13 @@
 
  */
 import React from 'react'
-import { CriteriaToSet } from '@looker/sdk-codegen'
+import { criteriaToSet } from '@looker/sdk-codegen'
 import userEvent from '@testing-library/user-event'
-import { act, screen, waitFor } from '@testing-library/react'
+import { screen, waitFor } from '@testing-library/react'
 
 import { getLoadedSpecs, specState } from '../../test-data'
-import { renderWithRouter, renderWithSearchAndRouter } from '../../test-utils'
-import { defaultSearchState } from '../../reducers'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
+import { defaultSettingsState } from '../../state'
 import { SideNav } from './SideNav'
 import { countMethods, countTypes } from './searchUtils'
 
@@ -55,7 +55,7 @@ describe('SideNav', () => {
   })
 
   test('it renders search, methods tab and types tab', () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <SideNav
         specs={specs}
         spec={specState.spec}
@@ -78,12 +78,13 @@ describe('SideNav', () => {
   })
 
   test('Methods tab is the default active tab', () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <SideNav
         specs={specs}
         spec={specState.spec}
         specDispatch={specDispatch}
-      />
+      />,
+      ['/3.1/methods']
     )
     expect(screen.getAllByText(allTagsPattern)).toHaveLength(2)
     expect(
@@ -92,15 +93,11 @@ describe('SideNav', () => {
 
     userEvent.click(screen.getByRole('tab', { name: /^Types \(\d+\)$/ }))
 
-    // eslint-disable-next-line jest-dom/prefer-in-document
-    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(0)
-    expect(screen.getAllByRole('link', { name: allTypesPattern })).toHaveLength(
-      2
-    )
+    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(2)
   })
 
   test('url determines active tab', () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <SideNav
         specs={specs}
         spec={specState.spec}
@@ -109,10 +106,7 @@ describe('SideNav', () => {
       ['/3.1/types']
     )
     // eslint-disable-next-line jest-dom/prefer-in-document
-    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(0)
-    expect(screen.getAllByRole('link', { name: allTypesPattern })).toHaveLength(
-      2
-    )
+    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(2)
   })
 })
 
@@ -121,7 +115,7 @@ describe('Search', () => {
   const specDispatch = jest.fn()
 
   test('it filters methods and types on input', async () => {
-    renderWithSearchAndRouter(
+    renderWithRouterAndReduxProvider(
       <SideNav
         specs={specs}
         spec={specState.spec}
@@ -131,30 +125,23 @@ describe('Search', () => {
     const searchPattern = 'embedsso'
     const input = screen.getByLabelText('Search')
     jest.spyOn(specState.spec.api!, 'search')
-    await act(async () => {
-      /** Pasting to avoid triggering search multiple times */
-      await userEvent.paste(input, searchPattern)
-      await waitFor(() => {
-        expect(specState.spec.api!.search).toHaveBeenCalledWith(
-          searchPattern,
-          CriteriaToSet(defaultSearchState.criteria)
+    /** Pasting to avoid triggering search multiple times */
+    await userEvent.paste(input, searchPattern)
+    await waitFor(() => {
+      expect(specState.spec.api!.search).toHaveBeenCalledWith(
+        searchPattern,
+        criteriaToSet(defaultSettingsState.searchCriteria)
+      )
+      const methods = screen.getByRole('tab', { name: 'Methods (1)' })
+      userEvent.click(methods)
+      expect(
+        screen.getByText(
+          specState.spec.api!.tags.Auth.create_sso_embed_url.summary
         )
-        const methods = screen.getByRole('tab', { name: 'Methods (1)' })
-        const types = screen.getByRole('tab', { name: 'Types (1)' })
-        userEvent.click(methods)
-        expect(
-          screen.getByRole('heading', {
-            name: specState.spec.api!.tags.Auth.create_sso_embed_url.summary,
-          })
-        ).toBeInTheDocument()
-
-        userEvent.click(types)
-        expect(
-          screen.getByRole('heading', {
-            name: specState.spec.api!.types.EmbedSsoParams.name,
-          })
-        ).toBeInTheDocument()
-      })
+      ).toBeInTheDocument()
+      const types = screen.getByRole('tab', { name: 'Types (1)' })
+      userEvent.click(types)
+      expect(screen.getByText('EmbedSso')).toBeInTheDocument()
     })
   })
 })