LLM 程式設計提示範例

解決方案

若要實作感知層功能，我們可以遵循問題陳述中提到的準則，並使用現有的技術堆疊。

任務清單

1. 建立一個名為「AwarenessInfo」的新元件，以呈現遠端使用者的游標和名稱。

2. 建立一個新的 Konva 層來容納所有「AwarenessInfo」元件。

3. 將 Konva 層新增到主白板元件。

4. 建立一個新的 Redux 區段，以儲存遠端使用者的感知資訊。

5. 為感知 Redux 區段建立一個封裝的檢視模型介面。

6. 實作「AwarenessInfo」元件，以從檢視模型中擷取和顯示每個遠端使用者的感知資訊。

7. 在封裝的檢視模型介面中實作一個方法，以更新每個遠端使用者的感知資訊。

8. 當遠端使用者變更游標位置時，在封裝的檢視模型介面中調用更新方法，以更新對應的感知資訊。

9. 在「AwarenessInfo」元件中，使用新的位置來動畫游標變更。

10. 為新的「AwarenessInfo」元件撰寫測試，包括資料驅動測試，以確保它正確顯示所有遠端使用者的感知資訊。

11. 為封裝的檢視模型介面撰寫測試，以確保它正確更新遠端使用者的感知資訊。

12. 撰寫端到端的 Cypress 測試，以確保當遠端使用者變更其游標位置時，感知層會正確顯示和更新。

透過遵循這些任務，我們可以在線上白板系統中實作感知層功能。

好的，以下是經過修改的總計畫，其中包含詳細的組件名稱、方法和屬性

任務清單

1. 建立一個名為「AwarenessInfo」的新組件，以呈現遠端使用者的游標和名稱。此組件將接收使用者名稱、游標位置和線上狀態等屬性。

2. 建立一個名為「AwarenessLayer」的新 Konva 圖層，以容納所有「AwarenessInfo」組件。

3. 將「AwarenessLayer」新增到主白板組件。

4. 建立一個名為「awareness」的新 Redux 區段，以儲存遠端使用者的認知資訊。

5. 建立一個名為「AwarenessViewModel」的封裝式檢視模型介面，用於「awareness」Redux 區段。此介面將包含一個名為「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」元件的狀態。

當然，以下是 AwarenessViewModel 和感知區塊測試的範例實作，沒有使用 redux-mock-store

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 },
      }));
    });
  });
});

以下是 awarenessSlice 的範例實作，沒有使用 redux-mock-store

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() 檢查是否已傳送正確的動作。