test: add ChaosMeshSettings

Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>

package.json

@@ -11,12 +11,12 @@
     "start": "yarn watch",
     "prepare": "husky install"
   },
-  "author": "Yue Yang <g1enyy0ung@gmail.com> (https://g1eny0ung.site)",
+  "author": "Yue Yang <g1enyy0ung@gmail.com>",
   "license": "Apache-2.0",
   "devDependencies": {
     "@grafana/data": "7.0.x",
     "@grafana/runtime": "^8.2.2",
-    "@grafana/toolkit": "latest",
+    "@grafana/toolkit": "^8.2.2",
     "@grafana/ui": "7.0.x",
     "@testing-library/jest-dom": "5.4.0",
     "@testing-library/react": "^10.0.2",
@@ -24,7 +24,9 @@
     "@types/lodash": "^4.14.176",
     "husky": "^7.0.4",
     "lint-staged": "^11.2.4",
-    "prettier": "^2.4.1"
+    "prettier": "^2.4.1",
+    "react": "16.12.0",
+    "react-dom": "16.12.0"
   },
   "engines": {
     "node": ">=14"

src/ChaosMeshSettings.test.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2022 Chaos Mesh Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { ChaosMeshSettings } from 'ChaosMeshSettings';
+import React from 'react';
+
+const defaultOptions = {
+  jsonData: {
+    limit: 300,
+  },
+};
+
+describe('<ChaosMeshSettings />', () => {
+  it('loaded successfully', () => {
+    render(<ChaosMeshSettings options={defaultOptions as any} onOptionsChange={() => {}} />);
+
+    expect(screen.getByText('Limit')).toBeInTheDocument();
+  });
+});

src/ChaosMeshSettings.tsx

@@ -54,6 +54,7 @@ export const ChaosMeshSettings = (props: Props) => {
   );
 };
 
+// https://github.com/grafana/grafana/blob/v9.0.1/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx#L152
 export const getValueFromEvent = (e: SyntheticEvent<HTMLInputElement> | SelectableValue<string>) => {
   if (!e) {
     return '';