Fe,be/feature/#456 web rtc test code작성 #466

Doosies · 2024-01-15T10:14:23Z

변경 사항

signaling socket 테스트 코드 작성
vitest 셋팅
- vite 5버전으로 올림

고민과 해결 과정

signaling socket 테스트 코드 작성

게이트웨이의 단위테스트는 함수를 실행하고, 값이 제대로 바뀌는지 확인하는 방식으로 진행을함
그런데 private 변수를 약간의 꼼수를 써서 확인함

beforeEach(async () => {
  const moduleRef = await Test.createTestingModule({
    providers: [
      EventsGateway,
      { provide: LoggerService, useValue: loggerServiceMock },
    ],
  }).compile();

  gateway = moduleRef.get<EventsGateway>(EventsGateway);
  loggerService = moduleRef.get<LoggerService>(LoggerService);
  hostSocket = hostSocketMock;
  guestSocket = guestSocketMock;
});

it('소켓 나갔는데 존재하지 않는 roomId라면 로그 찍힘', () => {
  gateway['users'] = twoPeopleInsideUsersMock();
  gateway.handleDisconnect(guestSocket);
  expect(loggerService.debug).toHaveBeenCalledWith(
    `🚀 존재하지 않는 roomId: ${roomMock.roomId}`,
  );
});

위처럼 객체의 속성으로 접근을 해서 타입스크립트의 타입체크를 회피함
초기에 users와 socketRooms 변수를 초기화 해줘야 해야 해서 이렇게 했는데
더 좋은 방법이 없는지 고민 해봐야함.

vitest 셋팅

vitest를 사용하려는데 공식문서에 써진대로 시도해봐도 계속 안돼서 설정하는데 시간이 많이 소요됨
이유는 vite 버전이 5 이상이어야 했기 때문이었고 4.5에서 5로 버전 올리고 셋팅 완료함

노드도 18버전 이상이어야함

jest와 관련된 메서드(jest.mock, jest.fn) 등은 vi.mock()로 아래처럼 사용할 수 있음.

import { expect, test } from 'vitest'
import { sum } from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

- 테스트 코드 작성하며 잘못된 부분 잡아냄 - 로깅 잘못 찍는 부분하고, 방이 없는데 password 찾으려 하는 부분 고침

- 최신 vitest를 사용하기위해 vite 버전 5로 올림

kimyu0218

👍 고생 많았어!! 몇 가지 코멘트 남겼어!

kimyu0218 · 2024-01-16T06:44:30Z

backend/signal/mocks/eventGatewayMocks.ts

+export const onlyGuestInsideUsersMock = () =>
+  createUsersMock([{ id: guestSocketMock.id, user: guestUserMock }]);
+export const onlyHostInsideUsersMock = () =>
+  createUsersMock([{ id: hostSocketMock.id, user: hostUserMock }]);


💬 오 mock을 별도의 파일로 분리하니까 좋은 것 같아 👍 mock 이 많으니까 이것도 용도에 따라 분리하는 건 어떨까? 예를 들어 user 관련은 user.mocks.ts 파일에 저장하는 식으로?

✨ signal 서버에 다른 서비스가 추가될 수도 있으니까 eventsGatewayMocks.ts를 events 디렉토리 안에 넣는 게 어떨까??

mocks - events # src/events니까 events로 작성해주면 좋겠어! - gateway.mocks.ts # nest cli가 파일명을 camel case로 작성하지 않더라구! 주로 온점을 활용하는 것 같아

💬 오 mock을 별도의 파일로 분리하니까 좋은 것 같아 👍 mock 이 많으니까 이것도 용도에 따라 분리하는 건 어떨까? 예를 들어 user 관련은 user.mocks.ts 파일에 저장하는 식으로?

확실히 지금도 한눈에 파악이 안돼서 용도에 따라 분리하면 더 좋을것같아 추가해둘게!

✨ signal 서버에 다른 서비스가 추가될 수도 있으니까 eventsGatewayMocks.ts를 events 디렉토리 안에 넣는 게 어떨까??

이것도 좋은것같아!👍

kimyu0218 · 2024-01-16T06:47:15Z

backend/signal/package.json

@@ -31,6 +31,7 @@
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.1",
    "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.3",


❓ socket.io-client가 유닛 테스트를 할 때 필요한 거지?? (갑자기 추가된 것 같아서!!) 유닛 테스트용이면 devDependencies에 있어야 하지 않을까?

엇 그렇네 테스트 할때만 필요한거니까 저기 있을 필요는 없겠다

kimyu0218 · 2024-01-16T06:49:38Z

backend/signal/src/events/events.gateway.spec.ts

+  roomMock,
+  twoPeopleInsideRoomMock,
+  twoPeopleInsideUsersMock,
+} from '../../mocks/eventGatewayMocks';


👍 mock을 별도의 파일로 분리하니까 테스트 코드에 집중할 수 있는 것 같아! 나도 이렇게 바꿔볼게~

kimyu0218 · 2024-01-16T06:53:03Z

backend/signal/src/events/events.gateway.spec.ts

+
+      expect(gateway['socketRooms']).toEqual({});
+      expectEmitToRoom(hostSocket, roomMock.roomId, 'hostExit');
+    });


✨ 여기 \n 빠졌다!! 안 넣어도 되는데 그냥 읽다가 발견했어 ㅋㅋㅋ

ㅋㅋㅋㅋㅋ 아냐 이런 사소한것도 말해주는게 더 좋은것같아

kimyu0218 · 2024-01-16T07:03:30Z

backend/signal/src/events/events.gateway.spec.ts

+
+    it('socket이 비정상(users에 존재하지 않는 socket.id): 로그 찍힘', () => {
+      gateway.handleDisconnect(guestSocket);
+      expect(loggerService.debug).toHaveBeenCalledWith(


💬 앗,, 이 부분은 내가 설명을 안 해줬구나!! 미안해 ㅠㅠ

로그에 debug, info, warn, error 레벨이 존재해. 여기서 레벨에 대한 내용 확인해줘!!

어떤 레벨로 처리할지 생각해보고 debug, info, warn, error 에서 골라서 사용하면 돼!! 만약에 에러 레벨로 처리하고 싶으면 이런 식으로 사용할 수 있어!

loggerService.error()

이부분도 수정해볼게!

- mock을 용도, 서비스에 따라 분리 - socket.io-client devdeps로 이동 - logger 레벨 제대로 설정 debug -> warn

cloudflare-workers-and-pages · 2024-01-17T09:20:05Z

Deploying with Cloudflare Pages

Latest commit:	`b2ee3d0`
Status:	✅ Deploy successful!
Preview URL:	https://7526f3b5.web09-magicconch.pages.dev
Branch Preview URL:	https://fe-be-feature--456-webrtc-te.web09-magicconch.pages.dev

View logs

HeoJiye · 2024-01-17T11:22:18Z

backend/signal/src/events/events.gateway.spec.ts

+    it(`이벤트 성공적으로 발생:
+  \t  1. users와 socketRooms에 추가 
+  \t  2. socket.join(roomId) 실행됨
+  \t  3. 방에 welcome 이벤트 발생
+  \t  4. 해당 소켓에 "RoomSuccess" 이벤트 보냄`, () => {


👍 이렇게 구체적으로 쓰는 거 좋은거 같아! 이런 식으로 쓰면 되겠구나..!

오.. 나도 알아보기 쉽게 한글로 작성해올게 ㅋㅋㅋ

HeoJiye · 2024-01-17T11:23:56Z

backend/signal/mocks/events/socket.mock.ts

+export type SocketMock = {
+  id: string;
+  emit: jest.Mock;
+  join: jest.Mock;
+  to: jest.Mock;
+};
+
+export const toRoomEmitMock = jest.fn();
+
+export const guestSocketMock: SocketMock = {
+  id: 'testGuestSocketId',
+  emit: jest.fn(),
+  join: jest.fn(),
+  to: jest.fn().mockImplementation(() => ({ emit: toRoomEmitMock })),
+};
+
+export const hostSocketMock: SocketMock = {
+  id: 'testHostSocketId',
+  emit: jest.fn(),
+  join: jest.fn(),
+  to: jest.fn().mockImplementation(() => ({ emit: toRoomEmitMock })),
+};


👍 이런 식으로 mock 파일들 모아놓는 거 참고 많이 했어!

kimyu0218

👍

Doosies added 5 commits January 8, 2024 16:59

feat: WebRTC 시그널서버 테스트코드 일부작성

8d57495

test: WebRTC 이벤트게이트웨이 유닛테스트 코드

2a4fdf1

fix: eventsGateway joinRoom이벤트 수정

32df273

- 테스트 코드 작성하며 잘못된 부분 잡아냄 - 로깅 잘못 찍는 부분하고, 방이 없는데 password 찾으려 하는 부분 고침

test: signaling server testcode 알아보기 쉽도록 변경함

c19e879

chore: vitest 설치, 설정 완료

dbe3377

- 최신 vitest를 사용하기위해 vite 버전 5로 올림

Doosies self-assigned this Jan 15, 2024

Doosies requested review from kimyu0218 and HeoJiye January 15, 2024 13:34

kimyu0218 added this to the version 1.0.0 milestone Jan 16, 2024

kimyu0218 reviewed Jan 16, 2024

View reviewed changes

kimyu0218 linked an issue Jan 16, 2024 that may be closed by this pull request

✅ FEATURE: WebRTC 시그널 서버 테스트코드 작성 #456

Closed

1 task

refactor: 리뷰 반영

b2ee3d0

- mock을 용도, 서비스에 따라 분리 - socket.io-client devdeps로 이동 - logger 레벨 제대로 설정 debug -> warn

HeoJiye approved these changes Jan 17, 2024

View reviewed changes

kimyu0218 approved these changes Jan 17, 2024

View reviewed changes

Doosies merged commit 8073c41 into dev Jan 17, 2024
1 check passed

Doosies deleted the FE,BE/feature/#456-WebRTC-TestCode작성 branch January 17, 2024 11:38

HeoJiye mentioned this pull request Feb 17, 2024

release v1.0.0 #543

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fe,be/feature/#456 web rtc test code작성 #466

Fe,be/feature/#456 web rtc test code작성 #466

Doosies commented Jan 15, 2024

kimyu0218 left a comment

kimyu0218 Jan 16, 2024

Doosies Jan 17, 2024

kimyu0218 Jan 16, 2024

Doosies Jan 17, 2024

kimyu0218 Jan 16, 2024

Doosies Jan 17, 2024

kimyu0218 Jan 16, 2024

Doosies Jan 17, 2024

kimyu0218 Jan 16, 2024 •

edited

Loading

Doosies Jan 17, 2024

cloudflare-workers-and-pages bot commented Jan 17, 2024 •

edited

Loading

HeoJiye Jan 17, 2024

kimyu0218 Jan 17, 2024

HeoJiye Jan 17, 2024

kimyu0218 left a comment

Fe,be/feature/#456 web rtc test code작성 #466

Fe,be/feature/#456 web rtc test code작성 #466

Conversation

Doosies commented Jan 15, 2024

변경 사항

고민과 해결 과정

signaling socket 테스트 코드 작성

vitest 셋팅

kimyu0218 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kimyu0218 Jan 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cloudflare-workers-and-pages bot commented Jan 17, 2024 • edited Loading

Deploying with Cloudflare Pages

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kimyu0218 left a comment

Choose a reason for hiding this comment

kimyu0218 Jan 16, 2024 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 17, 2024 •

edited

Loading