Use post IDs for list keys and add stability test

web/src/App.test.tsx

@@ -1,9 +1,38 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
 import App from './App';
+import { AllPostsDocument } from './rpc/operations/AllPosts.generated';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test('renders app title', () => {
+  const mocks = [
+    {
+      request: {
+        query: AllPostsDocument,
+        variables: { cursor: null, limit: 10 },
+      },
+      result: {
+        data: {
+          listPosts: {
+            edges: [],
+            pageInfo: {
+              endCursor: null,
+              startCursor: null,
+              hasPreviousPage: false,
+              hasNextPage: false,
+            },
+          },
+        },
+      },
+    },
+  ];
+
+  render(
+    <MockedProvider mocks={mocks} addTypename={false}>
+      <App />
+    </MockedProvider>,
+  );
+
+  expect(screen.getByText(/sniff/i)).toBeInTheDocument();
 });
+

web/src/components/post.tsx

@@ -15,6 +15,7 @@ const PostDateTime = styled.span`
 `;
 
 type PostProps = {
+    id: string;
     title: string;
     body: string;
     created_at: string;

web/src/components/postList.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PostList from './postList';
+import { Post as PostData } from '../rpc/types';
+
+test('maintains element identity when post order changes', () => {
+  const posts: PostData[] = [
+    { id: '1', title: 'First', body: 'Body1', created_at: '2023-01-01' },
+    { id: '2', title: 'Second', body: 'Body2', created_at: '2023-01-02' },
+  ];
+
+  const { rerender } = render(<PostList posts={posts} loading={false} />);
+
+  const firstNodeInitial = screen.getByText('First').closest('li');
+  const secondNodeInitial = screen.getByText('Second').closest('li');
+
+  rerender(<PostList posts={[posts[1], posts[0]]} loading={false} />);
+
+  const firstNodeAfter = screen.getByText('First').closest('li');
+  const secondNodeAfter = screen.getByText('Second').closest('li');
+
+  expect(firstNodeAfter).toBe(firstNodeInitial);
+  expect(secondNodeAfter).toBe(secondNodeInitial);
+});
+

web/src/components/postList.tsx

@@ -13,8 +13,8 @@ function PostList({ posts, loading }: PostListParams) {
     { loading || posts === undefined ?
       <em>Loading...</em> :
       <ol>
-        {posts.map((post, index) => 
-          <li key={`post_${index}`}>
+        {posts.map((post) =>
+          <li key={post.id}>
             <Post {...post}/>
           </li>
         )}