Well completion unit tests (equinor#378)

Author: avanti-em

.babelrc.json

@@ -1,17 +1,19 @@
 {
     "presets": [
-     ["@babel/preset-env",
-      {
-        "targets": {
-          "esmodules": true
-        }
-     }] ,
-      "@babel/preset-react",
-      "@babel/preset-typescript"
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "esmodules": true
+                }
+            }
+        ],
+        "@babel/preset-react",
+        "@babel/preset-typescript"
     ],
     "plugins": [
-      ["@babel/plugin-proposal-class-properties", { "loose": true }],
-      ["@babel/plugin-proposal-private-methods", { "loose": true }],
-      ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        ["@babel/plugin-proposal-private-methods", { "loose": true }],
+        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
     ]
 }

__mocks__/fileMock.js

@@ -0,0 +1,5 @@
+/**
+ * Jest doesn't works with JSX which imports CSS
+ * https://jestjs.io/docs/webpack
+ */
+module.exports = "test-file-stub";

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

config/babel.config.json

@@ -0,0 +1,19 @@
+{
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "esmodules": true
+                }
+            }
+        ],
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+    ],
+    "plugins": [
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        ["@babel/plugin-proposal-private-methods", { "loose": true }],
+        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
+    ]
+}

jest.config.js

@@ -0,0 +1,18 @@
+/**
+ * The jest tests had an error: SyntaxError: Cannot use import statement outside a module
+ * After some investigation, it leads to this page https://github.com/facebook/jest/issues/9395.
+ */
+module.exports = {
+    moduleNameMapper: {
+        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+            "<rootDir>/__mocks__/fileMock.js",
+        "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
+    },
+    transform: {
+        "\\.(js|ts|jsx|tsx)$": [
+            "babel-jest",
+            { configFile: "./config/babel.config.json" },
+        ],
+    },
+    transformIgnorePatterns: ["<rootDir>/node_modules/(?!(@webviz)/)"],
+};

package-lock.json

@@ -80,11 +80,13 @@
         "@storybook/react": "^6.2.9",
         "@testing-library/jest-dom": "^5.11.9",
         "@testing-library/react": "^11.2.5",
+        "@testing-library/user-event": "^13.1.9",
         "@types/jest": "^26.0.20",
         "@typescript-eslint/eslint-plugin": "^4.19.0",
         "@typescript-eslint/parser": "^4.19.0",
         "ace-builds": "^1.4.12",
         "addon-redux": "^1.1.0",
+        "babel-jest": "^26.6.3",
         "babel-loader": "^8.1.0",
         "copyfiles": "^2.0.0",
         "core-js": "^3.9.1",

package.json

@@ -22,9 +22,8 @@ const LayerSettingsButton: React.FC<Props> = React.memo(
         const classes = useStyles();
         const spec = useSelector((st: MapState) => st.spec);
         const layerVisibility = useMemo(() => getLayerVisibility(spec), [spec]);
-        const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(
-            null
-        );
+        const [anchorEl, setAnchorEl] =
+            React.useState<null | HTMLElement>(null);
 
         // handlers
         const handleClick = useCallback(

src/lib/components/DeckGLMap/components/settings/LayerSettingsButton.tsx

@@ -0,0 +1,24 @@
+import "@testing-library/jest-dom/extend-expect";
+import { fireEvent, render, screen } from "@testing-library/react";
+import "jest-styled-components";
+import React from "react";
+import { testStore, Wrapper } from "../../test/TestWrapper";
+import FilterMenu from "./FilterMenu";
+
+describe("Test Filter Menu", () => {
+    it("snapshot test", () => {
+        const { container } = render(Wrapper({ children: <FilterMenu /> }));
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it("click to open filter menu and dispatch redux action", async () => {
+        render(<FilterMenu />, {
+            wrapper: Wrapper,
+        });
+        fireEvent.click(screen.getByTestId("filter_button"));
+        expect(testStore.dispatch).toHaveBeenCalledTimes(1);
+        expect(testStore.dispatch).toBeCalledWith({
+            payload: true,
+            type: "ui/updateIsDrawerOpen",
+        });
+    });
+});