Merge pull request #184 from ets-cfuhrman-pfe/fuhrmanator/issue171

Fuhrmanator/issue171

client/.env

@@ -1,2 +1,2 @@
 VITE_BACKEND_URL=http://localhost:4400
-VITE_AZURE_BACKEND_URL=http://localhost:4400
+VITE_BACKEND_SOCKET_URL=http://localhost:4400

client/jest.config.cjs

@@ -11,7 +11,8 @@ module.exports = {
     //moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
     setupFiles: ['./jest.setup.cjs'],
     moduleNameMapper: {
-        '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+        '^src/constants$': '<rootDir>/src/__mocks__/constantsMock.tsx',
     },
     transformIgnorePatterns: ['node_modules/(?!nanoid/)'],
 };

client/src/__mocks__/constantsMock.tsx

@@ -0,0 +1,13 @@
+console.log('constantsMock.tsx is loaded');
+
+// constants.tsx
+const ENV_VARIABLES = {
+    MODE: 'production',
+    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 };

client/src/__tests__/services/WebsocketService.test.tsx

@@ -1,16 +1,10 @@
 //WebsocketService.test.tsx
 import WebsocketService from '../../services/WebsocketService';
 import { io, Socket } from 'socket.io-client';
-import { ENV_VARIABLES } from '../../constants';
+import { ENV_VARIABLES } from 'src/constants';
 
 jest.mock('socket.io-client');
 
-// jest.mock('../../constants', () => ({
-//     ENV_VARIABLES: {
-//         VITE_BACKEND_SOCKET_URL: 'https://ets-glitch-backend.glitch.me/'
-//     }
-// }));
-
 describe('WebSocketService', () => {
     let mockSocket: Partial<Socket>;
 

client/src/constants.tsx

@@ -1,8 +1,8 @@
 // constants.tsx
 const ENV_VARIABLES = {
     MODE: 'production',
-    VITE_BACKEND_URL: process.env.VITE_BACKEND_URL || "",
-    VITE_BACKEND_SOCKET_URL: process.env.VITE_BACKEND_SOCKET_URL || "",
+    VITE_BACKEND_URL: import.meta.env.VITE_BACKEND_URL || "",
+    VITE_BACKEND_SOCKET_URL: import.meta.env.VITE_BACKEND_SOCKET_URL || "",
 };
 
 console.log(`ENV_VARIABLES.VITE_BACKEND_URL=${ENV_VARIABLES.VITE_BACKEND_URL}`);

client/src/pages/Student/JoinRoom/JoinRoom.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { Socket } from 'socket.io-client';
-import { ENV_VARIABLES } from '../../../constants';
+import { ENV_VARIABLES } from 'src/constants';
 
 import StudentModeQuiz from '../../../components/StudentModeQuiz/StudentModeQuiz';
 import TeacherModeQuiz from '../../../components/TeacherModeQuiz/TeacherModeQuiz';

client/src/pages/Teacher/ManageRoom/ManageRoom.tsx

@@ -10,7 +10,7 @@ import webSocketService, { AnswerReceptionFromBackendType } from '../../../servi
 import { QuizType } from '../../../Types/QuizType';
 
 import './manageRoom.css';
-import { ENV_VARIABLES } from '../../../constants';
+import { ENV_VARIABLES } from 'src/constants';
 import { StudentType, Answer } from '../../../Types/StudentType';
 import { Button } from '@mui/material';
 import LoadingCircle from '../../../components/LoadingCircle/LoadingCircle';

client/src/services/ApiService.tsx

@@ -1,8 +1,8 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
-import { ENV_VARIABLES } from '../constants';
 
-import { QuizType } from '../Types/QuizType';
-import { FolderType } from '../Types/FolderType';
+import { FolderType } from 'src/Types/FolderType';
+import { QuizType } from 'src/Types/QuizType';
+import { ENV_VARIABLES } from 'src/constants';
 
 class ApiService {
     private BASE_URL: string;

client/tsconfig.json

@@ -1,5 +1,9 @@
 {
     "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "src/*": ["src/*"]
+        },
         "target": "ESNext",
         "useDefineForClassFields": true,
         "lib": ["ES2020", "DOM", "DOM.Iterable"],

client/vite.config.ts

@@ -20,6 +20,11 @@ export default defineConfig({
         pluginChecker({ typescript: true }),
         EnvironmentPlugin(filteredEnv),
     ],
+    resolve: {
+        alias: {
+          'src': '/src'
+        }
+      },
     preview: {
         port: 5173,
         strictPort: true

server/app.js

@@ -43,6 +43,7 @@ const imagesRouter = require('./routers/images.js');
 
 // Setup environment
 dotenv.config();
+const isDev = process.env.NODE_ENV === 'development';
 const errorHandler = require("./middleware/errorHandler.js");
 
 // Start app
@@ -63,13 +64,12 @@ const configureServer = (httpServer, isDev) => {
 };
 
 // Start sockets (depending on the dev or prod environment)
-let server = http.createServer(app);
-let isDev = process.env.NODE_ENV === 'development';
+const server = http.createServer(app);
 
 console.log(`Environnement: ${process.env.NODE_ENV} (${isDev ? 'dev' : 'prod'})`);
 
 const io = configureServer(server);
-console.log(`server.io configured: ${io.secure ? 'secure' : 'not secure'}`);
+console.log(`Server configured with cors.origin: ${io.opts.cors.origin} and secure: ${io.opts.secure}`);
 
 setupWebsocket(io);
 console.log(`Websocket setup with on() listeners.`);