From 3d5644aa167ddb5c425806da0c2e88ffff044409 Mon Sep 17 00:00:00 2001
From: xnkevinnguyen <xuannamkevin@gmail.com>
Date: Tue, 24 Mar 2020 10:45:48 -0700
Subject: [PATCH] UI tests for accelerometer

---
 .../toolbar/motion/Accelerometer.spec.tsx     |  44 +++
 .../__snapshots__/Accelerometer.spec.tsx.snap | 298 ++++++++++++++++++
 src/view/styles/MotionSensorBar.css           |   3 +-
 src/view/styles/SensorButton.css              |   2 +
 4 files changed, 346 insertions(+), 1 deletion(-)
 create mode 100644 src/view/components/toolbar/motion/Accelerometer.spec.tsx
 create mode 100644 src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap

diff --git a/src/view/components/toolbar/motion/Accelerometer.spec.tsx b/src/view/components/toolbar/motion/Accelerometer.spec.tsx
new file mode 100644
index 000000000..ec89b4ebf
--- /dev/null
+++ b/src/view/components/toolbar/motion/Accelerometer.spec.tsx
@@ -0,0 +1,44 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { IntlProvider } from "react-intl";
+import * as testRenderer from "react-test-renderer";
+import { Accelerometer } from "./Accelerometer";
+
+describe("Accelerometer component ", () => {
+    const mockProps = {
+        axisValues: {
+            X_AXIS: 1,
+            Y_AXIS: 0,
+            Z_AXIS: 1,
+        },
+        onUpdateValue: () => {},
+    };
+
+    it("should render correctly", () => {
+        const component = testRenderer
+            .create(
+                <IntlProvider locale="en">
+                    <Accelerometer
+                        axisValues={mockProps.axisValues}
+                        onUpdateValue={mockProps.onUpdateValue}
+                    />
+                </IntlProvider>
+            )
+            .toJSON();
+        expect(component).toMatchSnapshot();
+    });
+
+    it("should render without crashing", () => {
+        const div = document.createElement("div");
+        ReactDOM.render(
+            <IntlProvider locale="en">
+                <Accelerometer
+                    axisValues={mockProps.axisValues}
+                    onUpdateValue={mockProps.onUpdateValue}
+                />
+            </IntlProvider>,
+            div
+        );
+        ReactDOM.unmountComponentAtNode(div);
+    });
+});
diff --git a/src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap b/src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap
new file mode 100644
index 000000000..802e95714
--- /dev/null
+++ b/src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap
@@ -0,0 +1,298 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accelerometer component  should render correctly 1`] = `
+<div
+  className="accelerometer"
+>
+  <br />
+  <div
+    className="gesture"
+    style={
+      Object {
+        "display": "flex",
+        "flexDirection": "column",
+        "height": "75px",
+        "justifyContent": "space-between",
+      }
+    }
+  >
+    <select
+      className="dropdown"
+    >
+      <option
+        value="shake"
+      >
+        shake
+      </option>
+      <option
+        value="up"
+      >
+        up
+      </option>
+      <option
+        value="down"
+      >
+        down
+      </option>
+      <option
+        value="left"
+      >
+        left
+      </option>
+      <option
+        value="right"
+      >
+        right
+      </option>
+      <option
+        value="face up"
+      >
+        face up
+      </option>
+      <option
+        value="face down"
+      >
+        face down
+      </option>
+      <option
+        value="freefall"
+      >
+        freefall
+      </option>
+      <option
+        value="3g"
+      >
+        3g
+      </option>
+      <option
+        value="6g"
+      >
+        6g
+      </option>
+      <option
+        value="8g"
+      >
+        8g
+      </option>
+    </select>
+    <button
+      aria-label="gesture sensor button"
+      className="sensor-button"
+      id="Send Gesture-button"
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+    >
+      Send Gesture
+    </button>
+  </div>
+  <br />
+  <div>
+    <p>
+      Set the acceleration manually here
+    </p>
+  </div>
+  <div
+    className="ThreeDimensionSlider"
+  >
+    <div
+      className="inputSlider"
+    >
+      <span>
+        X
+      </span>
+      <input
+        aria-label="motion_x sensor input X"
+        className="sliderValue"
+        defaultValue="-1,023"
+        onInput={[Function]}
+        onKeyUp={[Function]}
+        pattern="^-?[0-9]{0,4}$"
+        type="text"
+        value={1}
+      />
+      <span
+        className="sliderArea"
+      >
+        <span
+          className="upLabelArea"
+        >
+          <span
+            className="minLabel"
+          >
+            -1023
+          </span>
+          <span
+            className="maxLabel"
+          >
+            1023
+          </span>
+        </span>
+        <input
+          aria-label="motion_x sensor slider"
+          aria-valuemax={1023}
+          aria-valuemin={-1023}
+          aria-valuenow={1}
+          className="slider"
+          defaultValue="-1,023"
+          disabled={false}
+          max={1023}
+          min={-1023}
+          onChange={[Function]}
+          onKeyUp={[Function]}
+          onMouseUp={[Function]}
+          type="range"
+          value={1}
+        />
+        <span
+          className="downLabelArea"
+        >
+          <span
+            className="minLabel"
+          >
+            Left
+          </span>
+          <span
+            className="maxLabel"
+          >
+            Right
+          </span>
+        </span>
+      </span>
+    </div>
+    <br />
+    <div
+      className="inputSlider"
+    >
+      <span>
+        Y
+      </span>
+      <input
+        aria-label="motion_y sensor input Y"
+        className="sliderValue"
+        defaultValue="-1,023"
+        onInput={[Function]}
+        onKeyUp={[Function]}
+        pattern="^-?[0-9]{0,4}$"
+        type="text"
+        value={0}
+      />
+      <span
+        className="sliderArea"
+      >
+        <span
+          className="upLabelArea"
+        >
+          <span
+            className="minLabel"
+          >
+            -1023
+          </span>
+          <span
+            className="maxLabel"
+          >
+            1023
+          </span>
+        </span>
+        <input
+          aria-label="motion_y sensor slider"
+          aria-valuemax={1023}
+          aria-valuemin={-1023}
+          aria-valuenow={0}
+          className="slider"
+          defaultValue="-1,023"
+          disabled={false}
+          max={1023}
+          min={-1023}
+          onChange={[Function]}
+          onKeyUp={[Function]}
+          onMouseUp={[Function]}
+          type="range"
+          value={0}
+        />
+        <span
+          className="downLabelArea"
+        >
+          <span
+            className="minLabel"
+          >
+            Back
+          </span>
+          <span
+            className="maxLabel"
+          >
+            Front
+          </span>
+        </span>
+      </span>
+    </div>
+    <br />
+    <div
+      className="inputSlider"
+    >
+      <span>
+        Z
+      </span>
+      <input
+        aria-label="motion_z sensor input Z"
+        className="sliderValue"
+        defaultValue="-1,023"
+        onInput={[Function]}
+        onKeyUp={[Function]}
+        pattern="^-?[0-9]{0,4}$"
+        type="text"
+        value={1}
+      />
+      <span
+        className="sliderArea"
+      >
+        <span
+          className="upLabelArea"
+        >
+          <span
+            className="minLabel"
+          >
+            -1023
+          </span>
+          <span
+            className="maxLabel"
+          >
+            1023
+          </span>
+        </span>
+        <input
+          aria-label="motion_z sensor slider"
+          aria-valuemax={1023}
+          aria-valuemin={-1023}
+          aria-valuenow={1}
+          className="slider"
+          defaultValue="-1,023"
+          disabled={false}
+          max={1023}
+          min={-1023}
+          onChange={[Function]}
+          onKeyUp={[Function]}
+          onMouseUp={[Function]}
+          type="range"
+          value={1}
+        />
+        <span
+          className="downLabelArea"
+        >
+          <span
+            className="minLabel"
+          >
+            Up
+          </span>
+          <span
+            className="maxLabel"
+          >
+            Down
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/view/styles/MotionSensorBar.css b/src/view/styles/MotionSensorBar.css
index b12a8d829..8ea39c23c 100644
--- a/src/view/styles/MotionSensorBar.css
+++ b/src/view/styles/MotionSensorBar.css
@@ -14,6 +14,7 @@
     margin-left: auto;
     margin-right: auto;
 }
+
 .sensor-button-container {
-    padding: 10px 0 10px 0;
+    padding: 10px 0;
 }
diff --git a/src/view/styles/SensorButton.css b/src/view/styles/SensorButton.css
index a821794ee..21241eca2 100644
--- a/src/view/styles/SensorButton.css
+++ b/src/view/styles/SensorButton.css
@@ -18,10 +18,12 @@
     outline: 2px solid var(--vscode-focusBorder);
     background-color: var(--vscode-button-hoverBackground);
 }
+
 .sensor-button:active,
 .active-button {
     opacity: 0.5;
 }
+
 .sensor-button:hover {
     background-color: var(--vscode-button-hoverBackground);
 }