test: add test cases for more components

static/tests/MobileNavBar.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import MobileNavBar from '@/components/NavBar/MobileNavBar.vue'
+
+describe('MobileNavBar', () => {
+  it('renders a container div with bg-gray-200 class', () => {
+    const wrapper = shallowMount(MobileNavBar)
+    expect(wrapper.find('div.bg-gray-200').exists()).toBe(true)
+  })
+
+  it('renders exactly three TabComponent instances', () => {
+    const wrapper = shallowMount(MobileNavBar)
+    const tabs = wrapper.findAllComponents({ name: 'TabComponent' })
+    expect(tabs).toHaveLength(3)
+  })
+
+  it('passes correct hrefs to TabComponents', () => {
+    const wrapper = shallowMount(MobileNavBar)
+    const tabs = wrapper.findAllComponents({ name: 'TabComponent' })
+    expect(tabs[0].props('href')).toBe(
+      'https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS'
+    )
+    expect(tabs[1].props('href')).toBe('https://trinca.tornidor.com/')
+    expect(tabs[2].props('href')).toBe('https://docs.trinca.tornidor.com/')
+  })
+
+  it('passes correct descriptions to TabComponents', () => {
+    const wrapper = shallowMount(MobileNavBar)
+    const tabs = wrapper.findAllComponents({ name: 'TabComponent' })
+    expect(tabs[0].props('description')).toBe('About SamGIS')
+    expect(tabs[1].props('description')).toBe('My blog')
+    expect(tabs[2].props('description')).toBe('SamGIS docs')
+  })
+})

static/tests/NavBar.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import NavBar from '@/components/NavBar/NavBar.vue'
+
+describe('NavBar', () => {
+  it('renders a fixed-position container div', () => {
+    const wrapper = shallowMount(NavBar)
+    const div = wrapper.find('div.fixed')
+    expect(div.exists()).toBe(true)
+    expect(div.classes()).toContain('top-2')
+    expect(div.classes()).toContain('right-5')
+  })
+
+  it('renders exactly three TabComponent instances', () => {
+    const wrapper = shallowMount(NavBar)
+    const tabs = wrapper.findAllComponents({ name: 'TabComponent' })
+    expect(tabs).toHaveLength(3)
+  })
+
+  it('passes correct hrefs to TabComponents', () => {
+    const wrapper = shallowMount(NavBar)
+    const tabs = wrapper.findAllComponents({ name: 'TabComponent' })
+    expect(tabs[0].props('href')).toBe(
+      'https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS'
+    )
+    expect(tabs[1].props('href')).toBe('https://trinca.tornidor.com/')
+    expect(tabs[2].props('href')).toBe('https://docs.ml-trinca.tornidor.com/')
+  })
+
+  it('passes correct descriptions to TabComponents', () => {
+    const wrapper = shallowMount(NavBar)
+    const tabs = wrapper.findAllComponents({ name: 'TabComponent' })
+    expect(tabs[0].props('description')).toBe('About SamGIS')
+    expect(tabs[1].props('description')).toBe('My blog')
+    expect(tabs[2].props('description')).toBe('SamGIS docs')
+  })
+})

static/tests/helpers.test.ts

@@ -12,6 +12,7 @@ import {
   updateZoomBboxMap,
   getQueryParams,
   getGeoJSONRequest,
+  getPopupContentPoint,
 } from '@/components/helpers'
 import {
   currentMapBBoxRef,
@@ -523,3 +524,69 @@ describe('getGeoJSONRequest', () => {
     expect(result).toContain('SyntaxError')
   })
 })
+
+// ──────────────────────────────────────────────────────────
+// getPopupContentPoint
+// ──────────────────────────────────────────────────────────
+describe('getPopupContentPoint', () => {
+  /**
+   * Builds an HTMLDivElement popup for a point marker.
+   * The event mock needs `layer._latlng` (for coordinates)
+   * and `layer._leaflet_id` (displayed in the popup text).
+   * jsdom provides full DOM APIs so we can assert on the returned element.
+   */
+
+  const makePointEvent = (lat: number, lng: number, leafletId: number) => ({
+    layer: { _latlng: { lat, lng }, _leaflet_id: leafletId },
+  })
+
+  it('returns an HTMLDivElement', () => {
+    const event = makePointEvent(45.5, 9.2, 42)
+    const result = getPopupContentPoint(event, 1)
+    expect(result).toBeInstanceOf(HTMLDivElement)
+  })
+
+  it('outer div has class "leaflet-popup-content-inner"', () => {
+    const event = makePointEvent(45.5, 9.2, 42)
+    const result = getPopupContentPoint(event, 1)
+    expect(result.className).toBe('leaflet-popup-content-inner')
+  })
+
+  it('contains lat value from event', () => {
+    const event = makePointEvent(45.5, 9.2, 42)
+    const result = getPopupContentPoint(event, 1)
+    expect(result.textContent).toContain('lat:45.5')
+  })
+
+  it('contains lng value from event', () => {
+    const event = makePointEvent(45.5, 9.2, 42)
+    const result = getPopupContentPoint(event, 1)
+    expect(result.textContent).toContain('lng:9.2')
+  })
+
+  it('contains label value', () => {
+    const event = makePointEvent(45.5, 9.2, 42)
+    const result = getPopupContentPoint(event, 1)
+    expect(result.textContent).toContain('label:1')
+  })
+
+  it('contains leaflet id', () => {
+    const event = makePointEvent(45.5, 9.2, 42)
+    const result = getPopupContentPoint(event, 1)
+    expect(result.textContent).toContain('id:42')
+  })
+
+  it('works with label 0 (exclude) — falsy but valid', () => {
+    const event = makePointEvent(44.0, 8.0, 7)
+    const result = getPopupContentPoint(event, 0)
+    expect(result.textContent).toContain('label:0')
+    expect(result.textContent).toContain('id:7')
+  })
+
+  it('preserves decimal precision in coordinates', () => {
+    const event = makePointEvent(46.123456789, 9.987654321, 99)
+    const result = getPopupContentPoint(event, 1)
+    expect(result.textContent).toContain('lat:46.123456789')
+    expect(result.textContent).toContain('lng:9.987654321')
+  })
+})