Skip to content

Commit 8afe7da

Browse files
davidjamesstonedavidjamesstone
committed
Restructure location map tests
1 parent e36f36d commit 8afe7da

1 file changed

Lines changed: 139 additions & 90 deletions

File tree

‎test/client/javascripts/location-map.test.js‎

Lines changed: 139 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -41,123 +41,172 @@ describe('Location Maps Client JS', () => {
4141
zoomControlsPlugin: noop,
4242
scaleBarPlugin: noop
4343
}
44+
})
45+
46+
afterEach(() => {
47+
document.body.innerHTML = ''
48+
})
4449

45-
document.body.innerHTML = `
46-
<form method="post" novalidate="">
47-
<div class="govuk-form-group app-location-field " data-locationtype="latlongfield">
48-
<fieldset class="govuk-fieldset" aria-describedby="cbkDgE-hint">
49-
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
50-
What is your latitude and longitude (optional)
51-
</legend>
52-
<div id="cbkDgE-hint" class="govuk-hint">
53-
For Great Britain, the latitude will be a number between 49.850 and 60.859. The longitude will be a number between -13.687 and 1.767
54-
</div>
55-
<div class="govuk-grid-row app-location-field-inputs">
56-
<div class="govuk-grid-column-one-third">
57-
<div class="govuk-form-group">
58-
<label class="govuk-label" for="cbkDgE__latitude">Latitude</label>
59-
<div class="govuk-input__wrapper">
60-
<input class="govuk-input govuk-input--width-10" id="cbkDgE__latitude" name="cbkDgE__latitude" type="text" value="53.2392016" inputmode="text">
61-
<div class="govuk-input__suffix" aria-hidden="true">°</div>
50+
describe('Lat long component', () => {
51+
beforeEach(() => {
52+
document.body.innerHTML = `
53+
<form method="post" novalidate="">
54+
<div class="govuk-form-group app-location-field " data-locationtype="latlongfield">
55+
<fieldset class="govuk-fieldset" aria-describedby="cbkDgE-hint">
56+
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
57+
What is your latitude and longitude (optional)
58+
</legend>
59+
<div id="cbkDgE-hint" class="govuk-hint">
60+
For Great Britain, the latitude will be a number between 49.850 and 60.859. The longitude will be a number between -13.687 and 1.767
61+
</div>
62+
<div class="govuk-grid-row app-location-field-inputs">
63+
<div class="govuk-grid-column-one-third">
64+
<div class="govuk-form-group">
65+
<label class="govuk-label" for="cbkDgE__latitude">Latitude</label>
66+
<div class="govuk-input__wrapper">
67+
<input class="govuk-input govuk-input--width-10" id="cbkDgE__latitude" name="cbkDgE__latitude" type="text" value="53.2392016" inputmode="text">
68+
<div class="govuk-input__suffix" aria-hidden="true">°</div>
69+
</div>
6270
</div>
6371
</div>
64-
</div>
65-
<div class="govuk-grid-column-one-third">
66-
<div class="govuk-form-group">
67-
<label class="govuk-label" for="cbkDgE__longitude">
68-
Longitude
69-
</label>
70-
<div class="govuk-input__wrapper">
71-
<input class="govuk-input govuk-input--width-10" id="cbkDgE__longitude" name="cbkDgE__longitude" type="text" value="-2.5734104" inputmode="text">
72-
<div class="govuk-input__suffix" aria-hidden="true">°</div>
72+
<div class="govuk-grid-column-one-third">
73+
<div class="govuk-form-group">
74+
<label class="govuk-label" for="cbkDgE__longitude">
75+
Longitude
76+
</label>
77+
<div class="govuk-input__wrapper">
78+
<input class="govuk-input govuk-input--width-10" id="cbkDgE__longitude" name="cbkDgE__longitude" type="text" value="-2.5734104" inputmode="text">
79+
<div class="govuk-input__suffix" aria-hidden="true">°</div>
80+
</div>
7381
</div>
7482
</div>
7583
</div>
76-
</div>
77-
</fieldset>
78-
</div>
79-
<div class="govuk-button-group">
80-
<button type="submit" data-prevent-double-click="true" class="govuk-button" data-module="govuk-button" data-govuk-button-init="">Continue</button>
81-
</div>
82-
</form>
83-
`
84-
})
85-
86-
afterEach(() => {
87-
document.body.innerHTML = ''
88-
})
84+
</fieldset>
85+
</div>
86+
<div class="govuk-button-group">
87+
<button type="submit" data-prevent-double-click="true" class="govuk-button" data-module="govuk-button" data-govuk-button-init="">Continue</button>
88+
</div>
89+
</form>
90+
`
91+
})
8992

90-
describe('Map initialisation', () => {
91-
test('initMaps initializes without errors when DOM elements are present', () => {
92-
expect(() => initMaps()).not.toThrow()
93-
expect(onMock).toHaveBeenLastCalledWith('map:ready', expect.any(Function))
93+
describe('Map initialisation', () => {
94+
test('initMaps initializes without errors when DOM elements are present', () => {
95+
expect(() => initMaps()).not.toThrow()
96+
expect(onMock).toHaveBeenLastCalledWith(
97+
'map:ready',
98+
expect.any(Function)
99+
)
100+
101+
const onMapReady = onMock.mock.calls[0][1]
102+
expect(typeof onMapReady).toBe('function')
103+
104+
// Manually invoke onMapReady callback
105+
const flyToMock = jest.fn()
106+
onMapReady({
107+
map: {
108+
flyTo: flyToMock
109+
}
110+
})
94111

95-
const onMapReady = onMock.mock.calls[0][1]
96-
expect(typeof onMapReady).toBe('function')
112+
expect(addPanelMock).toHaveBeenCalledWith('info', expect.any(Object))
97113

98-
// Manually invoke onMapReady callback
99-
const flyToMock = jest.fn()
100-
onMapReady({
101-
map: {
102-
flyTo: flyToMock
103-
}
104-
})
114+
expect(onMock).toHaveBeenLastCalledWith(
115+
'interact:markerchange',
116+
expect.any(Function)
117+
)
105118

106-
expect(addPanelMock).toHaveBeenCalledWith('info', expect.any(Object))
119+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
120+
const onInteractMarkerChange = onMock.mock.calls[1][1]
121+
expect(typeof onInteractMarkerChange).toBe('function')
122+
onInteractMarkerChange({ coords: [0, 0] })
107123

108-
expect(onMock).toHaveBeenLastCalledWith(
109-
'interact:markerchange',
110-
expect.any(Function)
111-
)
124+
const inputs = document.body.querySelectorAll('input.govuk-input')
125+
expect(inputs).toHaveLength(2)
112126

113-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
114-
const onInteractMarkerChange = onMock.mock.calls[1][1]
115-
expect(typeof onInteractMarkerChange).toBe('function')
116-
onInteractMarkerChange({ coords: [0, 0] })
127+
const latInput = /** @type {HTMLInputElement} */ (inputs[0])
128+
const longInput = /** @type {HTMLInputElement} */ (inputs[1])
117129

118-
const inputs = document.body.querySelectorAll('input.govuk-input')
119-
expect(inputs).toHaveLength(2)
130+
latInput.value = '53.825564'
131+
latInput.dispatchEvent(new window.Event('change'))
120132

121-
const latInput = /** @type {HTMLInputElement} */ (inputs[0])
122-
const longInput = /** @type {HTMLInputElement} */ (inputs[1])
133+
longInput.value = '-2.421975'
134+
longInput.dispatchEvent(new window.Event('change'))
123135

124-
latInput.value = '53.825564'
125-
latInput.dispatchEvent(new window.Event('change'))
126-
127-
longInput.value = '-2.421975'
128-
longInput.dispatchEvent(new window.Event('change'))
136+
// Expect it to update once, only when both fields are valid
137+
expect(addMarkerMock).toHaveBeenCalledTimes(1)
138+
expect(flyToMock).toHaveBeenCalledTimes(1)
139+
})
129140

130-
// Expect it to update once, only when both fields are valid
131-
expect(addMarkerMock).toHaveBeenCalledTimes(1)
132-
expect(flyToMock).toHaveBeenCalledTimes(1)
133-
})
141+
test('initMaps only applies when there are location components on the page', () => {
142+
const locations = document.querySelectorAll('.app-location-field')
134143

135-
test('initMaps only applies when there are location components on the page', () => {
136-
const locations = document.querySelectorAll('.app-location-field')
144+
// Remove any locations for the test
145+
locations.forEach((location) => {
146+
location.remove()
147+
})
137148

138-
// Remove any locations for the test
139-
locations.forEach((location) => {
140-
location.remove()
149+
expect(() => initMaps()).not.toThrow()
150+
expect(onMock).not.toHaveBeenCalled()
141151
})
142152

143-
expect(() => initMaps()).not.toThrow()
144-
expect(onMock).not.toHaveBeenCalled()
145-
})
153+
test('initMaps only applies when there are supported location components on the page', () => {
154+
const locations = document.querySelectorAll('.app-location-field')
146155

147-
test('initMaps only applies when there are supported location components on the page', () => {
148-
const locations = document.querySelectorAll('.app-location-field')
156+
// Reset the location type of each component
157+
locations.forEach((location) => {
158+
location.setAttribute('data-locationtype', 'unknowntype')
159+
})
149160

150-
// Reset the location type of each component
151-
locations.forEach((location) => {
152-
location.setAttribute('data-locationtype', 'unknowntype')
161+
expect(() => initMaps()).not.toThrow()
162+
expect(onMock).not.toHaveBeenCalled()
153163
})
154-
155-
expect(() => initMaps()).not.toThrow()
156-
expect(onMock).not.toHaveBeenCalled()
157164
})
158165
})
159166

160167
describe('Form submit event propagation', () => {
168+
beforeEach(() => {
169+
document.body.innerHTML = `
170+
<form method="post" novalidate="">
171+
<div class="govuk-form-group app-location-field " data-locationtype="latlongfield">
172+
<fieldset class="govuk-fieldset" aria-describedby="cbkDgE-hint">
173+
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
174+
What is your latitude and longitude (optional)
175+
</legend>
176+
<div id="cbkDgE-hint" class="govuk-hint">
177+
For Great Britain, the latitude will be a number between 49.850 and 60.859. The longitude will be a number between -13.687 and 1.767
178+
</div>
179+
<div class="govuk-grid-row app-location-field-inputs">
180+
<div class="govuk-grid-column-one-third">
181+
<div class="govuk-form-group">
182+
<label class="govuk-label" for="cbkDgE__latitude">Latitude</label>
183+
<div class="govuk-input__wrapper">
184+
<input class="govuk-input govuk-input--width-10" id="cbkDgE__latitude" name="cbkDgE__latitude" type="text" value="53.2392016" inputmode="text">
185+
<div class="govuk-input__suffix" aria-hidden="true">°</div>
186+
</div>
187+
</div>
188+
</div>
189+
<div class="govuk-grid-column-one-third">
190+
<div class="govuk-form-group">
191+
<label class="govuk-label" for="cbkDgE__longitude">
192+
Longitude
193+
</label>
194+
<div class="govuk-input__wrapper">
195+
<input class="govuk-input govuk-input--width-10" id="cbkDgE__longitude" name="cbkDgE__longitude" type="text" value="-2.5734104" inputmode="text">
196+
<div class="govuk-input__suffix" aria-hidden="true">°</div>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
</fieldset>
202+
</div>
203+
<div class="govuk-button-group">
204+
<button type="submit" data-prevent-double-click="true" class="govuk-button" data-module="govuk-button" data-govuk-button-init="">Continue</button>
205+
</div>
206+
</form>
207+
`
208+
})
209+
161210
test('form does submit when submitter is the main form button', () => {
162211
const preventDefault = jest.fn()
163212

0 commit comments

Comments
 (0)