refactor(frontend): refactor tests and stories for sidebar

frontend/src/components/buttons/CreateButtonMobile.test.ts

@@ -7,7 +7,7 @@ import CreateButtonMobile from './CreateButtonMobile.vue'
 vi.mock('vike/client/router')
 vi.mocked(navigate).mockResolvedValue()
 
-describe('CreateButton', () => {
+describe('CreateButtonMobile', () => {
   const Wrapper = () => {
     return mount(CreateButtonMobile, {
       props: {},
@@ -49,18 +49,14 @@ describe('CreateButton', () => {
   })
 
   describe('new table button', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper = Wrapper()
+      await wrapper.find('#create-button-mobile').trigger('click')
     })
-    describe('enter room', () => {
-      beforeEach(async () => {
-        await wrapper.find('#create-button-mobile').trigger('click')
-        await wrapper.find('.button-list-mobile button.new-table-button').trigger('click')
-      })
 
-      it('opens room page', () => {
-        expect(navigate).toHaveBeenCalledWith('/room/')
-      })
+    it('opens room page', async () => {
+      await wrapper.find('.button-list-mobile button.new-table-button').trigger('click')
+      expect(navigate).toHaveBeenCalledWith('/room/')
     })
   })
 })

frontend/src/components/buttons/__snapshots__/CreateButtonMobile.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CreateButton > renders 1`] = `
+exports[`CreateButtonMobile > renders 1`] = `
 <div
   class="create-button-container"
   data-v-1c60eb53=""

frontend/src/components/menu/BottomMenu.vue

@@ -27,13 +27,15 @@ import Circle from './CircleElement.vue'
 import UserInfo from './UserInfo.vue'
 
 const drawer = ref(false)
+const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('bottom')
+
 const toggleDrawer = () => {
   drawer.value = !drawer.value
 }
+
 const updateDrawer = (value: boolean) => {
   drawer.value = value
 }
-const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('bottom')
 </script>
 
 <style scoped lang="scss">

frontend/src/components/menu/TopMenu.stories.ts

@@ -15,6 +15,10 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Example: Story = {
-  args: {},
+export const WithDrawer: Story = {
+  args: { drawer: true },
+}
+
+export const WithoutDrawer: Story = {
+  args: { drawer: false },
 }

frontend/src/components/menu/TopMenu.vue

@@ -32,13 +32,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
+import LightDarkSwitch from '#components/menu/LightDarkSwitch.vue'
+import LogoImage from '#components/menu/LogoImage.vue'
+import TabControl from '#components/menu/TabControl.vue'
+import UserInfo from '#components/menu/UserInfo.vue'
 import ListWithNavigationDrawer from '#components/vuetify/Organisms/ListWithNavigationDrawer.vue'
 
 import Circle from './CircleElement.vue'
-import LightDarkSwitch from './LightDarkSwitch.vue'
-import LogoImage from './LogoImage.vue'
-import TabControl from './TabControl.vue'
-import UserInfo from './UserInfo.vue'
 
 const drawer = ref(false)
 const toggleDrawer = () => {

frontend/src/components/vuetify/Atoms/ListElement.stories.ts

@@ -1,12 +1,10 @@
-// import { VIcon, VBtn, VAvatar, VImg } from 'vuetify/components'
-
 import { SBComp } from '#types/SBComp'
 
 import ListElement from './ListElement.vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-const meta: Meta<typeof ListElement> = {
+const meta = {
   title: 'MOLECULES/ListElement',
   component: ListElement as SBComp,
   tags: ['autodocs'],
@@ -20,11 +18,6 @@ const meta: Meta<typeof ListElement> = {
         participantCount: 4,
         attendees: [],
         joinLink: 'https://my.link',
-        // rounded: true,
-        // prepend: VIcon,
-        // prependProps: { icon: 'mdi-home' },
-        // append: VBtn,
-        // appendProps: { icon: 'mdi-menu' },
       },
       {
         meetingName: 'Beispiel Titel 2',
@@ -33,11 +26,6 @@ const meta: Meta<typeof ListElement> = {
         participantCount: 4,
         attendees: [],
         joinLink: 'https://my.link',
-        // rounded: true,
-        // prepend: VAvatar,
-        // prependProps: { src: 'https://via.placeholder.com/40' },
-        // append: VIcon,
-        // appendProps: { icon: 'mdi-menu' },
       },
     ],
   },
@@ -59,8 +47,6 @@ export const Basic: Story = {
         participantCount: 4,
         attendees: [],
         joinLink: 'https://my.link',
-        // append: VBtn,
-        // appendProps: { icon: 'mdi-menu' },
       },
       {
         meetingName: 'Beispiel Titel 2',
@@ -69,85 +55,7 @@ export const Basic: Story = {
         participantCount: 4,
         attendees: [],
         joinLink: 'https://my.link',
-        // append: VIcon,
-        // appendProps: { icon: 'mdi-menu' },
-      },
-    ],
-  },
-}
-
-/*
-export const WithIcons: Story = {
-  args: {
-    items: [
-      {
-        title: 'Home',
-        prepend: VIcon,
-        prependProps: { icon: 'mdi-home' },
-        append: VIcon,
-        appendProps: { icon: 'mdi-menu' },
-      },
-      {
-        title: 'Profile',
-        prepend: VIcon,
-        prependProps: { icon: 'mdi-account' },
-        append: VIcon,
-        appendProps: { icon: 'mdi-menu' },
-      },
-      {
-        title: 'Settings',
-        prepend: VIcon,
-        prependProps: { icon: 'mdi-settings' },
-        append: VIcon,
-        appendProps: { icon: 'mdi-menu' },
-      },
-      {
-        title: 'Logout',
-        prepend: VIcon,
-        prependProps: { icon: 'mdi-logout' },
-        append: VIcon,
-        appendProps: { icon: 'mdi-menu' },
-      },
-    ],
-  },
-}
-
-export const WithImages: Story = {
-  args: {
-    items: [
-      {
-        title: 'Item 1',
-        subtitle: 'Subtitle 1',
-        prepend: VImg,
-        prependProps: { src: 'https://via.placeholder.com/40' },
-        append: VIcon,
-        appendProps: { icon: 'mdi-menu' },
-      },
-      {
-        title: 'Item 2',
-        subtitle: 'Subtitle 2',
-        prepend: VImg,
-        prependProps: { src: 'https://via.placeholder.com/40' },
-        append: VIcon,
-        appendProps: { icon: 'mdi-menu' },
-      },
-      {
-        title: 'Item 3',
-        subtitle: 'Subtitle 3',
-        prepend: VImg,
-        prependProps: { src: 'https://via.placeholder.com/40' },
-        append: VIcon,
-        appendProps: { icon: 'mdi-menu' },
-      },
-      {
-        title: 'Item 4',
-        subtitle: 'Subtitle 4',
-        prepend: VImg,
-        prependProps: { src: 'https://via.placeholder.com/40' },
-        append: VIcon,
-        appendProps: { icon: 'mdi-menu' },
       },
     ],
   },
 }
-*/

frontend/src/components/vuetify/Organisms/ListWithNavigationDrawer.test.ts

@@ -9,7 +9,7 @@ describe('ListWithNavigationDrawer', () => {
   const Wrapper = () => {
     return mount(VApp, {
       slots: {
-        default: h(ListWithNavigationDrawer as Component),
+        default: h(ListWithNavigationDrawer as Component, { drawer: true }),
       },
     })
   }

frontend/src/components/vuetify/Organisms/__snapshots__/ListWithNavigationDrawer.test.ts.snap

@@ -10,9 +10,9 @@ exports[`ListWithNavigationDrawer > renders correctly 1`] = `
 
 
     <nav
-      class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
+      class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-navigation-drawer--active v-theme--light v-navigation-drawer--mobile menu-drawer-top"
       data-v-3308ee86=""
-      style="right: 0px; z-index: 1004; transform: translateX(110%); position: fixed; transition: none !important; height: calc(100% - 0px - 0px); top: 0px; bottom: 0px;"
+      style="right: 0px; z-index: 1004; transform: translateX(0%); position: fixed; transition: none !important; height: calc(100% - 0px - 0px); top: 0px; bottom: 0px;"
     >
       <!---->
       <!---->
@@ -120,7 +120,11 @@ exports[`ListWithNavigationDrawer > renders correctly 1`] = `
       name="fade-transition"
       persisted="false"
     >
-      <!---->
+      <div
+        class="v-navigation-drawer__scrim"
+        data-v-3308ee86=""
+        style="z-index: 1003;"
+      />
     </transition-stub>
 
 

frontend/src/stores/activeRoomStore.ts

@@ -9,7 +9,6 @@ export const useActiveRoomStore = defineStore(
     const getActiveRoom = computed(() => activeRoom.value)
 
     const setActiveRoom = (room: string | null) => {
-      // console.log('setActiveRoom', room)
       activeRoom.value = room
     }