Skip to content
This repository has been archived by the owner on Dec 23, 2021. It is now read-only.

Commit

Permalink
UI tests for accelerometer
Browse files Browse the repository at this point in the history
  • Loading branch information
@xnkevinnguyen
xnkevinnguyen committed Mar 24, 2020
1 parent 4c131e8 commit 3d5644a
Show file tree
Hide file tree
Showing 4 changed files with 346 additions and 1 deletion.
44 changes: 44 additions & 0 deletions src/view/components/toolbar/motion/Accelerometer.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -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);
});
});
298 changes: 298 additions & 0 deletions src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -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>
`;
3 changes: 2 additions & 1 deletion src/view/styles/MotionSensorBar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
margin-left: auto;
margin-right: auto;
}

.sensor-button-container {
padding: 10px 0 10px 0;
padding: 10px 0;
}
2 changes: 2 additions & 0 deletions src/view/styles/SensorButton.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

0 comments on commit 3d5644a

Please sign in to comment.