fix

Author: vtm9

apps/codebattle/assets/css/style.scss

@@ -0,0 +1,75 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { createActor } from 'xstate';
+
+import RoomContext from '../widgets/components/RoomContext';
+import GameStateCodes from '../widgets/config/gameStateCodes';
+import machines from '../widgets/machines';
+import ReplayerControlButton from '../widgets/pages/game/ReplayerControlButton';
+import SignUpButton from '../widgets/pages/game/SignUpButton';
+
+const { dispatchMock } = vi.hoisted(() => ({
+  dispatchMock: vi.fn((action) => {
+    if (typeof action === 'function') {
+      return action(dispatchMock);
+    }
+
+    return action;
+  }),
+}));
+
+vi.mock('react-redux', () => ({
+  useDispatch: () => dispatchMock,
+}));
+
+vi.mock('../widgets/middlewares/Room', () => ({
+  downloadPlaybook: (service: ReturnType<typeof createActor>) => () => {
+    service.send({ type: 'START_LOADING_PLAYBOOK' });
+    service.send({ type: 'LOAD_PLAYBOOK', payload: {} });
+  },
+  openPlaybook: (service: ReturnType<typeof createActor>) => () => {
+    service.send({ type: 'OPEN_REPLAYER' });
+  },
+}));
+
+describe('game action buttons', () => {
+  beforeEach(() => {
+    dispatchMock.mockClear();
+  });
+
+  test('guest sign-up links to the registration page', () => {
+    render(<SignUpButton />);
+
+    expect(screen.getByRole('link', { name: 'Sign up' })).toHaveAttribute('href', '/users/new');
+  });
+
+  test('opens and closes history with one click', async () => {
+    const user = userEvent.setup();
+    const mainService = createActor(machines.game, {
+      input: { subscriptionType: 'premium' },
+    });
+    mainService.start();
+    mainService.send({
+      type: 'LOAD_GAME',
+      payload: { state: GameStateCodes.gameOver },
+    });
+
+    render(
+      <RoomContext.Provider value={{ mainService, taskService: mainService }}>
+        <ReplayerControlButton />
+      </RoomContext.Provider>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Open Record Player' }));
+    expect(screen.getByRole('button', { name: 'Close Record Player' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Close Record Player' }));
+    expect(screen.getByRole('button', { name: 'Open Record Player' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Open Record Player' }));
+    expect(screen.getByRole('button', { name: 'Close Record Player' })).toBeInTheDocument();
+
+    act(() => mainService.stop());
+  });
+});

apps/codebattle/assets/js/__tests__/GameActionButtons.test.tsx

@@ -4,7 +4,7 @@ import machines from '../widgets/machines';
 import { findCurrentUserPlayingGame } from '../widgets/middlewares/Lobby';
 
 describe('game recovery flows', () => {
-  test('opens and closes a loaded replay on the first event', () => {
+  test('opens, closes, and reopens a loaded replay on the first event', () => {
     // xstate v5: seed context via `input` and drive the machine through a running actor.
     const actor = createActor(machines.game, { input: { subscriptionType: 'premium' } });
     actor.start();
@@ -15,6 +15,15 @@ describe('game recovery flows', () => {
     actor.send({ type: 'LOAD_PLAYBOOK', payload: {} });
     expect(actor.getSnapshot().matches({ replayer: 'on' })).toBe(true);
 
+    actor.send({ type: 'SET_SPEED_MODE', speedMode: '2.5x' });
+    expect(actor.getSnapshot().context.speedMode).toBe('2.5x');
+
+    actor.send({ type: 'CLOSE_REPLAYER' });
+    expect(actor.getSnapshot().matches({ replayer: 'off' })).toBe(true);
+
+    actor.send({ type: 'OPEN_REPLAYER' });
+    expect(actor.getSnapshot().matches({ replayer: 'on' })).toBe(true);
+
     actor.send({ type: 'CLOSE_REPLAYER' });
     expect(actor.getSnapshot().matches({ replayer: 'off' })).toBe(true);
 

apps/codebattle/assets/js/__tests__/GameRecovery.test.ts

@@ -0,0 +1,7 @@
+import { changePresenceState } from '../widgets/middlewares/Main';
+
+describe('main channel middleware', () => {
+  test('ignores presence changes when the main channel is not initialized', () => {
+    expect(() => changePresenceState('watching')()).not.toThrow();
+  });
+});

apps/codebattle/assets/js/__tests__/Main.test.ts

@@ -0,0 +1,93 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import playbackModes from '../widgets/config/playbackModes';
+import ControlPanel from '../widgets/pages/game/ControlPanel';
+
+const { copyMock } = vi.hoisted(() => ({
+  copyMock: vi.fn().mockResolvedValue(true),
+}));
+
+vi.mock('copy-to-clipboard', () => ({
+  default: copyMock,
+}));
+
+const store = configureStore({
+  reducer: (state = {}) => state,
+});
+
+const makeRoomState = (replayerState = 'on.paused', speedMode = '1x') => ({
+  context: { speedMode },
+  matches: ({ replayer }: { replayer: string }) => replayer === replayerState,
+});
+
+describe('replay control panel', () => {
+  beforeEach(() => {
+    copyMock.mockClear();
+  });
+
+  test('keeps clear playback controls visible while changing their values', async () => {
+    const user = userEvent.setup();
+    const onChangeSpeed = vi.fn();
+    const onChangePlaybackMode = vi.fn();
+
+    render(
+      <Provider store={store}>
+        <ControlPanel
+          roomMachineState={makeRoomState()}
+          onPauseClick={vi.fn()}
+          onPlayClick={vi.fn()}
+          onChangeSpeed={onChangeSpeed}
+          playbackMode={playbackModes.realtime}
+          onChangePlaybackMode={onChangePlaybackMode}
+          nextRecordId={12}
+          currentTime={2_000}
+          totalDuration={10_000}
+        >
+          <div data-testid="timeline" />
+        </ControlPanel>
+      </Provider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Play replay' })).toBeInTheDocument();
+    expect(screen.getByTestId('timeline')).toBeInTheDocument();
+    expect(screen.getByLabelText('Playback time')).toHaveTextContent('00:02 / 00:10');
+    expect(screen.queryByRole('slider', { name: 'Playback speed' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Uniform' })).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Replay settings' }));
+    expect(screen.getByRole('dialog', { name: 'Replay settings' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Playback speed/ })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Uniform' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /Playback speed/ }));
+    expect(screen.getByRole('button', { name: 'Back to replay settings' })).toBeInTheDocument();
+    const speedSlider = screen.getByRole('slider', { name: 'Playback speed' });
+    expect(speedSlider).toHaveAttribute('min', '0.5');
+    expect(speedSlider).toHaveAttribute('max', '4');
+    expect(speedSlider).toHaveAttribute('step', '0.5');
+
+    fireEvent.change(speedSlider, { target: { value: '2.5' } });
+    expect(onChangeSpeed).toHaveBeenCalledWith('2.5x');
+
+    await user.click(screen.getByRole('button', { name: 'Set playback speed to 3×' }));
+    expect(onChangeSpeed).toHaveBeenCalledWith('3x');
+
+    await user.click(screen.getByRole('button', { name: 'Increase playback speed' }));
+    expect(onChangeSpeed).toHaveBeenCalledWith('1.5x');
+
+    await user.click(screen.getByRole('button', { name: 'Back to replay settings' }));
+    await user.click(screen.getByRole('button', { name: 'Uniform' }));
+    expect(onChangePlaybackMode).toHaveBeenCalledWith(playbackModes.standard);
+
+    await user.click(screen.getByRole('button', { name: 'Copy replay link at current position' }));
+    await waitFor(() => expect(copyMock).toHaveBeenCalledWith('http://localhost/?t=12'));
+    expect(screen.getByText('Link copied')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Replay settings' }));
+    expect(screen.queryByRole('dialog', { name: 'Replay settings' })).not.toBeInTheDocument();
+  });
+});

apps/codebattle/assets/js/__tests__/ReplayControlPanel.test.tsx

@@ -1,7 +1,14 @@
 const speedModes = {
+  slow: '0.5x',
   normal: '1x',
+  oneAndHalf: '1.5x',
   fast: '2x',
+  twoAndHalf: '2.5x',
+  triple: '3x',
+  threeAndHalf: '3.5x',
   faster: '4x',
 };
 
+export const speedModeValues = Object.values(speedModes);
+
 export default speedModes;

apps/codebattle/assets/js/widgets/config/speedModes.ts

@@ -2,7 +2,7 @@ import { assign, raise } from 'xstate';
 
 import { channelTopics } from '../../socket';
 import GameStateCodes from '../config/gameStateCodes';
-import speedModes from '../config/speedModes';
+import speedModes, { speedModeValues } from '../config/speedModes';
 import subscriptionTypes from '../config/subscriptionTypes';
 import tournamentSounds from '../config/tournamentSounds';
 import sound from '../lib/sound';
@@ -296,6 +296,9 @@ const machine = {
             TOGGLE_SPEED_MODE: {
               actions: ['toggleSpeedMode'],
             },
+            SET_SPEED_MODE: {
+              actions: ['setSpeedMode'],
+            },
           },
           ...recordMachine,
         },
@@ -374,18 +377,15 @@ export const config = {
     // replayer actions
     toggleSpeedMode: assign({
       speedMode: ({ context }: any) => {
-        switch (context.speedMode) {
-          case speedModes.normal:
-            return speedModes.fast;
-          case speedModes.fast:
-            return speedModes.faster;
-          case speedModes.faster:
-            return speedModes.normal;
-          default:
-            throw new Error('Unexpected speedMode [replayer machine]');
-        }
+        const currentIndex = speedModeValues.indexOf(context.speedMode);
+        const nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % speedModeValues.length;
+
+        return speedModeValues[nextIndex];
       },
     }),
+    setSpeedMode: assign({
+      speedMode: ({ event }: any) => event.speedMode,
+    }),
     showPremiumSubscribeRequestModal: () => {},
   },
 };

apps/codebattle/assets/js/widgets/machines/game.ts

@@ -166,7 +166,7 @@ const initPresence = (followId?: number) => (dispatch: any) => {
 };
 
 export const changePresenceState = (state: string) => () => {
-  channel.push('change_presence_state', { state });
+  channel?.push('change_presence_state', { state });
 };
 
 export const broadcastRedirect =