Fix marker popup console error (#213)

* Add a failing test

* Fix failing test and fix the bug

* Update popup.component.spec.ts

projects/ngx-maplibre-gl/src/lib/popup/popup.component.spec.ts

@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { MapService } from '../map/map.service';
+import { MarkerComponent } from '../marker/marker.component';
+import { PopupComponent } from './popup.component';
+
+const getMapServiceStub = () =>
+  jasmine.createSpyObj(
+    [
+      'addMarker',
+      'removeMarker',
+      'removePopupFromMap',
+      'createPopup',
+      'addPopupToMarker'
+    ],
+    {
+      mapCreated$: of(true),
+    }
+  );
+
+@Component({
+  template: `
+    @if (show) {
+    <mgl-marker [lngLat]="[0,0]" #myMarker>
+      ...
+    </mgl-marker>
+    <mgl-popup [marker]="myMarker">
+        Hello from marker!
+    </mgl-popup>
+    }
+  `,
+  standalone: true,
+  imports: [MarkerComponent, PopupComponent]
+})
+class MarkerPopupTestComponent {
+    show = true;
+}
+
+describe('PopupComponent', () => {
+  let mapServiceStub: jasmine.SpyObj<MapService>;
+  let component: MarkerPopupTestComponent;
+  let fixture: ComponentFixture<MarkerPopupTestComponent>;
+
+  beforeEach(waitForAsync(() => {
+    mapServiceStub = getMapServiceStub();
+    mapServiceStub.createPopup.and.returnValue({ } as any);
+    mapServiceStub.addMarker.and.returnValue({ } as any);
+    TestBed.configureTestingModule({
+      imports: [MarkerPopupTestComponent],
+    })
+      .overrideComponent(MarkerPopupTestComponent, {
+        set: {
+          providers: [{ provide: MapService, useValue: mapServiceStub }],
+        },
+      })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MarkerPopupTestComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('Init/Destroy tests', () => {
+    it('should remove the popup when marker is removed', () => {
+      fixture.detectChanges();
+      component.show = false;
+      fixture.detectChanges();
+      expect(mapServiceStub.removePopupFromMap).toHaveBeenCalled();
+    });
+  });
+});

projects/ngx-maplibre-gl/src/lib/popup/popup.component.ts

@@ -209,6 +209,8 @@ export class PopupComponent implements OnChanges, OnInit, OnDestroy {
         this.mapService.removePopupFromMap(this.popupInstance);
       } else if (markerInstance) {
         this.mapService.removePopupFromMarker(markerInstance);
+      } else {
+        this.mapService.removePopupFromMap(this.popupInstance);
       }
     }
     this.popupInstance = null;