BGDIINF_SB-3194: Renaming generic catalogue from topic to catalogue

Author: ltshb

src/modules/menu/components/LayerCatalogue.vue

@@ -24,7 +24,7 @@ function clearPreviewLayer() {
 </script>
 
 <template>
-    <div class="menu-topic-list" data-cy="menu-topic-tree" @mouseleave="clearPreviewLayer">
+    <div class="menu-catalogue-list" @mouseleave="clearPreviewLayer">
         <LayerCatalogueItem
             v-for="item in layerCatalogue"
             :key="item.getID()"

src/modules/menu/components/LayerCatalogueItem.vue

@@ -88,11 +88,11 @@ function onItemClick() {
 </script>
 
 <template>
-    <div class="menu-topic-item" data-cy="topic-tree-item">
+    <div class="menu-catalogue-item" data-cy="catalogue-tree-item">
         <div
-            class="menu-topic-item-title"
+            class="menu-catalogue-item-title"
             :class="{ group: hasChildren }"
-            :data-cy="`topic-tree-item-${item.getID()}`"
+            :data-cy="`catalogue-tree-item-${item.getID()}`"
             @click="onItemClick"
             @mouseenter="startLayerPreview"
         >
@@ -120,12 +120,12 @@ function onItemClick() {
                     }`"
                 />
             </button>
-            <span class="menu-topic-item-name">{{ item.name }}</span>
+            <span class="menu-catalogue-item-name">{{ item.name }}</span>
             <button
                 v-if="canBeAddedToTheMap"
                 class="btn"
                 :class="{ 'btn-lg': !compact }"
-                data-cy="topic-tree-item-info"
+                data-cy="catalogue-tree-item-info"
                 @click.stop="showLayerLegend = true"
             >
                 <FontAwesomeIcon icon="info-circle" />
@@ -134,7 +134,7 @@ function onItemClick() {
         <CollapseTransition :duration="200">
             <ul
                 v-show="showChildren"
-                class="menu-topic-item-children"
+                class="menu-catalogue-item-children"
                 :class="`ps-${2 + 2 * depth}`"
             >
                 <LayerCatalogueItem
@@ -158,7 +158,7 @@ function onItemClick() {
 @import 'src/scss/webmapviewer-bootstrap-theme';
 @import 'src/modules/menu/scss/menu-items';
 
-.menu-topic-item {
+.menu-catalogue-item {
     border-bottom: none;
 
     &-title {
@@ -177,10 +177,10 @@ function onItemClick() {
         }
     }
 }
-.menu-topic-item-name {
+.menu-catalogue-item-name {
     @extend .menu-name;
 }
-.menu-topic-item-children {
+.menu-catalogue-item-children {
     @extend .menu-list;
 }
 </style>

src/modules/menu/components/topics/MenuTopicSection.vue

@@ -24,7 +24,11 @@
                 @close="showTopicSelectionPopup = false"
             />
         </template>
-        <LayerCatalogue :layer-catalogue="currentTopicTree" :compact="compact" />
+        <LayerCatalogue
+            data-cy="menu-topic-tree"
+            :layer-catalogue="currentTopicTree"
+            :compact="compact"
+        />
     </MenuSection>
 </template>
 
@@ -90,10 +94,6 @@ export default {
 <style lang="scss" scoped>
 @import 'src/modules/menu/scss/menu-items';
 
-.menu-topic-list {
-    @extend .menu-list;
-    overflow-y: auto;
-}
 .menu-topic-switch {
     border: 0;
     background: none;

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

@@ -92,9 +92,9 @@ describe('Test functions for the header / search bar', () => {
             }
             cy.get('[data-cy="change-topic-button"]').click()
             cy.get('[data-cy="change-to-topic-test-topic-standard"]').click()
-            cy.get('[data-cy="topic-tree-item-2"]').click()
-            cy.get('[data-cy="topic-tree-item-5"]').click()
-            cy.get('[data-cy="topic-tree-item-test.wms.layer"]').click()
+            cy.get('[data-cy="catalogue-tree-item-2"]').click()
+            cy.get('[data-cy="catalogue-tree-item-5"]').click()
+            cy.get('[data-cy="catalogue-tree-item-test.wms.layer"]').click()
             cy.readStoreValue('state.layers.activeLayers').should('have.length', 1)
         }
         it('Reload the app with current topic/lang when clicking on the swiss flag', () => {

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

@@ -277,15 +277,15 @@ describe('Test of layer handling', () => {
                 cy.goToMapView()
                 cy.clickOnMenuButtonIfMobile()
                 const testLayerId = 'test.wmts.layer'
-                const testLayerSelector = `[data-cy="topic-tree-item-${testLayerId}"]`
+                const testLayerSelector = `[data-cy="catalogue-tree-item-${testLayerId}"]`
                 cy.get('[data-cy="menu-topic-section"]').click()
                 // opening up layer parents in the topic tree
-                cy.get('[data-cy="topic-tree-item-2"]').click()
-                cy.get('[data-cy="topic-tree-item-3"]').click()
+                cy.get('[data-cy="catalogue-tree-item-2"]').click()
+                cy.get('[data-cy="catalogue-tree-item-3"]').click()
                 // Find the test layer and open the appropriate menu entries.
                 cy.get(testLayerSelector)
                     .parentsUntil('[data-cy="menu-topic-section"]')
-                    .filter('[data-cy="topic-tree-item"]')
+                    .filter('[data-cy="catalogue-tree-item"]')
                     .then((menuItems) => {
                         menuItems
                             .toArray()
@@ -348,15 +348,15 @@ describe('Test of layer handling', () => {
             })
             it('allows toggling layers visibility from the topic menu', () => {
                 const testLayerId = 'test.wmts.layer'
-                const testLayerSelector = `[data-cy="topic-tree-item-${testLayerId}"]`
+                const testLayerSelector = `[data-cy="catalogue-tree-item-${testLayerId}"]`
                 cy.get('[data-cy="menu-topic-section"]').click()
                 // opening up layer parents in the topic tree
-                cy.get('[data-cy="topic-tree-item-2"]').click()
-                cy.get('[data-cy="topic-tree-item-3"]').click()
+                cy.get('[data-cy="catalogue-tree-item-2"]').click()
+                cy.get('[data-cy="catalogue-tree-item-3"]').click()
                 // Find the test layer and open the appropriate menu entries.
                 cy.get(testLayerSelector)
                     .parentsUntil('[data-cy="menu-topic-section"]')
-                    .filter('[data-cy="topic-tree-item"]')
+                    .filter('[data-cy="catalogue-tree-item"]')
                     .then((menuItems) => {
                         menuItems
                             .toArray()

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

@@ -167,17 +167,17 @@ describe('Topics', () => {
         cy.get('[data-cy="menu-topic-tree"]').should('be.visible')
 
         // it must not open the first elements of the tree by default
-        cy.get('[data-cy="topic-tree-item-2"]').should('be.visible')
-        cy.get('[data-cy="topic-tree-item-3"]').should('not.be.visible')
+        cy.get('[data-cy="catalogue-tree-item-2"]').should('be.visible')
+        cy.get('[data-cy="catalogue-tree-item-3"]').should('not.be.visible')
 
         // shows a topic tree item's children when we click on it
-        cy.get('[data-cy="topic-tree-item-2"]').click()
-        cy.get('[data-cy="topic-tree-item-3"]').should('be.visible')
+        cy.get('[data-cy="catalogue-tree-item-2"]').click()
+        cy.get('[data-cy="catalogue-tree-item-3"]').should('be.visible')
 
         // it adds a layer to the map when we click on its name in the topic tree
-        cy.get('[data-cy="topic-tree-item-3"]').click()
+        cy.get('[data-cy="catalogue-tree-item-3"]').click()
         cy.readStoreValue('state.layers.activeLayers').should('be.empty')
-        cy.get('[data-cy="topic-tree-item-test.wmts.layer"]').click()
+        cy.get('[data-cy="catalogue-tree-item-test.wmts.layer"]').click()
         cy.readStoreValue('state.layers.activeLayers').then((activeLayers) => {
             expect(activeLayers).to.be.an('Array').lengthOf(1)
             const [firstLayer] = activeLayers
@@ -191,19 +191,19 @@ describe('Topics', () => {
             `<div>${expectedContent}</div>`
         ).as('legend')
 
-        cy.get('[data-cy="topic-tree-item-info"]').first().click()
+        cy.get('[data-cy="catalogue-tree-item-info"]').first().click()
         cy.get('[data-cy="layer-legend-popup"]').should('be.visible').contains(expectedContent)
     })
 
     if (!isMobileViewport) {
         it('previews the layer on hover', () => {
             const expectedLayerId = 'test.wmts.layer'
-            const layerSelector = `[data-cy="topic-tree-item-${expectedLayerId}"]`
+            const layerSelector = `[data-cy="catalogue-tree-item-${expectedLayerId}"]`
 
             cy.goToMapView()
             cy.get('[data-cy="menu-topic-section"]').click()
-            cy.get('[data-cy="topic-tree-item-2"]').click()
-            cy.get('[data-cy="topic-tree-item-3"]').click()
+            cy.get('[data-cy="catalogue-tree-item-2"]').click()
+            cy.get('[data-cy="catalogue-tree-item-3"]').click()
 
             cy.get(layerSelector).trigger('mouseenter')
             cy.readStoreValue('getters.visibleLayers').then((visibleLayers) => {
@@ -240,15 +240,15 @@ describe('Topics', () => {
         }
 
         // it should open the menu section by default if some catalog nodes are set in the URL (even if the default topic is shown)
-        cy.get('[data-cy="topic-tree-item-2"]').should('be.visible')
-        cy.get('[data-cy="topic-tree-item-3"]').should('be.visible')
+        cy.get('[data-cy="catalogue-tree-item-2"]').should('be.visible')
+        cy.get('[data-cy="catalogue-tree-item-3"]').should('be.visible')
         cy.readStoreValue('state.topics.openedTreeThemesIds').then((currentlyOpenedThemesId) => {
             expect(currentlyOpenedThemesId).to.be.an('Array')
             expect(currentlyOpenedThemesId).to.deep.equal(['2'])
         })
         // it must not change the URL when we close on a tree item (it's not meant to be synced with the UI after loading)
-        cy.get('[data-cy="topic-tree-item-3"]').click()
-        cy.get('[data-cy="topic-tree-item-test.wmts.layer"]').should('be.visible')
+        cy.get('[data-cy="catalogue-tree-item-3"]').click()
+        cy.get('[data-cy="catalogue-tree-item-test.wmts.layer"]').should('be.visible')
         cy.url().should('contain', 'catalogNodes=2')
         cy.url().should('not.contain', 'catalogNodes=2,3')
     })