LLMプロンプトによるプログラミングの例

解決策

アウェアネスレイヤー機能を実装するには、問題文に記載されているガイドラインに従い、既存の技術スタックを使用できます。

タスクリスト

1. リモートユーザーのカーソルと名前をレンダリングするために、「AwarenessInfo」という名前の新しいコンポーネントを作成します。

2. すべての「AwarenessInfo」コンポーネントを保持するために、新しいKonvaレイヤーを作成します。

3. Konvaレイヤーをメインのホワイトボードコンポーネントに追加します。

4. リモートユーザーのアウェアネス情報を格納するために、新しいReduxスライスを作成します。

5. アウェアネスReduxスライス用にカプセル化されたビューモデルインターフェースを作成します。

6. 「AwarenessInfo」コンポーネントを実装して、ビューモデルから各リモートユーザーのアウェアネス情報を取得して表示します。

7. カプセル化されたビューモデルインターフェースに、各リモートユーザーのアウェアネス情報を更新するメソッドを実装します。

8. リモートユーザーがカーソルの位置を変更すると、カプセル化されたビューモデルインターフェースの更新メソッドをディスパッチして、対応するアウェアネス情報を更新します。

9. 「AwarenessInfo」コンポーネントで、新しい位置を使用してカーソルの変更をアニメーション化します。

10. 新しい「AwarenessInfo」コンポーネントのテストを記述します。データ駆動型テストを含め、すべてのリモートユーザーのアウェアネス情報が正しく表示されることを確認します。

11. カプセル化されたビューモデルインターフェースのテストを記述して、リモートユーザーのアウェアネス情報が正しく更新されることを確認します。

12. エンドツーエンドのCypressテストを記述して、リモートユーザーがカーソルの位置を変更したときにアウェアネスレイヤーが正しく表示および更新されることを確認します。

これらのタスクに従うことで、オンラインホワイトボードシステムにアウェアネスレイヤー機能を実装できます。

承知しました。詳細なコンポーネント名、メソッド、およびプロップを指定した改訂版マスタープランを以下に示します。

タスクリスト

1. リモートユーザーのカーソルと名前をレンダリングするために、「AwarenessInfo」という名前の新しいコンポーネントを作成します。このコンポーネントは、ユーザー名、カーソル位置、オンラインステータスなどのプロップを受け取ります。

2. すべての「AwarenessInfo」コンポーネントを保持するために、「AwarenessLayer」という名前の新しいKonvaレイヤーを作成します。

3. 「AwarenessLayer」をメインのホワイトボードコンポーネントに追加します。

4. リモートユーザーのアウェアネス情報を格納するために、「awareness」という名前の新しいReduxスライスを作成します。

5. 「awareness」Reduxスライス用に「AwarenessViewModel」という名前のカプセル化されたビューモデルインターフェースを作成します。このインターフェースには、各リモートユーザーのアウェアネス情報を更新するための「updateUserAwarenessInfo」という名前のメソッドが含まれます。

6. 「AwarenessInfo」コンポーネントを実装して、ビューモデルから各リモートユーザーのアウェアネス情報を取得して表示します。コンポーネントは、「useSelector」フックを使用して関連情報を取得します。

7. 「AwarenessViewModel」インターフェースに「updateUserAwarenessInfo」メソッドを実装して、Reduxアクションをディスパッチし、各リモートユーザーのアウェアネス情報を更新します。このメソッドは、「MainWhiteboard」コンポーネントによって呼び出されます。

8. リモートユーザーがカーソルの位置を変更すると、「AwarenessViewModel」インターフェースの「updateUserAwarenessInfo」メソッドをディスパッチして、対応するアウェアネス情報を更新します。

9. 「AwarenessInfo」コンポーネントで、新しい位置を使用してカーソルの変更をアニメーション化します。これは、Konvaの「Tween」アニメーションを使用して実現できます。

10. 新しい「AwarenessInfo」コンポーネントのテストを記述します。データ駆動型テストを含め、すべてのリモートユーザーのアウェアネス情報が正しく表示されることを確認します。テストは、React Testing Libraryを使用して記述されます。

11. カプセル化されたビューモデルインターフェースのテストを記述して、リモートユーザーのアウェアネス情報が正しく更新されることを確認します。これらのテストでは、Vitestフレームワークが使用されます。

12. エンドツーエンドのCypressテストを記述して、リモートユーザーがカーソルの位置を変更したときにアウェアネスレイヤーが正しく表示および更新されることを確認します。テストは、ホワイトボードとのユーザーインタラクションをシミュレートし、「AwarenessLayer」および「AwarenessInfo」コンポーネントの状態を検証します。

承知しました。redux-mock-storeを使用せずにAwarenessViewModelとawareness sliceのテストを実装する例を以下に示します。

typescriptCopy code
import { createAwarenessSlice, AwarenessState, updateAwareness } from './awarenessSlice';
import { AwarenessViewModel } from './AwarenessViewModel';

describe('AwarenessViewModel', () => {
  const mockDispatch = jest.fn();
  const initialState: AwarenessState = {
    users: {
      'user1': {
        name: 'User 1',
        cursorPosition: { x: 0, y: 0 },
        online: true,
      },
      'user2': {
        name: 'User 2',
        cursorPosition: { x: 100, y: 100 },
        online: true,
      },
    },
  };
  let viewModel: AwarenessViewModel;

  beforeEach(() => {
    viewModel = new AwarenessViewModel(initialState, mockDispatch);
  });

  describe('getUserNames', () => {
    it('returns the list of user names', () => {
      const names = viewModel.getUserNames();
      expect(names).toEqual(['User 1', 'User 2']);
    });
  });

  describe('getCursorPosition', () => {
    it('returns the cursor position for a given user ID', () => {
      const cursorPosition = viewModel.getCursorPosition('user1');
      expect(cursorPosition).toEqual({ x: 0, y: 0 });
    });

    it('returns undefined for an unknown user ID', () => {
      const cursorPosition = viewModel.getCursorPosition('unknown');
      expect(cursorPosition).toBeUndefined();
    });
  });

  describe('updateCursorPosition', () => {
    it('dispatches the updateAwareness action with the new cursor position', () => {
      viewModel.updateCursorPosition('user1', { x: 50, y: 50 });
      expect(mockDispatch).toHaveBeenCalledWith(updateAwareness({
        user: 'user1',
        cursorPosition: { x: 50, y: 50 },
      }));
    });
  });
});

redux-mock-storeを使用しない`awarenessSlice`の実装例を以下に示します。

typescriptCopy code
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export type CursorPosition = { x: number, y: number };

export type UserAwareness = {
  name: string;
  cursorPosition: CursorPosition;
  online: boolean;
};

export type AwarenessState = {
  users: Record<string, UserAwareness>;
};

const initialState: AwarenessState = {
  users: {},
};

const awarenessSlice = createSlice({
  name: 'awareness',
  initialState,
  reducers: {
    updateAwareness: (state, action: PayloadAction<{ user: string, cursorPosition: CursorPosition }>) => {
      const { user, cursorPosition } = action.payload;
      state.users[user].cursorPosition = cursorPosition;
    },
    setOnline: (state, action: PayloadAction<{ user: string, online: boolean }>) => {
      const { user, online } = action.payload;
      state.users[user].online = online;
    },
  },
});

export const { updateAwareness, setOnline } = awarenessSlice.actions;
export const awarenessReducer = awarenessSlice.reducer;

redux-mock-storeを使用していないため、モックのdispatch関数をビューモデルのコンストラクタに渡す必要があることに注意してください。また、`updateCursorPosition`のテストでは、`jest.fn()`を使用して正しいアクションがディスパッチされたことを確認する必要があります。