Add test to load more rooms

Author: FadhlanR

packages/host/app/components/ai-assistant/past-sessions.gts

@@ -69,7 +69,10 @@ export default class AiAssistantPastSessionsList extends Component<Signature> {
               <PastSessionItem @session={{session}} @actions={{@roomActions}} />
             {{/each}}
             {{#if this.matrixService.loadingMoreAIRooms}}
-              <li class='loading-indicator-container'>
+              <li
+                class='loading-indicator-container'
+                data-test-loading-more-rooms
+              >
                 <LoadingIndicator
                   @color='var(--boxel-dark)'
                   class='loading-indicator'

packages/host/app/services/matrix-sdk-loader.ts

@@ -3,6 +3,7 @@ import Service from '@ember/service';
 import { service } from '@ember/service';
 
 import * as MatrixSDK from 'matrix-js-sdk';
+import { SlidingSync } from 'matrix-js-sdk/lib/sliding-sync';
 
 import { RealmAuthClient } from '@cardstack/runtime-common/realm-auth-client';
 
@@ -23,6 +24,11 @@ export default class MatrixSDKLoader extends Service {
     }
     return this.#extended;
   }
+
+  // For testing purposes, we need to mock the SlidingSync class
+  get SlidingSync() {
+    return SlidingSync;
+  }
 }
 
 export class ExtendedMatrixSDK {

packages/host/app/services/matrix-service.ts

@@ -16,11 +16,11 @@ import {
   type ISendEventResponse,
 } from 'matrix-js-sdk';
 import {
-  SlidingSync,
-  MSC3575List,
+  type SlidingSync,
+  type MSC3575List,
   SlidingSyncEvent,
   SlidingSyncState,
-  MSC3575SlidingSyncResponse,
+  type MSC3575SlidingSyncResponse,
 } from 'matrix-js-sdk/lib/sliding-sync';
 import stringify from 'safe-stable-stringify';
 import { md5 } from 'super-fast-md5';
@@ -252,7 +252,7 @@ export default class MatrixService extends Service {
               e.event.content.realms,
             );
             await this.loginToRealms();
-            await this.maybeLoadMoreAuthRooms(e.event.content.realms);
+            await this.loadMoreAuthRooms(e.event.content.realms);
           }
         },
       ],
@@ -549,14 +549,14 @@ export default class MatrixService extends Service {
       timeline_limit: 1,
       required_state: [['*', '*']],
     });
-    this.slidingSync = new SlidingSync(
+    this.slidingSync = new this.matrixSdkLoader.SlidingSync(
       this.client.baseUrl,
       lists,
       {
         timeline_limit: SLIDING_SYNC_LIST_TIMELINE_LIMIT,
       },
       this.client as any,
-      environment === 'test' ? 200 : 30000,
+      environment === 'test' ? 200 : 2000,
     );
     this.slidingSync.on(
       SlidingSyncEvent.Lifecycle,
@@ -1675,7 +1675,7 @@ export default class MatrixService extends Service {
     return this.isLoadingMoreAIRooms;
   }
 
-  async maybeLoadMoreAuthRooms(realms: string[]) {
+  async loadMoreAuthRooms(realms: string[]) {
     if (!this.slidingSync) return;
 
     let currentList = this.slidingSync.getListParams(

packages/host/tests/acceptance/ai-assistant-test.gts

@@ -1,4 +1,4 @@
-import { click, fillIn, waitFor } from '@ember/test-helpers';
+import { click, fillIn, waitFor, waitUntil } from '@ember/test-helpers';
 
 import { module, test } from 'qunit';
 
@@ -431,4 +431,41 @@ module('Acceptance | AI Assistant tests', function (hooks) {
     assert.dom('[data-test-autoattached-file]').exists();
     assert.dom(`[data-test-autoattached-file]`).hasText('person.gts');
   });
+
+  test('loads more AI rooms when scrolling', async function (assert) {
+    for (let i = 1; i <= 15; i++) {
+      createAndJoinRoom({
+        sender: '@testuser:localhost',
+        name: `AI Room ${i}`,
+      });
+    }
+
+    await visitOperatorMode({
+      stacks: [
+        [
+          {
+            id: `${testRealmURL}index`,
+            format: 'isolated',
+          },
+        ],
+      ],
+    });
+
+    await click('[data-test-open-ai-assistant]');
+    await click('[data-test-past-sessions-button]');
+
+    assert.dom('[data-test-past-sessions]').exists();
+    assert.dom('[data-test-joined-room]').exists({ count: 10 });
+
+    let pastSessionsElement = document.querySelector(
+      '[data-test-past-sessions] .body ul',
+    );
+    if (pastSessionsElement) {
+      pastSessionsElement.scrollTop = pastSessionsElement.scrollHeight;
+    }
+    await waitUntil(
+      () => document.querySelectorAll('[data-test-joined-room]').length === 16,
+    );
+    assert.dom('[data-test-joined-room]').exists({ count: 16 });
+  });
 });

packages/host/tests/helpers/mock-matrix.ts

@@ -6,6 +6,7 @@ import type MatrixService from '@cardstack/host/services/matrix-service';
 import MessageService from '@cardstack/host/services/message-service';
 
 import { MockSDK } from './mock-matrix/_sdk';
+import { MockSlidingSync } from './mock-matrix/_sliding-sync';
 import { MockUtils } from './mock-matrix/_utils';
 
 export interface Config {
@@ -23,10 +24,16 @@ export function setupMockMatrix(
   hooks: NestedHooks,
   opts: Config = {},
 ): MockUtils {
-  let testState: { owner?: Owner; sdk?: MockSDK; opts?: Config } = {
+  let testState: {
+    owner?: Owner;
+    sdk?: MockSDK;
+    opts?: Config;
+    slidingSync?: SlidingSync;
+  } = {
     owner: undefined,
     sdk: undefined,
     opts: undefined,
+    slidingSync: undefined,
   };
 
   let mockUtils = new MockUtils(testState);
@@ -77,6 +84,7 @@ export function setupMockMatrix(
         async load() {
           return sdk;
         },
+        SlidingSync: MockSlidingSync,
       },
       {
         instantiate: false,

packages/host/tests/helpers/mock-matrix/_client.ts

@@ -2,6 +2,11 @@ import { MatrixEvent } from 'matrix-js-sdk';
 
 import * as MatrixSDK from 'matrix-js-sdk';
 
+import {
+  MSC3575SlidingSyncRequest,
+  MSC3575SlidingSyncResponse,
+} from 'matrix-js-sdk/lib/sliding-sync';
+
 import { baseRealm, unixTime } from '@cardstack/runtime-common';
 
 import {
@@ -57,8 +62,12 @@ export class MockClient implements ExtendedClient {
   }
 
   async startClient(
-    _opts?: MatrixSDK.IStartClientOpts | undefined,
+    opts?: MatrixSDK.IStartClientOpts | undefined,
   ): Promise<void> {
+    if (opts?.slidingSync) {
+      await opts.slidingSync.start();
+    }
+
     this.serverState.onEvent((serverEvent: IEvent) => {
       this.emitEvent(new MatrixEvent(serverEvent));
     });
@@ -619,4 +628,60 @@ export class MockClient implements ExtendedClient {
   mxcUrlToHttp(mxcUrl: string): string {
     return mxcUrl.replace('mxc://', 'http://mock-server/');
   }
+
+  async slidingSync(
+    req: MSC3575SlidingSyncRequest,
+    _proxyBaseUrl: string,
+    _signal: AbortSignal,
+  ): Promise<MSC3575SlidingSyncResponse> {
+    let listKey = Object.keys(req.lists || {})[0];
+    if (!listKey || !req.lists?.[listKey]?.ranges?.[0]) {
+      return Promise.resolve({
+        pos: '0',
+        lists: {},
+        rooms: {},
+        extensions: {},
+      });
+    }
+
+    let [start, end] = req.lists[listKey].ranges[0];
+    let roomsInRange = this.serverState.rooms
+      .filter((r) => r.id.includes('mock'))
+      .slice(start, end + 1);
+
+    let response: MSC3575SlidingSyncResponse = {
+      pos: String(Date.now()),
+      lists: {
+        [listKey]: {
+          count: this.serverState.rooms.length,
+          ops: [
+            {
+              op: 'SYNC',
+              range: [start, end],
+              room_ids: roomsInRange.map((r) => r.id),
+            },
+          ],
+        },
+      },
+      rooms: {},
+      extensions: {},
+    };
+
+    roomsInRange.forEach((room) => {
+      response.rooms[room.id] = {
+        name:
+          this.serverState.getRoomState(room.id, 'm.room.name', '')?.content
+            ?.name ?? 'room',
+        required_state: [],
+        timeline: this.serverState.getRoomEvents(room.id),
+        notification_count: 0,
+        highlight_count: 0,
+        joined_count: 1,
+        invited_count: 0,
+        initial: true,
+      };
+    });
+
+    return Promise.resolve(response);
+  }
 }

packages/host/tests/helpers/mock-matrix/_sliding-sync.ts

@@ -0,0 +1,65 @@
+import { MatrixEvent } from 'matrix-js-sdk';
+import * as MatrixSDK from 'matrix-js-sdk';
+import {
+  SlidingSync,
+  SlidingSyncEvent,
+  SlidingSyncState,
+} from 'matrix-js-sdk/lib/sliding-sync';
+
+export class MockSlidingSync extends SlidingSync {
+  private lifecycleCallbacks: Function[] = [];
+  private listCallbacks: Function[] = [];
+
+  on(event: string, callback: Function) {
+    if (event === SlidingSyncEvent.Lifecycle) {
+      this.lifecycleCallbacks.push(callback);
+    }
+    if (event === SlidingSyncEvent.List) {
+      this.listCallbacks.push(callback);
+    }
+    return this;
+  }
+
+  emit(event: string, ...args: any[]) {
+    if (event === SlidingSyncEvent.Lifecycle) {
+      this.lifecycleCallbacks.forEach((cb) => cb(...args));
+    }
+    if (event === SlidingSyncEvent.List) {
+      this.listCallbacks.forEach((cb) => cb(...args));
+    }
+    return true;
+  }
+
+  async start() {
+    let aiRoomList = this.getListParams('ai-room');
+    if (!aiRoomList) {
+      return;
+    }
+    let slidingResponse = await this.client.slidingSync(
+      {
+        lists: { ['ai-room']: aiRoomList },
+        room_subscriptions: undefined,
+      },
+      '',
+      {} as any,
+    );
+
+    this.emit(
+      SlidingSyncEvent.Lifecycle,
+      SlidingSyncState.Complete,
+      slidingResponse,
+    );
+
+    Object.values(slidingResponse.rooms ?? {}).forEach(
+      (room: MSC3575RoomData) => {
+        room.timeline.forEach((event: MatrixSDK.IRoomEvent) => {
+          this.client.emitEvent(new MatrixEvent(event));
+        });
+      },
+    );
+  }
+
+  resend() {
+    this.start();
+  }
+}