Improve test coverage (#6244)

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx

@@ -49,6 +49,6 @@ export const Elipsis: Story = {
 export const Performance = getProfilingStory({
   componentName: 'AddressFieldDisplay',
   averageThresholdInMs: 0.15,
-  numberOfRuns: 50,
-  numberOfTestsPerRun: 100,
+  numberOfRuns: 30,
+  numberOfTestsPerRun: 50,
 });

packages/twenty-front/src/modules/ui/input/button/components/Button.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
 import isPropValid from '@emotion/is-prop-valid';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import React from 'react';
+import { Link } from 'react-router-dom';
 import { IconComponent, Pill } from 'twenty-ui';
 
 export type ButtonSize = 'medium' | 'small';
@@ -27,6 +27,7 @@ export type ButtonProps = {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   to?: string;
   target?: string;
+  dataTestId?: string;
 } & React.ComponentProps<'button'>;
 
 const StyledButton = styled('button', {
@@ -374,6 +375,7 @@ export const Button = ({
   onClick,
   to,
   target,
+  dataTestId,
 }: ButtonProps) => {
   const theme = useTheme();
 
@@ -393,6 +395,7 @@ export const Button = ({
       to={to}
       as={to ? Link : 'button'}
       target={target}
+      data-testid={dataTestId}
     >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -1,6 +1,6 @@
-import { ReactNode, useState } from 'react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
+import { ReactNode, useState } from 'react';
 import { H1Title, H1TitleFontColor } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -130,6 +130,7 @@ export const ConfirmationModal = ({
             title={deleteButtonText}
             disabled={!isValidValue}
             fullWidth
+            dataTestId="confirmation-modal-confirm-button"
           />
         </StyledConfirmationModal>
       </LayoutGroup>

packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Key } from 'ts-key-enum';
 
 import {
@@ -7,11 +7,8 @@ import {
 } from '@/ui/layout/modal/components/ModalLayout';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import {
-  ClickOutsideMode,
-  useListenClickOutside,
-} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
+import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
 import { ModalHotkeyScope } from './types/ModalHotkeyScope';
 
 type ModalProps = ModalLayoutProps & {
@@ -68,10 +65,10 @@ export const Modal = ({
 
   const modalRef = useRef<HTMLDivElement>(null);
 
-  useListenClickOutside({
+  useListenClickOutsideV2({
     refs: [modalRef],
+    listenerId: 'MODAL_CLICK_OUTSIDE_LISTENER_ID',
     callback: () => onClose?.(),
-    mode: ClickOutsideMode.comparePixels,
   });
 
   return isOpen ? (