Node Info Selector test (#589)

Co-authored-by: Håvard Bjerke <[email protected]>
equinor · Oct 5, 2021 · 3e4c2d7 · 3e4c2d7
1 parent 00c2bde
commit 3e4c2d7
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 0 deletions.
diff --git a/react/src/lib/components/GroupTree/components/Settings/NodeInfoSelector.test.tsx b/react/src/lib/components/GroupTree/components/Settings/NodeInfoSelector.test.tsx
@@ -0,0 +1,39 @@
+import "@testing-library/jest-dom/extend-expect";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "jest-styled-components";
+import React from "react";
+import { testStore, Wrapper } from "../../test/TestWrapper";
+import NodeInfoSelector from "./NodeInfoSelector";
+
+const node_options = [
+    { name: "pressure", label: "Pressure" },
+    { name: "bhp", label: "Bottom Hole Pressure" },
+];
+
+describe("Test flow rate selector component", () => {
+    it("snapshot test", () => {
+        const { container } = render(
+            Wrapper({
+                children: <NodeInfoSelector node_options={node_options} />,
+            })
+        );
+        expect(container.firstChild).toMatchSnapshot();
+    });
+    it("select 'Pressure' option to dispatch redux action", async () => {
+        render(
+            Wrapper({
+                children: <NodeInfoSelector node_options={node_options} />,
+            })
+        );
+        userEvent.selectOptions(
+            screen.getByRole("combobox", { name: "Node Data" }),
+            "pressure"
+        );
+        expect(testStore.dispatch).toHaveBeenCalledTimes(1);
+        expect(testStore.dispatch).toHaveBeenCalledWith({
+            payload: "pressure",
+            type: "ui/updateCurrentNodeInfo",
+        });
+    });
+});
diff --git a/...lib/components/GroupTree/components/Settings/__snapshots__/NodeInfoSelector.test.tsx.snap b/...lib/components/GroupTree/components/Settings/__snapshots__/NodeInfoSelector.test.tsx.snap
@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test flow rate selector component snapshot test 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  margin: 0;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  font-family: Equinor;
+  font-size: 0.750rem;
+  font-weight: 500;
+  line-height: 1.333em;
+  text-align: left;
+  margin-left: 8px;
+  margin-right: 8px;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c2 {
+  margin: 0;
+}
+
+.c3 {
+  border: none;
+  border-radius: 0;
+  box-shadow: inset 0 -1px 0 0 var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
+  margin: 0;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  font-family: Equinor;
+  font-size: 1.000rem;
+  font-weight: 400;
+  line-height: 1.500em;
+  -webkit-letter-spacing: 0.025em;
+  -moz-letter-spacing: 0.025em;
+  -ms-letter-spacing: 0.025em;
+  letter-spacing: 0.025em;
+  text-align: left;
+  padding-right: calc(8px *2 + 24px);
+  display: block;
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"), linear-gradient( to bottom, var(--eds_ui_background__light,rgba(247,247,247,1)) 0%, var(--eds_ui_background__light,rgba(247,247,247,1)) 100% );
+  background-repeat: no-repeat,repeat;
+  background-position: right 8px top 50%;
+  width: 100%;
+}
+
+.c3:active,
+.c3:focus {
+  box-shadow: none;
+  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  outline-offset: 0px;
+}
+
+.c3:disabled {
+  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"), linear-gradient( to bottom, var(--eds_ui_background__light,rgba(247,247,247,1)) 0%, var(--eds_ui_background__light,rgba(247,247,247,1)) 100% );
+  cursor: not-allowed;
+  box-shadow: none;
+  outline: none;
+}
+
+.c3:disabled .arrow-icon {
+  fill: red;
+}
+
+.c3:disabled:focus,
+.c3:disabled:active {
+  outline: none;
+}
+
+.c0 {
+  min-width: 100px;
+  width: 100%;
+}
+
+<div
+  class="c0 makeStyles-root-1"
+>
+  <label
+    class="c1"
+    for="node-info-selector"
+  >
+    <span
+      class="c2"
+    >
+      Node Data
+    </span>
+  </label>
+  <select
+    class="c3"
+    id="node-info-selector"
+  >
+    <option
+      value="pressure"
+    >
+      Pressure
+    </option>
+    <option
+      value="bhp"
+    >
+      Bottom Hole Pressure
+    </option>
+  </select>
+</div>
+`;