Test that participants adjust order when screen size changes

src/state/CallViewModel.test.ts

@@ -376,16 +376,16 @@ test("screen sharing activates spotlight layout", () => {
 
 test("participants stay in the same order unless to appear/disappear", () => {
   withTestScheduler(({ hot, schedule, expectObservable }) => {
-    const modeInputMarbles = "     a";
+    const visibilityInputMarbles = "a";
     // First Bob speaks, then Dave, then Alice
-    const aSpeakingInputMarbles = "n- 1998ms - 1999ms y";
+    const aSpeakingInputMarbles = " n- 1998ms - 1999ms y";
-    const bSpeakingInputMarbles = "ny 1998ms n 1999ms -";
+    const bSpeakingInputMarbles = " ny 1998ms n 1999ms -";
-    const dSpeakingInputMarbles = "n- 1998ms y 1999ms n";
+    const dSpeakingInputMarbles = " n- 1998ms y 1999ms n";
     // Nothing should change when Bob speaks, because Bob is already on screen.
     // When Dave speaks he should switch with Alice because she's the one who
     // hasn't spoken at all. Then when Alice speaks, she should return to her
     // place at the top.
-    const expectedLayoutMarbles = "a  1999ms b 1999ms a 57999ms c 1999ms a";
+    const expectedLayoutMarbles = " a  1999ms b 1999ms a 57999ms c 1999ms a";
 
     withCallViewModel(
       of([aliceParticipant, bobParticipant, daveParticipant]),
@@ -397,7 +397,7 @@ test("participants stay in the same order unless to appear/disappear", () => {
         [daveParticipant, hot(dSpeakingInputMarbles, { y: true, n: false })],
       ]),
       (vm) => {
-        schedule(modeInputMarbles, {
+        schedule(visibilityInputMarbles, {
           a: () => {
             // We imagine that only three tiles (the first three) will be visible
             // on screen at a time
@@ -432,6 +432,56 @@ test("participants stay in the same order unless to appear/disappear", () => {
   });
 });
 
+test("participants adjust order when space becomes constrained", () => {
+  withTestScheduler(({ hot, schedule, expectObservable }) => {
+    // Start with all tiles on screen then shrink to 3
+    const visibilityInputMarbles = "a-b";
+    // Bob and Dave speak
+    const bSpeakingInputMarbles = " ny";
+    const dSpeakingInputMarbles = " ny";
+    // Nothing should change when Bob or Dave initially speak, because they are
+    // on screen. When the screen becomes smaller Alice should move off screen
+    // to make way for the speakers (specifically, she should swap with Dave).
+    const expectedLayoutMarbles = " a-b";
+
+    withCallViewModel(
+      of([aliceParticipant, bobParticipant, daveParticipant]),
+      of([aliceRtcMember, bobRtcMember, daveRtcMember]),
+      of(ConnectionState.Connected),
+      new Map([
+        [bobParticipant, hot(bSpeakingInputMarbles, { y: true, n: false })],
+        [daveParticipant, hot(dSpeakingInputMarbles, { y: true, n: false })],
+      ]),
+      (vm) => {
+        let setVisibleTiles: ((value: number) => void) | null = null;
+        vm.layout.subscribe((layout) => {
+          if (layout.type === "grid") setVisibleTiles = layout.setVisibleTiles;
+        });
+        schedule(visibilityInputMarbles, {
+          a: () => setVisibleTiles!(Infinity),
+          b: () => setVisibleTiles!(3),
+        });
+
+        expectObservable(summarizeLayout(vm.layout)).toBe(
+          expectedLayoutMarbles,
+          {
+            a: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`, `${daveId}:0`],
+            },
+            b: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${daveId}:0`, `${bobId}:0`, `${aliceId}:0`],
+            },
+          },
+        );
+      },
+    );
+  });
+});
+
 test("spotlight speakers swap places", () => {
   withTestScheduler(({ hot, schedule, expectObservable }) => {
     // Go immediately into spotlight mode for the test