fix(web-hosting): fix tests

ref: #PUWEBPT-86

Signed-off-by: Emilien Razafimampiandra <[email protected]>

Author: erazafimovh

packages/manager/apps/web-hosting/src/components/badgeStatus/BadgeStatus.component.tsx

@@ -70,7 +70,7 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
       }}
       data-testid={`badge-status-${itemStatus}`}
       color={statusColor}
-      className="mr-4 cursor-pointer inline-block"
+      className="mr-4 inline-block cursor-pointer"
       isLoading={isLoading}
     >
       {label || t(`web_hosting_status_${itemStatus.toLowerCase()}`)}

packages/manager/apps/web-hosting/src/components/loading/Loading.component.tsx

@@ -2,7 +2,7 @@ import { SPINNER_SIZE, Spinner } from '@ovhcloud/ods-react';
 
 export default function Loading() {
   return (
-    <div data-testid="spinner" className="flex justify-center my-5">
+    <div data-testid="spinner" className="my-5 flex justify-center">
       <Spinner size={SPINNER_SIZE.md} inline-block></Spinner>
     </div>
   );

packages/manager/apps/web-hosting/src/components/topBar/TopBar.component.tsx

@@ -64,7 +64,7 @@ export default function Topbar() {
         label: it?.currentState?.fqdn,
       })) || [];
   return (
-    <div className="flex flex-col space-y-10 mb-10">
+    <div className="mb-10 flex flex-col space-y-10">
       <div className="flex space-x-4">
         <Button
           size={BUTTON_SIZE.sm}

packages/manager/apps/web-hosting/src/components/topBar/TopBar.spec.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentType } from 'react';
 
-import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import { describe, it } from 'vitest';

packages/manager/apps/web-hosting/src/hooks/ssl/useDatagridColumn.spec.tsx

@@ -5,9 +5,8 @@ import { renderHook } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import { describe, it } from 'vitest';
 
-import { createWrapper, i18n } from '@/utils/test.provider';
-
 import useDatagridColumn from '@/hooks/ssl/useDatagridColumn';
+import { createWrapper, i18n } from '@/utils/test.provider';
 
 const testQueryClient = new QueryClient({
   defaultOptions: {

packages/manager/apps/web-hosting/src/pages/dashboard/OrderDomain.page.spec.tsx

@@ -1,14 +1,37 @@
 import React, { ComponentType } from 'react';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { createWrapper, i18n } from '@/utils/test.provider';
 import { navigate } from '@/utils/test.setup';
-import { createTestWrapper } from '@/utils/test.provider';
 
 import OrderDomainModal from './OrderDomain.page';
 
-const Wrappers = createTestWrapper();
+const testQueryClient = new QueryClient({
+  defaultOptions: {
+    mutations: {
+      retry: false,
+    },
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const RouterWrapper = createWrapper();
+
+const Wrappers = ({ children }: { children: React.ReactElement }) => {
+  return (
+    <RouterWrapper>
+      <QueryClientProvider client={testQueryClient}>
+        <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+      </QueryClientProvider>
+    </RouterWrapper>
+  );
+};
 
 vi.mock('@/constants', async (importActual) => {
   const actual = await importActual<typeof import('@/constants')>();

packages/manager/apps/web-hosting/src/pages/dashboard/OrderDomain.page.tsx

@@ -58,12 +58,12 @@ export default function OrderDomainModal() {
         onClick: closeModal,
       }}
     >
-      <div className="flex flex-col space-y-8 mb-10">
+      <div className="mb-10 flex flex-col space-y-8">
         <Text className="mb-4" preset={TEXT_PRESET.heading4}>
           {t('hosting_dashboard_add_or_order_title')}
         </Text>
         <Text>{t('hosting_dashboard_add_or_order_step1_title')}</Text>
-        <div className="flex gap-4 items-center">
+        <div className="flex items-center gap-4">
           <RadioGroup>
             <Radio
               value={ACTIONS.ORDER}

packages/manager/apps/web-hosting/src/pages/dashboard/layout.tsx

@@ -210,9 +210,9 @@ export default function Layout() {
 
   return (
     <BaseLayout breadcrumb={<Breadcrumb />}>
-      <div className="flex items-center justify-between mt-10">
+      <div className="mt-10 flex items-center justify-between">
         {editDisplayName ? (
-          <div className="w-2/3 mb-4">
+          <div className="mb-4 w-2/3">
             <Input
               className="w-2/3"
               name="edit-detail"
@@ -242,14 +242,14 @@ export default function Layout() {
             </Button>
           </div>
         )}
-        <div className="flex flex-wrap gap-5 justify-end">
+        <div className="flex flex-wrap justify-end gap-5">
           <ChangelogMenu links={CHANGELOG_LINKS} />
           <GuideMenu items={guideItems} />
         </div>
       </div>
       {!isOverridedPage && (
         <>
-          <div className="flex items-center justify-between mb-7">
+          <div className="mb-7 flex items-center justify-between">
             <Text>{data?.serviceName}</Text>
             <div className="flex flex-wrap justify-end">
               <ActionMenu
@@ -279,7 +279,7 @@ export default function Layout() {
             </Message>
           )}
           <Notifications />
-          <div className=" mt-8 mb-6">
+          <div className=" mb-6 mt-8">
             <Tabs withArrows defaultValue={tabs[0].name}>
               <TabList>
                 {tabs.map((tab: DashboardTab) => (

packages/manager/apps/web-hosting/src/pages/dashboard/local-seo/manage/RemoveSeoSubscription.page.tsx

@@ -62,24 +62,24 @@ export default function RemoveSeoSubscriptionModal() {
         onClick: closeModal,
       }}
     >
-      <div className="flex flex-col space-y-8 mb-10 mt-5">
+      <div className="mb-10 mt-5 flex flex-col space-y-8">
         <Text>{t('hosting_tab_LOCAL_SEO_delete_confirm')}</Text>
         <div className="flex">
-          <Text preset={TEXT_PRESET.heading6} className="w-1/2 text-right pr-4">
+          <Text preset={TEXT_PRESET.heading6} className="w-1/2 pr-4 text-right">
             {t('hosting_tab_LOCAL_SEO_table_header_name')}
           </Text>
           <Text className="w-1/2">{companyName}</Text>
         </div>
         <div className="flex">
-          <Text preset={TEXT_PRESET.heading6} className="w-1/2 text-right pr-4">
+          <Text preset={TEXT_PRESET.heading6} className="w-1/2 pr-4 text-right">
             {t('hosting_tab_LOCAL_SEO_table_header_address')}
           </Text>
           <Text className="w-1/2">
             {address || t('hosting_tab_LOCAL_SEO_table_value_undefined')}
           </Text>
         </div>
         <div className="flex">
-          <Text preset={TEXT_PRESET.heading6} className="w-1/2 text-right pr-4">
+          <Text preset={TEXT_PRESET.heading6} className="w-1/2 pr-4 text-right">
             {t('hosting_tab_LOCAL_SEO_table_header_email')}
           </Text>
           <Text className="w-1/2">{email}</Text>

packages/manager/apps/web-hosting/src/pages/dashboard/multisite/__tests__/Multisite.page.spec.tsx

@@ -47,6 +47,13 @@ vi.mock('@/data/hooks/webHosting/webHostingWebsiteDomain/webHostingWebsiteDomain
     isLoading: false,
     refetch: vi.fn(),
   }),
+  useWebHostingWebsiteDomains: vi.fn().mockReturnValue([
+    {
+      data: WebHostingWebsiteDomainMocks,
+      isLoading: false,
+      refetch: vi.fn(),
+    },
+  ]),
 }));
 
 describe('MultisitePage component', () => {