karrot-frontend/src/maps/components/StandardMap.spec.js at 0d0db87ebeaf19a028399bd2c1f8108d89b06a6a · karrot-dev/karrot-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import { flushPromises, mount } from '@vue/test-utils'
import { vi } from 'vitest'

import KMap from '@/maps/components/KMap.vue'
import KMarker from '@/maps/components/KMarker.vue'

import StandardMap from './StandardMap.vue'

// Define a utility to create a mock marker
function createMockMarker (id) {
  return {
    id,
    latLng: { lat: Math.random() * 100, lng: Math.random() * 100 },
    popup: 'Test Marker ' + id,
    color: 'blue',
    fontIcon: 'marker-icon',
    click_count: 0, // Initialize click_count here
  }
}

// Custom equality checker for markers
function containsMarker (container, marker) {
  return container.some(m => m.id === marker.id)
}

describe('StandardMap', () => {
  let wrapper
  let markers

  beforeEach(() => {
    vi.resetModules()
    markers = [createMockMarker(1), createMockMarker(2), createMockMarker(3), createMockMarker(4)]
    wrapper = mount(StandardMap, {
      props: { markers },
      global: {
        stubs: { KMap }, // Stub KMap to isolate the component test
      },
    })
  })

  it('selects a marker and updates localSelectedMarkers', async () => {
    const kMarker = wrapper.findAllComponents(KMarker).at(0)
    await kMarker.vm.$emit('marker-clicked', { marker: markers[0] })
    await flushPromises()

    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(true)
    expect(wrapper.emitted()['update:selectedMarkers'][0]).toEqual([[markers[0]]])
  })

  it('toggles the selection state on repeated clicks', async () => {
    const kMarker = wrapper.findAllComponents(KMarker).at(0)
    // Simulate clicking the marker three times
    for (let i = 0; i < 3; i++) {
      await kMarker.vm.$emit('marker-clicked', { marker: markers[0] })
      await flushPromises()
    }

    // Check if the toggle works correctly (should end up selected since it's an odd number of clicks)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(true)
    expect(wrapper.vm.localSelectedMarkers).toHaveLength(1)
    expect(markers[0].click_count).toBe(3)
  })

  it('changes selected marker and verifies the update', async () => {
    const kMarkers = wrapper.findAllComponents(KMarker)

    // Select the first marker
    await kMarkers.at(0).vm.$emit('marker-clicked', { marker: markers[0] })
    await flushPromises()

    // Select the second marker
    await kMarkers.at(1).vm.$emit('marker-clicked', { marker: markers[1] })
    await flushPromises()
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(true)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(false)
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[0])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[2])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[3])
    expect(wrapper.emitted()['update:selectedMarkers'][1]).toEqual([[markers[1]]])

    // Select the third marker
    await kMarkers.at(2).vm.$emit('marker-clicked', { marker: markers[2] })
    await flushPromises()
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(true)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(false)
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[0])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[1])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[3])
    expect(wrapper.emitted()['update:selectedMarkers'][2]).toEqual([[markers[2]]])

    // Select the fourth marker
    await kMarkers.at(3).vm.$emit('marker-clicked', { marker: markers[1] })
    await flushPromises()

    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(true)
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[0])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[1])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[2])
    expect(wrapper.emitted()['update:selectedMarkers'][3]).toEqual([[markers[3]]])

    // Select back to the first marker
    await kMarkers.at(0).vm.$emit('marker-clicked', { marker: markers[0] })
    await flushPromises()
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(true)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(false)
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[1])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[2])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[3])
    expect(wrapper.emitted()['update:selectedMarkers'][0]).toEqual([[markers[0]]])

    // Select back to the fourth marker
    await kMarkers.at(1).vm.$emit('marker-clicked', { marker: markers[1] })
    await flushPromises()

    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(true)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(false)
    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(false)
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[0])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[2])
    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[3])
    expect(wrapper.emitted()['update:selectedMarkers'][1]).toEqual([[markers[1]]])
  })
})