update base on prettier

frontend/taipy-gui/src/components/Taipy/Chart.spec.tsx

@@ -11,8 +11,8 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, {useCallback} from "react";
-import {render, renderHook, waitFor} from "@testing-library/react";
+import React, { useCallback } from "react";
+import { render, renderHook, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import userEvent from "@testing-library/user-event";
 
@@ -22,12 +22,12 @@ import Chart, {
     getValue,
     getValueFromCol,
     TaipyPlotlyButtons,
-    TraceValueType
+    TraceValueType,
 } from "./Chart";
-import {TaipyContext} from "../../context/taipyContext";
-import {INITIAL_STATE, TaipyState} from "../../context/taipyReducers";
-import {ColumnDesc} from "./tableUtils";
-import {ModeBarButtonAny} from "plotly.js";
+import { TaipyContext } from "../../context/taipyContext";
+import { INITIAL_STATE, TaipyState } from "../../context/taipyReducers";
+import { ColumnDesc } from "./tableUtils";
+import { ModeBarButtonAny } from "plotly.js";
 
 const chartValue = {
     default: {
@@ -42,7 +42,7 @@ const chartValue = {
             "2020-04-07T00:00:00.000000Z",
             "2020-04-08T00:00:00.000000Z",
             "2020-04-09T00:00:00.000000Z",
-            "2020-04-10T00:00:00.000000Z"
+            "2020-04-10T00:00:00.000000Z",
         ],
         Entity: [
             "Austria",
@@ -54,51 +54,51 @@ const chartValue = {
             "Austria",
             "Austria",
             "Austria",
-            "Austria"
+            "Austria",
         ],
-        "Daily hospital occupancy": [856, 823, 829, 826, 712, 824, 857, 829, 820, 771]
-    }
+        "Daily hospital occupancy": [856, 823, 829, 826, 712, 824, 857, 829, 820, 771],
+    },
 };
 const chartConfig = JSON.stringify({
-    columns: {Day_str: {dfid: "Day"}, "Daily hospital occupancy": {dfid: "Daily hospital occupancy"}},
+    columns: { Day_str: { dfid: "Day" }, "Daily hospital occupancy": { dfid: "Daily hospital occupancy" } },
     traces: [["Day_str", "Daily hospital occupancy"]],
     xaxis: ["x"],
     yaxis: ["y"],
     types: ["scatter"],
     modes: ["lines+markers"],
-    axisNames: []
+    axisNames: [],
 });
 
 const mapValue = {
     default: {
         Lat: [
             48.4113, 18.0057, 48.6163, 48.5379, 48.5843, 48.612, 48.6286, 48.6068, 48.4489, 48.6548, 18.5721, 48.3734,
-            17.6398, 48.5765, 48.4407, 48.2286
+            17.6398, 48.5765, 48.4407, 48.2286,
         ],
         Lon: [
             -112.8352, -65.804, -113.4784, -114.0702, -111.0188, -110.7939, -109.4629, -114.9123, -112.9705, -113.965,
-            -66.5401, -111.5245, -64.7246, -112.1932, -113.3159, -104.5863
+            -66.5401, -111.5245, -64.7246, -112.1932, -113.3159, -104.5863,
         ],
         Globvalue: [
             0.0875, 0.0892, 0.0908, 0.0933, 0.0942, 0.095, 0.095, 0.095, 0.0958, 0.0958, 0.0958, 0.0958, 0.0958, 0.0975,
-            0.0983, 0.0992
-        ]
-    }
+            0.0983, 0.0992,
+        ],
+    },
 };
 const mapConfig = JSON.stringify({
-    columns: {Lat: {dfid: "Lat"}, Lon: {dfid: "Lon"}},
+    columns: { Lat: { dfid: "Lat" }, Lon: { dfid: "Lon" } },
     traces: [["Lat", "Lon"]],
     xaxis: ["x"],
     yaxis: ["y"],
     types: ["scattermapbox"],
     modes: ["markers"],
-    axisNames: [["lon", "lat"]]
+    axisNames: [["lon", "lat"]],
 });
 
 const mapLayout = JSON.stringify({
     dragmode: "zoom",
-    mapbox: {style: "open-street-map", center: {lat: 38, lon: -90}, zoom: 3},
-    margin: {r: 0, t: 0, b: 0, l: 0}
+    mapbox: { style: "open-street-map", center: { lat: 38, lon: -90 }, zoom: 3 },
+    margin: { r: 0, t: 0, b: 0, l: 0 },
 });
 
 interface Props {
@@ -110,7 +110,7 @@ interface Clickable {
 }
 
 type DataKey = string;
-type Data = Record<DataKey, {tp_index?: number[]}>;
+type Data = Record<DataKey, { tp_index?: number[] }>;
 
 const useGetRealIndex = (data: Data, dataKey: DataKey, props: Props) => {
     return useCallback(
@@ -128,31 +128,31 @@ const useGetRealIndex = (data: Data, dataKey: DataKey, props: Props) => {
 
 describe("Chart Component", () => {
     it("renders", async () => {
-        const {getByTestId} = render(<Chart data={chartValue} defaultConfig={chartConfig} testId="test" />);
+        const { getByTestId } = render(<Chart data={chartValue} defaultConfig={chartConfig} testId="test" />);
         const elt = getByTestId("test");
         expect(elt.tagName).toBe("DIV");
     });
     it("displays the right info for class", async () => {
-        const {getByTestId} = render(
+        const { getByTestId } = render(
             <Chart data={chartValue} defaultConfig={chartConfig} testId="test" className="taipy-chart" />
         );
         const elt = getByTestId("test");
         expect(elt).toHaveClass("taipy-chart");
     });
     it("is disabled", async () => {
-        const {getByTestId} = render(
+        const { getByTestId } = render(
             <Chart data={chartValue} defaultConfig={chartConfig} testId="test" active={false} />
         );
         const elt = getByTestId("test");
         expect(elt.querySelector(".modebar")).toBeNull();
     });
     it("is enabled by default", async () => {
-        const {getByTestId} = render(<Chart data={undefined} defaultConfig={chartConfig} testId="test" />);
+        const { getByTestId } = render(<Chart data={undefined} defaultConfig={chartConfig} testId="test" />);
         const elt = getByTestId("test");
         await waitFor(() => expect(elt.querySelector(".modebar")).not.toBeNull());
     });
     it("is enabled by active", async () => {
-        const {getByTestId} = render(
+        const { getByTestId } = render(
             <Chart data={undefined} defaultConfig={chartConfig} testId="test" active={true} />
         );
         const elt = getByTestId("test");
@@ -161,9 +161,9 @@ describe("Chart Component", () => {
     it("dispatch 2 well formed messages at first render", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;
-        const selProps = {selected0: JSON.stringify([2, 4, 6])};
+        const selProps = { selected0: JSON.stringify([2, 4, 6]) };
         render(
-            <TaipyContext.Provider value={{state, dispatch}}>
+            <TaipyContext.Provider value={{ state, dispatch }}>
                 <Chart
                     id="chart"
                     data={undefined}
@@ -176,8 +176,8 @@ describe("Chart Component", () => {
         );
         expect(dispatch).toHaveBeenCalledWith({
             name: "",
-            payload: {id: "chart", names: ["varname"], refresh: false},
-            type: "REQUEST_UPDATE"
+            payload: { id: "chart", names: ["varname"], refresh: false },
+            type: "REQUEST_UPDATE",
         });
         expect(dispatch).toHaveBeenCalledWith({
             name: "data_var",
@@ -186,16 +186,16 @@ describe("Chart Component", () => {
                 pagekey: "Day-Daily hospital occupancy",
                 columns: ["Day", "Daily hospital occupancy"],
                 decimatorPayload: undefined,
-                id: "chart"
+                id: "chart",
             },
-            type: "REQUEST_DATA_UPDATE"
+            type: "REQUEST_DATA_UPDATE",
         });
     });
     it("dispatch a well formed message on selection", async () => {
         const dispatch = jest.fn();
         const state: TaipyState = INITIAL_STATE;
-        const {getByTestId} = render(
-            <TaipyContext.Provider value={{state, dispatch}}>
+        const { getByTestId } = render(
+            <TaipyContext.Provider value={{ state, dispatch }}>
                 <Chart data={undefined} updateVarName="data_var" defaultConfig={chartConfig} testId="test" />
             </TaipyContext.Provider>
         );
@@ -209,16 +209,16 @@ describe("Chart Component", () => {
                 alldata: true,
                 columns: ["Day", "Daily hospital occupancy"],
                 decimatorPayload: undefined,
-                pagekey: "Day-Daily hospital occupancy"
+                pagekey: "Day-Daily hospital occupancy",
             },
-            type: "REQUEST_DATA_UPDATE"
+            type: "REQUEST_DATA_UPDATE",
         });
     });
     xit("dispatch a well formed message on relayout", async () => {
         const dispatch = jest.fn();
-        const state: TaipyState = {...INITIAL_STATE, data: {table: undefined}};
-        const {getByLabelText, rerender} = render(
-            <TaipyContext.Provider value={{state, dispatch}}>
+        const state: TaipyState = { ...INITIAL_STATE, data: { table: undefined } };
+        const { getByLabelText, rerender } = render(
+            <TaipyContext.Provider value={{ state, dispatch }}>
                 <Chart
                     id="table"
                     updateVarName="data_var"
@@ -228,9 +228,9 @@ describe("Chart Component", () => {
                 />
             </TaipyContext.Provider>
         );
-        const newState = {...state, data: {...state.data, table: chartValue}};
+        const newState = { ...state, data: { ...state.data, table: chartValue } };
         rerender(
-            <TaipyContext.Provider value={{state: newState, dispatch}}>
+            <TaipyContext.Provider value={{ state: newState, dispatch }}>
                 <Chart
                     id="table"
                     updateVarName="data_var"
@@ -251,13 +251,13 @@ describe("Chart Component", () => {
                 orderby: "",
                 pagekey: "100-200--asc",
                 sort: "asc",
-                start: 100
+                start: 100,
             },
-            type: "REQUEST_DATA_UPDATE"
+            type: "REQUEST_DATA_UPDATE",
         });
     });
     xit("displays the received data", async () => {
-        const {getAllByText, rerender} = render(
+        const { getAllByText, rerender } = render(
             <Chart data={undefined} defaultConfig={chartConfig} updateVars="varname=varname" />
         );
         rerender(<Chart data={chartValue} defaultConfig={chartConfig} updateVars="varname=varname" />);
@@ -266,8 +266,8 @@ describe("Chart Component", () => {
         expect(elts[0].tagName).toBe("TD");
     });
     it("Chart renders correctly", () => {
-        const figure = [{data: [], layout: {title: "Mock Title"}}];
-        const {getByTestId} = render(
+        const figure = [{ data: [], layout: { title: "Mock Title" } }];
+        const { getByTestId } = render(
             <Chart
                 id="table"
                 updateVarName="data_var"
@@ -299,7 +299,7 @@ describe("Chart Component", () => {
 
 describe("Chart Component as Map", () => {
     it("renders", async () => {
-        const {getByTestId} = render(
+        const { getByTestId } = render(
             <Chart data={mapValue} defaultConfig={mapConfig} layout={mapLayout} testId="test" />
         );
         const elt = getByTestId("test");
@@ -327,7 +327,7 @@ describe("getColNameFromIndexed function", () => {
 
 describe("getValue function", () => {
     it("returns the value from column when the input string matches the pattern", () => {
-        const values: TraceValueType = {myColumn: [1, 2, 3]};
+        const values: TraceValueType = { myColumn: [1, 2, 3] };
         const arr: string[] = ["myColumn"];
         const idx = 0;
         const result = getValue(values, arr, idx);
@@ -335,7 +335,7 @@ describe("getValue function", () => {
     });
 
     it("returns undefined when returnUndefined is true and value is empty", () => {
-        const values: TraceValueType = {myColumn: []};
+        const values: TraceValueType = { myColumn: [] };
         const arr: string[] = ["myColumn"];
         const idx = 0;
         const returnUndefined = true;
@@ -344,7 +344,7 @@ describe("getValue function", () => {
     });
 
     it("returns empty array when returnUndefined is false and value is empty", () => {
-        const values: TraceValueType = {myColumn: []};
+        const values: TraceValueType = { myColumn: [] };
         const arr: string[] = ["myColumn"];
         const idx = 0;
         const returnUndefined = false;
@@ -357,9 +357,9 @@ describe("getRealIndex function", () => {
     it("should return 0 if index is not a number", () => {
         const data = {};
         const dataKey = "someKey";
-        const props = {figure: false};
+        const props = { figure: false };
 
-        const {result} = renderHook(() => useGetRealIndex(data, dataKey, props));
+        const { result } = renderHook(() => useGetRealIndex(data, dataKey, props));
         const getRealIndex = result.current;
         expect(getRealIndex(undefined)).toBe(0);
     });
@@ -367,21 +367,21 @@ describe("getRealIndex function", () => {
     it("should return index if figure is true", () => {
         const data = {};
         const dataKey = "someKey";
-        const props = {figure: true};
+        const props = { figure: true };
 
-        const {result} = renderHook(() => useGetRealIndex(data, dataKey, props));
+        const { result } = renderHook(() => useGetRealIndex(data, dataKey, props));
         const getRealIndex = result.current;
         expect(getRealIndex(5)).toBe(5); // index is a number
     });
 
     it("should return index if figure is false and tp_index does not exist", () => {
         const data = {
-            someKey: {}
+            someKey: {},
         };
         const dataKey = "someKey";
-        const props = {figure: false};
+        const props = { figure: false };
 
-        const {result} = renderHook(() => useGetRealIndex(data, dataKey, props));
+        const { result } = renderHook(() => useGetRealIndex(data, dataKey, props));
         const getRealIndex = result.current;
         expect(getRealIndex(2)).toBe(2); // index is a number
     });
@@ -394,7 +394,7 @@ describe("getValueFromCol function", () => {
     });
 
     it("should return an empty array when values[col] is undefined", () => {
-        const values = {test: [1, 2, 3]};
+        const values = { test: [1, 2, 3] };
         const result = getValueFromCol(values, "nonexistent");
         expect(result).toEqual([]);
     });
@@ -407,8 +407,8 @@ describe("getAxis function", () => {
             test: {
                 dfid: "test",
                 type: "testType",
-                index: 0
-            }
+                index: 0,
+            },
         };
         const result = getAxis(traces, 2, columns, 0);
         expect(result).toBeUndefined();
@@ -420,8 +420,8 @@ describe("getAxis function", () => {
             test: {
                 dfid: "test",
                 type: "testType",
-                index: 0
-            }
+                index: 0,
+            },
         };
         const result = getAxis(traces, 0, columns, 2);
         expect(result).toBeUndefined();
@@ -433,8 +433,8 @@ describe("getAxis function", () => {
             test: {
                 dfid: "test",
                 type: "testType",
-                index: 0
-            }
+                index: 0,
+            },
         };
         const result = getAxis(traces, 0, columns, 1);
         expect(result).toBeUndefined();
@@ -446,8 +446,8 @@ describe("getAxis function", () => {
             test: {
                 dfid: "test",
                 type: "testType",
-                index: 0
-            }
+                index: 0,
+            },
         };
         const result = getAxis(traces, 0, columns, 1); // changed axis from 0 to 1
         expect(result).toBeUndefined();
@@ -459,8 +459,8 @@ describe("getAxis function", () => {
             test: {
                 dfid: "test",
                 type: "testType",
-                index: 0
-            }
+                index: 0,
+            },
         };
         const result = getAxis(traces, 0, columns, 0);
         expect(result).toBe("test");
@@ -491,7 +491,7 @@ describe("click function", () => {
         // Create a mock Event
         const mockEvent = {
             ...new Event("click"),
-            currentTarget: document.createElement("div")
+            currentTarget: document.createElement("div"),
         };
 
         // Call the click function with the mock HTMLElement and Event
@@ -512,7 +512,7 @@ describe("click function", () => {
         // Create a mock Event with a mock currentTarget
         const mockEvent = {
             ...new Event("click"),
-            currentTarget: mockElement
+            currentTarget: mockElement,
         };
 
         // Call the click function with the mock HTMLElement and Event