fix(web-office): implement w3c setup test

packages/manager/apps/web-office/src/components/office-service-state/__tests__/OfficeServiceState.spec.tsx

@@ -101,3 +101,12 @@ describe('OfficeServiceState component', () => {
     expect(badge).toHaveAttribute('color', ODS_BADGE_COLOR.information);
   });
 });
+
+describe('OfficeServiceState W3C Validation', () => {
+  it('should have a valid html', async () => {
+    const { container } = render(<OfficeServiceState state={StateEnum.OK} />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/components/tabs-panel/TabsPanel.component.tsx

@@ -42,7 +42,7 @@ const TabsPanel: React.FC<TabsProps> = ({ tabs }) => {
     <OdsTabs>
       {tabs.map((tab: TabItemProps) => (
         <NavLink key={`osds-tab-bar-item-${tab.name}`} to={tab.to} className="no-underline">
-          <OdsTab id={tab.name} role="tab" isSelected={activePanel === tab.name}>
+          <OdsTab id={tab.name} isSelected={activePanel === tab.name}>
             {tab.title}
           </OdsTab>
         </NavLink>

packages/manager/apps/web-office/src/components/tabs-panel/__tests__/TabsPanel.spec.tsx

@@ -68,3 +68,12 @@ describe('TabsPanel component', () => {
     expect(link1).toHaveAttribute('is-selected', 'false');
   });
 });
+
+describe('TabsPanel W3C Validation', () => {
+  it('should have a valid html', async () => {
+    const { container } = render(<TabsPanel tabs={tabs} />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/consumption/CustomTooltip.component.tsx

@@ -36,19 +36,19 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({ payload, locale }) => {
       <OdsText preset={ODS_TEXT_PRESET.paragraph}>
         <span data-testid="relative-date">{relativeDate}</span>
 
-        <span className="flex">
-          <div className="mr-4" data-testid="officeBusiness">
+        <div className="flex">
+          <span className="mr-4" data-testid="officeBusiness">
             {t('officeBusiness_serie_name')}
-          </div>
+          </span>
           {officeBusiness}
-        </span>
+        </div>
 
-        <span className="flex">
-          <div className="mr-4" data-testid="officeProPlus">
+        <div className="flex">
+          <span className="mr-4" data-testid="officeProPlus">
             {t('officeProPlus_serie_name')}
-          </div>
+          </span>
           {officeProPlus}
-        </span>
+        </div>
       </OdsText>
     </div>
   );

packages/manager/apps/web-office/src/pages/dashboard/consumption/__tests__/Consumption.page.spec.tsx

@@ -40,3 +40,13 @@ describe('Consumption Component', () => {
     expect(chartContainer).toBeInTheDocument();
   });
 });
+
+describe('Consumption W3C Validation', () => {
+  // issue with ods on ods-select and option child element
+  it.skip('should have a valid html', async () => {
+    const { container } = render(<Consumption />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/consumption/__tests__/CustomTooltip.component.spec.tsx

@@ -5,18 +5,18 @@ import { describe, expect, it } from 'vitest';
 
 import CustomTooltip from '../CustomTooltip.component';
 
+const testPayload = [
+  {
+    payload: {
+      rawDate: new Date(Date.now() - 1000 * 60 * 60 * 24),
+      officeBusiness: 5,
+      officeProPlus: 10,
+    },
+  },
+];
+
 describe('CustomTooltip', () => {
   it('load data on tooltip', () => {
-    const testPayload = [
-      {
-        payload: {
-          rawDate: new Date(Date.now() - 1000 * 60 * 60 * 24),
-          officeBusiness: 5,
-          officeProPlus: 10,
-        },
-      },
-    ];
-
     const { getByTestId } = render(<CustomTooltip locale={fr} payload={testPayload} />);
 
     const relativeDate = getByTestId('relative-date');
@@ -31,3 +31,12 @@ describe('CustomTooltip', () => {
     expect(container.firstChild).toBeNull();
   });
 });
+
+describe('Consumption W3C Validation', () => {
+  it('should have a valid html', async () => {
+    const { container } = render(<CustomTooltip locale={fr} payload={testPayload} />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/general-information/__tests__/GeneralInformation.page.spec.tsx

@@ -104,3 +104,12 @@ describe('GeneralInformation page', () => {
     });
   });
 });
+
+describe('GeneralInformation W3C Validation', () => {
+  it('should have a valid html', async () => {
+    const { container } = render(<GeneralInformation />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/users/__tests__/ActionButtonUsers.component.spec.tsx

@@ -56,3 +56,14 @@ describe('Users datagrid (licence) action menu', () => {
     expect(menuItems[0]).toHaveAttribute('label', actions.edit_account);
   });
 });
+
+describe('Users datagrid (licence) action menu W3C Validation', () => {
+  it('should have a valid html', async () => {
+    const { container } = render(
+      <ActionButtonUsers usersItem={usersMock[0]} licenceDetail={licensesMock[0]} />,
+    );
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/users/__tests__/Users.page.spec.tsx

@@ -59,3 +59,13 @@ describe('Users page', () => {
     expect(orderButton).toHaveAttribute('label', commonTranslation.users_order_licenses);
   });
 });
+
+describe('Users page W3C Validation', () => {
+  // issue with ods on label and input (for / id)
+  it.skip('should have a valid html', async () => {
+    const { container } = render(<Users />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/users/change-password-users/__tests__/ChangePasswordUsers.modal.spec.tsx

@@ -102,3 +102,13 @@ describe('ModalChangePasswordUsers Component', () => {
     expect(postUsersPassword).toHaveBeenCalledOnce();
   });
 });
+
+describe('ModalChangePasswordUsers W3C Validation', () => {
+  // issue with ods on label and input (for / id)
+  it.skip('should have a valid html', async () => {
+    const { container } = render(<ModalChangePasswordUsers />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/users/delete-users/__tests__/DeleteUsers.modal.spec.tsx

@@ -46,3 +46,12 @@ describe('ModalDeleteUsers Component', () => {
     expect(deleteOfficeUser).toHaveBeenCalledOnce();
   });
 });
+
+describe('ModalDeleteUsers W3C Validation', () => {
+  it('should have a valid html', async () => {
+    const { container } = render(<ModalDeleteUsers />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/users/edit-users/__tests__/EditUsers.modal.spec.tsx

@@ -108,3 +108,13 @@ describe('ModalEditUsers Component', () => {
     expect(putOfficeUserDetail).toHaveBeenCalledOnce();
   });
 });
+
+describe('ModalEditUsers W3C Validation', () => {
+  // issue with ods on label and input (for / id)
+  it.skip('should have a valid html', async () => {
+    const { container } = render(<ModalEditUsers />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/users/order-licenses/__tests__/OrderLicenses.modal.spec.tsx

@@ -39,3 +39,13 @@ describe('modal order license', () => {
     expect(quantityInput).toHaveAttribute('min', '1');
   });
 });
+
+describe('ModalOrderLicenses W3C Validation', () => {
+  // issue with ods on ods-select and option child element
+  it.skip('should have a valid html', async () => {
+    const { container } = render(<ModalOrderLicenses />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/dashboard/users/order-users/__tests__/OrderUsers.modal.spec.tsx

@@ -87,3 +87,13 @@ describe('ModalOrderUsers Component', () => {
     expect(postOrderUsers).toHaveBeenCalledOnce();
   });
 });
+
+describe('ModalOrderUsers W3C Validation', () => {
+  // issue with ods on ods-select and option child element
+  it.skip('should have a valid html', async () => {
+    const { container } = render(<ModalOrderUsers />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/pages/licenses/__tests__/Licenses.spec.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import actions from '@ovh-ux/manager-common-translations/dist/@ovh-ux/manager-common-translations/actions/Messages_fr_FR.json';
 
 import { render, waitFor } from '@/utils/Test.provider';
@@ -24,3 +26,13 @@ describe('Licenses Page', () => {
     expect(sortedRows).toHaveTextContent('service_name');
   });
 });
+
+describe('Licenses W3C Validation', () => {
+  // issue with ods on label and input (for / id)
+  it.skip('should have a valid html', async () => {
+    const { container } = render(<Licenses />);
+    const html = container.innerHTML;
+
+    await expect(html).toBeValidHtml();
+  });
+});

packages/manager/apps/web-office/src/utils/test.setup.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import type { ResponsiveContainerProps } from 'recharts';
 import { afterEach, vi } from 'vitest';
 
+import '@ovh-ux/manager-static-analysis-kit/tests/html-w3c-tests-setup';
+
 import {
   licensesMock,
   licensesPrepaidExpandedMock,

packages/manager/apps/web-office/vitest.config.js

@@ -1,15 +1,18 @@
 import path from 'path';
+
 import {
-  sharedConfig,
-  mergeConfig,
-  createConfig, 	defaultDedupedDependencies,
+  createConfig,
+  defaultDedupedDependencies,
   defaultExcludedFiles,
+  mergeConfig,
+  sharedConfig,
 } from '@ovh-ux/manager-tests-setup';
 
 export default mergeConfig(
   sharedConfig,
   createConfig({
     test: {
+      environment: 'jsdom',
       setupFiles: ['src/utils/test.setup.tsx'],
       coverage: {
         exclude: [
@@ -25,7 +28,8 @@ export default mergeConfig(
         ],
       },
     },
-    resolve: { dedupe: [...defaultDedupedDependencies], 
+    resolve: {
+      dedupe: [...defaultDedupedDependencies],
       alias: {
         '@/public': path.resolve(__dirname, 'public'),
         '@': path.resolve(__dirname, 'src'),