@looker/api-explorer 0.9.33-alpha.1523 → 0.9.34

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

@@ -35,30 +35,76 @@ import {
 } from '../../test-utils'
 import { SideNavMethods } from './SideNavMethods'
 
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useHistory: () => ({
+      push: mockHistoryPush,
+    }),
+  }
+})
+
 describe('SideNavMethods', () => {
   const tag = 'Dashboard'
   const methods = api.tags[tag]
+  const specKey = '3.1'
 
   test('it renders provided methods', () => {
     renderWithRouterAndReduxProvider(
-      <SideNavMethods methods={methods} tag={tag} specKey={'3.1'} />
+      <SideNavMethods methods={methods} tag={tag} specKey={specKey} />
     )
     userEvent.click(screen.getByText(tag))
     const sideNavItems = screen.getAllByRole('link')
     expect(sideNavItems).toHaveLength(Object.keys(methods).length)
     expect(sideNavItems[0]).toHaveAttribute(
       'href',
-      `/3.1/methods/${tag}/${Object.values(methods)[0].name}`
+      `/${specKey}/methods/${tag}/${Object.values(methods)[0].name}`
+    )
+  })
+
+  test('tag expands and displays methods after clicked', () => {
+    renderWithRouterAndReduxProvider(
+      <SideNavMethods methods={methods} tag={tag} specKey={specKey} />
+    )
+    const firstMethod = Object.values(methods)[0].schema.summary
+    expect(screen.queryByText(firstMethod)).not.toBeInTheDocument()
+    userEvent.click(screen.getByText(tag))
+    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods/${tag}`)
+    expect(screen.getByRole('link', { name: firstMethod })).toBeInTheDocument()
+    expect(screen.getAllByRole('link')).toHaveLength(
+      Object.values(methods).length
     )
   })
 
+  test('expanded tag closes when clicked', () => {
+    renderWithRouterAndReduxProvider(
+      <SideNavMethods
+        methods={methods}
+        tag={tag}
+        specKey={specKey}
+        defaultOpen={true}
+      />
+    )
+    const firstMethod = Object.values(methods)[0].schema.summary
+    expect(screen.getByRole('link', { name: firstMethod })).toBeInTheDocument()
+    expect(screen.getAllByRole('link')).toHaveLength(
+      Object.values(methods).length
+    )
+    userEvent.click(screen.getByText(tag))
+    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/methods`)
+    expect(screen.queryByText(firstMethod)).not.toBeInTheDocument()
+    expect(screen.queryByRole('link')).not.toBeInTheDocument()
+  })
+
   test('it highlights text matching search pattern in both tag and methods', () => {
     const store = createTestStore({ settings: { searchPattern: 'dash' } })
     renderWithRouterAndReduxProvider(
       <SideNavMethods
         methods={pick(methods, 'create_dashboard')}
         tag={tag}
-        specKey={'3.1'}
+        specKey={specKey}
       />,
       undefined,
       store

package/src/components/SideNav/SideNavMethods.tsx

@@ -55,7 +55,11 @@ export const SideNavMethods = styled(
     const handleOpen = () => {
       const _isOpen = !isOpen
       setIsOpen(_isOpen)
-      if (_isOpen) history.push(`/${specKey}/methods/${tag}`)
+      if (_isOpen) {
+        history.push(`/${specKey}/methods/${tag}`)
+      } else {
+        history.push(`/${specKey}/methods`)
+      }
     }
 
     useEffect(() => {
@@ -63,7 +67,7 @@ export const SideNavMethods = styled(
         ? defaultOpen || match.params.methodTag === tag
         : defaultOpen
       setIsOpen(status)
-    }, [defaultOpen, match, tag])
+    }, [defaultOpen])
 
     /* TODO: Fix highlighting. It is applied but it is somehow being overridden */
     return (

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

@@ -26,6 +26,7 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
 
+import userEvent from '@testing-library/user-event'
 import { api } from '../../test-data'
 import {
   createTestStore,
@@ -33,30 +34,65 @@ import {
 } from '../../test-utils'
 import { SideNavTypes } from './SideNavTypes'
 
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useHistory: () => ({
+      push: mockHistoryPush,
+    }),
+  }
+})
+
 describe('SideNavTypes', () => {
+  const tag = 'Dashboard'
+  const specKey = '3.1'
+  const typeTags = Object.keys(api.typeTags[tag])
+
   test('it renders provided types', () => {
+    renderWithRouterAndReduxProvider(
+      <SideNavTypes specKey={specKey} types={{ ...api.types }} tag={tag} />
+    )
+    expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent(tag)
+  })
+
+  test('tag expands and displays types after clicked', () => {
+    renderWithRouterAndReduxProvider(
+      <SideNavTypes types={{ ...api.types }} tag={tag} specKey={specKey} />
+    )
+    expect(screen.queryByText(typeTags[0])).not.toBeInTheDocument()
+    userEvent.click(screen.getByText(tag))
+    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/types/${tag}`)
+    expect(screen.getByRole('link', { name: typeTags[0] })).toBeInTheDocument()
+  })
+
+  test('expanded tag closes when clicked', () => {
     renderWithRouterAndReduxProvider(
       <SideNavTypes
-        specKey={'3.1'}
-        types={{
-          Dashboard: api.types.Dashboard,
-        }}
-        tag="Dashboard"
+        types={{ ...api.types }}
+        tag={tag}
+        specKey={specKey}
+        defaultOpen={true}
       />
     )
-    const h4 = screen.getByRole('heading', { level: 4 })
-    expect(h4).toHaveTextContent('Dashboard')
+    expect(screen.getByRole('link', { name: typeTags[0] })).toBeInTheDocument()
+    userEvent.click(screen.getAllByText(tag)[0])
+    expect(mockHistoryPush).toHaveBeenCalledWith(`/${specKey}/types`)
+    expect(
+      screen.queryByRole('link', { name: typeTags[0] })
+    ).not.toBeInTheDocument()
   })
 
   test('it highlights text matching search pattern', () => {
     const store = createTestStore({ settings: { searchPattern: 'dash' } })
     renderWithRouterAndReduxProvider(
       <SideNavTypes
-        specKey={'3.1'}
+        specKey={specKey}
         types={{
-          Dashboard: api.types.Dashboard,
+          ...api.types,
         }}
-        tag="Dashboard"
+        tag={tag}
       />,
       undefined,
       store

package/src/components/SideNav/SideNavTypes.tsx

@@ -55,7 +55,11 @@ export const SideNavTypes = styled(
     const handleOpen = () => {
       const _isOpen = !isOpen
       setIsOpen(_isOpen)
-      if (_isOpen) history.push(`/${specKey}/types/${tag}`)
+      if (_isOpen) {
+        history.push(`/${specKey}/types/${tag}`)
+      } else {
+        history.push(`/${specKey}/types`)
+      }
     }
 
     useEffect(() => {

package/src/scenes/DiffScene/DiffScene.tsx

@@ -170,6 +170,7 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
             />
           </FlexItem>
           <IconButton
+            className="switch-button"
             label="switch"
             size="small"
             disabled={!leftKey || !rightKey}

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

@@ -0,0 +1,112 @@
+/*
+
+ 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 React from 'react'
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { getLoadedSpecs } from '../../../test-data'
+import { diffSpecs, standardDiffToggles } from '../diffUtils'
+import { renderWithReduxProvider } from '../../../test-utils'
+import { DocDiff } from './DocDiff'
+
+describe('DocDiff', () => {
+  const specs = getLoadedSpecs()
+  const leftKey = specs['3.1'].key
+  const rightKey = specs['4.0'].key
+  const leftApi = specs['3.1'].api!
+  const rightApi = specs['4.0'].api!
+
+  it('renders', () => {
+    const delta = diffSpecs(leftApi, rightApi, standardDiffToggles)
+    renderWithReduxProvider(
+      <DocDiff
+        leftKey={leftKey}
+        leftSpec={leftApi}
+        rightKey={rightKey}
+        rightSpec={rightApi}
+        delta={delta}
+        pageSize={1}
+      />
+    )
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      `${delta.length} differences between ${leftKey} and ${rightKey}`
+    )
+    expect(
+      screen.getByRole('button', { name: 'Previous page of results' })
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Next page of results' })
+    ).toBeInTheDocument()
+  })
+  it('renders when there is no delta', () => {
+    renderWithReduxProvider(
+      <DocDiff
+        leftKey={leftKey}
+        leftSpec={leftApi}
+        rightKey={rightKey}
+        rightSpec={rightApi}
+        delta={[]}
+      />
+    )
+    expect(screen.getByText('No differences found')).toBeInTheDocument()
+  })
+
+  it('paginates', async () => {
+    const delta = diffSpecs(leftApi, rightApi, standardDiffToggles)
+    renderWithReduxProvider(
+      <DocDiff
+        leftKey={leftKey}
+        leftSpec={leftApi}
+        rightKey={rightKey}
+        rightSpec={rightApi}
+        delta={delta}
+        pageSize={1}
+      />
+    )
+
+    // page 1
+    const row1 = delta[0]
+    expect(screen.getByText(row1.name)).toBeInTheDocument()
+    expect(screen.getByText(row1.id)).toBeInTheDocument()
+    expect(
+      screen.getByText(rightApi.methods[row1.name].summary)
+    ).toBeInTheDocument()
+
+    // go to page 2
+    userEvent.click(
+      screen.getByRole('button', { name: 'Next page of results' })
+    )
+
+    await waitFor(() => {
+      const row2 = delta[1]
+      expect(screen.getByText(row2.name)).toBeInTheDocument()
+      expect(screen.getByText(row2.id)).toBeInTheDocument()
+      expect(
+        screen.getByText(rightApi.methods[row2.name].summary)
+      ).toBeInTheDocument()
+    })
+  })
+})

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

@@ -64,11 +64,7 @@ export const DocDiff: FC<DocDiffProps> = ({
   if (delta.length === 0) return <Text>{'No differences found'}</Text>
 
   const pageCount = Math.round((delta.length - 1) / pageSize)
-  // The +1 is to skip the header row
-  const pageItemData = delta.slice(
-    (page - 1) * pageSize + 1,
-    page * pageSize + 1
-  )
+  const pageItemData = delta.slice((page - 1) * pageSize, page * pageSize + 1)
 
   return (
     <>
@@ -82,7 +78,7 @@ export const DocDiff: FC<DocDiffProps> = ({
           <SpaceVertical mt="large" gap="xxsmall">
             {pageItemData.map((item, index) => (
               <DiffItem
-                key={index}
+                key={`page-${page} item-${index}`}
                 item={item}
                 leftKey={leftKey}
                 leftSpec={leftSpec}