Merge pull request #95 from Exabyte-io/test/SOF-6005

SOF-6005

Author: fluoxe7ine

package-lock.json

@@ -3,9 +3,18 @@ import { mount } from "enzyme";
 import React from "react";
 
 import { ThreeDEditor } from "../../../src/components/ThreeDEditor";
-import { ELEMENT_PROPERTIES, MATERIAL_CONFIG } from "../../enums";
+import { ThreejsEditorModal } from "../../../src/components/ThreejsEditorModal";
+import { ELEMENT_PROPERTIES, getWaveInstance, MATERIAL_CONFIG, WAVE_SETTINGS } from "../../enums";
 import { SELECTORS } from "../../selectors";
-import { createElement } from "../../utils";
+import { createElement, takeSnapshotAndAssertEqualityAsync } from "../../utils";
+import { WaveComponent } from "../../../src/components/WaveComponent";
+
+jest.mock("../../../src/components/ThreejsEditorModal", () => ({
+    __esModule: true,
+    ThreejsEditorModal: () => {
+        return <div data-name="threejs-editor-modal-content" />;
+    },
+}));
 
 test("toggleInteractive", () => {
     const container = createElement("div", ELEMENT_PROPERTIES);
@@ -46,3 +55,46 @@ test("toggleView", () => {
     // assert toggle axes button is visible
     expect(wrapper.find(SELECTORS.toggleAxesRoundIconButton).exists()).toBe(true);
 });
+
+test("preserve three.js editor changes", async () => {
+    const container = createElement("div", ELEMENT_PROPERTIES);
+    const wrapper = mount(<ThreeDEditor material={new Made.Material(MATERIAL_CONFIG)} editable />, {
+        attachTo: container,
+    });
+
+    // Click on "interactive" button
+    const interactiveButton = wrapper.find(`${SELECTORS.interactiveIconToolbar} button`);
+    interactiveButton.prop("onClick")();
+    wrapper.update();
+
+    expect(wrapper.find(SELECTORS.threeDEditorIconToolbar).exists()).toBe(true);
+
+    // Click on "Editor" button
+    const threeDEditorButton = wrapper.find(`${SELECTORS.threeDEditorIconToolbar} button`);
+    threeDEditorButton.prop("onClick")();
+    wrapper.update();
+
+    // Simulate modifying materials in the editor
+    const modifiedMaterial = new Made.Material({
+        ...MATERIAL_CONFIG,
+        basis: {
+            ...MATERIAL_CONFIG.basis,
+            coordinates: MATERIAL_CONFIG.basis.coordinates.map((coordinate) => ({
+                ...coordinate,
+                value: coordinate.value.map((axisValue) => axisValue + 0.5),
+            })),
+        },
+    });
+    const threeJsEditorModal = wrapper.find(ThreejsEditorModal);
+    threeJsEditorModal.prop("onHide")(modifiedMaterial);
+    wrapper.update();
+
+    // Get updated instance of wave and compare it with snapshot
+    const { wave } = wrapper.find(WaveComponent).instance();
+    const waveInstance = getWaveInstance(WAVE_SETTINGS, wave.structure);
+
+    return takeSnapshotAndAssertEqualityAsync(
+        waveInstance.renderer.context,
+        "preserveThreeJsEditorChanges",
+    );
+});

tests/__tests__/__snapshots__/centos/preserveThreeJsEditorChanges.expected.png

@@ -24,8 +24,7 @@ export const WAVE_SETTINGS = {
     repetitions: 1,
 };
 
-export function getWaveInstance(settings) {
-    const material = new Made.Material(MATERIAL_CONFIG);
+export function getWaveInstance(settings, material = new Made.Material(MATERIAL_CONFIG)) {
     return new Wave({
         DOMElement: createElement("div", ELEMENT_PROPERTIES),
         structure: material,

tests/__tests__/__snapshots__/macos/preserveThreeJsEditorChanges.expected.png

@@ -3,4 +3,5 @@ export const SELECTORS = {
     exportIconToolbar: '[data-name="Export"]',
     interactiveIconToolbar: '[data-name="Interactive"]',
     toggleAxesRoundIconButton: 'button[aria-label="toggle axes"]',
+    threeDEditorIconToolbar: '[data-name="3DEdit"]',
 };