Fix SnackbarService import and add validation for empty Title/Subtitle in AddWidget

Co-authored-by: PhantomDave <34485699+PhantomDave@users.noreply.github.com>

Author: Copilot

PhantomDave.BankTracking.Api/Types/Mutations/DashboardWidgetMutations.cs

@@ -38,6 +38,36 @@ public async Task<DashboardWidgetType> AddWidget(
                     .Build());
         }
 
+        string? title = null;
+        if (input.Title is not null)
+        {
+            var trimmedTitle = input.Title.Trim();
+            if (string.IsNullOrEmpty(trimmedTitle))
+            {
+                throw new GraphQLException(
+                    ErrorBuilder.New()
+                        .SetMessage("Widget title cannot be empty or whitespace.")
+                        .SetCode("BAD_USER_INPUT")
+                        .Build());
+            }
+            title = trimmedTitle;
+        }
+
+        string? subtitle = null;
+        if (input.Subtitle is not null)
+        {
+            var trimmedSubtitle = input.Subtitle.Trim();
+            if (string.IsNullOrEmpty(trimmedSubtitle))
+            {
+                throw new GraphQLException(
+                    ErrorBuilder.New()
+                        .SetMessage("Widget subtitle cannot be empty or whitespace.")
+                        .SetCode("BAD_USER_INPUT")
+                        .Build());
+            }
+            subtitle = trimmedSubtitle;
+        }
+
         var widget = new DashboardWidget
         {
             DashboardId = input.DashboardId,
@@ -46,8 +76,8 @@ public async Task<DashboardWidgetType> AddWidget(
             Y = Math.Max(0, input.Y),
             Rows = input.Rows,
             Cols = input.Cols,
-            Title = input.Title?.Trim(),
-            Subtitle = input.Subtitle?.Trim(),
+            Title = title,
+            Subtitle = subtitle,
             Config = input.Config
         };
 

PhantomDave.BankTracking.UnitTests/Mutations/DashboardWidgetMutationsTests.cs

@@ -195,6 +195,64 @@ public async Task AddWidget_WithAllMetadata_StoresAllFields()
         Assert.Equal(configJson, result.Config);
     }
 
+    [Fact]
+    public async Task AddWidget_WithEmptyTitle_ThrowsException()
+    {
+        // Arrange
+        var dashboard = new Dashboard { Id = 1, Name = "Test", AccountId = 1 };
+        var account = new Account { Id = 1 };
+
+        _mockAccountRepository.Setup(r => r.GetByIdAsync(1)).ReturnsAsync(account);
+        _mockDashboardRepository.Setup(r => r.GetByIdAsync(1)).ReturnsAsync(dashboard);
+
+        var input = new AddWidgetInput
+        {
+            DashboardId = 1,
+            Type = WidgetType.NetGraph,
+            X = 0,
+            Y = 0,
+            Rows = 2,
+            Cols = 2,
+            Title = "   "
+        };
+
+        // Act & Assert
+        var exception = await Assert.ThrowsAsync<GraphQLException>(
+            async () => await _mutations.AddWidget(_mockUnitOfWork.Object, _mockHttpContextAccessor.Object, input)
+        );
+
+        Assert.Contains("title cannot be empty", exception.Message.ToLower());
+    }
+
+    [Fact]
+    public async Task AddWidget_WithWhitespaceOnlySubtitle_ThrowsException()
+    {
+        // Arrange
+        var dashboard = new Dashboard { Id = 1, Name = "Test", AccountId = 1 };
+        var account = new Account { Id = 1 };
+
+        _mockAccountRepository.Setup(r => r.GetByIdAsync(1)).ReturnsAsync(account);
+        _mockDashboardRepository.Setup(r => r.GetByIdAsync(1)).ReturnsAsync(dashboard);
+
+        var input = new AddWidgetInput
+        {
+            DashboardId = 1,
+            Type = WidgetType.NetGraph,
+            X = 0,
+            Y = 0,
+            Rows = 2,
+            Cols = 2,
+            Subtitle = "\t\n  "
+        };
+
+        // Act & Assert
+        var exception = await Assert.ThrowsAsync<GraphQLException>(
+            async () => await _mutations.AddWidget(_mockUnitOfWork.Object, _mockHttpContextAccessor.Object, input)
+        );
+
+        Assert.Contains("subtitle cannot be empty", exception.Message.ToLower());
+    }
+
     [Fact]
     public async Task UpdateWidget_WithTitle_TrimsAndUpdatesTitle()
     {

frontend/src/app/components/dashboards/dashboard-component/dashboard-component.component.spec.ts

@@ -0,0 +1,133 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DashboardComponent } from './dashboard-component.component';
+import { WidgetType } from '../../../../generated/graphql';
+import { SnackbarService } from '../../../services/snackbar-service';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+  let snackbarService: jasmine.SpyObj<SnackbarService>;
+
+  beforeEach(async () => {
+    const snackbarServiceSpy = jasmine.createSpyObj('SnackbarService', ['success', 'error']);
+
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent],
+      providers: [{ provide: SnackbarService, useValue: snackbarServiceSpy }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    snackbarService = TestBed.inject(SnackbarService) as jasmine.SpyObj<SnackbarService>;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('onWidgetSelected', () => {
+    it('should create and add a NetGraph widget to the dashboard', () => {
+      const initialWidgetCount = component.widgets().length;
+
+      component.onWidgetSelected(WidgetType.NET_GRAPH);
+
+      expect(component.widgets().length).toBe(initialWidgetCount + 1);
+      const addedWidget = component.widgets()[initialWidgetCount];
+      expect(addedWidget.type).toBe(WidgetType.NET_GRAPH);
+    });
+
+    it('should create and add a CurrentBalance widget to the dashboard', () => {
+      const initialWidgetCount = component.widgets().length;
+
+      component.onWidgetSelected(WidgetType.CURRENT_BALANCE);
+
+      expect(component.widgets().length).toBe(initialWidgetCount + 1);
+      const addedWidget = component.widgets()[initialWidgetCount];
+      expect(addedWidget.type).toBe(WidgetType.CURRENT_BALANCE);
+    });
+
+    it('should show success snackbar when widget is added successfully', () => {
+      component.onWidgetSelected(WidgetType.NET_GRAPH);
+
+      expect(snackbarService.success).toHaveBeenCalledWith('Added Net Graph widget to dashboard.');
+    });
+
+    it('should show success snackbar with correct widget name for CurrentBalance', () => {
+      component.onWidgetSelected(WidgetType.CURRENT_BALANCE);
+
+      expect(snackbarService.success).toHaveBeenCalledWith('Added Remaining Budget widget to dashboard.');
+    });
+
+    it('should show error snackbar if widget creation fails', () => {
+      spyOn(console, 'error'); // Suppress console output in tests
+      const invalidWidgetType = 'INVALID_TYPE' as WidgetType;
+
+      component.onWidgetSelected(invalidWidgetType);
+
+      expect(snackbarService.error).toHaveBeenCalledWith('Failed to add widget to dashboard.');
+    });
+
+    it('should not add widget to list if creation fails', () => {
+      spyOn(console, 'error'); // Suppress console output in tests
+      const invalidWidgetType = 'INVALID_TYPE' as WidgetType;
+      const initialWidgetCount = component.widgets().length;
+
+      component.onWidgetSelected(invalidWidgetType);
+
+      expect(component.widgets().length).toBe(initialWidgetCount);
+    });
+
+    it('should preserve existing widgets when adding new one', () => {
+      component.onWidgetSelected(WidgetType.NET_GRAPH);
+      const firstWidget = component.widgets()[0];
+
+      component.onWidgetSelected(WidgetType.CURRENT_BALANCE);
+
+      expect(component.widgets().length).toBe(2);
+      expect(component.widgets()[0]).toBe(firstWidget);
+      expect(component.widgets()[1].type).toBe(WidgetType.CURRENT_BALANCE);
+    });
+
+    it('should add multiple widgets of the same type', () => {
+      component.onWidgetSelected(WidgetType.NET_GRAPH);
+      component.onWidgetSelected(WidgetType.NET_GRAPH);
+
+      expect(component.widgets().length).toBe(2);
+      expect(component.widgets()[0].type).toBe(WidgetType.NET_GRAPH);
+      expect(component.widgets()[1].type).toBe(WidgetType.NET_GRAPH);
+    });
+  });
+
+  describe('widget configuration', () => {
+    it('should create NetGraph widget with default configuration', () => {
+      component.onWidgetSelected(WidgetType.NET_GRAPH);
+
+      const widget = component.widgets()[0];
+      expect(widget.config).toBeDefined();
+
+      const config = widget.getTypedConfig();
+      expect(config).toBeDefined();
+      expect(config?.title).toBe('Net Graph');
+      expect(config?.from).toBeDefined();
+      expect(config?.to).toBeDefined();
+    });
+
+    it('should create CurrentBalance widget with default configuration', () => {
+      component.onWidgetSelected(WidgetType.CURRENT_BALANCE);
+
+      const widget = component.widgets()[0];
+      expect(widget.config).toBeDefined();
+
+      const config = widget.getTypedConfig();
+      expect(config).toBeDefined();
+      expect(config?.title).toBe('Current Balance');
+    });
+  });
+
+  describe('edit mode', () => {
+    it('should start with edit mode disabled', () => {
+      expect(component.isEditMode()).toBe(false);
+    });
+  });
+});

frontend/src/app/components/dashboards/dashboard-component/dashboard-component.component.ts

@@ -18,7 +18,7 @@ import { DashboardDrawerComponent } from '../dashboard-drawer-component/dashboar
 import { WidgetType } from '../../../../generated/graphql';
 import { Widget } from '../../../models/dashboards/gridster-item';
 import { WidgetFactory } from '../widgets/widget-factory';
-import { SnackbarService } from '../../../services/snackbar-service';
+import { SnackbarService } from '../../../shared/services/snackbar.service';
 
 @Component({
   standalone: true,

frontend/src/app/components/dashboards/dashboard-drawer-component/dashboard-drawer-component.component.spec.ts

@@ -0,0 +1,111 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DashboardDrawerComponent } from './dashboard-drawer-component.component';
+import { WidgetType } from '../../../../generated/graphql';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('DashboardDrawerComponent', () => {
+  let component: DashboardDrawerComponent;
+  let fixture: ComponentFixture<DashboardDrawerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardDrawerComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DashboardDrawerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('availableWidgets', () => {
+    it('should include all widget types', () => {
+      const widgetTypes = component.availableWidgets.map((w) => w.type);
+
+      expect(widgetTypes).toContain(WidgetType.NET_GRAPH);
+      expect(widgetTypes).toContain(WidgetType.CURRENT_BALANCE);
+    });
+
+    it('should have display names for all widgets', () => {
+      component.availableWidgets.forEach((widget) => {
+        expect(widget.name).toBeTruthy();
+        expect(widget.name).not.toBe('');
+      });
+    });
+
+    it('should have correct display name for Net Graph', () => {
+      const netGraphWidget = component.availableWidgets.find((w) => w.type === WidgetType.NET_GRAPH);
+
+      expect(netGraphWidget?.name).toBe('Net Graph');
+    });
+
+    it('should have correct display name for Current Balance', () => {
+      const currentBalanceWidget = component.availableWidgets.find(
+        (w) => w.type === WidgetType.CURRENT_BALANCE
+      );
+
+      expect(currentBalanceWidget?.name).toBe('Remaining Budget');
+    });
+  });
+
+  describe('addWidgetToDashboard', () => {
+    it('should emit widgetSelected event with correct widget type', (done) => {
+      const widget = { type: WidgetType.NET_GRAPH, name: 'Net Graph' };
+
+      component.widgetSelected.subscribe((type) => {
+        expect(type).toBe(WidgetType.NET_GRAPH);
+        done();
+      });
+
+      component.addWidgetToDashboard(widget);
+    });
+
+    it('should emit widgetSelected for CurrentBalance widget', (done) => {
+      const widget = { type: WidgetType.CURRENT_BALANCE, name: 'Remaining Budget' };
+
+      component.widgetSelected.subscribe((type) => {
+        expect(type).toBe(WidgetType.CURRENT_BALANCE);
+        done();
+      });
+
+      component.addWidgetToDashboard(widget);
+    });
+
+    it('should not show snackbar when adding widget', () => {
+      const widget = { type: WidgetType.NET_GRAPH, name: 'Net Graph' };
+
+      // Should not throw or call snackbar service
+      expect(() => component.addWidgetToDashboard(widget)).not.toThrow();
+    });
+  });
+
+  describe('onDrawerClosed', () => {
+    it('should emit closed event', (done) => {
+      component.closed.subscribe(() => {
+        expect(true).toBe(true);
+        done();
+      });
+
+      component.onDrawerClosed();
+    });
+  });
+
+  describe('drawer state', () => {
+    it('should accept opened input', () => {
+      fixture.componentRef.setInput('opened', true);
+      fixture.detectChanges();
+
+      expect(component.opened()).toBe(true);
+    });
+
+    it('should handle closed state', () => {
+      fixture.componentRef.setInput('opened', false);
+      fixture.detectChanges();
+
+      expect(component.opened()).toBe(false);
+    });
+  });
+});