Fix/graphic tests

package.json

@@ -28,8 +28,9 @@
     "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:unit": "npm run tests --project unit",
     "geode_objects": "node scripts/generate_geode_objects.js && prettier ./assets/geode_objects.js --write",
     "build": ""
   },
@@ -66,26 +67,23 @@
     "wslink": "1.12.4"
   },
   "devDependencies": {
-    "@nuxt/test-utils": "3.21.0",
+    "@nuxt/test-utils": "4.0.0",
     "@pinia/testing": "1.0.3",
     "@vitejs/plugin-vue": "6.0.4",
+    "@vitest/browser": "4.1.2",
+    "@vitest/browser-playwright": "4.1.2",
+    "@vitest/browser-preview": "4.1.2",
     "@vue/test-utils": "2.4.6",
-    "eslint": "9.26.0",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-nuxt": "4.0.0",
-    "eslint-plugin-prettier": "5.4.0",
-    "eslint-plugin-prettier-vue": "5.0.0",
-    "eslint-plugin-vue": "10.1.0",
-    "eslint-plugin-vuetify": "2.5.2",
-    "happy-dom": "20.0.11",
+    "happy-dom": "20.8.9",
     "msw": "2.11.1",
-    "playwright-core": "1.52.0",
-    "prettier": "3.3.3",
+    "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": "4.1.2",
+    "vitest-browser-vue": "2.1.0",
     "vitest-environment-nuxt": "1.0.1",
     "vitest-indexeddb": "0.0.1"
   },

tests/browser/Viewer/Options/color_picker.test.js

@@ -0,0 +1,14 @@
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-vue";
+
+import ColorPicker from "@/components/Viewer/Options/ColorPicker";
+import { vuetify } from "@ogw_tests/utils";
+
+test("Graphic test for ColorPicker", async () => {
+  const component = await render(ColorPicker, {
+    global: {
+      plugins: [vuetify],
+    },
+  });
+  await expect(component.container).toMatchScreenshot();
+});

tests/browser/Viewer/Options/visibility_switch.test.js

@@ -0,0 +1,14 @@
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-vue";
+
+import VisibilitySwitch from "@/components/Viewer/Options/VisibilitySwitch";
+import { vuetify } from "@ogw_tests/utils";
+
+test("Graphic test for VisibilitySwitch", async () => {
+  const component = await render(VisibilitySwitch, {
+    global: {
+      plugins: [vuetify],
+    },
+  });
+  await expect(component.container).toMatchScreenshot("VisibilitySwitch");
+});

tests/browser/cells.test.js

@@ -0,0 +1,157 @@
+// Third party imports
+import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json" with { type: "json" };
+
+// Local imports
+import { Status } from "@ogw_front/utils/status";
+import { cleanupBackend } from "@ogw_front/utils/local/cleanup";
+import { setupIntegrationTests } from "@ogw_tests/integration/setup";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const INTERVAL_TIMEOUT = 60_000;
+const mesh_cells_schemas = viewer_schemas.opengeodeweb_viewer.mesh.cells;
+const file_name = "test.og_rgd2d";
+const geode_object = "RegularGrid2D";
+const vertex_attribute = { name: "points" };
+const cell_attribute = { name: "RGB_data" };
+
+let id = "",
+  projectFolderPath = "";
+
+beforeAll(async () => {
+  id = "";
+  projectFolderPath = "";
+  ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
+}, INTERVAL_TIMEOUT);
+
+afterAll(async () => {
+  console.log("afterAll mesh cells kill", projectFolderPath);
+  await cleanupBackend(projectFolderPath);
+});
+
+describe("Mesh cells", () => {
+  describe("Cells visibility", () => {
+    test("Visibility true", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const visibility = true;
+      const spy = vi.spyOn(viewerStore, "request");
+      const result = dataStyleStore.setMeshCellsVisibility(id, visibility);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(spy).toHaveBeenCalledWith(
+        mesh_cells_schemas.visibility,
+        { id, visibility },
+        {
+          response_function: expect.any(Function),
+        },
+      );
+      expect(dataStyleStore.meshCellsVisibility(id)).toBe(visibility);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+  });
+
+  describe("Cells color", () => {
+    test("Color red", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const color = { r: 255, g: 0, b: 0 };
+      const spy = vi.spyOn(viewerStore, "request");
+      const result = dataStyleStore.setMeshCellsColor(id, color);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(spy).toHaveBeenCalledWith(
+        mesh_cells_schemas.color,
+        { id, color },
+        {
+          response_function: expect.any(Function),
+        },
+      );
+      expect(dataStyleStore.meshCellsColor(id)).toStrictEqual(color);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+  });
+
+  describe("Cells vertex attribute", () => {
+    test("Coloring vertex attribute", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const spy = vi.spyOn(viewerStore, "request");
+      const result = dataStyleStore.setMeshCellsVertexAttributeName(id, vertex_attribute.name);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(spy).toHaveBeenCalledWith(
+        mesh_cells_schemas.attribute.vertex.name,
+        { id, ...vertex_attribute },
+        {
+          response_function: expect.any(Function),
+        },
+      );
+      expect(dataStyleStore.meshCellsVertexAttributeName(id)).toBe(vertex_attribute.name);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+  });
+
+  describe("Cells cell attribute", () => {
+    test("Coloring cell attribute", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const spy = vi.spyOn(viewerStore, "request");
+      const result = dataStyleStore.setMeshCellsCellAttributeName(id, cell_attribute.name);
+      expect(result).toBeInstanceOf(Promise);
+      await result;
+      expect(spy).toHaveBeenCalledWith(
+        mesh_cells_schemas.attribute.cell.name,
+        { id, ...cell_attribute },
+        {
+          response_function: expect.any(Function),
+        },
+      );
+      expect(dataStyleStore.meshCellsCellAttributeName(id)).toBe(cell_attribute.name);
+      expect(viewerStore.status).toBe(Status.CONNECTED);
+    });
+  });
+
+  describe("Cells active coloring", () => {
+    test("test coloring", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const viewerStore = useViewerStore();
+      const coloringTypes = [
+        { name: "color" },
+        {
+          name: "vertex",
+          function: () => dataStyleStore.setMeshCellsVertexAttributeName(id, vertex_attribute.name),
+        },
+        {
+          name: "cell",
+          function: () => dataStyleStore.setMeshCellsCellAttributeName(id, cell_attribute.name),
+        },
+      ];
+      async function testColoring(coloringType, expectedColoringType) {
+        if (coloringType.function) {
+          await coloringType.function();
+        }
+        const result = dataStyleStore.setMeshCellsActiveColoring(id, coloringType.name);
+        expect(result).toBeInstanceOf(Promise);
+        await result;
+        expect(dataStyleStore.meshCellsActiveColoring(id)).toBe(expectedColoringType);
+        expect(viewerStore.status).toBe(Status.CONNECTED);
+      }
+
+      await testColoring(coloringTypes[0], "color");
+      await testColoring(coloringTypes[1], "vertex");
+      await testColoring(coloringTypes[2], "cell");
+    });
+  });
+
+  test("Cells apply default style", async () => {
+    const dataStyleStore = useDataStyleStore();
+    const viewerStore = useViewerStore();
+    const result = dataStyleStore.applyMeshCellsStyle(id);
+    expect(result).toBeInstanceOf(Promise);
+    await result;
+    expect(viewerStore.status).toBe(Status.CONNECTED);
+  });
+});