[fix] mark as seen and update tests (#174)

Fixes an error introduced in #166. Updates mock client with the new
added methods, updates test case to include opening thread with a simple
"Enter" user action. In the future the same pattern can be expanded to
test slightly more complex user interactions.

Author: supreme-gg-gg

instagram-ts/source/client.ts

@@ -461,23 +461,26 @@ export class InstagramClient extends EventEmitter {
 		}
 	}
 
+	public async markThreadAsSeen(
+		threadId: string,
+		itemId: string,
+	): Promise<void> {
+		try {
+			await this.ig.entity.directThread(threadId).markItemSeen(itemId);
+		} catch (error) {
+			this.logger.error('Failed to mark item as seen', error);
+			throw error;
+		}
+	}
+
 	public async markItemAsSeen(threadId: string, itemId: string): Promise<void> {
 		if (this.realtimeStatus === 'connected' && this.realtime?.direct) {
 			try {
 				await this.realtime.direct.markAsSeen({threadId, itemId});
-				return;
 			} catch {
 				this.logger.warn('MQTT mark as seen failed, falling back to API.');
 			}
 		}
-
-		// Fallback to API if MQTT not available, failed, or not ready
-		try {
-			await this.ig.entity.directThread(threadId).markItemSeen(itemId);
-		} catch (error) {
-			this.logger.error('Failed to mark item as seen', error);
-			throw error;
-		}
 	}
 
 	public async sendMessage(threadId: string, text: string): Promise<void> {

instagram-ts/source/mocks/mock-client.ts

@@ -244,9 +244,25 @@ class MockClient extends EventEmitter {
 		console.log(`Mock: Unsent message ${messageId} from thread ${threadId}`);
 	}
 
+	async markThreadAsSeen(threadId: string): Promise<void> {
+		// Simulate marking a thread as seen
+		await new Promise(resolve => {
+			setTimeout(resolve, 50);
+		});
+		console.log(`Mock: Marked thread ${threadId} as seen`);
+	}
+
+	async markItemAsSeen(threadId: string, itemId: string): Promise<void> {
+		// Simulate marking a message as seen
+		await new Promise(resolve => {
+			setTimeout(resolve, 50);
+		});
+		console.log(`Mock: Marked item ${itemId} as seen in thread ${threadId}`);
+	}
+
 	async getCurrentUser(): Promise<User | undefined> {
 		return {
-			pk: 'current_user',
+			pk: 'current_user_id',
 			username: 'mock_user',
 			fullName: 'Mock User',
 			profilePicUrl: 'https://via.placeholder.com/150',

instagram-ts/source/ui/views/chat-view.tsx

@@ -365,7 +365,7 @@ export default function ChatView() {
 			const lastMessage = messages.at(-1);
 
 			if (lastMessage?.id) {
-				await client.markItemAsSeen(thread.id, lastMessage.id);
+				await client.markThreadAsSeen(thread.id, lastMessage.id);
 			}
 		} catch (error) {
 			setChatState(previous => ({
@@ -510,11 +510,11 @@ export default function ChatView() {
 						<Text>Loading messages...</Text>
 					</Box>
 				)}
-				chatState.recipientAlreadyRead && (
-				<Box>
-					<Text dimColor>Seen just now</Text>
-				</Box>
-				)
+				{chatState.recipientAlreadyRead && (
+					<Box>
+						<Text dimColor>Seen just now</Text>
+					</Box>
+				)}
 				<Box flexShrink={0} flexDirection="column">
 					{systemMessage && (
 						<Box marginTop={1}>

instagram-ts/test.tsx

@@ -3,6 +3,13 @@ import test, {type ExecutionContext} from 'ava';
 import {render} from 'ink-testing-library';
 import Index from './source/commands/index.js';
 import {AppMock} from './source/app.mock.js';
+import {mockThreads, mockMessages} from './source/mocks/mock-data.js';
+
+const delay = async (ms: number): Promise<void> => {
+	return new Promise(resolve => {
+		setTimeout(resolve, ms);
+	});
+};
 
 test('sanity check', (t: ExecutionContext) => {
 	const {lastFrame} = render(<Index />);
@@ -21,3 +28,28 @@ test('renders feed view', (t: ExecutionContext) => {
 
 	t.not(lastFrame(), undefined);
 });
+
+test('chat view displays messages when thread is selected', async (t: ExecutionContext) => {
+	const {lastFrame, stdin} = render(<AppMock view="chat" />);
+
+	await delay(500);
+
+	// Verify threads are displayed
+	let output = lastFrame();
+	t.truthy(output, 'Frame should render threads');
+	t.true(
+		output!.includes(mockThreads[0]!.title),
+		'Thread should be visible before selection',
+	);
+
+	// Select first thread by pressing Enter
+	stdin.write('\r');
+
+	await delay(500);
+
+	output = lastFrame();
+	t.truthy(output, 'Frame should render after thread selection');
+	const firstMessage = mockMessages[0]!;
+	const messageText = firstMessage.itemType === 'text' ? firstMessage.text : '';
+	t.true(output!.includes(messageText), 'First message should be visible');
+});