test(pci-common): update region-selector test suites

ref: TAPC-2378
Signed-off-by: Frédéric Vilcot <[email protected]>

packages/manager/modules/manager-pci-common/package.json

@@ -30,7 +30,8 @@
     "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "test:watch": "vitest --watch"
+    "test:watch": "vitest --watch",
+    "type:check": "tsc --noEmit"
   },
   "dependencies": {
     "@ovh-ux/manager-tailwind-config": "^0.2.1",

packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.spec.tsx

@@ -1,12 +1,18 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { RegionGlobalzoneChip } from './RegionGlobalzoneChip.component';
 import { wrapper } from '@/wrapperRenders';
 
 describe('RegionGlobalzoneChip', () => {
-  it('renders chip with correct text', () => {
-    render(<RegionGlobalzoneChip />, { wrapper });
-    expect(
-      screen.getByText('pci_project_flavors_zone_global_region'),
-    ).toBeInTheDocument();
+  it('renders tag with correct text', () => {
+    const { container } = render(<RegionGlobalzoneChip id="fake-id" />, {
+      wrapper,
+    });
+    const tagElt = container.querySelector('#fake-id').firstChild;
+
+    expect(tagElt).toBeInTheDocument();
+    expect(tagElt).toHaveAttribute(
+      'label',
+      'pci_project_flavors_zone_global_region',
+    );
   });
 });

packages/manager/modules/manager-pci-common/src/components/region-selector/RegionGlobalzoneChip.component.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { FC, useContext } from 'react';
 import { Links, LinkType } from '@ovh-ux/manager-react-components';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { useTranslation } from 'react-i18next';
@@ -10,7 +10,11 @@ import {
 } from '@ovhcloud/ods-components';
 import { URL_INFO } from './constants';
 
-export function RegionGlobalzoneChip() {
+export type TRegionGlobalzoneChipProps = Readonly<{ id: string }>;
+
+export const RegionGlobalzoneChip: FC<TRegionGlobalzoneChipProps> = ({
+  id,
+}) => {
   const { t } = useTranslation('pci-region-selector');
   const context = useContext(ShellContext);
   const { ovhSubsidiary } = context.environment.getUser();
@@ -20,7 +24,7 @@ export function RegionGlobalzoneChip() {
 
   return (
     <>
-      <div id="popover-trigger">
+      <div id={id}>
         <OdsTag
           className="font-bold"
           label={t('pci_project_flavors_zone_global_region')}
@@ -30,7 +34,7 @@ export function RegionGlobalzoneChip() {
           onClick={(event) => event.stopPropagation()}
         />
       </div>
-      <OdsPopover triggerId="popover-trigger">
+      <OdsPopover triggerId={id}>
         <OdsText preset="span">
           {t('pci_project_flavors_zone_globalregions_tooltip')}
         </OdsText>
@@ -45,4 +49,4 @@ export function RegionGlobalzoneChip() {
       </OdsPopover>
     </>
   );
-}
+};

packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.spec.tsx

@@ -4,10 +4,16 @@ import { RegionLocalzoneChip } from './RegionLocalzoneChip.component';
 import { wrapper } from '@/wrapperRenders';
 
 describe('RegionLocalzoneChip', () => {
-  it('renders chip with correct text', () => {
-    render(<RegionLocalzoneChip />, { wrapper });
-    expect(
-      screen.getByText('pci_project_flavors_zone_localzone'),
-    ).toBeInTheDocument();
+  it('renders tag with correct text', () => {
+    const { container } = render(<RegionLocalzoneChip id="fake-id" />, {
+      wrapper,
+    });
+    const tagElt = container.querySelector('#fake-id').firstChild;
+
+    expect(tagElt).toBeInTheDocument();
+    expect(tagElt).toHaveAttribute(
+      'label',
+      'pci_project_flavors_zone_localzone',
+    );
   });
 });

packages/manager/modules/manager-pci-common/src/components/region-selector/RegionLocalzoneChip.component.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { FC, useContext } from 'react';
 import { Links, LinkType } from '@ovh-ux/manager-react-components';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { useTranslation } from 'react-i18next';
@@ -10,7 +10,9 @@ import {
 } from '@ovhcloud/ods-components';
 import { URL_INFO } from './constants';
 
-export function RegionLocalzoneChip() {
+export type TRegionLocalzoneChipProps = Readonly<{ id: string }>;
+
+export const RegionLocalzoneChip: FC<TRegionLocalzoneChipProps> = ({ id }) => {
   const { t } = useTranslation('pci-region-selector');
   const context = useContext(ShellContext);
   const { ovhSubsidiary } = context.environment.getUser();
@@ -20,7 +22,7 @@ export function RegionLocalzoneChip() {
 
   return (
     <>
-      <div id="popover-trigger">
+      <div id={id}>
         <OdsTag
           className="font-bold"
           label={t('pci_project_flavors_zone_localzone')}
@@ -30,7 +32,7 @@ export function RegionLocalzoneChip() {
           onClick={(event) => event.stopPropagation()}
         />
       </div>
-      <OdsPopover triggerId="popover-trigger">
+      <OdsPopover triggerId={id}>
         <OdsText preset="span">
           {t('pci_project_flavors_zone_localzone_tooltip')}
         </OdsText>
@@ -45,4 +47,4 @@ export function RegionLocalzoneChip() {
       </OdsPopover>
     </>
   );
-}
+};

packages/manager/modules/manager-pci-common/src/components/region-selector/RegionTile.tsx

@@ -26,9 +26,9 @@ export const RegionTile = ({
         <hr className="w-full border-solid border-0 border-b border-ods-primary-200" />
         <div>
           {region?.isLocalZone ? (
-            <RegionLocalzoneChip />
+            <RegionLocalzoneChip id={`popover-localzone-${region.name}`} />
           ) : (
-            <RegionGlobalzoneChip />
+            <RegionGlobalzoneChip id={`popover-globalzone-${region.name}`} />
           )}
         </div>
       </>