fix: description sync issues in diff scene (#1086)

also fixes a bug where we weren't rendering the first delta

packages/api-explorer/src/scenes/DiffScene/DocDiff/DocDiff.spec.tsx

+/*
+
+ 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()
+    })
+  })
+})

packages/api-explorer/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}