Add degree input

app/components/nDilation/Calculator.jsx

@@ -22,10 +22,10 @@ function reducer(state, action) {
     }
 }
 
-const createOnSubmitHandler = (fetch, dispatch) => async matrix => {
+const createOnSubmitHandler = (fetch, dispatch) => async (matrix, degree) => {
     try {
         dispatch({ type: "FETCH_START" });
-        const response = await fetchNDilation(fetch, matrix);
+        const response = await fetchNDilation(fetch, matrix, degree);
 
         const body = await response.json();
 

app/components/nDilation/MatrixInput.jsx

@@ -67,13 +67,14 @@ const isSquare = number => number > 0 && Math.sqrt(number) % 1 === 0;
 
 const MatrixInput = ({ onSubmit }) => {
     const [input, setInput] = useState("");
+    const [degree, setDegree] = useState(2);
 
     return (
         <StyledForm
             onSubmit={ev => {
                 ev.preventDefault();
 
-                if (isMatrix(input)) {
+                if (isMatrix(input) && degree > 0) {
                     const withDotAsDecimalSeparator = input.replace(
                         /(\d+)([,])(\d+)(\s)+/g,
                         "$1.$3$4"
@@ -84,7 +85,7 @@ const MatrixInput = ({ onSubmit }) => {
                         .map(parseFloat);
 
                     if (isSquare(matrixArray.length)) {
-                        onSubmit(matrixArray);
+                        onSubmit(matrixArray, degree);
                     }
                 }
             }}
@@ -100,6 +101,17 @@ const MatrixInput = ({ onSubmit }) => {
                     placeholder="0, 0.5, 0, 0"
                 />
             </TextareaWrapper>
+            <StyledLabel htmlFor="degree">
+                Choose degree of dilation
+            </StyledLabel>
+            <input
+                type="number"
+                min="1"
+                step="1"
+                name="degree"
+                onChange={ev => setDegree(parseInt(ev.target.value, 10))}
+                value={degree}
+            />
             <StyledInput type="submit" value="Compute" />
         </StyledForm>
     );

app/components/nDilation/test/MatrixInput.test.jsx

@@ -21,12 +21,11 @@ describe("MatrixInput", () => {
         expect(component.exists("StyledForm")).toEqual(true);
     });
 
-    it("should render a label", () => {
+    it("should render a label for the textarea", () => {
         const component = render();
 
-        expect(component.exists("StyledLabel")).toEqual(true);
-        expect(component.find("StyledLabel").prop("htmlFor")).toEqual(
-            "matrix-input"
+        expect(component.exists("StyledLabel[htmlFor='matrix-input']")).toEqual(
+            true
         );
     });
 
@@ -66,12 +65,15 @@ describe("MatrixInput", () => {
     ];
 
     inputValues.forEach(inputValue => {
-        it(`should pass value ${inputValue} from textarea to onSubmit`, () => {
+        it(`should pass value ${inputValue} from textarea and degree to onSubmit`, () => {
             const component = render();
 
             component
                 .find(TextAreaAutosize)
                 .simulate("change", { target: { value: inputValue } });
+            component
+                .find("input[type='number']")
+                .simulate("change", { target: { value: 3 } });
             component.find("StyledForm").simulate("submit", defaultSubmitEvent);
 
             expect(defaultProps.onSubmit.mock.calls.length).toBe(1);
@@ -81,6 +83,19 @@ describe("MatrixInput", () => {
                 3,
                 4,
             ]);
+            expect(defaultProps.onSubmit.mock.calls[0][1]).toEqual(3);
         });
     });
+
+    it("should render a input for the degree", () => {
+        const component = render();
+        const input = component.find("input[type='number']");
+        expect(input.prop("name")).toEqual("degree");
+    });
+
+    it("should render a label for the degree input", () => {
+        const component = render();
+
+        expect(component.exists("StyledLabel[htmlFor='degree']")).toEqual(true);
+    });
 });

app/lib/fetchNDilation.js

@@ -1,4 +1,4 @@
-const fetchNDilation = (fetch, value) => {
+const fetchNDilation = (fetch, value, degree) => {
     return fetch("http://localhost:8080/dilation", {
         method: "POST",
         mode: "cors",
@@ -11,7 +11,7 @@ const fetchNDilation = (fetch, value) => {
         referrer: "no-referrer",
         body: JSON.stringify({
             value,
-            degree: 2,
+            degree,
         }),
     });
 };

app/lib/test/fetchNDilation.test.js

@@ -3,9 +3,10 @@ import fetchNDilation from "../fetchNDilation";
 describe("fetchNDilation", () => {
     const fetch = jest.fn(() => Promise.resolve("whatever"));
     const value = [1, 2, 3, 4];
+    const degree = 2;
 
     it("should call fetch with correct url", () => {
-        fetchNDilation(fetch, value);
+        fetchNDilation(fetch, value, degree);
 
         expect(fetch.mock.calls.length).toBe(1);
         expect(fetch.mock.calls[0][0]).toEqual(
@@ -14,7 +15,7 @@ describe("fetchNDilation", () => {
     });
 
     it("should call fetch with correct body (value from params and fixed degree of 2)", () => {
-        fetchNDilation(fetch, value);
+        fetchNDilation(fetch, value, degree);
 
         expect(fetch.mock.calls.length).toBe(1);
         expect(JSON.parse(fetch.mock.calls[0][1].body)).toEqual({
@@ -24,7 +25,7 @@ describe("fetchNDilation", () => {
     });
 
     it("should return whatever fetch returns", async () => {
-        const result = await fetchNDilation(fetch, value);
+        const result = await fetchNDilation(fetch, value, degree);
 
         expect(result).toEqual("whatever");
     });