@looker/api-explorer 0.9.55 → 0.9.57

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

@@ -23,59 +23,59 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import { screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { codeGenerators } from '@looker/sdk-codegen'
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { codeGenerators } from '@looker/sdk-codegen';
 import {
   createTestStore,
   renderWithRouterAndReduxProvider,
-} from '../../test-utils'
-import { findSdk } from '../../utils'
-import { languages } from '../../test-data'
-import { defaultSettingsState } from '../../state'
-import { SdkLanguageSelector } from './SdkLanguageSelector'
+} from '../../test-utils';
+import { findSdk } from '../../utils';
+import { languages } from '../../test-data';
+import { defaultSettingsState } from '../../state';
+import { SdkLanguageSelector } from './SdkLanguageSelector';
 
-const mockHistoryPush = jest.fn()
+const mockHistoryPush = jest.fn();
 jest.mock('react-router-dom', () => {
-  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  const ReactRouterDOM = jest.requireActual('react-router-dom');
   return {
     ...ReactRouterDOM,
     useHistory: () => ({
       push: mockHistoryPush,
       location: globalThis.location,
     }),
-  }
-})
+  };
+});
 describe('SdkLanguageSelector', () => {
-  window.HTMLElement.prototype.scrollIntoView = jest.fn()
-  const store = createTestStore({ settings: { initialized: true } })
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  const store = createTestStore({ settings: { initialized: true } });
 
   beforeEach(() => {
-    localStorage.clear()
-  })
+    localStorage.clear();
+  });
 
   test('it has the correct default language selected', async () => {
-    renderWithRouterAndReduxProvider(<SdkLanguageSelector />, undefined, store)
+    renderWithRouterAndReduxProvider(<SdkLanguageSelector />, undefined, store);
     expect(screen.getByRole('textbox')).toHaveValue(
       defaultSettingsState.sdkLanguage
-    )
-  })
+    );
+  });
 
   test('it lists all available languages and "All" as options', async () => {
-    renderWithRouterAndReduxProvider(<SdkLanguageSelector />, undefined, store)
-    userEvent.click(screen.getByRole('textbox'))
+    renderWithRouterAndReduxProvider(<SdkLanguageSelector />, undefined, store);
+    await userEvent.click(screen.getByRole('textbox'));
     await waitFor(() => {
       expect(screen.getAllByRole('option')).toHaveLength(
         codeGenerators.length + 1
-      )
+      );
       languages.forEach((language) => {
         expect(
           screen.getByRole('option', { name: language })
-        ).toBeInTheDocument()
-      })
-    })
-  })
+        ).toBeInTheDocument();
+      });
+    });
+  });
 
   test.each(languages.filter((l) => l !== 'All'))(
     'choosing `%s` pushes its alias to url',
@@ -84,29 +84,29 @@ describe('SdkLanguageSelector', () => {
         <SdkLanguageSelector />,
         undefined,
         store
-      )
-      const selector = screen.getByRole('textbox')
-      userEvent.click(selector)
+      );
+      const selector = screen.getByRole('textbox');
+      await userEvent.click(selector);
       await waitFor(async () => {
-        await userEvent.click(screen.getByRole('option', { name: language }))
-        const sdk = findSdk(language)
+        await userEvent.click(screen.getByRole('option', { name: language }));
+        const sdk = findSdk(language);
         expect(mockHistoryPush).toHaveBeenLastCalledWith({
           pathname: location.pathname,
           search: `sdk=${sdk.alias}`,
-        })
-      })
+        });
+      });
     }
-  )
+  );
 
   test("choosing 'All' removes sdk parameter from the url", async () => {
-    renderWithRouterAndReduxProvider(<SdkLanguageSelector />, undefined, store)
-    userEvent.click(screen.getByRole('textbox'))
+    renderWithRouterAndReduxProvider(<SdkLanguageSelector />, undefined, store);
+    await userEvent.click(screen.getByRole('textbox'));
     await waitFor(async () => {
-      await userEvent.click(screen.getByRole('option', { name: 'All' }))
+      await userEvent.click(screen.getByRole('option', { name: 'All' }));
       expect(mockHistoryPush).toHaveBeenLastCalledWith({
         pathname: location.pathname,
         search: '',
-      })
-    })
-  })
-})
+      });
+    });
+  });
+});

package/src/components/SelectorContainer/SdkLanguageSelector.tsx

@@ -23,32 +23,32 @@
  SOFTWARE.
 
  */
-import type { FC } from 'react'
-import React, { useEffect, useState } from 'react'
-import { Select } from '@looker/components'
-import { useSelector } from 'react-redux'
-import { useLocation } from 'react-router-dom'
-import { selectSdkLanguage } from '../../state'
-import { allAlias, useNavigation } from '../../utils'
-import { allSdkLanguageOptions } from './utils'
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Select } from '@looker/components';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { selectSdkLanguage } from '../../state';
+import { allAlias, useNavigation } from '../../utils';
+import { allSdkLanguageOptions } from './utils';
 
 /**
  * Allows the user to select their preferred SDK language
  */
 export const SdkLanguageSelector: FC = () => {
-  const location = useLocation()
-  const { navigate } = useNavigation()
-  const selectedSdkLanguage = useSelector(selectSdkLanguage)
-  const [language, setLanguage] = useState(selectedSdkLanguage)
-  const options = allSdkLanguageOptions()
+  const location = useLocation();
+  const { navigate } = useNavigation();
+  const selectedSdkLanguage = useSelector(selectSdkLanguage);
+  const [language, setLanguage] = useState(selectedSdkLanguage);
+  const options = allSdkLanguageOptions();
 
   const handleChange = (alias: string) => {
-    navigate(location.pathname, { sdk: alias === allAlias ? null : alias })
-  }
+    navigate(location.pathname, { sdk: alias === allAlias ? null : alias });
+  };
 
   useEffect(() => {
-    setLanguage(selectedSdkLanguage)
-  }, [selectedSdkLanguage])
+    setLanguage(selectedSdkLanguage);
+  }, [selectedSdkLanguage]);
 
   return (
     <Select
@@ -57,5 +57,5 @@ export const SdkLanguageSelector: FC = () => {
       onChange={handleChange}
       options={options}
     />
-  )
-}
+  );
+};

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

@@ -23,58 +23,50 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import { act, screen, waitFor } from '@testing-library/react'
-import { codeGenerators } from '@looker/sdk-codegen'
-import userEvent from '@testing-library/user-event'
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { codeGenerators } from '@looker/sdk-codegen';
+import userEvent from '@testing-library/user-event';
 
-import { getLoadedSpecs, specs } from '../../test-data'
-import { renderWithRouterAndReduxProvider } from '../../test-utils'
-import { defaultSettingsState } from '../../state'
-import { SelectorContainer } from './SelectorContainer'
+import { getLoadedSpecs, specs } from '../../test-data';
+import { renderWithRouterAndReduxProvider } from '../../test-utils';
+import { defaultSettingsState } from '../../state';
+import { SelectorContainer } from './SelectorContainer';
 
 describe('SelectorContainer', () => {
-  const spec = getLoadedSpecs()['4.0']
+  const spec = getLoadedSpecs()['4.0'];
   beforeAll(() => {
-    window.HTMLElement.prototype.scrollIntoView = jest.fn()
-  })
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  });
 
   test('it renders a spec selector with the correct default value and options', async () => {
-    renderWithRouterAndReduxProvider(<SelectorContainer spec={spec} />)
-    const selector = screen.getByLabelText('spec selector')
-    expect(selector).toHaveValue(`${spec.key}`)
-    await act(async () => {
-      await userEvent.click(selector)
-      await waitFor(() => {
-        expect(screen.getAllByRole('option')).toHaveLength(
-          Object.keys(specs).length
-        )
-      })
-    })
-  })
+    renderWithRouterAndReduxProvider(<SelectorContainer spec={spec} />);
+    const selector = screen.getByLabelText('spec selector');
+    expect(selector).toHaveValue(`${spec.key}`);
+    await userEvent.click(selector);
+    expect(screen.getAllByRole('option')).toHaveLength(
+      Object.keys(specs).length
+    );
+  });
 
   test('it renders an sdk language selector with the correct value and options', async () => {
-    renderWithRouterAndReduxProvider(<SelectorContainer spec={spec} />)
-    const selector = screen.getByLabelText('sdk language selector')
-    expect(selector).toHaveValue(defaultSettingsState.sdkLanguage)
-    await act(async () => {
-      await userEvent.click(selector)
-      await waitFor(() => {
-        expect(screen.getAllByRole('option')).toHaveLength(
-          codeGenerators.length + 1
-        )
-      })
-    })
-  })
+    renderWithRouterAndReduxProvider(<SelectorContainer spec={spec} />);
+    const selector = screen.getByLabelText('sdk language selector');
+    expect(selector).toHaveValue(defaultSettingsState.sdkLanguage);
+    await userEvent.click(selector);
+    expect(screen.getAllByRole('option')).toHaveLength(
+      codeGenerators.length + 1
+    );
+  });
 
   test('it renders an icon button for the differ', () => {
-    renderWithRouterAndReduxProvider(<SelectorContainer spec={spec} />)
+    renderWithRouterAndReduxProvider(<SelectorContainer spec={spec} />);
     expect(
       screen
         .getByRole('button', {
           name: 'Compare Specifications',
         })
         .closest('a')
-    ).toHaveAttribute('href', `/${spec.key}/diff`)
-  })
-})
+    ).toHaveAttribute('href', `/${spec.key}/diff`);
+  });
+});

package/src/components/SelectorContainer/SelectorContainer.tsx

@@ -24,24 +24,24 @@
 
  */
 
-import type { FC } 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 type { SpecItem } from '@looker/sdk-codegen'
+import type { FC } from 'react';
+import React from 'react';
+import type { SpaceHelperProps } from '@looker/components';
+import { IconButton, Space } from '@looker/components';
+import { ChangeHistory } from '@styled-icons/material/ChangeHistory';
+import type { SpecItem } from '@looker/sdk-codegen';
 
-import { Link } from '../Link'
-import { diffPath, useNavigation } from '../../utils'
-import { SdkLanguageSelector } from './SdkLanguageSelector'
-import { ApiSpecSelector } from './ApiSpecSelector'
+import { Link } from '../Link';
+import { diffPath, useNavigation } from '../../utils';
+import { SdkLanguageSelector } from './SdkLanguageSelector';
+import { ApiSpecSelector } from './ApiSpecSelector';
 
 interface SelectorContainerProps extends SpaceHelperProps {
   /** Current selected spec */
-  spec: SpecItem
+  spec: SpecItem;
 }
 
-export const HEADER_REM = 4
+export const HEADER_REM = 4;
 
 /**
  * Renders a container for selectors
@@ -50,7 +50,7 @@ export const SelectorContainer: FC<SelectorContainerProps> = ({
   spec,
   ...spaceProps
 }) => {
-  const { buildPathWithGlobalParams } = useNavigation()
+  const { buildPathWithGlobalParams } = useNavigation();
   return (
     <Space width="auto" {...spaceProps}>
       <SdkLanguageSelector />
@@ -64,5 +64,5 @@ export const SelectorContainer: FC<SelectorContainerProps> = ({
         />
       </Link>
     </Space>
-  )
-}
+  );
+};

package/src/components/SelectorContainer/index.ts

@@ -23,4 +23,4 @@
  SOFTWARE.
 
  */
-export { SelectorContainer } from './SelectorContainer'
+export { SelectorContainer } from './SelectorContainer';

package/src/components/SelectorContainer/utils.ts

@@ -23,23 +23,23 @@
  SOFTWARE.
 
  */
-import type { SelectOptionProps } from '@looker/components'
-import { allSdkLanguages, allAlias } from '../../utils'
+import type { SelectOptionProps } from '@looker/components';
+import { allAlias, allSdkLanguages } from '../../utils';
 
 /**
  * @returns sdk language options for render
  */
 export const allSdkLanguageOptions = (): SelectOptionProps[] => {
-  const options = [] as SelectOptionProps[]
-  const languages = allSdkLanguages()
+  const options = [] as SelectOptionProps[];
+  const languages = allSdkLanguages();
   Object.entries(languages).forEach(([alias, language]) => {
-    const option = { value: alias, label: language }
+    const option = { value: alias, label: language };
     if (alias === allAlias) {
-      options.push({ options: [option] })
+      options.push({ options: [option] });
     } else {
-      options.push(option)
+      options.push(option);
     }
-  })
+  });
 
-  return options
-}
+  return options;
+};

package/src/components/SideNav/SearchMessage.tsx

@@ -23,14 +23,14 @@
  SOFTWARE.
 
  */
-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'
+import type { FC } from 'react';
+import React from 'react';
+import type { ISearchResult } from '@looker/sdk-codegen';
+import { Flex, Heading, Icon } from '@looker/components';
+import { Error } from '@styled-icons/material/Error';
 
 interface SearchMessageProps {
-  search?: ISearchResult
+  search?: ISearchResult;
 }
 
 /**
@@ -54,4 +54,4 @@ export const SearchMessage: FC<SearchMessageProps> = ({ search }) => (
       </Flex>
     )}
   </>
-)
+);

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

@@ -23,126 +23,126 @@
  SOFTWARE.
 
  */
-import React from 'react'
-import { criteriaToSet } from '@looker/sdk-codegen'
-import userEvent from '@testing-library/user-event'
-import { screen, waitFor } from '@testing-library/react'
+import React from 'react';
+import { criteriaToSet } from '@looker/sdk-codegen';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '@testing-library/react';
 
-import { getLoadedSpecs } from '../../test-data'
+import { getLoadedSpecs } from '../../test-data';
 import {
   createTestStore,
   renderWithRouterAndReduxProvider,
-} from '../../test-utils'
-import { defaultSettingsState } from '../../state'
-import { SideNav } from './SideNav'
-import { countMethods, countTypes } from './searchUtils'
+} from '../../test-utils';
+import { defaultSettingsState } from '../../state';
+import { SideNav } from './SideNav';
+import { countMethods, countTypes } from './searchUtils';
 
-const spec = getLoadedSpecs()['4.0']
+const spec = getLoadedSpecs()['4.0'];
 
 describe('SideNav', () => {
-  const allTagsPattern = /^(Auth|ApiAuth)$/
-  const allTypesPattern = /^(WriteDashboard|WriteQuery)$/
+  const allTagsPattern = /^(Auth|ApiAuth)$/;
+  const allTypesPattern = /^(WriteDashboard|WriteQuery)$/;
 
-  let saveLocation: Location
+  let saveLocation: Location;
 
   beforeEach(() => {
-    saveLocation = globalThis.window.location
+    saveLocation = globalThis.window.location;
+    delete (window as any).location;
     window.location = {
       ...saveLocation,
       pathname: '/4.0',
-    }
-  })
+    };
+  });
 
   afterEach(() => {
-    window.location = saveLocation
-  })
+    window.location = saveLocation;
+  });
 
   test('it renders search, methods tab and types tab', () => {
-    renderWithRouterAndReduxProvider(<SideNav spec={spec} />)
-    const search = screen.getByLabelText('Search')
-    expect(search).toHaveProperty('placeholder', 'Search')
+    renderWithRouterAndReduxProvider(<SideNav spec={spec} />);
+    const search = screen.getByLabelText('Search');
+    expect(search).toHaveProperty('placeholder', 'Search');
     const tabs = screen.getAllByRole('tab', {
       name: /^Methods \(\d+\)|Types \(\d+\)$/,
-    })
-    expect(tabs).toHaveLength(2)
+    });
+    expect(tabs).toHaveLength(2);
     expect(tabs[0]).toHaveTextContent(
       `Methods (${countMethods(spec.api!.tags)})`
-    )
+    );
 
-    expect(tabs[1]).toHaveTextContent(`Types (${countTypes(spec.api!.types)})`)
-  })
+    expect(tabs[1]).toHaveTextContent(`Types (${countTypes(spec.api!.types)})`);
+  });
 
-  test('Methods tab is the default active tab', () => {
-    renderWithRouterAndReduxProvider(<SideNav spec={spec} />, ['/4.0/methods'])
-    expect(screen.getAllByText(allTagsPattern)).toHaveLength(2)
+  test('Methods tab is the default active tab', async () => {
+    renderWithRouterAndReduxProvider(<SideNav spec={spec} />, ['/4.0/methods']);
+    expect(screen.getAllByText(allTagsPattern)).toHaveLength(2);
     expect(
       screen.queryAllByRole('link', { name: allTypesPattern })
-    ).toHaveLength(0) // eslint-disable-line jest-dom/prefer-in-document
+    ).toHaveLength(0); // eslint-disable-line jest-dom/prefer-in-document
 
-    userEvent.click(screen.getByRole('tab', { name: /^Types \(\d+\)$/ }))
+    await userEvent.click(screen.getByRole('tab', { name: /^Types \(\d+\)$/ }));
 
-    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(2)
-  })
+    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(2);
+  });
 
   test('url determines active tab', () => {
-    renderWithRouterAndReduxProvider(<SideNav spec={spec} />, ['/4.0/types'])
+    renderWithRouterAndReduxProvider(<SideNav spec={spec} />, ['/4.0/types']);
     // eslint-disable-next-line jest-dom/prefer-in-document
-    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(2)
-  })
-})
+    expect(screen.queryAllByText(allTagsPattern)).toHaveLength(2);
+  });
+});
 
-const mockHistoryPush = jest.fn()
+const mockHistoryPush = jest.fn();
 jest.mock('react-router-dom', () => {
-  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  const ReactRouterDOM = jest.requireActual('react-router-dom');
   return {
     ...ReactRouterDOM,
     useHistory: () => ({
       push: mockHistoryPush,
       location: globalThis.location,
     }),
-  }
-})
+  };
+});
 
 describe('Search', () => {
   test('inputting text in search box updates URL', async () => {
-    renderWithRouterAndReduxProvider(<SideNav spec={spec} />, ['/4.0/methods'])
-    const searchPattern = 'embedsso'
-    const input = screen.getByLabelText('Search')
-    await userEvent.paste(input, searchPattern)
+    renderWithRouterAndReduxProvider(<SideNav spec={spec} />, ['/4.0/methods']);
+    const searchPattern = 'embedsso';
+    const input = screen.getByLabelText('Search');
+    await userEvent.click(input);
+    await userEvent.paste(input, searchPattern);
     await waitFor(() => {
       expect(mockHistoryPush).toHaveBeenCalledWith({
         pathname: '/4.0/methods',
         search: `s=${searchPattern}`,
-      })
-    })
-  })
+      });
+    });
+  });
 
   test('sets search default value from store on load', async () => {
-    const searchPattern = 'embedsso'
+    const searchPattern = 'embedsso';
     const store = createTestStore({
       settings: { searchPattern: searchPattern },
-    })
-    jest.spyOn(spec.api!, 'search')
+    });
+    jest.spyOn(spec.api!, 'search');
     renderWithRouterAndReduxProvider(
       <SideNav spec={spec} />,
       ['/4.0/methods?s=embedsso'],
       store
-    )
-    const input = screen.getByLabelText('Search')
-    expect(input).toHaveValue(searchPattern)
-    await waitFor(() => {
-      expect(spec.api!.search).toHaveBeenCalledWith(
-        searchPattern,
-        criteriaToSet(defaultSettingsState.searchCriteria)
-      )
-      const methods = screen.getByRole('tab', { name: 'Methods (1)' })
-      userEvent.click(methods)
-      expect(
-        screen.getByText(spec.api!.tags.Auth.create_sso_embed_url.summary)
-      ).toBeInTheDocument()
-      const types = screen.getByRole('tab', { name: 'Types (1)' })
-      userEvent.click(types)
-      expect(screen.getByText('EmbedSso')).toBeInTheDocument()
-    })
-  })
-})
+    );
+    const input = screen.getByLabelText('Search');
+    expect(input).toHaveValue(searchPattern);
+    expect(spec.api!.search).toHaveBeenCalledWith(
+      searchPattern,
+      criteriaToSet(defaultSettingsState.searchCriteria)
+    );
+    const methods = screen.getByRole('tab', { name: 'Methods (1)' });
+    await userEvent.click(methods);
+    expect(
+      screen.getByText(spec.api!.tags.Auth.create_sso_embed_url.summary)
+    ).toBeInTheDocument();
+    const types = screen.getByRole('tab', { name: 'Types (1)' });
+    await userEvent.click(types);
+    expect(screen.getByText('EmbedSso')).toBeInTheDocument();
+  });
+});