Adjust multiple tests

packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue

@@ -17,17 +17,19 @@
         :compare-object="editGroup"
         :confirm-button-disabled="invalidFormData"
         @revert="revertChanges"
-        @confirm="$emit('confirm', editGroup)"
+        @confirm="onEditGroup(editGroup)"
       ></compare-save-dialog>
     </form>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue'
 import { Group } from '@ownclouders/web-client/src/generated'
-import { CompareSaveDialog } from '@ownclouders/web-pkg'
+import { CompareSaveDialog, eventBus, useMessages } from '@ownclouders/web-pkg'
 import { MaybeRef, useClientService } from '@ownclouders/web-pkg'
 import GroupInfoBox from './GroupInfoBox.vue'
+import { useGroupSettingsStore } from '../../../composables'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'EditPanel',
@@ -45,6 +47,9 @@ export default defineComponent({
   emits: ['confirm'],
   setup() {
     const clientService = useClientService()
+    const { showErrorMessage } = useMessages()
+    const groupSettingsStore = useGroupSettingsStore()
+    const { $gettext } = useGettext()
 
     const editGroup: MaybeRef<Group> = ref({})
     const formData = ref({
@@ -54,10 +59,30 @@ export default defineComponent({
       }
     })
 
+    const onEditGroup = async (editGroup: Group) => {
+      try {
+        const client = clientService.graphAuthenticated
+        await client.groups.editGroup(editGroup.id, editGroup)
+        const { data: updatedGroup } = await client.groups.getGroup(editGroup.id)
+        groupSettingsStore.upsertGroup(updatedGroup)
+
+        eventBus.publish('sidebar.entity.saved')
+
+        return updatedGroup
+      } catch (error) {
+        console.error(error)
+        showErrorMessage({
+          title: $gettext('Failed to edit group'),
+          errors: [error]
+        })
+      }
+    }
+
     return {
       clientService,
       editGroup,
-      formData
+      formData,
+      onEditGroup
     }
   },
   computed: {
@@ -126,14 +151,17 @@ export default defineComponent({
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
   }
+
   .edit-compare-save-dialog {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }
+
   .group-info {
     align-items: center;
     flex-direction: column;
   }
+
   .group-info-display-name {
     font-size: 1.5rem;
   }

packages/web-app-admin-settings/src/views/Groups.vue

@@ -57,18 +57,13 @@ import DetailsPanel from '../components/Groups/SideBar/DetailsPanel.vue'
 import EditPanel from '../components/Groups/SideBar/EditPanel.vue'
 import GroupsList from '../components/Groups/GroupsList.vue'
 import MembersPanel from '../components/Groups/SideBar/MembersPanel.vue'
-import {
-  useGroupActionsDelete,
-  useGroupActionsCreateGroup,
-  useGroupSettingsStore
-} from '../composables'
+import { useGroupSettingsStore } from '../composables'
+import { useGroupActionsCreateGroup, useGroupActionsDelete } from '../composables/actions/groups'
 import {
   NoContentMessage,
   SideBarPanel,
   SideBarPanelContext,
-  eventBus,
   useClientService,
-  useMessages,
   useSideBar
 } from '@ownclouders/web-pkg'
 import { Group } from '@ownclouders/web-client/src/generated'
@@ -91,7 +86,6 @@ export default defineComponent({
     }
   },
   setup() {
-    const { showErrorMessage } = useMessages()
     const template = ref()
     const groupSettingsStore = useGroupSettingsStore()
     const { selectedGroups, groups } = storeToRefs(groupSettingsStore)
@@ -113,31 +107,13 @@ export default defineComponent({
       )
     })
 
-    const onEditGroup = async (editGroup: Group) => {
-      try {
-        const client = clientService.graphAuthenticated
-        await client.groups.editGroup(editGroup.id, editGroup)
-        const { data: updatedGroup } = await client.groups.getGroup(editGroup.id)
-        groupSettingsStore.upsertGroup(updatedGroup)
-
-        eventBus.publish('sidebar.entity.saved')
-
-        return updatedGroup
-      } catch (error) {
-        console.error(error)
-        showErrorMessage({
-          title: $gettext('Failed to edit group'),
-          errors: [error]
-        })
-      }
-    }
-
     const sideBarPanelContext = computed<SideBarPanelContext<unknown, unknown, Group>>(() => {
       return {
         parent: null,
         items: unref(selectedGroups)
       }
     })
+
     const sideBarAvailablePanels = [
       {
         name: 'DetailsPanel',
@@ -155,8 +131,7 @@ export default defineComponent({
         component: EditPanel,
         componentAttrs: ({ items }) => {
           return {
-            group: items.length === 1 ? items[0] : null,
-            onConfirm: onEditGroup
+            group: items.length === 1 ? items[0] : null
           }
         },
         isVisible: ({ items }) => {
@@ -191,7 +166,6 @@ export default defineComponent({
       sideBarAvailablePanels,
       sideBarPanelContext,
       createGroupAction,
-      onEditGroup,
       groupSettingsStore
     }
   },

packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts

@@ -9,6 +9,7 @@ import {
 import { mock } from 'vitest-mock-extended'
 import { AxiosResponse } from 'axios'
 import { Modal, eventBus, useMessages } from '@ownclouders/web-pkg'
+import { useGroupSettingsStore } from '../../../../src/composables'
 
 describe('CreateGroupModal', () => {
   describe('computed method "isFormInvalid"', () => {
@@ -80,12 +81,12 @@ describe('CreateGroupModal', () => {
         mockAxiosResolve({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
 
-      const eventSpy = vi.spyOn(eventBus, 'publish')
       await wrapper.vm.onConfirm()
 
       const { showMessage } = useMessages()
       expect(showMessage).toHaveBeenCalled()
-      expect(eventSpy).toHaveBeenCalled()
+      const { upsertGroup } = useGroupSettingsStore()
+      expect(upsertGroup).toHaveBeenCalled()
     })
 
     it('should show message on error', async () => {
@@ -100,12 +101,12 @@ describe('CreateGroupModal', () => {
       mocks.$clientService.graphAuthenticated.groups.createGroup.mockRejectedValue(
         mockAxiosResolve({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
-      const eventSpy = vi.spyOn(eventBus, 'publish')
       await wrapper.vm.onConfirm()
 
       const { showErrorMessage } = useMessages()
       expect(showErrorMessage).toHaveBeenCalled()
-      expect(eventSpy).not.toHaveBeenCalled()
+      const { upsertGroup } = useGroupSettingsStore()
+      expect(upsertGroup).not.toHaveBeenCalled()
     })
   })
 })

packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts

@@ -2,6 +2,7 @@ import GroupsList from '../../../../src/components/Groups/GroupsList.vue'
 import { defaultComponentMocks, defaultPlugins, mount, shallowMount } from 'web-test-helpers'
 import { displayPositionedDropdown, eventBus, queryItemAsString } from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
+import { useGroupSettingsStore } from '../../../../src/composables'
 
 const getGroupMocks = () => [
   { id: '1', members: [] },
@@ -56,50 +57,91 @@ describe('GroupsList', () => {
       ).toEqual([])
     })
   })
-  it('emits events on row click', () => {
-    const groups = getGroupMocks()
-    const { wrapper } = getWrapper({ props: { groups } })
-    wrapper.vm.rowClicked([groups[0]])
-    expect(wrapper.emitted('toggleSelectGroup')).toBeTruthy()
-  })
   it('should show the context menu on right click', async () => {
     const groups = getGroupMocks()
     const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, props: { groups } })
+    const { wrapper } = getWrapper({ mountType: mount, groups })
     await wrapper.find(`[data-item-id="${groups[0].id}"]`).trigger('contextmenu')
     expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
   })
   it('should show the context menu on context menu button click', async () => {
     const groups = getGroupMocks()
     const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, props: { groups } })
+    const { wrapper } = getWrapper({ mountType: mount, groups })
     await wrapper.find('.groups-table-btn-action-dropdown').trigger('click')
     expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
   })
   it('should show the group details on details button click', async () => {
     const groups = getGroupMocks()
     const eventBusSpy = vi.spyOn(eventBus, 'publish')
-    const { wrapper } = getWrapper({ mountType: mount, props: { groups } })
+    const { wrapper } = getWrapper({ mountType: mount, groups })
     await wrapper.find('.groups-table-btn-details').trigger('click')
     expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
   })
+  describe('toggle selection', () => {
+    describe('selectGroups method', () => {
+      it('selects all groups', async () => {
+        const groups = getGroupMocks()
+        const { wrapper } = getWrapper({ mountType: shallowMount, groups })
+        wrapper.vm.selectGroups(groups)
+        const { setSelectedGroups } = useGroupSettingsStore()
+        expect(setSelectedGroups).toHaveBeenCalledWith(groups)
+      })
+    })
+    describe('selectGroup method', () => {
+      it('selects a group', async () => {
+        const groups = getGroupMocks()
+        const { wrapper } = getWrapper({ mountType: shallowMount, groups: [groups[0]] })
+        wrapper.vm.selectGroup(groups[0])
+        const { addSelectedGroup } = useGroupSettingsStore()
+        expect(addSelectedGroup).toHaveBeenCalledWith(groups[0])
+      })
+      it('de-selects a selected group', async () => {
+        const groups = getGroupMocks()
+        const { wrapper } = getWrapper({
+          mountType: shallowMount,
+          groups: [groups[0]],
+          selectedGroups: [groups[0]]
+        })
+        wrapper.vm.selectGroup(groups[0])
+        const { setSelectedGroups } = useGroupSettingsStore()
+        expect(setSelectedGroups).toHaveBeenCalledWith([])
+      })
+    })
+    describe('unselectAllGroups method', () => {
+      it('de-selects all selected groups', async () => {
+        const groups = getGroupMocks()
+        const { wrapper } = getWrapper({
+          mountType: shallowMount,
+          groups: [groups[0]],
+          selectedGroups: [groups[0]]
+        })
+        wrapper.vm.unselectAllGroups()
+        const { setSelectedGroups } = useGroupSettingsStore()
+        expect(setSelectedGroups).toHaveBeenCalledWith([])
+      })
+    })
+  })
 })
 
-function getWrapper({ mountType = shallowMount, props = {} } = {}) {
+function getWrapper({ mountType = shallowMount, groups = [], selectedGroups = [] } = {}) {
   vi.mocked(queryItemAsString).mockImplementationOnce(() => '1')
   vi.mocked(queryItemAsString).mockImplementationOnce(() => '100')
   const mocks = defaultComponentMocks()
 
   return {
     wrapper: mountType(GroupsList, {
       props: {
-        groups: [],
-        selectedGroups: [],
-        headerPosition: 0,
-        ...props
+        headerPosition: 0
       },
       global: {
-        plugins: [...defaultPlugins()],
+        plugins: [
+          ...defaultPlugins({
+            piniaOptions: {
+              groupSettingsStore: { groups, selectedGroups }
+            }
+          })
+        ],
         mocks,
         provide: mocks,
         stubs: {

packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts

@@ -1,7 +1,14 @@
 import EditPanel from '../../../../../src/components/Groups/SideBar/EditPanel.vue'
-import { defaultComponentMocks, defaultPlugins, mockAxiosReject, mount } from 'web-test-helpers'
+import {
+  defaultComponentMocks,
+  defaultPlugins,
+  mockAxiosReject,
+  mockAxiosResolve,
+  mount
+} from 'web-test-helpers'
 import { mock } from 'vitest-mock-extended'
 import { AxiosResponse } from 'axios'
+import { eventBus, useMessages } from '@ownclouders/web-pkg'
 
 describe('EditPanel', () => {
   it('renders all available inputs', () => {
@@ -56,6 +63,41 @@ describe('EditPanel', () => {
     })
   })
 
+  describe('method "onEditGroup"', () => {
+    it('should emit event on success', async () => {
+      const { wrapper, mocks } = getWrapper()
+
+      const clientService = mocks.$clientService
+      clientService.graphAuthenticated.groups.editGroup.mockResolvedValue(mockAxiosResolve())
+      clientService.graphAuthenticated.groups.getGroup.mockResolvedValue(
+        mockAxiosResolve({ id: '1', displayName: 'administrators' })
+      )
+
+      const editGroup = {
+        id: '1',
+        name: 'administrators'
+      }
+
+      const busStub = vi.spyOn(eventBus, 'publish')
+      const updatedGroup = await wrapper.vm.onEditGroup(editGroup)
+
+      expect(updatedGroup.id).toEqual('1')
+      expect(updatedGroup.displayName).toEqual('administrators')
+      expect(busStub).toHaveBeenCalled()
+    })
+
+    it('should show message on error', async () => {
+      vi.spyOn(console, 'error').mockImplementation(() => undefined)
+      const { wrapper, mocks } = getWrapper()
+      const clientService = mocks.$clientService
+      clientService.graphAuthenticated.groups.editGroup.mockImplementation(() => mockAxiosReject())
+      await wrapper.vm.onEditGroup({})
+
+      const { showErrorMessage } = useMessages()
+      expect(showErrorMessage).toHaveBeenCalled()
+    })
+  })
+
   describe('computed method "invalidFormData"', () => {
     it('should be false if formData is invalid', () => {
       const { wrapper } = getWrapper()