test: add vitest smoke coverage for core routes

Author: Flatlogic Bot

package-lock.json

@@ -11,7 +11,8 @@
     "preview": "vite preview",
     "lint": "cross-env NODE_ENV=development BABEL_ENV=development eslint src --ext .js,.jsx",
     "lint:fix": "cross-env NODE_ENV=development BABEL_ENV=development eslint src --ext .js,.jsx --fix",
-    "test": "echo \"Tests are not configured yet\" && exit 0",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "format": "prettier --write src/"
   },
   "dependencies": {
@@ -95,7 +96,9 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
+    "jsdom": "^25.0.1",
     "sass": "^1.81.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vitest": "^2.1.8"
   }
 }

package.json

@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom/vitest';
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+vi.mock('uuid', () => ({
+  v4: () => 'test-uuid',
+  default: {
+    v4: () => 'test-uuid',
+  },
+}));
+
+if (!window.matchMedia) {
+  window.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+}
+
+if (!window.ResizeObserver) {
+  window.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}
+
+if (!window.IntersectionObserver) {
+  window.IntersectionObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}
+
+if (!window.HTMLElement.prototype.scrollTo) {
+  window.HTMLElement.prototype.scrollTo = () => {};
+}

src/test/setup.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import Dashboard from '../../pages/dashboard/Dashboard';
+import { renderWithProviders } from '../utils/renderWithProviders';
+
+vi.mock('@mui/icons-material', () =>
+  new Proxy(
+    { __esModule: true },
+    {
+      get: (_target, prop) => {
+        if (prop === '__esModule') {
+          return true;
+        }
+        if (prop === 'then') {
+          return undefined;
+        }
+        return () => null;
+      },
+      has: (_target, prop) => prop !== 'then',
+    },
+  ),
+);
+
+describe('Dashboard Smoke', () => {
+  it('renders key dashboard widgets', () => {
+    renderWithProviders(<Dashboard />, { route: '/app/dashboard' });
+
+    expect(screen.getByText(/support tracker/i)).toBeInTheDocument();
+    expect(screen.getByText(/revenue breakdown/i)).toBeInTheDocument();
+  });
+});

src/test/smoke/dashboard.smoke.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import Login from '../../pages/login/Login';
+import { renderWithProviders } from '../utils/renderWithProviders';
+
+describe('Login Smoke', () => {
+  it('renders login screen with main controls', () => {
+    renderWithProviders(<Login />, { route: '/login' });
+
+    expect(screen.getByRole('tab', { name: /login/i })).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/email adress/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /forgot password/i }),
+    ).toBeInTheDocument();
+  });
+});

src/test/smoke/login.smoke.test.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { Route, Routes } from 'react-router-dom';
+
+import UsersTable from '../../pages/CRUD/Users/table/UsersTable.js';
+import UsersFormPage from '../../pages/CRUD/Users/form/UsersFormPage.js';
+import { renderWithProviders } from '../utils/renderWithProviders';
+
+describe('Users Smoke', () => {
+  it('renders users table and mock data', async () => {
+    renderWithProviders(<UsersTable />, { route: '/app/users' });
+
+    expect(screen.getByRole('button', { name: /^new$/i })).toBeInTheDocument();
+    expect(await screen.findByText('Admin')).toBeInTheDocument();
+  });
+
+  it('renders users edit form route', async () => {
+    const editRoute = (
+      <Routes>
+        <Route path='/app/users/:id/edit' element={<UsersFormPage />} />
+      </Routes>
+    );
+
+    renderWithProviders(
+      editRoute,
+      { route: '/app/users/1/edit' },
+    );
+
+    expect(await screen.findByText(/edit users/i)).toBeInTheDocument();
+    expect(await screen.findByDisplayValue('Admin')).toBeInTheDocument();
+  });
+});

src/test/smoke/users.smoke.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider as ThemeProviderV5 } from '@mui/material/styles';
+import { StyledEngineProvider } from '@mui/material/styles';
+
+import { LayoutProvider } from '../../context/LayoutContext';
+import { UserProvider } from '../../context/UserContext';
+import { ManagementProvider } from '../../context/ManagementContext';
+import {
+  ThemeProvider as ThemeChangeProvider,
+  ThemeStateContext,
+} from '../../context/ThemeContext';
+
+function Providers({ children, route = '/' }) {
+  localStorage.setItem('theme', 'default');
+
+  return (
+    <MemoryRouter initialEntries={[route]}>
+      <LayoutProvider>
+        <UserProvider>
+          <StyledEngineProvider injectFirst>
+            <ThemeChangeProvider>
+              <ThemeStateContext.Consumer>
+                {(theme) => (
+                  <ThemeProviderV5 theme={theme}>
+                    <ManagementProvider>{children}</ManagementProvider>
+                  </ThemeProviderV5>
+                )}
+              </ThemeStateContext.Consumer>
+            </ThemeChangeProvider>
+          </StyledEngineProvider>
+        </UserProvider>
+      </LayoutProvider>
+    </MemoryRouter>
+  );
+}
+
+function renderWithProviders(ui, options = {}) {
+  const { route = '/', ...rest } = options;
+  return render(ui, {
+    wrapper: ({ children }) => <Providers route={route}>{children}</Providers>,
+    ...rest,
+  });
+}
+
+export { Providers, renderWithProviders };

src/test/utils/renderWithProviders.jsx

@@ -34,7 +34,7 @@ export default defineConfig(({ mode }) => ({
   },
   esbuild: {
     loader: 'jsx',
-    include: /src\/.*\.js$/,
+    include: /src\/.*\.[jt]sx?$/,
     exclude: [],
   },
   resolve: {
@@ -71,4 +71,11 @@ export default defineConfig(({ mode }) => ({
   server: {
     port: 3000,
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.js',
+    css: true,
+    fileParallelism: false,
+  },
 }));