BGDIINF_SB-3185 : add minimalist e2e test for bg selector

in the process, rewriting the footer.cy.js test file so that we can reduce the number of "it" called

tests/e2e-cypress/integration/footer.cy.js

@@ -1,27 +1,69 @@
 /// <reference types="cypress" />
 
-const scaleLineSelector = '[data-cy="scaleline"]'
-const zoomSelector = '[data-cy="zoom-in"]'
-const dezoomSelector = '[data-cy="zoom-out"]'
+import { UIModes } from '@/store/modules/ui.store'
+import { WEBMERCATOR } from '@/utils/coordinates/coordinateSystems'
 
-describe('Testing the footer content', () => {
-    beforeEach(() => {
-        cy.goToMapView()
-    })
-    context('Checking the scale line behave as expected', () => {
-        // with LV95 as default projection, the scale line is now always visible
-        it.skip('Should not be visible on standard startup, as the zoom level is 7', () => {
-            cy.get(scaleLineSelector).should('not.be.visible')
-        })
-        it('Should appear when we zoom a bit (zoom level 10)', () => {
-            cy.get(zoomSelector).click().click().click()
-            cy.get(scaleLineSelector).should('be.visible')
+describe('Testing the footer content / tools', () => {
+    it('shows/hide the scale line depending on the map resolution, while in Mercator', () => {
+        cy.goToMapView({
+            sr: WEBMERCATOR.epsgNumber,
         })
-        // with LV95 as default projection, the scale line is now always visible
-        it.skip('Should disappear again if we zoom out again after zooming', () => {
-            cy.get(zoomSelector).click().click().click()
-            cy.get(dezoomSelector).click().click().click()
-            cy.get(scaleLineSelector).should('not.be.visible')
+
+        // Scale line not visible on standard startup, as the standard zoom level is 7,
+        // which mean a higher resolution as the acceptable threshold for scale line to be visible.
+        cy.get('[data-cy="scaleline"]').should('not.be.visible')
+
+        // triple zoom, the scale line should appear (zoom level 10)
+        cy.get('[data-cy="zoom-in"]').click().click().click()
+        cy.get('[data-cy="scaleline"]').should('be.visible')
+
+        // it should disappear again if we zoom out again
+        cy.get('[data-cy="zoom-out"]').click().click().click()
+        cy.get('[data-cy="scaleline"]').should('not.be.visible')
+    })
+    it('has a functional background wheel', () => {
+        function testBackgroundWheel() {
+            // first, checking that the current bgLayer is the void layer
+            cy.readStoreValue('state.layers.currentBackgroundLayer').should('be.null')
+
+            cy.get('[data-cy="background-selector-open-wheel-button"]')
+                // checking that the main button has the void layer image loaded inside itself
+                .should('contain.html', 'void.png')
+                // opening the wheel
+                .click()
+
+            // checking that all layers flagged as backgrounds are represented in the wheel
+            cy.fixture('layers.fixture').then((layers) => {
+                Object.values(layers)
+                    .filter((layer) => layer.background)
+                    .forEach((bgLayer) => {
+                        cy.get(`[data-cy="background-selector-${bgLayer.serverLayerName}"]`).click()
+                        // checking that clicking on the wheel buttons changes the bgLayer of the app accordingly
+                        cy.waitUntilState(
+                            (state) =>
+                                state.layers.currentBackgroundLayer?.getID() ===
+                                bgLayer.serverLayerName
+                        )
+                        // reopening the BG wheel
+                        cy.get('[data-cy="background-selector-open-wheel-button"]').click()
+                    })
+            })
+
+            // reverting to void layer
+            cy.get('[data-cy="background-selector-void"]').click()
+            cy.readStoreValue('state.layers.currentBackgroundLayer').should('be.null')
+        }
+
+        cy.goToMapView({
+            bgLayer: 'void',
         })
+        // checking the rounded background wheel (mobile/tablet only)
+        cy.viewport('iphone-se2')
+        testBackgroundWheel()
+
+        // checking that the squared background wheel (desktop) has the same functionalities
+        cy.viewport('macbook-11')
+        cy.waitUntilState((state) => state.ui.mode === UIModes.DESKTOP)
+        testBackgroundWheel()
     })
 })