test: map page (#33)

* chore: fix input

* test: vendor

* fix: test

* chore: readme

README.md

@@ -28,3 +28,10 @@ Test:
 ```
 make test
 ```
+
+# Code architecture
+The folder structure of this project follows the [package by component](https://dzone.com/articles/package-component-and) architecture.
+
+<img src="https://dz2cdn1.dzone.com/storage/temp/14001112-20150308-package-by-component.png" alt="package by component" height="300"/>
+
+Components should not have any dependency between each other, unless it is through a `shared` component.

src/storeonwheels.client/package.json

@@ -71,6 +71,7 @@
     "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",
     "tailwindcss": "^3.4.3",
+    "ts-mocks": "^3.0.1",
     "typescript": "~5.4.2"
   }
 }

src/storeonwheels.client/src/app/app.component.ts

@@ -5,7 +5,7 @@ import {
   HUB_CONNECTION,
   MessageHubService,
   hubConnection,
-} from "./libs/map/services";
+} from "./libs/map-feature/services";
 import { ReactiveFormsModule } from "@angular/forms";
 
 @Component({

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

@@ -2,7 +2,7 @@ import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
 import { MatInputModule } from "@angular/material/input";
-import { GeoPermission } from "~/app/libs/broadcast/services";
+import { GeoPermission } from "~/app/libs/broadcast-feature/services";
 
 @Component({
   selector: "app-geo-permission-instruction",

src/storeonwheels.client/src/app/libs/map-feature/components/map/map.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { MapComponent } from "./map.component";
+
+describe("MapComponent", () => {
+  let component: MapComponent;
+  let fixture: ComponentFixture<MapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MapComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("mapbox should render", () => {
+    expect(component).toBeTruthy();
+    const root: HTMLElement = fixture.nativeElement;
+    expect(root.innerText).toContain("© Mapbox");
+  });
+});

src/storeonwheels.client/src/app/libs/map/components/map/map.component.ts → src/storeonwheels.client/src/app/libs/map-feature/components/map/map.component.ts

@@ -16,7 +16,7 @@ import {
   ClickProps,
   clickSubject as _clickSubject,
   timedMapFactory,
-} from "~/app/libs/map/services";
+} from "~/app/libs/map-feature/services";
 import { GeoInfo } from "~/app/libs/shared/models";
 import { LngLat, Marker, Popup } from "mapbox-gl";
 import { BehaviorSubject, Observable } from "rxjs";
@@ -68,7 +68,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
 
     mapboxService.draw(containerId, searchboxId, 103.851959, 1.29027, 12);
     mapboxService.removeCopyrightText();
-    mapboxService.map.resize();
+    mapboxService.map?.resize();
   }
 
   ngOnDestroy() {
@@ -96,7 +96,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
       markers.set(vendorId, marker);
 
       const popup = new Popup({ offset: 25 }).setHTML(`
-          <div class="text-black">
+          <div class="text-black" id="custom_popup">
             <p>
               <b>${vendor.displayName}</b>
             </p>
@@ -105,9 +105,11 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
         `);
 
       marker.setPopup(popup);
-      marker.getElement().addEventListener("click", () => {
-        clickSubject.next({ vendorId, source: "MapComponent" });
-      });
+      marker
+        .getElement()
+        .addEventListener("click", () =>
+          clickSubject.next({ vendorId, source: "MapComponent" })
+        );
     }
 
     const marker = markers.get(vendorId) as Marker;
@@ -160,6 +162,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
     const width = 20;
     const height = 20;
     const el: HTMLDivElement = document.createElement("div");
+    el.id = "custom_marker";
     el.className = "marker";
     el.style.width = `${width}px`;
     el.style.height = `${height}px`;

src/storeonwheels.client/src/app/libs/map-feature/components/vendor-table/vendor-table.component.spec.ts

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { VendorTableComponent } from "./vendor-table.component";
+import { Vendor } from "~/app/libs/shared/models";
+import { Observable, from } from "rxjs";
+
+describe("VendorTableComponent", () => {
+  let component: VendorTableComponent;
+  let fixture: ComponentFixture<VendorTableComponent>;
+  let vendors: Vendor[];
+
+  beforeEach(async () => {
+    const vendor1: Vendor = {
+      id: "1",
+      displayName: "Vendor_1",
+      description: "Vendor One",
+    };
+    const vendor2: Vendor = {
+      id: "2",
+      displayName: "Vendor_2",
+      description: "Vendor Two",
+    };
+    vendors = [vendor1, vendor2];
+    const vendors$: Observable<Vendor> = from(vendors);
+
+    await TestBed.configureTestingModule({
+      imports: [VendorTableComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(VendorTableComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput("vendor$", vendors$);
+    fixture.autoDetectChanges();
+  });
+
+  it("table rows should be rendered", () => {
+    expect(component).toBeTruthy();
+
+    const root: HTMLElement = fixture.nativeElement;
+    expect(root.querySelectorAll("tr").length).toBe(vendors.length + 1);
+
+    const table = root.querySelector("table") as HTMLElement;
+    expect(table).not.toBeNull();
+
+    expect(table.innerText).toContain("Vendor_1");
+    expect(table.innerText).toContain("Vendor_2");
+  });
+});

src/storeonwheels.client/src/app/libs/map/components/vendor-table/vendor-table.component.ts → src/storeonwheels.client/src/app/libs/map-feature/components/vendor-table/vendor-table.component.ts

@@ -11,14 +11,14 @@ import {
   WritableSignal,
   signal,
 } from "@angular/core";
-import { GeoInfo, Vendor } from "~/app/libs/shared/models";
+import { Vendor } from "~/app/libs/shared/models";
 import {
   TimedMap,
   CLICK_SUBJECT,
   ClickProps,
   clickSubject as _clickSubject,
   timedMapFactory,
-} from "~/app/libs/map/services";
+} from "~/app/libs/map-feature/services";
 import { CommonModule } from "@angular/common";
 import { BehaviorSubject, Observable } from "rxjs";
 import { MatRow, MatTableModule } from "@angular/material/table";
@@ -35,7 +35,7 @@ import { MatRow, MatTableModule } from "@angular/material/table";
   styleUrl: "./vendor-table.component.css",
 })
 export class VendorTableComponent implements OnInit, AfterViewInit, OnDestroy {
-  @Input({ required: true }) geoInfo$: Observable<GeoInfo> = new Observable();
+  @Input({ required: true }) vendor$: Observable<Vendor> = new Observable();
 
   // The `{ read: ElementRef }` params is required, since MatRow is a Directive, and by default, a Directive will be returned.
   // https://github.com/angular/components/issues/17816#issue-528942343
@@ -53,11 +53,9 @@ export class VendorTableComponent implements OnInit, AfterViewInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    const { geoInfo$, vendorMap, vendors } = this;
-
-    geoInfo$.subscribe((info) => {
-      const { vendor } = info;
+    const { vendor$, vendorMap, vendors } = this;
 
+    vendor$.subscribe((vendor) => {
       vendorMap.set(vendor.id, vendor);
       vendorMap.setTimer(vendor.id, Date.now() + 5000, () => {
         vendorMap.delete(vendor.id);

src/storeonwheels.client/src/app/libs/map/services/mapbox/mapbox.service.ts → src/storeonwheels.client/src/app/libs/map-feature/services/mapbox/mapbox.service.ts

@@ -106,9 +106,9 @@ export class MapboxService {
    * Get the Map object, asserting that it is not null.
    * The mapbox will be null if it not been called with draw()
    */
-  get map(): mapboxgl.Map {
+  get map(): mapboxgl.Map | undefined {
     if (this._map == null) {
-      throw new Error(
+      console.log(
         "map is null. Remember to call draw() to initialize the map."
       );
     }

src/storeonwheels.client/src/app/pages/broadcast-page/broadcast-page.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { BroadcastPageComponent } from "./broadcast-page.component";
 import axios from "axios";
-import { HUB_CONNECTION, hubConnection } from "~/app/libs/map/services";
+import { HUB_CONNECTION, hubConnection } from "~/app/libs/map-feature/services";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 describe("BroadcastPageComponent", () => {

src/storeonwheels.client/src/app/pages/broadcast-page/broadcast-page.component.ts

@@ -25,17 +25,17 @@ import { Observable } from "rxjs";
 import {
   GeoPermissionInstructionComponent,
   VendorFormComponent,
-} from "~/app/libs/broadcast/components";
+} from "~/app/libs/broadcast-feature/components";
 import {
   GeoPermission,
   GeolocateService,
   VendorService,
-} from "~/app/libs/broadcast/services";
+} from "~/app/libs/broadcast-feature/services";
 import {
   MessageHubService,
   WsState,
   hubConnection,
-} from "~/app/libs/map/services";
+} from "~/app/libs/map-feature/services";
 import { GeoInfo, Vendor, VendorForm } from "~/app/libs/shared/models";
 import { SleepService } from "~/app/libs/shared/services";
 import { toSignal } from "@angular/core/rxjs-interop";

src/storeonwheels.client/src/app/pages/healthcheck-page/healthcheck-page.component.spec.ts

@@ -5,7 +5,7 @@ import {
   HUB_CONNECTION,
   MessageHubService,
   hubConnection,
-} from "~/app/libs/map/services";
+} from "~/app/libs/map-feature/services";
 
 describe("HealthcheckComponent", () => {
   let component: HealthcheckComponent;

src/storeonwheels.client/src/app/pages/healthcheck-page/healthcheck-page.component.ts

@@ -1,7 +1,10 @@
 import { Component, OnInit } from "@angular/core";
 import { HubConnectionState } from "@microsoft/signalr";
 import axios from "axios";
-import { MessageHubService, hubConnection } from "~/app/libs/map/services";
+import {
+  MessageHubService,
+  hubConnection,
+} from "~/app/libs/map-feature/services";
 
 @Component({
   selector: "app-healthcheck-page",

src/storeonwheels.client/src/app/pages/map-page/map-page.component.html

@@ -1,4 +1,4 @@
 <div class="bg-slate-800">
   <app-map [geoInfo$]="geoInfo$"></app-map>
-  <app-vendor-table [geoInfo$]="geoInfo$"></app-vendor-table>
+  <app-vendor-table [vendor$]="vendor$"></app-vendor-table>
 </div>