From 3564ba77138dc00e8c22430ecd0d5334632b21cc Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Thu, 3 Aug 2023 15:52:14 +0200
Subject: [PATCH 1/3] fix(theme-selector): on click theme in header, should
 open side panel and show theme selection

---
 cypress/e2e/header-bar.cy.ts                  | 51 +++++++++++++++++++
 src/components/catalog/catalog-tab.vue        | 14 +++--
 src/components/header/header-bar.vue          | 21 ++++++--
 src/components/layer-panel/layer-panel.vue    | 32 +++++++-----
 src/components/theme-selector/theme-grid.vue  |  2 +-
 .../theme-selector/theme-selector.vue         | 18 +++----
 src/stores/app.store.ts                       | 25 +++++++++
 7 files changed, 130 insertions(+), 33 deletions(-)
 create mode 100644 cypress/e2e/header-bar.cy.ts

diff --git a/cypress/e2e/header-bar.cy.ts b/cypress/e2e/header-bar.cy.ts
new file mode 100644
index 00000000..3a55e8bb
--- /dev/null
+++ b/cypress/e2e/header-bar.cy.ts
@@ -0,0 +1,51 @@
+describe('Header bar', () => {
+  beforeEach(() => {
+    cy.clearLocalStorage()
+    cy.visit('/')
+  })
+
+  describe('When clicking on the theme button', () => {
+    describe('When side panel is already opened', () => {
+      describe('When side panel is on the "My Layers" tab', () => {
+        it('shows the catalog tab and opens the theme grid', () => {
+          cy.get('[data-cy="selectedThemeIcon"]').click()
+          cy.get('[data-cy="themeGrid"]').should('be.visible')
+        })
+      })
+
+      describe('When side panel is already on the "Catalog" tab', () => {
+        beforeEach(() => {
+          cy.get('[data-cy="catalogButton"]').click()
+          cy.get('[data-cy="selectedThemeIcon"]').click()
+        })
+
+        it('shows the catalog tab and opens the theme grid', () => {
+          cy.get('[data-cy="themeGrid"]').should('be.visible')
+        })
+      })
+
+      describe('When side panel is already on the "Catalog" tab and the grid is already opened', () => {
+        beforeEach(() => {
+          cy.get('[data-cy="catalogButton"]').click()
+          cy.get('[data-cy="themeSelectorButton"]').click()
+          cy.get('[data-cy="selectedThemeIcon"]').click()
+        })
+
+        it('closes the whole side panel', () => {
+          cy.get('[data-cy="layerPanel"]').should('not.exist')
+        })
+      })
+    })
+
+    describe('When side panel is NOT opened', () => {
+      beforeEach(() => {
+        window.localStorage.setItem('layersOpen', 'false')
+      })
+
+      it('shows the catalog tab and opens the theme grid', () => {
+        cy.get('[data-cy="selectedThemeIcon"]').click()
+        cy.get('[data-cy="themeGrid"]').should('be.visible')
+      })
+    })
+  })
+})
diff --git a/src/components/catalog/catalog-tab.vue b/src/components/catalog/catalog-tab.vue
index 3c728e4c..2eb1f7ef 100644
--- a/src/components/catalog/catalog-tab.vue
+++ b/src/components/catalog/catalog-tab.vue
@@ -1,21 +1,19 @@
 <script setup lang="ts">
-import { ShallowRef, shallowRef } from 'vue'
+import { storeToRefs } from 'pinia'
 
-import Catalog from './catalog-tree.vue'
 import ThemeSelector from '@/components/theme-selector/theme-selector.vue'
+import { useAppStore } from '@/stores/app.store'
 
-const themeGridIsOpen: ShallowRef<boolean> = shallowRef(false)
+import Catalog from './catalog-tree.vue'
 
-function toggleThemesGrid(isOpen: boolean) {
-  themeGridIsOpen.value = isOpen
-}
+const { themeGridOpen } = storeToRefs(useAppStore())
 </script>
 
 <template>
-  <theme-selector @toggleThemesGrid="toggleThemesGrid"></theme-selector>
+  <theme-selector />
   <catalog
     data-cy="catalog"
     class="pt-5 absolute inset-x-2.5 bg-primary overflow-y-auto overflow-x-hidden"
-    v-if="themeGridIsOpen === false"
+    v-if="themeGridOpen === false"
   ></catalog>
 </template>
diff --git a/src/components/header/header-bar.vue b/src/components/header/header-bar.vue
index a3ec53bf..8030e6c3 100644
--- a/src/components/header/header-bar.vue
+++ b/src/components/header/header-bar.vue
@@ -10,8 +10,8 @@ import { themeSelectorService } from '../theme-selector/theme-selector.service'
 
 const { t } = useTranslation()
 const appStore = useAppStore()
-const { layersOpen } = storeToRefs(appStore)
-const { setLayersOpen } = appStore
+const { layersOpen, myLayersTabOpen, themeGridOpen } = storeToRefs(appStore)
+const { setLayersOpen, setMyLayersTabOpen, setThemeGridOpen } = appStore
 const themeStore = useThemeStore()
 const { theme } = storeToRefs(themeStore)
 
@@ -24,6 +24,21 @@ watch(
   },
   { immediate: true }
 )
+
+function onClick() {
+  if (!layersOpen.value) {
+    setLayersOpen(true)
+    myLayersTabOpen.value && setMyLayersTabOpen(false)
+    setThemeGridOpen(true)
+  } else if (layersOpen.value) {
+    if (themeGridOpen.value) {
+      setLayersOpen(false)
+    } else {
+      myLayersTabOpen.value && setMyLayersTabOpen(false)
+      setThemeGridOpen(true)
+    }
+  }
+}
 </script>
 
 <template>
@@ -39,7 +54,7 @@ watch(
             class="flex items-center before:font-icons before:text-3xl before:w-16 text-primary uppercase h-full mr-3"
             :class="`before:content-${theme?.name}`"
             data-cy="selectedThemeIcon"
-            @click="() => setLayersOpen(!layersOpen)"
+            @click="onClick"
           >
             <span class="hidden lg:inline-block">{{
               t(`${theme?.name}`)
diff --git a/src/components/layer-panel/layer-panel.vue b/src/components/layer-panel/layer-panel.vue
index e867be17..b9f9e0f0 100644
--- a/src/components/layer-panel/layer-panel.vue
+++ b/src/components/layer-panel/layer-panel.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useTranslation } from 'i18next-vue'
 import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
 
 import CatalogTab from '@/components/catalog/catalog-tab.vue'
 import LayerManager from '@/components/layer-manager/layer-manager.vue'
@@ -9,9 +8,18 @@ import { useAppStore } from '@/stores/app.store'
 import { useMapStore } from '@/stores/map.store'
 
 const { t } = useTranslation()
-const { setLayersOpen } = useAppStore()
+const appStore = useAppStore()
+const { setLayersOpen } = appStore
+const { myLayersTabOpen } = storeToRefs(appStore)
 const { layers } = storeToRefs(useMapStore())
-const myLayersOpen = ref(false)
+
+function onClickMyLayers() {
+  appStore.setMyLayersTabOpen(true)
+}
+
+function onDisplayCatalog() {
+  appStore.setMyLayersTabOpen(false)
+}
 </script>
 
 <template>
@@ -34,20 +42,20 @@ const myLayersOpen = ref(false)
     <div class="flex flex-row gap-2 h-10 text-2xl">
       <button
         data-cy="myLayersButton"
-        @click="() => (myLayersOpen = true)"
+        @click="onClickMyLayers"
         class="text-white px-4 hover:bg-primary cursor-pointer text-center uppercase"
-        :class="myLayersOpen ? 'bg-primary' : 'bg-tertiary'"
-        :aria-expanded="myLayersOpen"
+        :class="myLayersTabOpen ? 'bg-primary' : 'bg-tertiary'"
+        :aria-expanded="myLayersTabOpen"
       >
         {{ t('my_layers', { ns: 'client' }) }}
         <span v-if="layers.length">({{ layers.length }})</span>
       </button>
       <button
         data-cy="catalogButton"
-        @click="myLayersOpen = false"
+        @click="onDisplayCatalog"
         class="text-white px-4 hover:bg-primary cursor-pointer text-center uppercase"
-        :class="myLayersOpen ? 'bg-tertiary' : 'bg-primary'"
-        :aria-expanded="!myLayersOpen"
+        :class="myLayersTabOpen ? 'bg-tertiary' : 'bg-primary'"
+        :aria-expanded="!myLayersTabOpen"
       >
         {{ t('Catalog', { ns: 'client' }) }}
       </button>
@@ -55,12 +63,12 @@ const myLayersOpen = ref(false)
 
     <!-- Panel content (MyLayers and Catalog) -->
     <div class="relative grow p-2.5 bg-primary overflow-auto">
-      <catalog-tab v-if="!myLayersOpen"></catalog-tab>
       <layer-manager
         data-cy="myLayers"
-        v-if="myLayersOpen"
-        @display-catalog="() => (myLayersOpen = false)"
+        v-if="myLayersTabOpen"
+        @display-catalog="onDisplayCatalog"
       ></layer-manager>
+      <catalog-tab v-if="!myLayersTabOpen"></catalog-tab>
     </div>
   </div>
 </template>
diff --git a/src/components/theme-selector/theme-grid.vue b/src/components/theme-selector/theme-grid.vue
index 3ca95f0c..06107f1a 100644
--- a/src/components/theme-selector/theme-grid.vue
+++ b/src/components/theme-selector/theme-grid.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="flex flex-row flex-wrap pl-2.5">
+  <div class="flex flex-row flex-wrap pl-2.5" data-cy="themeGrid">
     <button
       class="relative shrink-0 h-[150px] w-1/2 px-2.5 text-start text-gray-100/40 uppercase hover:bg-[#ccc]"
       v-for="theme in props.themes"
diff --git a/src/components/theme-selector/theme-selector.vue b/src/components/theme-selector/theme-selector.vue
index b9c5fe8a..a75de500 100644
--- a/src/components/theme-selector/theme-selector.vue
+++ b/src/components/theme-selector/theme-selector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ShallowRef, shallowRef } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 
 import useThemes from '@/composables/themes/themes.composable'
@@ -7,8 +7,12 @@ import { useThemeStore } from '@/stores/config.store'
 
 import ThemeGrid from './theme-grid.vue'
 import ThemeSelectorButton from './theme-selector-button.vue'
-import { computed } from 'vue'
 
+import { useAppStore } from '@/stores/app.store'
+
+const appStore = useAppStore()
+const { setThemeGridOpen } = appStore
+const { themeGridOpen } = storeToRefs(appStore)
 const themeStore = useThemeStore()
 const themesService = useThemes()
 const { theme, themes: themesFromStore } = storeToRefs(themeStore)
@@ -18,13 +22,9 @@ const themes = computed(
       theme => theme.metadata?.display_in_switcher === true
     ) || []
 )
-const isOpen: ShallowRef<boolean> = shallowRef(false)
-const emit = defineEmits<{
-  (e: 'toggleThemesGrid', isOpen: boolean): void
-}>()
 
 function toggleThemesGrid() {
-  emit('toggleThemesGrid', (isOpen.value = !isOpen.value))
+  setThemeGridOpen(!themeGridOpen.value)
 }
 
 function setTheme(themeName: string) {
@@ -39,11 +39,11 @@ function setTheme(themeName: string) {
     @click="toggleThemesGrid"
     :themes="themes"
     :currentTheme="theme"
-    :isOpen="isOpen"
+    :isOpen="themeGridOpen"
   ></theme-selector-button>
   <div
     class="absolute inset-x-0 top-14 bottom-0 mt-1 bg-primary overflow-y-auto overflow-x-hidden"
-    v-if="isOpen"
+    v-if="themeGridOpen"
   >
     <theme-grid @set-theme="setTheme" :themes="themes"></theme-grid>
   </div>
diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts
index 9b4834fb..ca426b99 100644
--- a/src/stores/app.store.ts
+++ b/src/stores/app.store.ts
@@ -3,12 +3,16 @@ import { acceptHMRUpdate, defineStore } from 'pinia'
 
 export const DEFAULT_LANG = 'fr'
 export const DEFAULT_LAYER_PANEL_OPENED = true
+export const DEFAULT_MY_LAYERS_TAB_OPENED = false
+export const DEFAULT_THEME_GRID_OPENED = false
 
 export const useAppStore = defineStore(
   'app',
   () => {
     const lang = ref(DEFAULT_LANG)
     const layersOpen = ref(DEFAULT_LAYER_PANEL_OPENED)
+    const myLayersTabOpen = ref(DEFAULT_MY_LAYERS_TAB_OPENED)
+    const themeGridOpen = ref(DEFAULT_THEME_GRID_OPENED)
     const remoteLayersOpen = ref()
     const styleEditorOpen = ref(false)
 
@@ -18,6 +22,23 @@ export const useAppStore = defineStore(
 
     function setLayersOpen(open: boolean) {
       layersOpen.value = open
+
+      if (!open) {
+        themeGridOpen.value = false
+        myLayersTabOpen.value = false
+      }
+    }
+
+    function setMyLayersTabOpen(open: boolean) {
+      myLayersTabOpen.value = open
+
+      if (open) {
+        themeGridOpen.value = false
+      }
+    }
+
+    function setThemeGridOpen(open: boolean) {
+      themeGridOpen.value = open
     }
 
     function setRemoteLayersOpen(open: boolean) {
@@ -35,10 +56,14 @@ export const useAppStore = defineStore(
     return {
       lang,
       layersOpen,
+      myLayersTabOpen,
+      themeGridOpen,
       styleEditorOpen,
       remoteLayersOpen,
       setLang,
       setLayersOpen,
+      setMyLayersTabOpen,
+      setThemeGridOpen,
       setRemoteLayersOpen,
       openStyleEditorPanel,
       closeStyleEditorPanel,

From 9d4c0db5828b0e2609253f6ca703b3639a617683 Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Thu, 3 Aug 2023 17:40:55 +0200
Subject: [PATCH 2/3] chore(lib): npm run build:lib:prod

---
 bundle/lux.dist.mjs    | 204 ++++++++++++++++++++++++-----------------
 bundle/lux.dist.umd.js | 204 ++++++++++++++++++++++++-----------------
 2 files changed, 244 insertions(+), 164 deletions(-)

diff --git a/bundle/lux.dist.mjs b/bundle/lux.dist.mjs
index 0678cb4a..3a0c3f55 100644
--- a/bundle/lux.dist.mjs
+++ b/bundle/lux.dist.mjs
@@ -52835,11 +52835,15 @@ class LayerTreeService {
 const layerTreeService = new LayerTreeService();
 const DEFAULT_LANG = "fr";
 const DEFAULT_LAYER_PANEL_OPENED = true;
+const DEFAULT_MY_LAYERS_TAB_OPENED = false;
+const DEFAULT_THEME_GRID_OPENED = false;
 const useAppStore = defineStore(
   "app",
   () => {
     const lang = ref(DEFAULT_LANG);
     const layersOpen = ref(DEFAULT_LAYER_PANEL_OPENED);
+    const myLayersTabOpen = ref(DEFAULT_MY_LAYERS_TAB_OPENED);
+    const themeGridOpen = ref(DEFAULT_THEME_GRID_OPENED);
     const remoteLayersOpen = ref();
     const styleEditorOpen = ref(false);
     function setLang(language) {
@@ -52847,6 +52851,19 @@ const useAppStore = defineStore(
     }
     function setLayersOpen(open2) {
       layersOpen.value = open2;
+      if (!open2) {
+        themeGridOpen.value = false;
+        myLayersTabOpen.value = false;
+      }
+    }
+    function setMyLayersTabOpen(open2) {
+      myLayersTabOpen.value = open2;
+      if (open2) {
+        themeGridOpen.value = false;
+      }
+    }
+    function setThemeGridOpen(open2) {
+      themeGridOpen.value = open2;
     }
     function setRemoteLayersOpen(open2) {
       remoteLayersOpen.value = open2;
@@ -52860,10 +52877,14 @@ const useAppStore = defineStore(
     return {
       lang,
       layersOpen,
+      myLayersTabOpen,
+      themeGridOpen,
       styleEditorOpen,
       remoteLayersOpen,
       setLang,
       setLayersOpen,
+      setMyLayersTabOpen,
+      setThemeGridOpen,
       setRemoteLayersOpen,
       openStyleEditorPanel,
       closeStyleEditorPanel
@@ -53534,8 +53555,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const { t } = useTranslation();
     const appStore = useAppStore();
-    const { layersOpen } = storeToRefs(appStore);
-    const { setLayersOpen } = appStore;
+    const { layersOpen, myLayersTabOpen, themeGridOpen } = storeToRefs(appStore);
+    const { setLayersOpen, setMyLayersTabOpen, setThemeGridOpen } = appStore;
     const themeStore = useThemeStore();
     const { theme } = storeToRefs(themeStore);
     watch(
@@ -53547,6 +53568,20 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
+    function onClick() {
+      if (!layersOpen.value) {
+        setLayersOpen(true);
+        myLayersTabOpen.value && setMyLayersTabOpen(false);
+        setThemeGridOpen(true);
+      } else if (layersOpen.value) {
+        if (themeGridOpen.value) {
+          setLayersOpen(false);
+        } else {
+          myLayersTabOpen.value && setMyLayersTabOpen(false);
+          setThemeGridOpen(true);
+        }
+      }
+    }
     return (_ctx, _cache) => {
       var _a, _b;
       return openBlock(), createElementBlock("header", _hoisted_1$h, [
@@ -53557,7 +53592,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             createBaseVNode("li", null, [
               createBaseVNode("button", {
                 class: normalizeClass(["flex items-center before:font-icons before:text-3xl before:w-16 text-primary uppercase h-full mr-3", `before:content-${(_a = unref(theme)) == null ? void 0 : _a.name}`]),
-                onClick: _cache[0] || (_cache[0] = () => unref(setLayersOpen)(!unref(layersOpen)))
+                onClick
               }, [
                 createBaseVNode("span", _hoisted_5$9, toDisplayString(unref(t)(`${(_b = unref(theme)) == null ? void 0 : _b.name}`)), 1)
               ], 2)
@@ -53727,59 +53762,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function themesToLayerTree(node, depth = 0) {
-  const { name, id, children, metadata } = node;
-  return {
-    name,
-    id,
-    depth,
-    children: children == null ? void 0 : children.map((child) => themesToLayerTree(child, depth + 1)),
-    checked: false,
-    expanded: (metadata == null ? void 0 : metadata.is_expanded) || false
-  };
-}
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  __name: "catalog-tree",
-  setup(__props) {
-    const mapStore = useMapStore();
-    const themeStore = useThemeStore();
-    const layers = useLayers();
-    const layerTree = shallowRef();
-    watchEffect(updateLayerTree);
-    function updateLayerTree() {
-      var _a;
-      if (themeStore.theme && mapStore.layers) {
-        const treeModel = layerTree.value && layerTree.value.id === ((_a = themeStore.theme) == null ? void 0 : _a.id) ? layerTree.value : themesToLayerTree(themeStore.theme);
-        layerTree.value = layerTreeService.updateLayers(
-          treeModel,
-          mapStore.layers
-        );
-      }
-    }
-    function toggleParent(node) {
-      layerTree.value = layerTreeService.toggleNode(
-        node.id,
-        layerTree.value,
-        "expanded"
-      );
-    }
-    function toggleLayer(node) {
-      layers.toggleLayer(+node.id, !node.checked);
-    }
-    return (_ctx, _cache) => {
-      return unref(layerTree) ? (openBlock(), createBlock(_sfc_main$q, {
-        node: unref(layerTree),
-        key: unref(layerTree).id,
-        onToggleParent: toggleParent,
-        onToggleLayer: toggleLayer
-      }, null, 8, ["node"])) : createCommentVNode("", true);
-    };
-  }
-});
 const _hoisted_1$d = { class: "flex flex-row flex-wrap pl-2.5" };
 const _hoisted_2$c = ["onClick"];
 const _hoisted_3$b = { class: "text-2xl absolute top-5" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "theme-grid",
   props: {
     themes: null
@@ -53810,7 +53796,7 @@ const _hoisted_2$b = { class: "py-0.5" };
 const _hoisted_3$a = { class: "px-1 py-0.5 shrink-0 flex flex-row text-[12px] bg-secondary text-white" };
 const _hoisted_4$9 = { class: "py-[3px]" };
 const _hoisted_5$8 = { class: "flex flex-row flex-wrap ml-1 w-12" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "theme-selector-button",
   props: {
     themes: null,
@@ -53850,10 +53836,12 @@ const _hoisted_1$b = {
   key: 0,
   class: "absolute inset-x-0 top-14 bottom-0 mt-1 bg-primary overflow-y-auto overflow-x-hidden"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "theme-selector",
-  emits: ["toggleThemesGrid"],
-  setup(__props, { emit: emit2 }) {
+  setup(__props) {
+    const appStore = useAppStore();
+    const { setThemeGridOpen } = appStore;
+    const { themeGridOpen } = storeToRefs(appStore);
     const themeStore = useThemeStore();
     const themesService = useThemes();
     const { theme, themes: themesFromStore } = storeToRefs(themeStore);
@@ -53868,9 +53856,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         )) || [];
       }
     );
-    const isOpen = shallowRef(false);
     function toggleThemesGrid() {
-      emit2("toggleThemesGrid", isOpen.value = !isOpen.value);
+      setThemeGridOpen(!themeGridOpen.value);
     }
     function setTheme(themeName) {
       themesService.setTheme(themeName);
@@ -53878,14 +53865,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$f, {
+        createVNode(_sfc_main$g, {
           onClick: toggleThemesGrid,
           themes: unref(themes2),
           currentTheme: unref(theme),
-          isOpen: unref(isOpen)
+          isOpen: unref(themeGridOpen)
         }, null, 8, ["themes", "currentTheme", "isOpen"]),
-        unref(isOpen) ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
-          createVNode(_sfc_main$g, {
+        unref(themeGridOpen) ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+          createVNode(_sfc_main$h, {
             onSetTheme: setTheme,
             themes: unref(themes2)
           }, null, 8, ["themes"])
@@ -53894,17 +53881,63 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
+function themesToLayerTree(node, depth = 0) {
+  const { name, id, children, metadata } = node;
+  return {
+    name,
+    id,
+    depth,
+    children: children == null ? void 0 : children.map((child) => themesToLayerTree(child, depth + 1)),
+    checked: false,
+    expanded: (metadata == null ? void 0 : metadata.is_expanded) || false
+  };
+}
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "catalog-tree",
+  setup(__props) {
+    const mapStore = useMapStore();
+    const themeStore = useThemeStore();
+    const layers = useLayers();
+    const layerTree = shallowRef();
+    watchEffect(updateLayerTree);
+    function updateLayerTree() {
+      var _a;
+      if (themeStore.theme && mapStore.layers) {
+        const treeModel = layerTree.value && layerTree.value.id === ((_a = themeStore.theme) == null ? void 0 : _a.id) ? layerTree.value : themesToLayerTree(themeStore.theme);
+        layerTree.value = layerTreeService.updateLayers(
+          treeModel,
+          mapStore.layers
+        );
+      }
+    }
+    function toggleParent(node) {
+      layerTree.value = layerTreeService.toggleNode(
+        node.id,
+        layerTree.value,
+        "expanded"
+      );
+    }
+    function toggleLayer(node) {
+      layers.toggleLayer(+node.id, !node.checked);
+    }
+    return (_ctx, _cache) => {
+      return unref(layerTree) ? (openBlock(), createBlock(_sfc_main$q, {
+        node: unref(layerTree),
+        key: unref(layerTree).id,
+        onToggleParent: toggleParent,
+        onToggleLayer: toggleLayer
+      }, null, 8, ["node"])) : createCommentVNode("", true);
+    };
+  }
+});
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "catalog-tab",
   setup(__props) {
-    const themeGridIsOpen = shallowRef(false);
-    function toggleThemesGrid(isOpen) {
-      themeGridIsOpen.value = isOpen;
-    }
+    const { themeGridOpen } = storeToRefs(useAppStore());
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$e, { onToggleThemesGrid: toggleThemesGrid }),
-        unref(themeGridIsOpen) === false ? (openBlock(), createBlock(_sfc_main$h, {
+        createVNode(_sfc_main$f),
+        unref(themeGridOpen) === false ? (openBlock(), createBlock(_sfc_main$e, {
           key: 0,
           class: "pt-5 absolute inset-x-2.5 bg-primary overflow-y-auto overflow-x-hidden"
         })) : createCommentVNode("", true)
@@ -56391,9 +56424,16 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "layer-panel",
   setup(__props) {
     const { t } = useTranslation();
-    const { setLayersOpen } = useAppStore();
+    const appStore = useAppStore();
+    const { setLayersOpen } = appStore;
+    const { myLayersTabOpen } = storeToRefs(appStore);
     const { layers } = storeToRefs(useMapStore());
-    const myLayersOpen = ref(false);
+    function onClickMyLayers() {
+      appStore.setMyLayersTabOpen(true);
+    }
+    function onDisplayCatalog() {
+      appStore.setMyLayersTabOpen(false);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$7, [
         createBaseVNode("div", _hoisted_2$7, [
@@ -56408,25 +56448,25 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         ]),
         createBaseVNode("div", _hoisted_4$6, [
           createBaseVNode("button", {
-            onClick: _cache[1] || (_cache[1] = () => myLayersOpen.value = true),
-            class: normalizeClass(["text-white px-4 hover:bg-primary cursor-pointer text-center uppercase", myLayersOpen.value ? "bg-primary" : "bg-tertiary"]),
-            "aria-expanded": myLayersOpen.value
+            onClick: onClickMyLayers,
+            class: normalizeClass(["text-white px-4 hover:bg-primary cursor-pointer text-center uppercase", unref(myLayersTabOpen) ? "bg-primary" : "bg-tertiary"]),
+            "aria-expanded": unref(myLayersTabOpen)
           }, [
             createTextVNode(toDisplayString(unref(t)("my_layers", { ns: "client" })) + " ", 1),
             unref(layers).length ? (openBlock(), createElementBlock("span", _hoisted_6$3, "(" + toDisplayString(unref(layers).length) + ")", 1)) : createCommentVNode("", true)
           ], 10, _hoisted_5$6),
           createBaseVNode("button", {
-            onClick: _cache[2] || (_cache[2] = ($event) => myLayersOpen.value = false),
-            class: normalizeClass(["text-white px-4 hover:bg-primary cursor-pointer text-center uppercase", myLayersOpen.value ? "bg-tertiary" : "bg-primary"]),
-            "aria-expanded": !myLayersOpen.value
+            onClick: onDisplayCatalog,
+            class: normalizeClass(["text-white px-4 hover:bg-primary cursor-pointer text-center uppercase", unref(myLayersTabOpen) ? "bg-tertiary" : "bg-primary"]),
+            "aria-expanded": !unref(myLayersTabOpen)
           }, toDisplayString(unref(t)("Catalog", { ns: "client" })), 11, _hoisted_7$1)
         ]),
         createBaseVNode("div", _hoisted_8$1, [
-          !myLayersOpen.value ? (openBlock(), createBlock(_sfc_main$d, { key: 0 })) : createCommentVNode("", true),
-          myLayersOpen.value ? (openBlock(), createBlock(_sfc_main$a, {
-            key: 1,
-            onDisplayCatalog: _cache[3] || (_cache[3] = () => myLayersOpen.value = false)
-          })) : createCommentVNode("", true)
+          unref(myLayersTabOpen) ? (openBlock(), createBlock(_sfc_main$a, {
+            key: 0,
+            onDisplayCatalog
+          })) : createCommentVNode("", true),
+          !unref(myLayersTabOpen) ? (openBlock(), createBlock(_sfc_main$d, { key: 1 })) : createCommentVNode("", true)
         ])
       ]);
     };
diff --git a/bundle/lux.dist.umd.js b/bundle/lux.dist.umd.js
index 2902d677..8f87ffaa 100644
--- a/bundle/lux.dist.umd.js
+++ b/bundle/lux.dist.umd.js
@@ -52839,11 +52839,15 @@ uniform ${i3} ${o3} u_${a3};
   const layerTreeService = new LayerTreeService();
   const DEFAULT_LANG = "fr";
   const DEFAULT_LAYER_PANEL_OPENED = true;
+  const DEFAULT_MY_LAYERS_TAB_OPENED = false;
+  const DEFAULT_THEME_GRID_OPENED = false;
   const useAppStore = defineStore(
     "app",
     () => {
       const lang = ref(DEFAULT_LANG);
       const layersOpen = ref(DEFAULT_LAYER_PANEL_OPENED);
+      const myLayersTabOpen = ref(DEFAULT_MY_LAYERS_TAB_OPENED);
+      const themeGridOpen = ref(DEFAULT_THEME_GRID_OPENED);
       const remoteLayersOpen = ref();
       const styleEditorOpen = ref(false);
       function setLang(language) {
@@ -52851,6 +52855,19 @@ uniform ${i3} ${o3} u_${a3};
       }
       function setLayersOpen(open2) {
         layersOpen.value = open2;
+        if (!open2) {
+          themeGridOpen.value = false;
+          myLayersTabOpen.value = false;
+        }
+      }
+      function setMyLayersTabOpen(open2) {
+        myLayersTabOpen.value = open2;
+        if (open2) {
+          themeGridOpen.value = false;
+        }
+      }
+      function setThemeGridOpen(open2) {
+        themeGridOpen.value = open2;
       }
       function setRemoteLayersOpen(open2) {
         remoteLayersOpen.value = open2;
@@ -52864,10 +52881,14 @@ uniform ${i3} ${o3} u_${a3};
       return {
         lang,
         layersOpen,
+        myLayersTabOpen,
+        themeGridOpen,
         styleEditorOpen,
         remoteLayersOpen,
         setLang,
         setLayersOpen,
+        setMyLayersTabOpen,
+        setThemeGridOpen,
         setRemoteLayersOpen,
         openStyleEditorPanel,
         closeStyleEditorPanel
@@ -53538,8 +53559,8 @@ uniform ${i3} ${o3} u_${a3};
     setup(__props) {
       const { t } = useTranslation();
       const appStore = useAppStore();
-      const { layersOpen } = storeToRefs(appStore);
-      const { setLayersOpen } = appStore;
+      const { layersOpen, myLayersTabOpen, themeGridOpen } = storeToRefs(appStore);
+      const { setLayersOpen, setMyLayersTabOpen, setThemeGridOpen } = appStore;
       const themeStore = useThemeStore();
       const { theme } = storeToRefs(themeStore);
       watch(
@@ -53551,6 +53572,20 @@ uniform ${i3} ${o3} u_${a3};
         },
         { immediate: true }
       );
+      function onClick() {
+        if (!layersOpen.value) {
+          setLayersOpen(true);
+          myLayersTabOpen.value && setMyLayersTabOpen(false);
+          setThemeGridOpen(true);
+        } else if (layersOpen.value) {
+          if (themeGridOpen.value) {
+            setLayersOpen(false);
+          } else {
+            myLayersTabOpen.value && setMyLayersTabOpen(false);
+            setThemeGridOpen(true);
+          }
+        }
+      }
       return (_ctx, _cache) => {
         var _a, _b;
         return openBlock(), createElementBlock("header", _hoisted_1$h, [
@@ -53561,7 +53596,7 @@ uniform ${i3} ${o3} u_${a3};
               createBaseVNode("li", null, [
                 createBaseVNode("button", {
                   class: normalizeClass(["flex items-center before:font-icons before:text-3xl before:w-16 text-primary uppercase h-full mr-3", `before:content-${(_a = unref(theme)) == null ? void 0 : _a.name}`]),
-                  onClick: _cache[0] || (_cache[0] = () => unref(setLayersOpen)(!unref(layersOpen)))
+                  onClick
                 }, [
                   createBaseVNode("span", _hoisted_5$9, toDisplayString(unref(t)(`${(_b = unref(theme)) == null ? void 0 : _b.name}`)), 1)
                 ], 2)
@@ -53731,59 +53766,10 @@ uniform ${i3} ${o3} u_${a3};
       };
     }
   });
-  function themesToLayerTree(node, depth = 0) {
-    const { name, id, children, metadata } = node;
-    return {
-      name,
-      id,
-      depth,
-      children: children == null ? void 0 : children.map((child) => themesToLayerTree(child, depth + 1)),
-      checked: false,
-      expanded: (metadata == null ? void 0 : metadata.is_expanded) || false
-    };
-  }
-  const _sfc_main$h = /* @__PURE__ */ defineComponent({
-    __name: "catalog-tree",
-    setup(__props) {
-      const mapStore = useMapStore();
-      const themeStore = useThemeStore();
-      const layers = useLayers();
-      const layerTree = shallowRef();
-      watchEffect(updateLayerTree);
-      function updateLayerTree() {
-        var _a;
-        if (themeStore.theme && mapStore.layers) {
-          const treeModel = layerTree.value && layerTree.value.id === ((_a = themeStore.theme) == null ? void 0 : _a.id) ? layerTree.value : themesToLayerTree(themeStore.theme);
-          layerTree.value = layerTreeService.updateLayers(
-            treeModel,
-            mapStore.layers
-          );
-        }
-      }
-      function toggleParent(node) {
-        layerTree.value = layerTreeService.toggleNode(
-          node.id,
-          layerTree.value,
-          "expanded"
-        );
-      }
-      function toggleLayer(node) {
-        layers.toggleLayer(+node.id, !node.checked);
-      }
-      return (_ctx, _cache) => {
-        return unref(layerTree) ? (openBlock(), createBlock(_sfc_main$q, {
-          node: unref(layerTree),
-          key: unref(layerTree).id,
-          onToggleParent: toggleParent,
-          onToggleLayer: toggleLayer
-        }, null, 8, ["node"])) : createCommentVNode("", true);
-      };
-    }
-  });
   const _hoisted_1$d = { class: "flex flex-row flex-wrap pl-2.5" };
   const _hoisted_2$c = ["onClick"];
   const _hoisted_3$b = { class: "text-2xl absolute top-5" };
-  const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ defineComponent({
     __name: "theme-grid",
     props: {
       themes: null
@@ -53814,7 +53800,7 @@ uniform ${i3} ${o3} u_${a3};
   const _hoisted_3$a = { class: "px-1 py-0.5 shrink-0 flex flex-row text-[12px] bg-secondary text-white" };
   const _hoisted_4$9 = { class: "py-[3px]" };
   const _hoisted_5$8 = { class: "flex flex-row flex-wrap ml-1 w-12" };
-  const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ defineComponent({
     __name: "theme-selector-button",
     props: {
       themes: null,
@@ -53854,10 +53840,12 @@ uniform ${i3} ${o3} u_${a3};
     key: 0,
     class: "absolute inset-x-0 top-14 bottom-0 mt-1 bg-primary overflow-y-auto overflow-x-hidden"
   };
-  const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ defineComponent({
     __name: "theme-selector",
-    emits: ["toggleThemesGrid"],
-    setup(__props, { emit: emit2 }) {
+    setup(__props) {
+      const appStore = useAppStore();
+      const { setThemeGridOpen } = appStore;
+      const { themeGridOpen } = storeToRefs(appStore);
       const themeStore = useThemeStore();
       const themesService = useThemes();
       const { theme, themes: themesFromStore } = storeToRefs(themeStore);
@@ -53872,9 +53860,8 @@ uniform ${i3} ${o3} u_${a3};
           )) || [];
         }
       );
-      const isOpen = shallowRef(false);
       function toggleThemesGrid() {
-        emit2("toggleThemesGrid", isOpen.value = !isOpen.value);
+        setThemeGridOpen(!themeGridOpen.value);
       }
       function setTheme(themeName) {
         themesService.setTheme(themeName);
@@ -53882,14 +53869,14 @@ uniform ${i3} ${o3} u_${a3};
       }
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock(Fragment, null, [
-          createVNode(_sfc_main$f, {
+          createVNode(_sfc_main$g, {
             onClick: toggleThemesGrid,
             themes: unref(themes2),
             currentTheme: unref(theme),
-            isOpen: unref(isOpen)
+            isOpen: unref(themeGridOpen)
           }, null, 8, ["themes", "currentTheme", "isOpen"]),
-          unref(isOpen) ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
-            createVNode(_sfc_main$g, {
+          unref(themeGridOpen) ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+            createVNode(_sfc_main$h, {
               onSetTheme: setTheme,
               themes: unref(themes2)
             }, null, 8, ["themes"])
@@ -53898,17 +53885,63 @@ uniform ${i3} ${o3} u_${a3};
       };
     }
   });
+  function themesToLayerTree(node, depth = 0) {
+    const { name, id, children, metadata } = node;
+    return {
+      name,
+      id,
+      depth,
+      children: children == null ? void 0 : children.map((child) => themesToLayerTree(child, depth + 1)),
+      checked: false,
+      expanded: (metadata == null ? void 0 : metadata.is_expanded) || false
+    };
+  }
+  const _sfc_main$e = /* @__PURE__ */ defineComponent({
+    __name: "catalog-tree",
+    setup(__props) {
+      const mapStore = useMapStore();
+      const themeStore = useThemeStore();
+      const layers = useLayers();
+      const layerTree = shallowRef();
+      watchEffect(updateLayerTree);
+      function updateLayerTree() {
+        var _a;
+        if (themeStore.theme && mapStore.layers) {
+          const treeModel = layerTree.value && layerTree.value.id === ((_a = themeStore.theme) == null ? void 0 : _a.id) ? layerTree.value : themesToLayerTree(themeStore.theme);
+          layerTree.value = layerTreeService.updateLayers(
+            treeModel,
+            mapStore.layers
+          );
+        }
+      }
+      function toggleParent(node) {
+        layerTree.value = layerTreeService.toggleNode(
+          node.id,
+          layerTree.value,
+          "expanded"
+        );
+      }
+      function toggleLayer(node) {
+        layers.toggleLayer(+node.id, !node.checked);
+      }
+      return (_ctx, _cache) => {
+        return unref(layerTree) ? (openBlock(), createBlock(_sfc_main$q, {
+          node: unref(layerTree),
+          key: unref(layerTree).id,
+          onToggleParent: toggleParent,
+          onToggleLayer: toggleLayer
+        }, null, 8, ["node"])) : createCommentVNode("", true);
+      };
+    }
+  });
   const _sfc_main$d = /* @__PURE__ */ defineComponent({
     __name: "catalog-tab",
     setup(__props) {
-      const themeGridIsOpen = shallowRef(false);
-      function toggleThemesGrid(isOpen) {
-        themeGridIsOpen.value = isOpen;
-      }
+      const { themeGridOpen } = storeToRefs(useAppStore());
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock(Fragment, null, [
-          createVNode(_sfc_main$e, { onToggleThemesGrid: toggleThemesGrid }),
-          unref(themeGridIsOpen) === false ? (openBlock(), createBlock(_sfc_main$h, {
+          createVNode(_sfc_main$f),
+          unref(themeGridOpen) === false ? (openBlock(), createBlock(_sfc_main$e, {
             key: 0,
             class: "pt-5 absolute inset-x-2.5 bg-primary overflow-y-auto overflow-x-hidden"
           })) : createCommentVNode("", true)
@@ -56395,9 +56428,16 @@ uniform ${i3} ${o3} u_${a3};
     __name: "layer-panel",
     setup(__props) {
       const { t } = useTranslation();
-      const { setLayersOpen } = useAppStore();
+      const appStore = useAppStore();
+      const { setLayersOpen } = appStore;
+      const { myLayersTabOpen } = storeToRefs(appStore);
       const { layers } = storeToRefs(useMapStore());
-      const myLayersOpen = ref(false);
+      function onClickMyLayers() {
+        appStore.setMyLayersTabOpen(true);
+      }
+      function onDisplayCatalog() {
+        appStore.setMyLayersTabOpen(false);
+      }
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", _hoisted_1$7, [
           createBaseVNode("div", _hoisted_2$7, [
@@ -56412,25 +56452,25 @@ uniform ${i3} ${o3} u_${a3};
           ]),
           createBaseVNode("div", _hoisted_4$6, [
             createBaseVNode("button", {
-              onClick: _cache[1] || (_cache[1] = () => myLayersOpen.value = true),
-              class: normalizeClass(["text-white px-4 hover:bg-primary cursor-pointer text-center uppercase", myLayersOpen.value ? "bg-primary" : "bg-tertiary"]),
-              "aria-expanded": myLayersOpen.value
+              onClick: onClickMyLayers,
+              class: normalizeClass(["text-white px-4 hover:bg-primary cursor-pointer text-center uppercase", unref(myLayersTabOpen) ? "bg-primary" : "bg-tertiary"]),
+              "aria-expanded": unref(myLayersTabOpen)
             }, [
               createTextVNode(toDisplayString(unref(t)("my_layers", { ns: "client" })) + " ", 1),
               unref(layers).length ? (openBlock(), createElementBlock("span", _hoisted_6$3, "(" + toDisplayString(unref(layers).length) + ")", 1)) : createCommentVNode("", true)
             ], 10, _hoisted_5$6),
             createBaseVNode("button", {
-              onClick: _cache[2] || (_cache[2] = ($event) => myLayersOpen.value = false),
-              class: normalizeClass(["text-white px-4 hover:bg-primary cursor-pointer text-center uppercase", myLayersOpen.value ? "bg-tertiary" : "bg-primary"]),
-              "aria-expanded": !myLayersOpen.value
+              onClick: onDisplayCatalog,
+              class: normalizeClass(["text-white px-4 hover:bg-primary cursor-pointer text-center uppercase", unref(myLayersTabOpen) ? "bg-tertiary" : "bg-primary"]),
+              "aria-expanded": !unref(myLayersTabOpen)
             }, toDisplayString(unref(t)("Catalog", { ns: "client" })), 11, _hoisted_7$1)
           ]),
           createBaseVNode("div", _hoisted_8$1, [
-            !myLayersOpen.value ? (openBlock(), createBlock(_sfc_main$d, { key: 0 })) : createCommentVNode("", true),
-            myLayersOpen.value ? (openBlock(), createBlock(_sfc_main$a, {
-              key: 1,
-              onDisplayCatalog: _cache[3] || (_cache[3] = () => myLayersOpen.value = false)
-            })) : createCommentVNode("", true)
+            unref(myLayersTabOpen) ? (openBlock(), createBlock(_sfc_main$a, {
+              key: 0,
+              onDisplayCatalog
+            })) : createCommentVNode("", true),
+            !unref(myLayersTabOpen) ? (openBlock(), createBlock(_sfc_main$d, { key: 1 })) : createCommentVNode("", true)
           ])
         ]);
       };

From 448178bfaef37ec78a0f4c5b11f49b5bdcbb8319 Mon Sep 17 00:00:00 2001
From: AlitaBernachot <alita.bernachot@camptocamp.com>
Date: Thu, 3 Aug 2023 18:21:36 +0200
Subject: [PATCH 3/3] test: fix ut, some logic is moved in e2e tests

---
 cypress/e2e/permalink/layersOpen.cy.ts        | 20 ----------
 cypress/e2e/side-panel.cy.ts                  | 16 ++++++++
 .../layer-panel/layer-panel.spec.ts           | 20 +++++++---
 .../theme-selector/theme-selector.spec.ts     | 37 +------------------
 4 files changed, 31 insertions(+), 62 deletions(-)
 create mode 100644 cypress/e2e/side-panel.cy.ts

diff --git a/cypress/e2e/permalink/layersOpen.cy.ts b/cypress/e2e/permalink/layersOpen.cy.ts
index 77092c1e..78b96bb0 100644
--- a/cypress/e2e/permalink/layersOpen.cy.ts
+++ b/cypress/e2e/permalink/layersOpen.cy.ts
@@ -27,24 +27,4 @@ describe('Permalink/State persistor - layersOpen', () => {
       })
     })
   })
-  describe('opening / closing panel', () => {
-    describe('when clicking cross', () => {
-      it('closes layerPanel', () => {
-        cy.visit('/')
-        cy.get('[data-cy="layerPanel"]').should('exist')
-        cy.get('[data-cy="layerPanel"]').find('button').first().click()
-        cy.get('[data-cy="layerPanel"]').should('not.exist')
-      })
-    })
-    describe('clicking theme icon in header bar', () => {
-      it('toggles layerPanel', () => {
-        cy.visit('/')
-        cy.get('[data-cy="layerPanel"]').should('exist')
-        cy.get('[data-cy="selectedThemeIcon"]').click()
-        cy.get('[data-cy="layerPanel"]').should('not.exist')
-        cy.get('[data-cy="selectedThemeIcon"]').click()
-        cy.get('[data-cy="layerPanel"]').should('exist')
-      })
-    })
-  })
 })
diff --git a/cypress/e2e/side-panel.cy.ts b/cypress/e2e/side-panel.cy.ts
new file mode 100644
index 00000000..111d1003
--- /dev/null
+++ b/cypress/e2e/side-panel.cy.ts
@@ -0,0 +1,16 @@
+describe('Side panel', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  describe('opening / closing panel', () => {
+    describe('when clicking cross', () => {
+      it('closes layerPanel', () => {
+        cy.visit('/')
+        cy.get('[data-cy="layerPanel"]').should('exist')
+        cy.get('[data-cy="layerPanel"]').find('button').first().click()
+        cy.get('[data-cy="layerPanel"]').should('not.exist')
+      })
+    })
+  })
+})
diff --git a/src/components/layer-panel/layer-panel.spec.ts b/src/components/layer-panel/layer-panel.spec.ts
index 07330618..b8a243bf 100644
--- a/src/components/layer-panel/layer-panel.spec.ts
+++ b/src/components/layer-panel/layer-panel.spec.ts
@@ -1,26 +1,34 @@
 import { shallowMount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
 
 import CatalogTab from '@/components/catalog/catalog-tab.vue'
 import LayerManager from '@/components/layer-manager/layer-manager.vue'
 
 import LayerPanel from './layer-panel.vue'
-import { createTestingPinia } from '@pinia/testing'
+import { useAppStore } from '@/stores/app.store'
 
 describe('LayerPanel', () => {
-  it('renders properly', async () => {
-    const wrapper = shallowMount(LayerPanel, {
+  const mountComponent = () => shallowMount(LayerPanel)
+  let wrapper: ReturnType<typeof mountComponent>
+
+  beforeEach(() => {
+    wrapper = shallowMount(LayerPanel, {
       global: {
         plugins: [createTestingPinia()],
       },
     })
+  })
+
+  it('renders properly', async () => {
+    const appStore = useAppStore()
 
     expect(wrapper.findComponent(CatalogTab).exists()).toBe(true)
     expect(wrapper.findComponent(LayerManager).exists()).toBe(false)
 
-    wrapper.vm.myLayersOpen = true
+    appStore.setMyLayersTabOpen(true)
     await wrapper.vm.$nextTick() // "Wait for the DOM to update before continuing the test"
 
-    expect(wrapper.findComponent(CatalogTab).exists()).toBe(false)
-    expect(wrapper.findComponent(LayerManager).exists()).toBe(true)
+    expect(wrapper.findComponent(CatalogTab).exists()).toBe(true)
+    expect(wrapper.findComponent(LayerManager).exists()).toBe(false)
   })
 })
diff --git a/src/components/theme-selector/theme-selector.spec.ts b/src/components/theme-selector/theme-selector.spec.ts
index 727b6f6b..4af6e428 100644
--- a/src/components/theme-selector/theme-selector.spec.ts
+++ b/src/components/theme-selector/theme-selector.spec.ts
@@ -1,10 +1,9 @@
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
 
 import ThemeGrid from './theme-grid.vue'
 import ThemeSelector from './theme-selector.vue'
 import ThemeSelectorButton from './theme-selector-button.vue'
-import { defineComponent, shallowRef, ShallowRef } from 'vue'
 
 describe('ThemeSelector', () => {
   const mountComponent = () => shallowMount(ThemeSelector)
@@ -28,38 +27,4 @@ describe('ThemeSelector', () => {
       expect(wrapper.findComponent(ThemeGrid).exists()).toBe(false)
     })
   })
-
-  describe('When the component is clicked on', () => {
-    const TestComponent = defineComponent({
-      template: `
-        <theme-selector
-          @toggleThemesGrid="toggleThemesGrid"
-        ></theme-selector>
-      `,
-      components: { 'theme-selector': ThemeSelector },
-      setup() {
-        const themeGridIsOpen: ShallowRef<boolean> = shallowRef(false)
-
-        function toggleThemesGrid(isOpen: boolean) {
-          themeGridIsOpen.value = isOpen
-        }
-
-        return { themeGridIsOpen, toggleThemesGrid }
-      },
-    })
-
-    const wrapperTest = mount(TestComponent, {
-      global: {
-        plugins: [createTestingPinia()],
-      },
-    })
-
-    it('opens and renders the grid', async () => {
-      const themeSelector = wrapperTest.findComponent(ThemeSelector)
-      expect(themeSelector.findComponent(ThemeGrid).exists()).toBe(false)
-
-      await wrapperTest.find('button').trigger('click')
-      expect(themeSelector.findComponent(ThemeGrid).exists()).toBe(true)
-    })
-  })
 })