feat(hub): add fix and verrify html tests

ref: #MANAGER-20181

Signed-off-by: achraf hafedh <[email protected]>

Author: achraf hafedh

packages/manager/apps/hub/src/__mocks__/roadmap.ts

@@ -0,0 +1,10 @@
+import { RoadmapChangelogItem } from '@/types/roadmapchangelog.type';
+
+export const roadmapItem: RoadmapChangelogItem = {
+  title: 'title',
+  url: 'url',
+  product: 'product',
+  releaseDate: 'releaseDate',
+  status: 'status',
+  changelog: 'changelog',
+};

packages/manager/apps/hub/src/billing/components/billing-status/BannerStatus.spec.tsx

@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { FourServices } from '@/__mocks__/billingServices';
+
+import BillingStatus from './BillingStatus.component';
+
+describe('BillingStatus W3C Validation', () => {
+  const [
+    serviceResiliated,
+    serviceWithManualRenewNotResiliatedWithoutDebt,
+    serviceOneShotWithoutResiliation,
+    serviceWithoutUrlAndSuspendedBilling,
+  ] = FourServices.services;
+
+  it('should have a valid html for service Resiliated', () => {
+    const { container } = render(<BillingStatus service={serviceResiliated} />);
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
+
+  it('should have a valid html for service With Manual Renew Not ResiliatedWithoutDebt', () => {
+    const { container } = render(
+      <BillingStatus service={serviceWithManualRenewNotResiliatedWithoutDebt} />,
+    );
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
+
+  it('should have a valid html for service OneSho tWithout Resiliation', () => {
+    const { container } = render(<BillingStatus service={serviceOneShotWithoutResiliation} />);
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
+
+  it('should have a valid html for service Without Url And Suspended Billing', () => {
+    const { container } = render(<BillingStatus service={serviceWithoutUrlAndSuspendedBilling} />);
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/hub/src/billing/components/services-actions/ServicesActions.spec.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { ShellContextType } from '@ovh-ux/manager-react-shell-client';
+import * as reactShellClientModule from '@ovh-ux/manager-react-shell-client';
+
+import { renderWithShellContext } from '@/__mocks__/ShellContextWrapper';
+import { FourServices } from '@/__mocks__/billingServices';
+
+import ServicesActions from './ServicesActions.component';
+
+const [serviceResiliated] = FourServices.services;
+const autoRenewLink = 'https://www.autorenewlink.com/';
+const trackingPrefix = ['a tracking prefix'];
+
+const trackingSpy = vi.fn();
+
+const shellContext = {
+  shell: { navigation: {} },
+  environment: {
+    user: { ovhSubsidiary: 'FR' },
+  },
+};
+
+const renderComponent = () =>
+  renderWithShellContext(
+    <ServicesActions
+      service={serviceResiliated}
+      autoRenewLink={autoRenewLink}
+      trackingPrefix={trackingPrefix}
+    />,
+    shellContext as ShellContextType,
+  );
+
+vi.mock('@ovh-ux/manager-react-shell-client', async (importOriginal) => {
+  const original: typeof reactShellClientModule = await importOriginal();
+  return {
+    ...original,
+    useOvhTracking: () => ({
+      trackClick: trackingSpy,
+    }),
+  };
+});
+
+describe('ServicesActions W3C Validation', () => {
+  it('should have a valid html for service Resiliated', () => {
+    const { container } = renderComponent();
+
+    expect(container.innerHTML).toBeValidHtml();
+  });
+});

packages/manager/apps/hub/src/components/Loading/Loading.spec.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import Loading from './Loading';
+
+describe('Loading Component', () => {
+  it('should have a valid html', () => {
+    const { container } = render(<Loading />);
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/hub/src/components/banner/Banner.spec.tsx

@@ -58,12 +58,12 @@ describe('Banner.component', () => {
       alt: 'Summit Banner',
       images: {
         default: {
-          src: 'data:image/jpeg;base64,....',
+          src: 'url',
           width: 1250,
           height: 117,
         },
         responsive: {
-          src: 'data:image/jpeg;base64,....',
+          src: 'url',
           width: 453,
           height: 117,
         },
@@ -86,4 +86,11 @@ describe('Banner.component', () => {
 
     expect(trackingSpy).toHaveBeenCalled();
   });
+
+  it('should have a valid html', () => {
+    const { container } = renderComponent();
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
 });

packages/manager/apps/hub/src/components/hub-order-tracking/HubOrderTracking.spec.tsx

@@ -151,4 +151,11 @@ describe('HubOrderTracking Component', async () => {
       expect(screen.getByText('order_tracking_history_custom_payment_waiting')).toBeInTheDocument();
     });
   });
+
+  it('should have a valid html', () => {
+    const { container } = renderComponent(<HubOrderTracking />);
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
 });

packages/manager/apps/hub/src/components/hub-support/HubSupport.spec.tsx

@@ -142,4 +142,11 @@ describe('HubSupport Component', () => {
     const helpHubSupport = screen.getByTestId('tile-error');
     expect(helpHubSupport).toBeInTheDocument();
   });
+
+  it('should have a valid html', () => {
+    const { container } = render(<HubSupport />);
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
 });

packages/manager/apps/hub/src/components/hub-support/hub-support-help/HubSupportHelp.spec.tsx

@@ -50,4 +50,11 @@ describe('HubSupportHelp Component', () => {
       actions: ['activity', 'assistance', 'guide-welcome', 'go-to-docs'],
     });
   });
+
+  it('should have a valid html', () => {
+    const { container } = render(<HubSupportHelp />);
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
 });

packages/manager/apps/hub/src/components/roadmap-changelog-datagrid/RoadmapChangelogDatagrids.spec.tsx

@@ -90,4 +90,11 @@ describe('Roadmap Changelog Datagrids', () => {
 
     expect(screen.getByText('Jan 15, 2025')).toBeInTheDocument();
   });
+
+  it('should have a valid html', () => {
+    const { container } = renderComponent();
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
 });

packages/manager/apps/hub/src/components/roadmap-changelog-datagrid/cells/RoadmapChangelogItemDescriptionCell.spec.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { roadmapItem } from '@/__mocks__/roadmap';
+
+import { RoadmapChangelogItemDescriptionCell } from './RoadmapChangelogItemDescriptionCell';
+
+describe('RoadmapChangelogItemDescriptionCell Component', () => {
+  it('should have a valid html', () => {
+    const { container } = render(<RoadmapChangelogItemDescriptionCell item={roadmapItem} />);
+    const html = container.innerHTML;
+
+    expect(html).toBeValidHtml();
+  });
+});