Merge pull request #209 from Exabyte-io/feature/SOF-7326-1

Feature/SOF-7326-1 feat: cleaned version of adding a test for JL

.eslintrc.json

@@ -1,5 +1,6 @@
 {
     "extends": ["@exabyte-io/eslint-config"],
+    "ignorePatterns": ["dist/**/*.js", "dist/**/*.ts"],
     "rules": {
         "jsx-a11y/label-has-associated-control": "off",
         "react/function-component-definition": "off",

dist/components/3d_editor/advanced_geometry/python_transformation/JupyterLiteTransformation.js

@@ -44,7 +44,7 @@ class JupyterLiteTransformationDialog extends BaseJupyterLiteSessionComponent {
                             overflow: "hidden",
                         }, children: _jsx(Paper, { sx: {
                                 height: "100%",
-                            }, children: super.render() }) }), _jsx(Grid, { item: true, container: true, xs: 12, md: 4, alignItems: "center", children: _jsxs(Typography, { variant: "subtitle1", children: ["Output Materials (", _jsx("code", { children: "materials_out" }), ")"] }) }), _jsx(Grid, { item: true, xs: 12, md: 8, children: _jsx(MaterialsSelector, { materials: newMaterials, selectedMaterials: newMaterials, setSelectedMaterials: (newMaterials) => this.setState({ newMaterials }) }) })] }) }));
+                            }, children: super.render() }) }), _jsx(Grid, { item: true, container: true, xs: 12, md: 4, alignItems: "center", children: _jsxs(Typography, { variant: "subtitle1", children: ["Output Materials (", _jsx("code", { children: "materials_out" }), ")"] }) }), _jsx(Grid, { item: true, xs: 12, md: 8, children: _jsx(MaterialsSelector, { materials: newMaterials, selectedMaterials: newMaterials, setSelectedMaterials: (newMaterials) => this.setState({ newMaterials }), testId: "materials-out-selector" }) })] }) }));
     }
 }
 export default JupyterLiteTransformationDialog;

package.json

@@ -62,7 +62,7 @@
         "@mat3ra/code": "*",
         "@mat3ra/made": "*",
         "@exabyte-io/cove.js": "*",
-        "@exabyte-io/standata": "*",
+        "@mat3ra/standata": "*",
         "@mat3ra/esse": "*",
         "react": "^17.0.0",
         "react-dom": "^17.0.0"

src/components/3d_editor/advanced_geometry/python_transformation/JupyterLiteTransformation.tsx

@@ -122,6 +122,7 @@ class JupyterLiteTransformationDialog extends BaseJupyterLiteSessionComponent<
                             materials={newMaterials}
                             selectedMaterials={newMaterials}
                             setSelectedMaterials={(newMaterials) => this.setState({ newMaterials })}
+                            testId="materials-out-selector"
                         />
                     </Grid>
                 </Grid>

tests/cypress.config.ts

@@ -7,6 +7,8 @@ import { defineConfig } from "cypress";
 export default defineConfig({
     e2e: {
         specPattern: "cypress/e2e/**/*.feature",
+        // Reduce security to allow cross-origin JS execution in iframes
+        chromeWebSecurity: false,
         // Due to https://github.com/cypress-io/cypress/issues/22040 in GitHub Actions
         // supportFile: false,
         async setupNodeEvents(

tests/cypress/e2e/menu/advanced/jupyterlite-transformation-dialog.feature

@@ -0,0 +1,60 @@
+Feature: User can open JupyterLite Transformation dialog and create an interface with a jupyter notebook
+
+  Scenario:
+    When I open materials designer page
+    Then I see material designer page
+
+    # Open
+    When I open JupyterLite Transformation dialog
+    Then I see JupyterLite Transformation dialog
+    And I see file "Introduction.ipynb" opened
+
+    # Open notebook
+    When I click on "1.1. Interface creation with Zur and McGill Superlattice (ZSL) algorithm" link
+    Then I see file "create_interface_with_min_strain_zsl.ipynb" opened
+
+
+    # Change code
+    When I set code in the cell "3" to:
+    """
+SUBSTRATE_PARAMETERS = {
+    "MATERIAL_INDEX": 0,
+    "MILLER_INDICES": (1, 1, 1),
+    "THICKNESS": 1,
+}
+
+LAYER_PARAMETERS = {
+    "MATERIAL_INDEX": 0,
+    "MILLER_INDICES": (1, 1, 1),
+    "THICKNESS": 1,
+}
+
+USE_CONVENTIONAL_CELL = True
+    """
+
+    When I set code in the cell "5" to:
+    """
+    INTERFACE_PARAMETERS = {
+    "DISTANCE_Z": 3.0,  # in Angstroms
+    "MAX_AREA": 50,  # in Angstroms^2
+}
+    """
+    Then I see code in the cell "5" is:
+    """
+    INTERFACE_PARAMETERS = {
+    "DISTANCE_Z": 3.0,  # in Angstroms
+    "MAX_AREA": 50,  # in Angstroms^2
+}
+    """
+
+    # Run
+    And I Run All Cells
+    And I see kernel status is Idle
+    And I submit materials
+    Then material with following data exists in state
+      | path              | index   |
+      | si-interface.json | $INT{2} |
+
+
+    # Reset the materials list
+    And I delete materials with index "2"

tests/cypress/fixtures/si-interface.json

@@ -0,0 +1,117 @@
+{
+    "name": "Si4",
+    "basis": {
+        "elements": [
+            {
+                "id": 0,
+                "value": "Si"
+            },
+            {
+                "id": 1,
+                "value": "Si"
+            },
+            {
+                "id": 2,
+                "value": "Si"
+            },
+            {
+                "id": 3,
+                "value": "Si"
+            }
+        ],
+        "coordinates": [
+            {
+                "id": 0,
+                "value": [
+                    0.8333333,
+                    0.5833333,
+                    0.03211513
+                ]
+            },
+            {
+                "id": 1,
+                "value": [
+                    0.5,
+                    0.25,
+                    0
+                ]
+            },
+            {
+                "id": 2,
+                "value": [
+                    0.8333333,
+                    0.5833333,
+                    0.1541721
+                ]
+            },
+            {
+                "id": 3,
+                "value": [
+                    0.5,
+                    0.25,
+                    0.1862872
+                ]
+            }
+        ],
+        "units": "crystal",
+        "cell": [
+            [
+                3.867,
+                0,
+                0
+            ],
+            [
+                1.9335,
+                3.34892,
+                0
+            ],
+            [
+                0,
+                0,
+                24.5787
+            ]
+        ],
+        "constraints": []
+    },
+    "lattice": {
+        "a": 3.867,
+        "b": 3.867,
+        "c": 24.5787,
+        "alpha": 90,
+        "beta": 90,
+        "gamma": 60,
+        "units": {
+            "length": "angstrom",
+            "angle": "degree"
+        },
+        "type": "TRI",
+        "vectors": {
+            "a": [
+                3.867,
+                0,
+                0
+            ],
+            "b": [
+                1.9335,
+                3.34892,
+                0
+            ],
+            "c": [
+                0,
+                0,
+                24.5787
+            ],
+            "alat": 1,
+            "units": "angstrom"
+        }
+    },
+    "isNonPeriodic": false,
+    "_id": "",
+    "metadata": {
+        "boundaryConditions": {
+            "type": "pbc",
+            "offset": 0
+        }
+    },
+    "isUpdated": true
+}

tests/cypress/support/commands.ts

@@ -1,5 +1,7 @@
 /// <reference types="cypress" />
 
+import "@mat3ra/tede/src/js/cypress/commands/until";
+
 // ***********************************************
 // This example commands.ts shows you how to
 // create various custom commands and overwrite

tests/cypress/support/step_definitions/jupyterlite/I Run All Cells.ts

@@ -0,0 +1,10 @@
+import { When } from "@badeball/cypress-cucumber-preprocessor";
+
+import MaterialDesignerPage from "../../widgets/MaterialDesignerPage";
+
+When("I Run All Cells", () => {
+    const { jupyterLiteSession } = new MaterialDesignerPage().designerWidget;
+    jupyterLiteSession.waitForKernelIdleWithRestart();
+    jupyterLiteSession.clickMenu("Run", "Run All Cells");
+    jupyterLiteSession.isKernelBusy();
+});

tests/cypress/support/step_definitions/jupyterlite/I click on link.ts

@@ -0,0 +1,9 @@
+import { When } from "@badeball/cypress-cucumber-preprocessor";
+
+import MaterialDesignerPage from "../../widgets/MaterialDesignerPage";
+
+When("I click on {string} link", (link: string) => {
+    new MaterialDesignerPage().designerWidget.jupyterLiteSession.clickLinkInNotebookByItsTextContent(
+        link,
+    );
+});

tests/cypress/support/step_definitions/jupyterlite/I open JupyterLite Transformation dialog.ts

@@ -0,0 +1,10 @@
+import { When } from "@badeball/cypress-cucumber-preprocessor";
+
+import MaterialDesignerPage from "../../widgets/MaterialDesignerPage";
+
+When("I open JupyterLite Transformation dialog", () => {
+    new MaterialDesignerPage().designerWidget.headerMenu.selectMenuItemByNameAndItemNumber(
+        "Advanced",
+        7,
+    );
+});

tests/cypress/support/step_definitions/jupyterlite/I see JupyterLite Transformation dialog.ts

@@ -0,0 +1,7 @@
+import { When } from "@badeball/cypress-cucumber-preprocessor";
+
+import MaterialDesignerPage from "../../widgets/MaterialDesignerPage";
+
+When("I see JupyterLite Transformation dialog", () => {
+    new MaterialDesignerPage().designerWidget.jupyterLiteTransformationDialog.waitForVisible();
+});

tests/cypress/support/step_definitions/jupyterlite/I see code in the cell is.ts

@@ -0,0 +1,15 @@
+import { When } from "@badeball/cypress-cucumber-preprocessor";
+
+import MaterialDesignerPage from "../../widgets/MaterialDesignerPage";
+
+function normalizeText(code: string) {
+    return code.replace(/\s/g, "");
+}
+
+When("I see code in the cell {string} is:", (index: string, code: string) => {
+    new MaterialDesignerPage().designerWidget.jupyterLiteSession
+        .getCodeFromCell(parseInt(index, 10))
+        .then((cellCode) => {
+            expect(normalizeText(cellCode)).to.equal(normalizeText(code));
+        });
+});

tests/cypress/support/step_definitions/jupyterlite/I see file opened.ts

@@ -0,0 +1,9 @@
+import { When } from "@badeball/cypress-cucumber-preprocessor";
+
+import MaterialDesignerPage from "../../widgets/MaterialDesignerPage";
+
+When("I see file {string} opened", (filename: string) => {
+    const { jupyterLiteSession } = new MaterialDesignerPage().designerWidget;
+    jupyterLiteSession.waitForVisible();
+    jupyterLiteSession.checkFileOpened(filename);
+});

tests/cypress/support/step_definitions/jupyterlite/I see kernel status is.ts

@@ -0,0 +1,8 @@
+import { When } from "@badeball/cypress-cucumber-preprocessor";
+
+import MaterialDesignerPage from "../../widgets/MaterialDesignerPage";
+
+When("I see kernel status is Idle", () => {
+    const { jupyterLiteSession } = new MaterialDesignerPage().designerWidget;
+    return jupyterLiteSession.isKernelIdle();
+});

tests/cypress/support/step_definitions/jupyterlite/I set code in the cell to.ts

@@ -0,0 +1,10 @@
+import { When } from "@badeball/cypress-cucumber-preprocessor";
+
+import MaterialDesignerPage from "../../widgets/MaterialDesignerPage";
+
+When("I set code in the cell {string} to:", (index: string, code: string) => {
+    new MaterialDesignerPage().designerWidget.jupyterLiteSession.setCodeInCell(
+        parseInt(index, 10),
+        code,
+    );
+});

tests/cypress/support/step_definitions/jupyterlite/I submit materials.ts

@@ -0,0 +1,9 @@
+import { When } from "@badeball/cypress-cucumber-preprocessor";
+
+import MaterialDesignerPage from "../../widgets/MaterialDesignerPage";
+
+When("I submit materials", () => {
+    const { jupyterLiteTransformationDialog } = new MaterialDesignerPage().designerWidget;
+    jupyterLiteTransformationDialog.verifyMaterialsOut(1);
+    jupyterLiteTransformationDialog.submit();
+});