diff --git a/client/jest.setup.cjs b/client/jest.setup.cjs index 433acc9..9882982 100644 --- a/client/jest.setup.cjs +++ b/client/jest.setup.cjs @@ -1,7 +1,2 @@ -global.import = { - meta: { - env: { - VITE_BACKEND_URL: 'https://ets-glitch-backend.glitch.me/' - } - } -}; +process.env.VITE_BACKEND_URL = 'http://localhost:4000/'; +process.env.VITE_BACKEND_SOCKET_URL = 'https://ets-glitch-backend.glitch.me/'; diff --git a/client/src/__tests__/services/WebsocketService.test.tsx b/client/src/__tests__/services/WebsocketService.test.tsx index e61c994..b4965dc 100644 --- a/client/src/__tests__/services/WebsocketService.test.tsx +++ b/client/src/__tests__/services/WebsocketService.test.tsx @@ -5,11 +5,11 @@ import { ENV_VARIABLES } from '../../constants'; jest.mock('socket.io-client'); -jest.mock('../../constants', () => ({ - ENV_VARIABLES: { - VITE_BACKEND_URL: 'https://ets-glitch-backend.glitch.me/' - } -})); +// jest.mock('../../constants', () => ({ +// ENV_VARIABLES: { +// VITE_BACKEND_SOCKET_URL: 'https://ets-glitch-backend.glitch.me/' +// } +// })); describe('WebSocketService', () => { let mockSocket: Partial; @@ -29,13 +29,13 @@ describe('WebSocketService', () => { }); test('connect should initialize socket connection', () => { - WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL); + WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); expect(io).toHaveBeenCalled(); expect(WebsocketService['socket']).toBe(mockSocket); }); test('disconnect should terminate socket connection', () => { - mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL); + mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); expect(WebsocketService['socket']).toBeTruthy(); WebsocketService.disconnect(); expect(mockSocket.disconnect).toHaveBeenCalled(); @@ -43,7 +43,7 @@ describe('WebSocketService', () => { }); test('createRoom should emit create-room event', () => { - WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL); + WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); WebsocketService.createRoom(); expect(mockSocket.emit).toHaveBeenCalledWith('create-room'); }); @@ -52,7 +52,7 @@ describe('WebSocketService', () => { const roomName = 'testRoom'; const question = { id: 1, text: 'Sample Question' }; - mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL); + mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); WebsocketService.nextQuestion(roomName, question); expect(mockSocket.emit).toHaveBeenCalledWith('next-question', { roomName, question }); }); @@ -61,7 +61,7 @@ describe('WebSocketService', () => { const roomName = 'testRoom'; const questions = [{ id: 1, text: 'Sample Question' }]; - mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL); + mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); WebsocketService.launchStudentModeQuiz(roomName, questions); expect(mockSocket.emit).toHaveBeenCalledWith('launch-student-mode', { roomName, @@ -72,7 +72,7 @@ describe('WebSocketService', () => { test('endQuiz should emit end-quiz event with correct parameters', () => { const roomName = 'testRoom'; - mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL); + mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); WebsocketService.endQuiz(roomName); expect(mockSocket.emit).toHaveBeenCalledWith('end-quiz', { roomName }); }); @@ -81,7 +81,7 @@ describe('WebSocketService', () => { const enteredRoomName = 'testRoom'; const username = 'testUser'; - mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL); + mockSocket = WebsocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); WebsocketService.joinRoom(enteredRoomName, username); expect(mockSocket.emit).toHaveBeenCalledWith('join-room', { enteredRoomName, username }); }); diff --git a/client/src/constants.tsx b/client/src/constants.tsx index 21ff020..09afd51 100644 --- a/client/src/constants.tsx +++ b/client/src/constants.tsx @@ -1,9 +1,11 @@ // constants.tsx const ENV_VARIABLES = { MODE: 'production', - VITE_BACKEND_URL: process.env.VITE_BACKEND_URL || "" + VITE_BACKEND_URL: process.env.VITE_BACKEND_URL || "", + VITE_BACKEND_SOCKET_URL: process.env.VITE_BACKEND_SOCKET_URL || "", }; console.log(`ENV_VARIABLES.VITE_BACKEND_URL=${ENV_VARIABLES.VITE_BACKEND_URL}`); +console.log(`ENV_VARIABLES.VITE_BACKEND_SOCKET_URL=${ENV_VARIABLES.VITE_BACKEND_SOCKET_URL}`); export { ENV_VARIABLES }; diff --git a/client/src/pages/Student/JoinRoom/JoinRoom.tsx b/client/src/pages/Student/JoinRoom/JoinRoom.tsx index d6a6b09..1c865e8 100644 --- a/client/src/pages/Student/JoinRoom/JoinRoom.tsx +++ b/client/src/pages/Student/JoinRoom/JoinRoom.tsx @@ -34,8 +34,8 @@ const JoinRoom: React.FC = () => { }, []); const handleCreateSocket = () => { - console.log(`JoinRoom: handleCreateSocket: ${ENV_VARIABLES.VITE_BACKEND_URL}`); - const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL); + console.log(`JoinRoom: handleCreateSocket: ${ENV_VARIABLES.VITE_BACKEND_SOCKET_URL}`); + const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); socket.on('join-success', () => { setIsWaitingForTeacher(true); diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index c362f77..c65b179 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -83,7 +83,7 @@ const ManageRoom: React.FC = () => { const createWebSocketRoom = () => { console.log('Creating WebSocket room...'); setConnectingError(''); - const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL); + const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); socket.on('connect', () => { webSocketService.createRoom(); diff --git a/client/src/services/WebsocketService.tsx b/client/src/services/WebsocketService.tsx index 8ba0da2..9c7bd89 100644 --- a/client/src/services/WebsocketService.tsx +++ b/client/src/services/WebsocketService.tsx @@ -21,13 +21,14 @@ class WebSocketService { private socket: Socket | null = null; connect(backendUrl: string): Socket { - console.log(`WebSocketService.connect(${backendUrl})`); + console.log(`WebSocketService.connect('${backendUrl}')`); - // Ensure the URL uses wss: if the URL starts with https: - const protocol = backendUrl.startsWith('https:') ? 'wss:' : 'ws:'; - console.log(`WebSocketService.connect: protocol=${protocol}`); - const url = backendUrl.replace(/^http(s):/, protocol); - console.log(`WebSocketService.connect: changed url=${url}`); + // // Ensure the URL uses wss: if the URL starts with https: + // const protocol = backendUrl.startsWith('https:') ? 'wss:' : 'ws:'; + // console.log(`WebSocketService.connect: protocol=${protocol}`); + // const url = backendUrl.replace(/^http(s):/, protocol); + // console.log(`WebSocketService.connect: changed url=${url}`); + const url = backendUrl || window.location.host; this.socket = io(url, { transports: ['websocket'], diff --git a/docker-compose.yaml b/docker-compose.yaml index 51f035a..97c112f 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -5,6 +5,10 @@ services: container_name: frontend ports: - "5173:5173" + environment: + VITE_BACKEND_URL: "http://localhost:4400" + # don't define VITE_BACKEND_SOCKET_URL so it will default to window.location.host + # VITE_BACKEND_SOCKET_URL: "" restart: always backend: