@@ -109,6 +109,7 @@ describe('Form Designer', () => {
109109 cy . get ( 'a[class="leaflet-control-layers-toggle"' ) . then ( $el => {
110110 const base_map_btn = $el [ 0 ] ;
111111 cy . get ( base_map_btn ) . trigger ( 'mouseover' ) ;
112+ } ) ;
112113 cy . contains ( 'span' , 'OpenStreetMap' ) // Find the span with the text
113114 . prev ( 'input[type="radio"]' ) // Get the radio input just before it
114115 . should ( 'be.checked' ) ; // Assert that it's checked
@@ -117,10 +118,43 @@ describe('Form Designer', () => {
117118 cy . contains ( 'span' , ' Dark' ) . prev ( 'input[type="radio"]' )
118119 . should ( 'not.have.attr' , 'checked' ) ;
119120 cy . contains ( 'span' , ' Topographic' ) . prev ( 'input[type="radio"]' )
120- . should ( 'not.have.attr' , 'checked' ) ;
121- cy . get ( 'button' ) . contains ( 'Save' ) . click ( ) ;
122-
121+ . should ( 'not.have.attr' , 'checked' ) ;
122+ cy . wait ( 2000 ) ;
123+ cy . get ( 'a[title="Draw a marker"]' ) . then ( $el => {
124+ const marker_elem = $el [ 0 ] ;
125+ cy . get ( marker_elem ) . click ( { force : true } ) ;
126+ } ) ;
127+ cy . get ( 'a[title="Cancel drawing"' ) . click ( ) ;
128+ //validate visiility of different layers
129+ cy . get ( 'a[class="leaflet-control-layers-toggle"' ) . then ( $el => {
130+ const base_map_btn = $el [ 0 ] ;
131+ cy . get ( base_map_btn ) . trigger ( 'mouseover' , { force : true } ) ;
132+
133+ cy . get ( 'input[class="leaflet-control-layers-selector"]' )
134+ . then ( $el => {
135+ const base_select_light = $el [ 1 ] ;
136+ const base_select_dark = $el [ 2 ] ;
137+ const base_select_topographic = $el [ 3 ] ;
138+ cy . get ( base_select_dark ) . closest ( 'span' ) . contains ( ' Dark' ) . click ( { force : true } ) ;
139+ cy . get ( base_select_dark ) . check ( ) ;
140+ cy . wait ( 2000 ) ;
141+ cy . get ( 'img[src*="https://b.basemaps.cartocdn.com/dark_all/"]' ) . should ( 'be.visible' ) ;
142+ cy . get ( base_select_light ) . closest ( 'span' ) . contains ( ' Light' ) . click ( { force : true } ) ;
143+ cy . wait ( 1000 ) ;
144+ cy . get ( base_select_light ) . check ( ) ;
145+ cy . wait ( 2000 ) ;
146+ cy . get ( 'img[src*="https://b.basemaps.cartocdn.com/light_all/"]' ) . should ( 'be.visible' ) ;
147+ cy . get ( base_map_btn ) . trigger ( 'mouseover' , { force : true } ) ;
148+ cy . get ( base_select_topographic ) . closest ( 'span' ) . contains ( ' Topographic' ) . click ( { force : true } ) ;
149+ cy . waitForLoad ( ) ;
150+ cy . get ( base_select_topographic ) . check ( ) ;
151+ cy . wait ( 2000 ) ;
152+ cy . get ( 'img[src*="https://b.tile.opentopomap.org/"]' ) . should ( 'be.visible' ) ;
153+ } ) ;
123154 } ) ;
155+ cy . waitForLoad ( ) ;
156+ cy . get ( 'button' ) . contains ( 'Save' ) . click ( ) ;
157+
124158 } ) ;
125159 it ( 'Checks form submission for a Map component' , ( ) => {
126160 cy . viewport ( 1000 , 1100 ) ;
@@ -163,6 +197,34 @@ describe('Form Designer', () => {
163197 . trigger ( 'mouseup' , coords . x , - 5 , { force : true } )
164198 cy . wait ( 2000 ) ;
165199 } ) ;
200+ //validate different basic layers existence on submitter view
201+ cy . get ( 'a[class="leaflet-control-layers-toggle"' ) . then ( $el => {
202+ const base_map_btn = $el [ 0 ] ;
203+ cy . get ( base_map_btn ) . trigger ( 'mouseover' , { force : true } ) ;
204+
205+ cy . get ( 'input[class="leaflet-control-layers-selector"]' )
206+ . then ( $el => {
207+ const base_select_light = $el [ 1 ] ;
208+ const base_select_dark = $el [ 2 ] ;
209+ const base_select_topographic = $el [ 3 ] ;
210+ cy . get ( base_select_dark ) . closest ( 'span' ) . contains ( ' Dark' ) . click ( { force : true } ) ;
211+ cy . get ( base_select_dark ) . check ( ) ;
212+ cy . wait ( 2000 ) ;
213+ cy . get ( 'img[src*="https://b.basemaps.cartocdn.com/dark_all/"]' ) . should ( 'be.visible' ) ;
214+ cy . get ( base_select_light ) . closest ( 'span' ) . contains ( ' Light' ) . click ( { force : true } ) ;
215+ cy . wait ( 1000 ) ;
216+ cy . get ( base_select_light ) . check ( ) ;
217+ cy . wait ( 2000 ) ;
218+ cy . get ( 'img[src*="https://b.basemaps.cartocdn.com/light_all/"]' ) . should ( 'be.visible' ) ;
219+ cy . get ( base_map_btn ) . trigger ( 'mouseover' , { force : true } ) ;
220+ cy . get ( base_select_topographic ) . closest ( 'span' ) . contains ( ' Topographic' ) . click ( { force : true } ) ;
221+ cy . waitForLoad ( ) ;
222+ cy . get ( base_select_topographic ) . check ( ) ;
223+ cy . wait ( 2000 ) ;
224+ cy . get ( 'img[src*="https://b.tile.opentopomap.org/"]' ) . should ( 'be.visible' ) ;
225+ } ) ;
226+ } ) ;
227+ cy . waitForLoad ( ) ;
166228 cy . get ( 'a[title="Draw a marker"]' ) . then ( $el => {
167229 const marker_elem = $el [ 0 ] ;
168230 cy . get ( marker_elem ) . click ( { force : true } ) ;
@@ -171,6 +233,7 @@ describe('Form Designer', () => {
171233 cy . wait ( 2000 ) ;
172234 //Verify marker limit validation message
173235 cy . get ( 'div[class="leaflet-popup-content"]' ) . find ( 'p' ) . contains ( 'Only 3 features per submission' ) . should ( 'be.visible' ) ;
236+
174237 //Validate the feature of deleting existing markers not possible
175238 cy . get ( '.leaflet-draw-edit-remove' ) . click ( ) ;
176239 cy . get ( 'g' ) . find ( 'path[stroke-linejoin="round"]' ) . then ( $el => {
@@ -204,7 +267,6 @@ describe('Form Designer', () => {
204267 cy . get ( '#logoutButton > .v-btn__content > span' ) . click ( ) ;
205268
206269 } ) ;
207-
208270 } ) ;
209271
210272} ) ;
0 commit comments