Merge pull request #31 from theImmortalCoders/dev

Release 0.2

angular.json

@@ -157,6 +157,7 @@
     "schematicCollections": [
       "@angular-eslint/schematics",
       "@schematics/angular"
-    ]
+    ],
+    "analytics": false
   }
 }

eslint.config.js

@@ -122,7 +122,7 @@ module.exports = tseslint.config(
         },
       ],
       'max-depth': ['warn', 2],
-      complexity: ['warn', { max: 5 }],
+      complexity: ['warn', { max: 6 }],
       'max-lines': ['warn', 200],
       'no-else-return': 'warn',
       'no-console': 'off',

package.json

@@ -15,6 +15,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.1.3",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",

src/app/app.component.ts

@@ -7,9 +7,13 @@ import { FooterComponent } from './shared/components/footer/footer.component';
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet, NavbarComponent, FooterComponent],
-  template: ` <app-navbar />
-    <main class="w-full min-h-screen"><router-outlet /></main>
-    <app-footer />`,
+  template: `
+    <app-navbar />
+    <main class="max-w-full min-h-all overflow-x-hidden relative z-40">
+      <router-outlet />
+    </main>
+    <app-footer />
+  `,
 })
 export class AppComponent {
   public title = 'rag-2-frontend';

src/app/app.config.ts

@@ -2,10 +2,12 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
+    provideHttpClient(),
   ],
 };

src/app/app.routes.ts

@@ -3,6 +3,8 @@ import { HomePageComponent } from './home/home.page.component';
 import { GamePageComponent } from './game/game.page.component';
 import { LoginPageComponent } from './user-workflow/login/login.page.component';
 import { RegisterPageComponent } from './user-workflow/register/register.page.component';
+import { Error404PageComponent } from './shared/components/error-pages/error404.page.component';
+import { Error500PageComponent } from './shared/components/error-pages/error500.page.component';
 
 export const routes: Routes = [
   {
@@ -30,9 +32,19 @@ export const routes: Routes = [
     component: RegisterPageComponent,
     title: 'Register Page',
   },
+  {
+    path: 'error404',
+    component: Error404PageComponent,
+    title: 'Error 404',
+  },
+  {
+    path: 'error500',
+    component: Error500PageComponent,
+    title: 'Error 500',
+  },
   {
     path: '**',
-    redirectTo: '',
+    redirectTo: 'error404',
     pathMatch: 'full',
   },
 ];

src/app/game/components/ai-socket-menu/ai-socket-menu.component.spec.ts

@@ -1,41 +1,112 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { AiSocketMenuComponent } from './ai-socket-menu.component';
+import { AiSocketService } from './services/ai-socket.service';
+import { DebugModeMenuComponent } from './components/debug-mode-menu/debug-mode-menu.component';
+import { DebugModePanelComponent } from './components/debug-mode-panel/debug-mode-panel.component';
+import { TExchangeData } from 'app/game/models/exchange-data.type';
+import { EventEmitter } from '@angular/core';
 
 describe('AiSocketMenuComponent', () => {
   let component: AiSocketMenuComponent;
   let fixture: ComponentFixture<AiSocketMenuComponent>;
+  let aiSocketServiceStub: Partial<AiSocketService>;
+  let socketService: AiSocketService;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AiSocketMenuComponent],
+  beforeEach(waitForAsync(() => {
+    aiSocketServiceStub = {
+      getIsSocketConnected: jasmine
+        .createSpy('getIsSocketConnected')
+        .and.returnValue(false),
+      getIsDataSendingActive: jasmine
+        .createSpy('getIsDataSendingActive')
+        .and.returnValue(false),
+      getSocket: jasmine.createSpy('getSocket').and.returnValue({
+        close: jasmine.createSpy('close'),
+      } as unknown as WebSocket),
+      stopDataExchange: jasmine.createSpy('stopDataExchange'),
+      startDataExchange: jasmine.createSpy('startDataExchange'),
+      connect: jasmine
+        .createSpy('connect')
+        .and.callFake((_url, onOpen, _onMessage, _onClose) => {
+          onOpen();
+        }),
+      sendDataToSocket: jasmine.createSpy('sendDataToSocket'),
+    };
+
+    TestBed.configureTestingModule({
+      imports: [
+        AiSocketMenuComponent,
+        DebugModeMenuComponent,
+        DebugModePanelComponent,
+      ],
+      providers: [{ provide: AiSocketService, useValue: aiSocketServiceStub }],
     }).compileComponents();
-  });
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AiSocketMenuComponent);
     component = fixture.componentInstance;
+    socketService = TestBed.inject(AiSocketService);
     fixture.detectChanges();
   });
 
-  it('should create the component', () => {
+  it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should initialize socket to null', () => {
-    expect(component.socket).toBeNull();
+  it('should display "Connect" button when socket is not connected', () => {
+    (socketService.getIsSocketConnected as jasmine.Spy).and.returnValue(false);
+    fixture.detectChanges();
+    const button = fixture.debugElement.query(By.css('button')).nativeElement;
+    expect(button.textContent).toContain('Connect');
+  });
+
+  it('should display "Disconnect" button when socket is connected', () => {
+    (socketService.getIsSocketConnected as jasmine.Spy).and.returnValue(true);
+    fixture.detectChanges();
+    const button = fixture.debugElement.query(By.css('button')).nativeElement;
+    expect(button.textContent).toContain('Disconnect');
+  });
+
+  it('should call connect method when "Connect" button is clicked', () => {
+    (socketService.getIsSocketConnected as jasmine.Spy).and.returnValue(false);
+    fixture.detectChanges();
+    const button = fixture.debugElement.query(By.css('button')).nativeElement;
+    button.click();
+    expect(socketService.connect).toHaveBeenCalled();
+  });
+
+  it('should call disconnect method when "Disconnect" button is clicked', () => {
+    (socketService.getIsSocketConnected as jasmine.Spy).and.returnValue(true);
+    fixture.detectChanges();
+    const button = fixture.debugElement.query(By.css('button')).nativeElement;
+    button.click();
+    expect(socketService.getSocket()?.close).toHaveBeenCalled();
   });
 
-  it('should emit logData when logDataEmitter is called', () => {
-    const logData = { message: 'Test log message' };
+  it('should emit logData when socket connects', () => {
     spyOn(component.logDataEmitter, 'emit');
-    component.logDataEmitter.emit(logData);
-    expect(component.logDataEmitter.emit).toHaveBeenCalledWith(logData);
+    (socketService.getIsSocketConnected as jasmine.Spy).and.returnValue(false);
+    fixture.detectChanges();
+    const button = fixture.debugElement.query(By.css('button')).nativeElement;
+    button.click();
+    expect(component.logDataEmitter.emit).toHaveBeenCalled();
+  });
+
+  it('should load recent phrases on init', () => {
+    const phrases = ['ws://localhost1', 'ws://localhost2'];
+    spyOn(localStorage, 'getItem').and.returnValue(JSON.stringify(phrases));
+    component.ngOnInit();
+    expect(component.recentPhrases).toEqual(phrases);
   });
 
-  it('should connect to the socket when connect is called', () => {
-    const socketDomain = 'ws://localhost:8080/';
-    component.connect(socketDomain);
-    expect(component.socket).not.toBeNull();
-    expect(component.socket?.url).toBe(socketDomain);
+  it('should toggle debug mode', () => {
+    const debugMenu = fixture.debugElement.query(
+      By.directive(DebugModeMenuComponent)
+    );
+    debugMenu.triggerEventHandler('debugModeEmitter', true);
+    fixture.detectChanges();
+    expect(component.isDebugModeActive).toBe(true);
   });
 });