fix(catalog-ui): stop click propagation when tree tickeable

The problem was that it was always stop the click propagation when
clicking on the node. But when tickeable is false we don't have to stop
the click propagation because it is this that does the selection node.

Author: Adrien

apps/catalog-ui/src/components/tree/GenericTree.vue

@@ -53,15 +53,15 @@
       <template #default-header="prop">
         <div
           :class="`row items-center full-width tree-header-type-${prop.node.type} tree-header-key-${prop.node.key}`"
-          @click.stop="toggleNodeSelection(prop.node.key)"
+          @click="toggleNodeSelection(prop.node.key, $event)"
         >
           <q-checkbox
             v-if="props.tickeable"
             :model-value="tickedNodes.includes(prop.node.key)"
             v-bind="uiProps.checkbox"
             class="tree-header-checkbox"
             :data-cy="`generic-tree-checkbox-${prop.node.key}`"
-            @click="toggleNodeSelection(prop.node.key)"
+            @click="toggleNodeSelection(prop.node.key, $event)"
           />
           <q-icon
             v-if="uiProps.types[prop.node.type]?.icon?.name"
@@ -138,6 +138,7 @@ import type {
   UiPropsAction,
   UiPropsTypes,
 } from '../../types/genericTree';
+import type { MouseEvent } from 'happy-dom';
 
 const props = defineProps<TreeProps<unknown>>();
 const filter = ref<string>('');
@@ -152,11 +153,13 @@ const { toQTreeNodes } = useTree();
 /**
  * Toggles the selection state of a node.
  * @param nodeKey The key of the node to toggle.
+ * @param event The mouse event on the checkbox or on the node.
  */
-function toggleNodeSelection(nodeKey: string): void {
+function toggleNodeSelection(nodeKey: string, event: MouseEvent): void {
   if (!props.tickeable) {
     return;
   }
+  event.stopPropagation();
   const index = tickedNodes.value.indexOf(nodeKey);
   if (index > -1) {
     tickedNodes.value.splice(index, 1);

apps/catalog-ui/tests/unit/components/tree/GenericTree.spec.js

@@ -290,49 +290,99 @@ describe('Test component: GenericTree', () => {
       selectableWrapper = mountComponent({ tickeable: true });
     });
 
+    /**
+     * Helper function to create a mock event object with spied stopPropagation.
+     * @returns Mock event object.
+     */
+    function createMockEvent() {
+      return {
+        stopPropagation: vi.fn(),
+      };
+    }
+
+    it('should call event.stopPropagation() to prevent event bubbling', () => {
+      const event = createMockEvent();
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
+
+      expect(event.stopPropagation).toHaveBeenCalledOnce();
+    });
+
     it('should add a node to tickedNodes when not already selected', () => {
-      selectableWrapper.vm.toggleNodeSelection('folder-1');
+      const event = createMockEvent();
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
 
       expect(selectableWrapper.vm.tickedNodes).toContain('folder-1');
+      expect(event.stopPropagation).toHaveBeenCalledOnce();
     });
 
     it('should remove a node from tickedNodes when already selected', () => {
-      selectableWrapper.vm.toggleNodeSelection('folder-1');
-      selectableWrapper.vm.toggleNodeSelection('folder-1');
+      const event = createMockEvent();
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
 
       expect(selectableWrapper.vm.tickedNodes).not.toContain('folder-1');
+      expect(event.stopPropagation).toHaveBeenCalledTimes(2);
     });
 
-    it('should handle multiple node selections', () => {
-      selectableWrapper.vm.toggleNodeSelection('folder-1');
-      selectableWrapper.vm.toggleNodeSelection('file-1');
+    it('should handle multiple node selections with different events', () => {
+      const event1 = createMockEvent();
+      const event2 = createMockEvent();
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event1);
+      selectableWrapper.vm.toggleNodeSelection('file-1', event2);
 
       expect(selectableWrapper.vm.tickedNodes).toContain('folder-1');
       expect(selectableWrapper.vm.tickedNodes).toContain('file-1');
       expect(selectableWrapper.vm.tickedNodes).toHaveLength(2);
+      expect(event1.stopPropagation).toHaveBeenCalledOnce();
+      expect(event2.stopPropagation).toHaveBeenCalledOnce();
     });
 
     it('should maintain other selections when toggling a new node', () => {
-      selectableWrapper.vm.toggleNodeSelection('folder-1');
-      selectableWrapper.vm.toggleNodeSelection('file-1');
-      selectableWrapper.vm.toggleNodeSelection('file-1');
+      const event = createMockEvent();
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
+      selectableWrapper.vm.toggleNodeSelection('file-1', event);
+      selectableWrapper.vm.toggleNodeSelection('file-1', event);
 
       expect(selectableWrapper.vm.tickedNodes).toEqual(['folder-1']);
+      expect(event.stopPropagation).toHaveBeenCalledTimes(3);
     });
 
-    it('should not toggle when tickeable is false', () => {
+    it('should not toggle and not call stopPropagation when tickeable is false', () => {
+      const event = createMockEvent();
       const nonSelectableWrapper = mountComponent({ tickeable: false });
-      nonSelectableWrapper.vm.toggleNodeSelection('folder-1');
+      nonSelectableWrapper.vm.toggleNodeSelection('folder-1', event);
 
       expect(nonSelectableWrapper.vm.tickedNodes).not.toContain('folder-1');
+      expect(event.stopPropagation).not.toHaveBeenCalled();
     });
 
-    it('should emit update:ticked even for a single node toggle', () => {
-      selectableWrapper.vm.toggleNodeSelection('folder-1');
+    it('should emit update:ticked with correct payload after adding a node', () => {
+      const event = createMockEvent();
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
 
       const emitted = selectableWrapper.emitted('update:ticked');
       expect(emitted).toBeTruthy();
-      expect(emitted.length).toBeGreaterThan(0);
+      expect(emitted[0][0]).toEqual(['folder-1']);
+    });
+
+    it('should emit update:ticked with empty array when toggling off the last node', () => {
+      const event = createMockEvent();
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
+
+      const emitted = selectableWrapper.emitted('update:ticked');
+      expect(emitted[emitted.length - 1][0]).toEqual([]);
+    });
+
+    it('should correctly handle sequential toggles with event stopPropagation', () => {
+      const event = createMockEvent();
+
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
+      selectableWrapper.vm.toggleNodeSelection('file-1', event);
+      selectableWrapper.vm.toggleNodeSelection('folder-1', event);
+
+      expect(event.stopPropagation).toHaveBeenCalledTimes(3);
+      expect(selectableWrapper.vm.tickedNodes).toEqual(['file-1']);
     });
   });