From f1884a9466ff6e873ec63f3dbc9c7bc1be554592 Mon Sep 17 00:00:00 2001
From: Chris Alves <25260078+chrisae9@users.noreply.github.com>
Date: Sun, 11 Oct 2026 22:59:15 -0400
Subject: [PATCH] test: verify rendered viewer synchronization tolerance

---
 src/__tests__/participant-moderation.test.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/participant-moderation.test.js b/src/__tests__/participant-moderation.test.js
index f5fcf7a9af..eece04e825 100644
--- a/src/__tests__/participant-moderation.test.js
+++ b/src/__tests__/participant-moderation.test.js
@@ -18,7 +18,7 @@ const media = {
 const participant = (username, extra = {}) => ({
   username, state: 'playing', media, time: 10000, updatedAt: Date.now(), playbackRate: 1, duration: 60000, ...extra,
 });
-const setup = () => {
+const setup = (friendOptions = {}) => {
   const kick = vi.fn().mockResolvedValue();
   const transfer = vi.fn().mockResolvedValue();
   const store = createStore({
@@ -32,7 +32,7 @@ const setup = () => {
           host: 'me',
           users: {
             me: participant('Host viewer'),
-            friend: participant('Morgan with a long display name'),
+            friend: participant('Morgan with a long display name', friendOptions),
             buffering: participant('Sam', { state: 'buffering' }),
             different: participant('Taylor', { media: { ...media, title: 'Another movie', ratingKey: '2' } }),
             stopped: participant('Alex', { state: 'stopped', media: null }),
@@ -78,6 +78,15 @@ describe('participant actions and readable status', () => {
       wrapper.unmount();
     }
   });
+  it.each([[3000, 'In sync'], [500, 'Catching up']])('renders readiness with tolerance %s', (tolerance, label) => {
+    const { wrapper } = setup({ time: 8000, syncFlexibility: tolerance });
+    try {
+      const row = wrapper.findAll('.v-list-item').find((item) => item.text().includes('Morgan'));
+      expect(row.text()).toContain(label);
+    } finally {
+      wrapper.unmount();
+    }
+  });
   const moderationCases = [['Remove from room', 'kick'], ['Make host', 'transfer']];
   it.each(moderationCases)('requires named confirmation for %s', async (label, action) => {
     const { wrapper, kick, transfer } = setup();