Merge pull request #145 from InfiniView-AI/91-ui-enhancement

91 UI enhancement

src/client/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "vitest",
+    "test": "react-scripts test --watchAll=false",
+    "test:coverage": "react-scripts test --coverage --watchAll=false",
     "lint": "eslint --ext .js,.cjs,.ts,.tsx .",
     "lint:fix": "eslint --ext .js,.cjs,.ts,.tsx . --fix",
     "typecheck": "tsc --noEmit"
@@ -18,11 +19,13 @@
     "@mui/material": "^5.15.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.13.0"
+    "react-router-dom": "^6.22.2",
+    "react-scripts": "^5.0.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
@@ -37,9 +40,10 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^28.0.0",
     "jsdom": "^22.1.0",
     "prettier": "^2.8.8",
-    "typescript": "^5.2.2",
+    "typescript": "^4.9.5",
     "vite": "^4.3.9",
     "vitest": "^0.32.0"
   }

src/client/src/tests/Auth.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { MemoryRouter as Router } from 'react-router-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import Auth from '../modules/Auth';
+
+describe('Auth Component Tests', () => {
+  test('renders the Motion Mingle banner with the logo', () => {
+    render(
+      <Router>
+        <Auth />
+      </Router>
+    );
+    expect(screen.getByText(/Motion Mingle/i)).toBeInTheDocument();
+    expect(screen.getByAltText('MotionMingle Logo')).toHaveAttribute('src', expect.stringContaining('logo.jpg'));
+  });
+
+  test('renders the slogan text correctly', () => {
+    render(
+      <Router>
+        <Auth />
+      </Router>
+    );
+    expect(screen.getByText(/Harmony in Motion, Unity in Practice/i)).toBeInTheDocument();
+  });
+
+  test('renders Instructor and Practitioner buttons and checks their navigation', async () => {
+    const user = userEvent.setup();
+    render(
+      <Router>
+        <Auth />
+      </Router>
+    );
+    const instructorButton = screen.getByRole('button', { name: /Instructor/i });
+    expect(instructorButton).toBeInTheDocument();
+
+    // Simulate user clicking the buttons and navigating
+    await user.click(instructorButton);
+    expect(window.location.pathname).toBe('/');
+  });
+
+  test('ensures the animations are present and correct', () => {
+    render(
+      <Router>
+        <Auth />
+      </Router>
+    );
+    const logo = screen.getByAltText('MotionMingle Logo');
+    expect(logo).toHaveStyle('animation: animation-107szx5 1s ease-out;');
+  });
+});

src/client/src/tests/MessageModel.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MessageModal from '../modules/MessageModal';
+
+describe('MessageModal Component', () => {
+  const mockClose = jest.fn();
+  const mockStopVideo = jest.fn();
+
+  beforeEach(() => {
+    render(
+      <MessageModal
+        isModalOpen={true}
+        handleClose={mockClose}
+        handelStopVideo={mockStopVideo}
+      />
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders correctly', () => {
+    expect(screen.getByText(/warning/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /stop video/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+  });
+
+  test('calls handleClose when the cancel button is clicked', () => {
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+    expect(mockClose).toHaveBeenCalledTimes(1);
+  });
+
+  test('calls handelStopVideo when the stop video button is clicked', () => {
+    fireEvent.click(screen.getByRole('button', { name: /stop video/i }));
+    expect(mockStopVideo).toHaveBeenCalledTimes(1);
+  });
+
+  test('modal should be visible when isModalOpen is true', () => {
+    expect(screen.getByText(/warning/i)).toBeVisible();
+  });
+});

src/client/src/tests/NotFound.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import NotFound from '../modules/NotFound'; // Adjust the import path as necessary
+import { BrowserRouter } from 'react-router-dom';
+
+describe('NotFound Component', () => {
+  // Render the NotFound component within a BrowserRouter to support the Link component
+  beforeEach(() => {
+    render(
+      <BrowserRouter>
+        <NotFound />
+      </BrowserRouter>
+    );
+  });
+
+  test('displays the not found message', () => {
+    const notFoundMessage = screen.getByText(/Not Found/i);
+    expect(notFoundMessage).toBeInTheDocument();
+  });
+
+  test('provides a link to the home page', () => {
+    const goHomeLink = screen.getByRole('link', { name: /GO HOME/i });
+    expect(goHomeLink).toBeInTheDocument();
+    expect(goHomeLink).toHaveAttribute('href', '/');
+  });
+});

src/client/src/tests/RTCControl.test.tsx

@@ -0,0 +1,43 @@
+import { createPeerConnection, connectAsConsumer, connectAsBroadcaster } from '../modules/RTCControl';
+
+// Mocking the global RTCPeerConnection
+global.RTCPeerConnection = jest.fn().mockImplementation(() => ({
+  createOffer: jest.fn().mockResolvedValue({
+    sdp: 'sdp',
+    type: 'offer',
+  }),
+  setLocalDescription: jest.fn(),
+  setRemoteDescription: jest.fn(),
+  localDescription: {
+    sdp: 'sdp',
+    type: 'offer',
+  },
+  addEventListener: jest.fn(),
+  addTrack: jest.fn(),
+  close: jest.fn(),
+}));
+
+// Mocking the global fetch function
+global.fetch = jest.fn().mockResolvedValue({
+  json: jest.fn().mockResolvedValue({
+    sdp: 'mocked sdp',
+    type: 'answer',
+  }),
+});
+
+describe('RTCControl', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('createPeerConnection', () => {
+    it('should create a new RTCPeerConnection with the specified config', () => {
+      const pc = createPeerConnection();
+      expect(pc).toBeInstanceOf(RTCPeerConnection);
+      expect(global.RTCPeerConnection).toHaveBeenCalledWith({
+        sdpSemantics: 'unified-plan',
+        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+      });
+    });
+  });
+});

src/client/src/tests/SelectAnnotation.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SelectAnnotation from '../modules/SelectAnnotation';
+
+describe('SelectAnnotation Component', () => {
+  const mockSelectionHandler = jest.fn();
+
+  beforeEach(() => {
+    render(<SelectAnnotation selectedAnnotation="" selectionHandler={mockSelectionHandler} />);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly', () => {
+    expect(screen.getByLabelText('Annotation')).toBeInTheDocument();
+  });
+});