[ONL-8262] Added missing props for popover. (#1873)

* [ONL-8262] chore: Added missing props for popover.

* 2.7.11

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.7.10",
+  "version": "2.7.11",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-popover/__snapshots__/ec-popover.spec.ts.snap

@@ -45,6 +45,30 @@ exports[`EcPopover component > should merge default options with given additiona
 >
   
   
+</v-dropdown-stub>
+`;
+
+exports[`EcPopover component > should pass all props 1`] = `
+<v-dropdown-stub
+  ariaid="ec-popover-1"
+  arrowoverflow="true"
+  autohide="false"
+  autosize="max"
+  container="body"
+  data-test="ec-popover"
+  disabled="true"
+  distance="8"
+  overflowpadding="5"
+  placement="left-end"
+  popperclass="my-test-class ec-popover ec-popover--modal"
+  preventoverflow="true"
+  shift="true"
+  shown="true"
+  skidding="12"
+  triggers="click"
+>
+  
+  
 </v-dropdown-stub>
 `;
 

src/components/ec-popover/ec-popover.spec.ts

@@ -1,5 +1,4 @@
 import { type ComponentMountingOptions, mount } from '@vue/test-utils';
-import { vi } from 'vitest';
 import { defineComponent, ref } from 'vue';
 
 import { ZIndexLevel } from '../../enums';
@@ -55,13 +54,14 @@ describe('EcPopover component', () => {
     expect(wrapper.element).toMatchSnapshot('after');
   });
 
-  it('should pass all events to the 3rd party tooltip component', async () => {
-    const showSpy = vi.fn();
-    const wrapper = mountEcPopover({}, {
-      attrs: { onShow: showSpy },
-    });
-    await wrapper.findComponent({ name: 'VDropdown' }).vm.$emit('show');
-    expect(showSpy).toHaveBeenCalledTimes(1);
+  it('should pass all events to the 3rd party tooltip component', () => {
+    const wrapper = mountEcPopover();
+
+    const events = ['update:shown', 'show', 'apply-show', 'hide', 'apply-hide', 'auto-hide', 'close-directive', 'resize'];
+    for (const event of events) {
+      wrapper.findComponent({ name: 'VDropdown' }).vm.$emit(event);
+      expect(wrapper.emitted(event)?.length).toBe(1);
+    }
   });
 
   it('should add the z-index level class if the level was given', () => {
@@ -104,4 +104,28 @@ describe('EcPopover component', () => {
 
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('should pass all props', () => {
+    type AllPopoverProps = Required<PopoverProps>;
+
+    const props: AllPopoverProps = {
+      autoHide: false,
+      autoSize: 'max',
+      delay: 200,
+      disabled: true,
+      distance: 8,
+      level: ZIndexLevel.MODAL,
+      overflowPadding: 5,
+      placement: PopoverPlacement.LEFT_END,
+      popperClass: 'my-test-class',
+      preventOverflow: true,
+      shift: true,
+      shown: true,
+      skidding: 12,
+      triggers: [PopoverTrigger.CLICK],
+    };
+
+    const wrapper = mountEcPopover(props);
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });

src/components/ec-popover/ec-popover.vue

@@ -48,6 +48,7 @@ const props = withDefaults(defineProps<PopoverProps>(), {
   autoHide: true,
   shift: undefined,
   autoSize: undefined,
+  preventOverflow: undefined,
 });
 
 const emit = defineEmits<{
@@ -76,6 +77,8 @@ const {
   autoHide,
   shift,
   autoSize,
+  preventOverflow,
+  overflowPadding,
 } = toRefs(props);
 const { container: containerInject } = inject(POPOVER_CONTAINER_KEY, { container: ref('body') });
 
@@ -90,6 +93,8 @@ function getOptions() {
     autoHide: autoHide?.value,
     shift: shift?.value,
     autoSize: autoSize?.value,
+    preventOverflow: preventOverflow?.value,
+    overflowPadding: overflowPadding?.value,
     popperClass: `${popperClass.value} ec-popover${level?.value ? ` ec-popover--${level.value}` : ''}`.trim(),
     container: containerInject.value,
     ariaId: `ec-popover-${id}`,

src/components/ec-popover/types.ts

@@ -42,4 +42,6 @@ export interface PopoverProps {
   triggers?: PopoverTrigger[],
   shift?: boolean,
   autoSize?: boolean | 'min' | 'max',
+  preventOverflow?: boolean,
+  overflowPadding?: number,
 }