Fix/graphic tests

.gitignore

@@ -27,6 +27,7 @@ venv
 .pytest_cache
 __snapshots__
 coverage
+.nuxtrc
 *.db
 package-lock.json
 /build

nuxt.config.js

@@ -5,30 +5,40 @@
 import package_json from "./package.json";
 
 const __dirname = import.meta.dirname;
+console.log(`Loading Nuxt config: ${import.meta.url}`);
+
+const sharedAlias = {
+  "@ogw_front": path.resolve(__dirname, "app"),
+  "@ogw_internal": path.resolve(__dirname, "internal"),
+  "@ogw_server": path.resolve(__dirname, "server"),
+  "@ogw_tests": path.resolve(__dirname, "tests"),
+};
 const oneMinute = 60_000;
 
 export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       COMMAND_BACK: "opengeodeweb-back",
       COMMAND_VIEWER: "opengeodeweb-viewer",
+      DATA_FOLDER_PATH: path.join("tests", "integration", "data", "uploads"),
       NUXT_ROOT_PATH: __dirname,
       MODE: process.env.MODE || "CLOUD",
       PROJECT: package_json.name,
     },
   },
 
-  modules: [["@pinia/nuxt", { autoImports: ["defineStore", "storeToRefs"] }], "@vueuse/nuxt"],
+  modules: [
+    ["@pinia/nuxt", { autoImports: ["defineStore", "storeToRefs"] }],
+    "@vueuse/nuxt",
+    "vuetify-nuxt-module",
+  ],
   imports: {
     scan: false,
   },
 
-  alias: {
-    "@ogw_front": path.resolve(__dirname, "app"),
-    "@ogw_internal": path.resolve(__dirname, "internal"),
-    "@ogw_server": path.resolve(__dirname, "server"),
-    "@ogw_tests": path.resolve(__dirname, "tests"),
-  },
+  ssr: false,
+
+  alias: sharedAlias,
 
   // ** Global CSS
   css: ["vuetify/lib/styles/main.sass"],
@@ -61,16 +71,36 @@
   },
 
   vite: {
+    alias: sharedAlias,
+    build: {
+      sourcemap: process.env.NODE_ENV === "test",
+    },
     optimizeDeps: {
       include: [
         "ajv",
+        "dexie",
         "fast-deep-equal",
         "globalthis",
         "h3",
+        "get-port-please",
         "js-file-download",
         "lodash",
+        "lodash/merge",
+        "realistic-structured-clone",
         "seedrandom",
+        "spark-md5",
+        "util",
+        "ws",
+        "xmlbuilder2",
       ],
     },
+    server: {
+      fs: {
+        allow: [
+          path.resolve(__dirname, "../../node_modules/@fontsource"),
+          path.resolve(__dirname, "../../node_modules/@mdi/font"),
+        ],
+      },
+    },
   },
 });

package.json

@@ -28,8 +28,10 @@
     "build:microservices": "concurrently \"npm run build:back\" \"npm run build:viewer\"",
     "test": "npm run test:unit",
     "tests": "vitest --config ./tests/vitest.config.js",
-    "test:unit": "npm run tests --project unit",
+    "test:browser": "npm run tests --project browser",
     "test:integration": "npm run tests --project integration",
+    "test:e2e": "npm run tests --project e2e",
+    "test:unit": "npm run tests --project unit",
     "geode_objects": "node scripts/generate_geode_objects.js && prettier ./assets/geode_objects.js --write",
     "build": ""
   },
@@ -69,20 +71,25 @@
     "wslink": "1.12.4"
   },
   "devDependencies": {
-    "@nuxt/test-utils": "3.21.0",
+    "@nuxt/test-utils": "4.0.2",
     "@pinia/testing": "1.0.3",
     "@vitejs/plugin-vue": "6.0.4",
+    "@vitest/browser": "4.1.4",
+    "@vitest/browser-playwright": "4.1.4",
     "@vue/test-utils": "2.4.6",
-    "happy-dom": "20.0.11",
+    "cross-env": "10.0.0",
+    "happy-dom": "20.8.9",
     "msw": "2.11.1",
-    "playwright-core": "1.52.0",
+    "playwright": "1.59.1",
+    "playwright-core": "1.59.1",
     "resize-observer-polyfill": "1.5.1",
     "unplugin-auto-import": "20.0.0",
     "vite": "7.3.1",
-    "vite-plugin-vuetify": "2.1.1",
-    "vitest": "4.0.15",
-    "vitest-environment-nuxt": "1.0.1",
-    "vitest-indexeddb": "0.0.1"
+    "vite-plugin-node-polyfills": "0.26.0",
+    "vite-plugin-vuetify": "2.1.3",
+    "vitest": "4.1.4",
+    "vitest-browser-vue": "2.1.0",
+    "vitest-indexeddb": "0.0.2"
   },
   "overrides": {
     "vue": "latest"

tests/e2e/app/pages/index.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { Status } from "@ogw_front/utils/status";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useInfraStore } from "@ogw_front/stores/infra";
+import { useMenuStore } from "@ogw_front/stores/menu";
+
+import HybridRenderingView from "@ogw_front/components/HybridRenderingView";
+import ViewerUI from "@ogw_front/components/Viewer/Ui";
+
+const menuStore = useMenuStore();
+const infraStore = useInfraStore();
+const dataStore = useDataStore();
+
+const containerWidth = ref(0);
+const containerHeight = ref(0);
+const cardContainer = useTemplateRef("cardContainer");
+const viewerUI = useTemplateRef("viewerUI");
+
+const { display_menu } = storeToRefs(menuStore);
+
+async function handleTreeMenu({ event, itemId, context_type, modelId }) {
+  const rect = cardContainer.value.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const yUI = event.clientY - rect.top;
+
+  const meta_data =
+    context_type === "model_component"
+      ? {
+          viewer_type: "model_component",
+          geode_object_type: "component",
+          modelId,
+          pickedComponentId: itemId,
+        }
+      : await dataStore.item(itemId);
+
+  menuStore.openMenu(
+    itemId,
+    x,
+    yUI,
+    containerWidth.value,
+    containerHeight.value,
+    rect.top,
+    rect.left,
+    meta_data,
+  );
+}
+
+async function openMenu(event) {
+  const rect = cardContainer.value.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const yPicking = containerHeight.value - (event.clientY - rect.top);
+  const yUI = event.clientY - rect.top;
+
+  const { id: pickedId, viewer_id } = await viewerUI.value.get_viewer_id(x, yPicking);
+  if (!pickedId) {
+    return;
+  }
+  const item = await dataStore.item(pickedId);
+
+  if (item.viewer_type === "model" && viewer_id !== undefined) {
+    const component = await dataStore.getComponentByViewerId(pickedId, viewer_id);
+    if (component) {
+      item.pickedComponentId = component.geode_id;
+    }
+  }
+
+  menuStore.openMenu(
+    pickedId,
+    x,
+    yUI,
+    containerWidth.value,
+    containerHeight.value,
+    rect.top,
+    rect.left,
+    item,
+  );
+}
+
+const { width: elWidth, height: elHeight } = useElementSize(cardContainer);
+
+watch([elWidth, elHeight], ([width, height]) => {
+  containerWidth.value = width;
+  containerHeight.value = height;
+});
+
+onMounted(() => {
+  infraStore.create_backend();
+});
+</script>
+
+<template>
+  <div
+    v-if="infraStore.status === Status.CREATED"
+    ref="cardContainer"
+    style="width: 100%; height: 100vh"
+    @contextmenu.prevent="openMenu"
+  >
+    <HybridRenderingView />
+  </div>
+</template>

tests/e2e/app/plugins/microservices.client.js

@@ -0,0 +1,12 @@
+import { useGeodeStore } from "@ogw_front/stores/geode";
+import { useInfraStore } from "@ogw_front/stores/infra";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+export default defineNuxtPlugin(() => {
+  const geodeStore = useGeodeStore();
+  const infraStore = useInfraStore();
+  const viewerStore = useViewerStore();
+
+  infraStore.register_microservice(geodeStore);
+  infraStore.register_microservice(viewerStore);
+});

tests/e2e/cells.nuxt.test.js

@@ -0,0 +1,46 @@
+// Node imports
+import path from "node:path";
+
+// Third party imports
+import { beforeAll, describe, expect, test } from "vitest";
+import { createPage, setup, url } from "@nuxt/test-utils/e2e";
+
+import { setupIntegrationTests } from "@ogw_tests/integration/setup";
+
+// Local imports
+
+const timeout = 180_000; // increased
+const INTERVAL_TIMEOUT = 180_000; // for beforeAll
+
+await setup({
+  rootDir: path.resolve(import.meta.dirname),
+  server: true,
+  browser: true,
+  setupTimeout: 80_000,
+});
+
+const file_name = "test.og_rgd2d";
+const geode_object = "RegularGrid2D";
+let id = "",
+  projectFolderPath = "";
+
+beforeAll(async () => {
+  id = "";
+  projectFolderPath = "";
+  await setupIntegrationTests(file_name, geode_object);
+}, INTERVAL_TIMEOUT);
+
+describe("Dashboard E2E – Real Nitro Backend + Playwright Browser", () => {
+  test(
+    "HybridRenderingView component renders",
+    async () => {
+      const page = await createPage(url("/"));
+      console.log("→ Page opened. Waiting for full load and rendering...");
+      await page.waitForLoadState("networkidle", { timeout: 90_000 });
+      page.waitForTimeout(5000);
+      console.log("→ Taking screenshot...");
+      await expect(page).toMatchScreenshot("hybrid-rendering-view");
+    },
+    timeout,
+  );
+});

tests/e2e/global_setup.js

@@ -0,0 +1,23 @@
+import { buildNuxt, loadNuxt } from "@nuxt/kit";
+import path from "node:path";
+import { setupActivePinia } from "@ogw_tests/utils";
+
+let nuxt = undefined;
+
+export default async function setup() {
+  console.log("FROM SETUP.JS - Current Directory:", import.meta.dirname);
+  await setupActivePinia();
+  nuxt = await loadNuxt({
+    rootDir: path.resolve(import.meta.dirname),
+    server: true,
+    dev: true,
+    dotenv: { env: { MODE: "BROWSER" } },
+  });
+  console.log("FROM SETUP.JS - buildNuxt", import.meta.dirname);
+  await buildNuxt(nuxt);
+
+  await nuxt.server?.listen();
+
+  process.env.NUXT_TEST_URL = `http://localhost:${nuxt.options.devServer.port}`;
+  console.log("✓ Nuxt ready at", process.env.NUXT_TEST_URL);
+}

tests/e2e/nuxt.config.js

@@ -0,0 +1,24 @@
+import path from "node:path";
+
+const __dirname = import.meta.dirname;
+console.log(`Loading Nuxt config: ${import.meta.url}`);
+const rootNuxtConfigPath = path.resolve(__dirname, "../..", "nuxt.config.js");
+const workspaceNodeModules = path.resolve(__dirname, "../../../../node_modules");
+
+export default defineNuxtConfig({
+  devtools: false,
+  extends: [rootNuxtConfigPath],
+  compatibilityDate: "2026-04-15",
+
+  modules: [["@pinia/nuxt", { autoImports: ["defineStore", "storeToRefs"] }], "@vueuse/nuxt"],
+  vite: {
+    define: {
+      name: "true",
+    },
+    server: {
+      fs: {
+        allow: [".", workspaceNodeModules],
+      },
+    },
+  },
+});

tests/e2e/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@geode/opengeodeweb-front/tests/e2e",
+  "version": "0.0.0",
+  "scripts": {
+    "build:browser": "cross-env MODE=BROWSER nuxi build",
+    "dev": "cross-env MODE=BROWSER nuxt dev"
+  }
+}

tests/e2e/test.test.js

@@ -0,0 +1,8 @@
+import { createPage, setup } from "@nuxt/test-utils/e2e";
+import { test } from "vitest";
+
+await setup();
+
+test("should run without error", async () => {
+  await createPage("/");
+}, 5000);

tests/integration/stores/viewer.nuxt.test.js

@@ -7,7 +7,7 @@
 // Local imports
 import { Status } from "@ogw_front/utils/status";
 import { cleanupBackend } from "@ogw_front/utils/local/cleanup";
-import { runMicroservices } from "@ogw_tests/integration/setup";
+// import { runMicroservices } from "@ogw_tests/integration/setup";
 import { setupActivePinia } from "@ogw_tests/utils";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -15,10 +15,10 @@
 
 let projectFolderPath = "";
 
 beforeAll(async () => {
   setupActivePinia();
-  ({ projectFolderPath } = await runMicroservices());
+  // ({ projectFolderPath } = await runMicroservices());
 });
 
 afterAll(async () => {
   await cleanupBackend(projectFolderPath);