Fix unit tests

Author: brionmario

frontend/packages/components/package.json

@@ -58,6 +58,7 @@
     "@thunderid/eslint-plugin": "workspace:^",
     "@thunderid/prettier-config": "workspace:^",
     "@thunderid/test-utils": "workspace:^",
+    "@vitest/browser-playwright": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "eslint": "catalog:",

frontend/packages/components/src/Helmet/Helmet.tsx

@@ -76,6 +76,7 @@ export default function Helmet({children}: HelmetProps): null {
       }
 
       const el = document.createElement(type as string);
+      el.setAttribute('data-helmet', 'true');
       applyAttributes(el, props);
 
       if (type === 'style' || type === 'script' || type === 'noscript') {

frontend/packages/components/src/Helmet/__tests__/Helmet.test.tsx

@@ -61,7 +61,7 @@ describe('Helmet', () => {
       </Helmet>,
     );
     await waitFor(() => {
-      const link = document.querySelector('link[rel="icon"]');
+      const link = document.querySelector('link[data-helmet][rel="icon"]');
       expect(link).toBeTruthy();
       expect(link?.getAttribute('href')).toBe('/favicon.ico');
     });
@@ -109,7 +109,7 @@ describe('Helmet', () => {
       </Helmet>,
     );
     await waitFor(() => {
-      const style = document.querySelector('style');
+      const style = document.querySelector('style[data-helmet]');
       expect(style?.textContent).toBe('body { margin: 0; }');
     });
   });

frontend/packages/components/src/lab/components/EmojiPicker/__tests__/EmojiPicker.test.tsx

@@ -21,6 +21,22 @@ import userEvent from '@testing-library/user-event';
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import EmojiPicker from '../EmojiPicker';
 
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string | Record<string, unknown>, options?: Record<string, unknown>) => {
+      const str = typeof fallback === 'string' ? fallback : key;
+      const vars = typeof fallback === 'object' ? fallback : options;
+      if (vars && typeof vars === 'object') {
+        return str.replace(/\{\{(\w+)\}\}/g, (_, k: string) => {
+          const val = vars[k];
+          return typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean' ? String(val) : '';
+        });
+      }
+      return str;
+    },
+  }),
+}));
+
 // The module-level _supportedCategories cache needs to be reset between tests
 // so that the canvas mock only runs once per test. Since jsdom's canvas 2D
 // context is null, getSupportedCategories() falls through to returning all

frontend/packages/components/src/test-setup.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {cleanup} from '@testing-library/react';
+import {afterEach} from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});

frontend/packages/components/vitest.config.ts

@@ -17,6 +17,7 @@
  */
 
 import {resolve} from 'path';
+import {playwright} from '@vitest/browser-playwright';
 import {defineConfig} from 'vitest/config';
 
 export default defineConfig({
@@ -40,7 +41,8 @@ export default defineConfig({
       enabled: true,
       headless: true,
       instances: [{browser: 'chromium'}],
-      provider: 'playwright',
+      provider: playwright(),
     },
+    setupFiles: ['./src/test-setup.ts'],
   },
 });

frontend/packages/configure-agent-types/package.json

@@ -57,6 +57,7 @@
     "@thunderid/prettier-config": "workspace:^",
     "@thunderid/test-utils": "workspace:^",
     "@thunderid/types": "workspace:^",
+    "@vitest/browser-playwright": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "eslint": "catalog:",

frontend/packages/configure-agent-types/src/pages/__tests__/ViewAgentTypePage.test.tsx

@@ -53,15 +53,15 @@ vi.mock('react-router', async () => {
   };
 });
 
-vi.mock('../../api/useGetAgentType', () => ({
+vi.mock('@/api/useGetAgentType', () => ({
   default: (id?: string): unknown => mockUseGetAgentType(id) as unknown,
 }));
 
-vi.mock('../../api/useUpdateAgentType', () => ({
+vi.mock('@/api/useUpdateAgentType', () => ({
   default: (): unknown => mockUseUpdateAgentType() as unknown,
 }));
 
-vi.mock('../../components/edit-agent-type/schema-settings/EditSchemaSettings', () => ({
+vi.mock('@/components/edit-agent-type/schema-settings/EditSchemaSettings', () => ({
   default: ({onPropertiesChange}: {onPropertiesChange: (props: unknown[]) => void}) => (
     <div data-testid="edit-schema-settings">
       <button

frontend/packages/configure-agent-types/vitest.config.ts

@@ -17,6 +17,7 @@
  */
 
 import {resolve} from 'path';
+import {playwright} from '@vitest/browser-playwright';
 import {defineConfig} from 'vitest/config';
 
 export default defineConfig({
@@ -40,7 +41,8 @@ export default defineConfig({
       enabled: true,
       headless: true,
       instances: [{browser: 'chromium'}],
-      provider: 'playwright',
+      provider: playwright(),
     },
+    setupFiles: ['@thunderid/test-utils/setup'],
   },
 });

frontend/packages/configure-organization-units/package.json

@@ -57,6 +57,7 @@
     "@thunderid/prettier-config": "workspace:^",
     "@thunderid/test-utils": "workspace:^",
     "@thunderid/types": "workspace:^",
+    "@vitest/browser-playwright": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "eslint": "catalog:",