test(08-02): add failing tests for JKChatMessageList

RED phase: Create test file with 3 test cases:
- Shows empty state when no messages
- Shows loading spinner when fetching
- Renders messages when available

Install @testing-library/react@12 and @testing-library/jest-dom@5
(compatible with React 16).

Create setupTests.js for jest-dom matchers.

Tests fail as expected (component not implemented yet).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

jam-ui/package.json

@@ -107,6 +107,8 @@
   "devDependencies": {
     "@faker-js/faker": "^8.2.0",
     "@playwright/test": "^1.40.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^12.1.5",
     "browser-sync": "^2.29.3",
     "eslint-config-prettier": "^4.2.0",
     "eslint-plugin-prettier": "^3.1.4",

jam-ui/src/components/client/chat/__tests__/JKChatMessageList.test.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import JKChatMessageList from '../JKChatMessageList';
+import sessionChatReducer from '../../../../store/features/sessionChatSlice';
+
+const createMockStore = (messages = [], fetchStatus = 'idle') => {
+  return configureStore({
+    reducer: {
+      sessionChat: sessionChatReducer
+    },
+    preloadedState: {
+      sessionChat: {
+        messagesByChannel: { 'test-channel': messages },
+        activeChannel: 'test-channel',
+        channelType: 'session',
+        unreadCounts: {},
+        lastReadAt: {},
+        fetchStatus: { 'test-channel': fetchStatus },
+        fetchError: {},
+        sendStatus: 'idle',
+        sendError: null,
+        nextCursors: {},
+        isWindowOpen: true,
+        windowPosition: null
+      }
+    }
+  });
+};
+
+describe('JKChatMessageList', () => {
+  test('shows empty state when no messages', () => {
+    const store = createMockStore([]);
+
+    render(
+      <Provider store={store}>
+        <JKChatMessageList />
+      </Provider>
+    );
+
+    expect(screen.getByText('No messages yet')).toBeInTheDocument();
+  });
+
+  test('shows loading spinner when fetching', () => {
+    const store = createMockStore([], 'loading');
+
+    render(
+      <Provider store={store}>
+        <JKChatMessageList />
+      </Provider>
+    );
+
+    expect(screen.getByText('Loading messages...')).toBeInTheDocument();
+  });
+
+  test('renders messages when available', () => {
+    const messages = [
+      {
+        id: '1',
+        senderId: 'user1',
+        senderName: 'User One',
+        message: 'Hello, world!',
+        createdAt: new Date().toISOString()
+      },
+      {
+        id: '2',
+        senderId: 'user2',
+        senderName: 'User Two',
+        message: 'Hi there!',
+        createdAt: new Date().toISOString()
+      }
+    ];
+    const store = createMockStore(messages);
+
+    render(
+      <Provider store={store}>
+        <JKChatMessageList />
+      </Provider>
+    );
+
+    expect(screen.getByText('Hello, world!')).toBeInTheDocument();
+    expect(screen.getByText('Hi there!')).toBeInTheDocument();
+    expect(screen.getByText('User One')).toBeInTheDocument();
+    expect(screen.getByText('User Two')).toBeInTheDocument();
+  });
+});

jam-ui/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';