Test/broadcast (#32)

* test: broadcast

* test: footer nav

* fix: ci

* fix: fmt

.github/workflows/dev.yml

@@ -41,4 +41,6 @@ jobs:
             - name: Test with the dotnet CLI
               run: dotnet test
             - name: Test JS
-              run: echo "Hello"
+              run: |
+                  cd src/storeonwheels.client
+                  npm run test-ci

Makefile

@@ -8,3 +8,7 @@ start:
 test:
 	dotnet test
 	cd src/storeonwheels.client && npm run test
+
+format:
+	dotnet format --diagnostics --severity info  
+	cd src/storeonwheels.client && npm run fmt

src/StoreOnWheels.Server/Controllers/Geohubs/GeohubsClient.cs

@@ -58,4 +58,4 @@ public override async Task OnDisconnectedAsync(Exception? exception) {
 
 		await base.OnDisconnectedAsync(exception);
 	}
-}
+}

src/StoreOnWheels.Server/Controllers/Geohubs/IGeoHubClient.cs

@@ -2,4 +2,4 @@
 
 public interface IGeoHubClient {
 	Task MessageReceived(string userId, string message);
-}
+}

src/StoreOnWheels.Server/Controllers/Geohubs/MockPositionEmitter.cs

@@ -35,5 +35,4 @@ private GeolocationPosition MockPosition(int index) {
 			}
 		};
 	}
-}
-
+}

src/StoreOnWheels.Server/Controllers/Healthchecks/HealthchecksController.cs

@@ -10,4 +10,4 @@ public ActionResult Get() {
 		var payload = new { Message = "Server is up and running" };
 		return Ok(payload);
 	}
-}
+}

src/StoreOnWheels.Server/Controllers/Vendors/VendorsController.cs

@@ -27,4 +27,4 @@ public async Task<ActionResult<Vendor>> Create([FromBody] Vendor vendor) {
 		Vendor createdVendor = await vendorService.Create(vendor);
 		return Created("api/v1/vendors", createdVendor);
 	}
-}
+}

src/StoreOnWheels.Server/Libs/Shared/Configs/AppDbContext.cs

@@ -21,4 +21,4 @@ protected override void OnModelCreating(ModelBuilder modelBuilder) {
 
 		modelBuilder.Entity<Vendor>().HasData(vendor);
 	}
-}
+}

src/StoreOnWheels.Server/Libs/Shared/Models/GeolocationCoordinate.cs

@@ -8,4 +8,4 @@ public class GeolocationCoordinate {
 	public float Accuracy { get; set; }
 	public float Altitude { get; set; }
 	public float AltitudeAccuracy { get; set; }
-}
+}

src/StoreOnWheels.Server/Libs/Shared/Models/GeolocationPosition.cs

@@ -12,4 +12,4 @@ public class GeolocationPosition {
 	public string ToJson() {
 		return JsonConvert.SerializeObject(this, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() });
 	}
-}
+}

src/StoreOnWheels.Server/Libs/Vendors/IVendorService.cs

@@ -7,4 +7,4 @@ public interface IVendorService {
 	Task<Vendor?> GetByName(string displayName);
 	Task<Vendor> Create(Vendor vendor);
 	Task Delete(string vendorId);
-}
+}

src/StoreOnWheels.Server/Libs/Vendors/VendorService.cs

@@ -21,4 +21,4 @@ public async Task Delete(string vendorId) {
 		db.Vendors.Remove(vendor);
 		await db.SaveChangesAsync();
 	}
-}
+}

src/StoreOnWheels.Server/Migrations/20240427121321_InitialVendorDb.cs

@@ -5,6 +5,8 @@
 namespace StoreOnWheels.Server.Migrations {
 	/// <inheritdoc />
 	public partial class InitialVendorDb : Migration {
+		private static readonly string[] columns = ["Id", "Description", "DisplayName"];
+
 		/// <inheritdoc />
 		protected override void Up(MigrationBuilder migrationBuilder) {
 			migrationBuilder.CreateTable(
@@ -20,7 +22,7 @@ protected override void Up(MigrationBuilder migrationBuilder) {
 
 			migrationBuilder.InsertData(
 				table: "Vendors",
-				columns: new[] { "Id", "Description", "DisplayName" },
+				columns: columns,
 				values: new object[] { "1", "Some food truck", "FoodTruck 1" });
 
 			migrationBuilder.CreateIndex(
@@ -36,4 +38,4 @@ protected override void Down(MigrationBuilder migrationBuilder) {
 				name: "Vendors");
 		}
 	}
-}
+}

src/storeonwheels.client/package.json

@@ -7,6 +7,7 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
+    "test-ci": "ng test --browsers=ChromeHeadless --watch=false",
     "prestart": "node aspnetcore-https",
     "start:windows": "ng serve --ssl --ssl-cert \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem\" --ssl-key \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.key\"",
     "start:default": "ng serve --ssl --ssl-cert \"$HOME/.aspnet/https/${npm_package_name}.pem\" --ssl-key \"$HOME/.aspnet/https/${npm_package_name}.key\"",

src/storeonwheels.client/src/app/libs/broadcast/components/geo-permission-instruction/geo-permission-instruction.component.spec.ts

@@ -1,10 +1,11 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-
 import { GeoPermissionInstructionComponent } from "./geo-permission-instruction.component";
 
 describe("GeoPermissionComponent", () => {
   let component: GeoPermissionInstructionComponent;
   let fixture: ComponentFixture<GeoPermissionInstructionComponent>;
+  const instructions: RegExp =
+    /To modify permission, click the map marker icon at the address bar/i;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -13,10 +14,21 @@ describe("GeoPermissionComponent", () => {
 
     fixture = TestBed.createComponent(GeoPermissionInstructionComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    fixture.autoDetectChanges();
+  });
+
+  it("prompt geoPermission should not show instructions", async () => {
+    expect(component).toBeTruthy();
+    fixture.componentRef.setInput("geoPermission", "prompt");
+    await fixture.detectChanges();
+    const root: HTMLElement = fixture.nativeElement;
+    expect(root.innerText).not.toMatch(instructions);
   });
 
-  it("should create", () => {
+  it("granted geoPermission should show instructions", () => {
     expect(component).toBeTruthy();
+    fixture.componentRef.setInput("geoPermission", "granted");
+    const root: HTMLElement = fixture.nativeElement;
+    expect(root.innerText).toMatch(instructions);
   });
 });

src/storeonwheels.client/src/app/libs/broadcast/components/vendor-form/vendor-form.component.html

@@ -1,14 +1,20 @@
-@if (vendorForm) {
+@if (vendorForm && displayName && description) {
   <form [formGroup]="vendorForm" class="flex flex-col" (ngSubmit)="onSubmit()">
     <mat-form-field>
       <mat-label>Name</mat-label>
       <input matInput formControlName="displayName" />
     </mat-form-field>
+    @if (displayName.invalid && (displayName.touched || displayName.dirty)) {
+      <p class="text-red-500 text-sm">Name is required</p>
+    }
 
     <mat-form-field>
       <mat-label>Description</mat-label>
       <input matInput formControlName="description" />
     </mat-form-field>
+    @if (description.invalid && (description.touched || description.dirty)) {
+      <p class="text-red-500 text-sm">Description is required</p>
+    }
 
     <!--workaround to get form submission to work when user press enter on input focus-->
     <!--https://stackoverflow.com/a/477699/6514532-->

src/storeonwheels.client/src/app/libs/broadcast/components/vendor-form/vendor-form.component.spec.ts

@@ -1,22 +1,77 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-
+import {
+  ComponentFixture,
+  TestBed,
+  ComponentFixtureAutoDetect,
+} from "@angular/core/testing";
 import { VendorFormComponent } from "./vendor-form.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { VendorForm } from "~/app/libs/shared/models";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 describe("VendorFormComponent", () => {
   let component: VendorFormComponent;
   let fixture: ComponentFixture<VendorFormComponent>;
 
   beforeEach(async () => {
+    const formBuilder = new FormBuilder();
+    const vendorForm: FormGroup<VendorForm> = formBuilder.nonNullable.group({
+      id: ["", Validators.required],
+      displayName: ["", Validators.required],
+      description: ["", Validators.required],
+    });
+
     await TestBed.configureTestingModule({
-      imports: [VendorFormComponent],
+      imports: [VendorFormComponent, BrowserAnimationsModule],
+      providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }],
     }).compileComponents();
 
     fixture = TestBed.createComponent(VendorFormComponent);
+    fixture.componentRef.setInput("vendorForm", vendorForm);
+    fixture.autoDetectChanges();
+
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  it("labels should exists", () => {
+    fixture.detectChanges();
+    const root: HTMLElement = fixture.nativeElement;
+    expect(root).toBeTruthy();
+
+    const labels: HTMLLabelElement[] = Array.from(
+      root.querySelectorAll("label")
+    );
+    expect(labels.length).toBe(2);
+    expect(labels[0].innerText).toBe("Name");
+    expect(labels[1].innerText).toBe("Description");
+  });
+
+  it("validation should work", async () => {
+    const root: HTMLElement = fixture.nativeElement;
+    expect(root).toBeTruthy();
+    expect(component.vendorForm).toBeTruthy();
+
+    component.vendorForm?.markAllAsTouched();
+    fixture.detectChanges();
+    expect(root.innerText).toContain("Name is required");
+    expect(root.innerText).toContain("Description is required");
+
+    const nameInput: HTMLInputElement | null = root.querySelector("input");
+    expect(nameInput).not.toBeNull();
+
+    if (nameInput == null) {
+      return;
+    }
+
+    nameInput.value = "ABC";
+    // Dispatch a DOM event so that Angular learns of input value change.
+    nameInput.dispatchEvent(new Event("input"));
+    // Wait for Angular to update the display binding
+    await fixture.whenStable();
+
+    expect(root.innerText).not.toContain("Name is required");
+  });
 });

src/storeonwheels.client/src/app/libs/broadcast/components/vendor-form/vendor-form.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, output } from "@angular/core";
+import { Component, Input, OnChanges, output } from "@angular/core";
 import { VendorForm } from "~/app/libs/shared/models";
-import { FormGroup, ReactiveFormsModule } from "@angular/forms";
+import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
 import { CommonModule } from "@angular/common";
@@ -17,15 +17,20 @@ import { CommonModule } from "@angular/common";
   templateUrl: "./vendor-form.component.html",
   styleUrl: "./vendor-form.component.css",
 })
-export class VendorFormComponent {
+export class VendorFormComponent implements OnChanges {
   @Input({ required: true }) vendorForm?: FormGroup<VendorForm>;
+  displayName: FormControl<string> | undefined;
+  description: FormControl<string> | undefined;
   submitEvent = output<number>();
 
+  ngOnChanges() {
+    this.displayName = this.vendorForm?.controls.displayName;
+    this.description = this.vendorForm?.controls.description;
+  }
+
   onSubmit() {
     if (this.vendorForm != null) {
       this.submitEvent.emit(Date.now());
     }
-
-    const x = 5 + 5; 
   }
 }

src/storeonwheels.client/src/app/libs/map/services/message-hub/message-hub.service.spec.ts

@@ -8,9 +8,7 @@ describe("MessageHubService", () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [
-        { provide: HUB_CONNECTION, useValue: hubConnection },
-      ]
+      providers: [{ provide: HUB_CONNECTION, useValue: hubConnection }],
     });
     service = TestBed.inject(MessageHubService);
   });

src/storeonwheels.client/src/app/libs/shared/components/footer-nav/footer-nav.component.spec.ts

@@ -1,14 +1,14 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-
 import { FooterNavComponent } from "./footer-nav.component";
+import { RouterModule } from "@angular/router";
 
 describe("FooterNavComponent", () => {
   let component: FooterNavComponent;
   let fixture: ComponentFixture<FooterNavComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FooterNavComponent],
+      imports: [FooterNavComponent, RouterModule.forRoot([])],
     }).compileComponents();
 
     fixture = TestBed.createComponent(FooterNavComponent);
@@ -18,5 +18,9 @@ describe("FooterNavComponent", () => {
 
   it("should create", () => {
     expect(component).toBeTruthy();
+
+    const root: HTMLElement = fixture.nativeElement;
+    expect(root.innerText).toMatch(/map/i);
+    expect(root.innerText).toMatch(/broadcast/i);
   });
 });