[#81] PR feedback

Author: Viicos

.github/workflows/ci.yml

@@ -102,7 +102,7 @@ jobs:
 
       - name: Run tests
         run: |
-          npm run test-jest
+          npm run test:jest
         env:
           CI: 'true'
 
@@ -148,7 +148,7 @@ jobs:
           cd storybook-static/ && tar -xvf artifact.tar && cd ..
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
             "npx http-server storybook-static --port 6006 --quiet" \
-            "npx wait-on -l http://127.0.0.1:6006 && npm test -- --browsers ${{ matrix.browser }}"
+            "npx wait-on -l http://127.0.0.1:6006 && npm run test:storybook -- --browsers ${{ matrix.browser }}"
 
   deploy:
     runs-on: ubuntu-latest

package.json

@@ -18,8 +18,9 @@
     "build:esm": "ttsc -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.json",
     "build:cjs": "ttsc -p tsconfig.prod.json --module commonjs --outDir lib/cjs && tsc-alias -p tsconfig.prod.json --outDir lib/cjs",
     "build": "npm-run-all build:*",
-    "test": "test-storybook",
-    "test-jest": "jest",
+    "test": "npm-run-all test:*",
+    "test:storybook": "test-storybook",
+    "test:jest": "jest",
     "format": "prettier --write 'src/**/*'",
     "checkformat": "prettier --check 'src/**/*'",
     "start": "npm run storybook",

src/components/ComponentEditForm.tsx

@@ -27,18 +27,18 @@ export interface ComponentEditFormProps {
   // don't know (yet), so we need to handle FallbackSchema.
   component: AnyComponentSchema | FallbackSchema;
   builderInfo: BuilderInfo;
-  onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onSubmit?: (component: AnyComponentSchema | FallbackSchema) => void;
+  onCancel: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onRemove: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onSubmit: (component: AnyComponentSchema | FallbackSchema) => void;
 }
 
 const ComponentEditForm: React.FC<ComponentEditFormProps> = ({
   isNew,
   component,
   builderInfo,
-  onCancel = () => {},
-  onRemove = () => {},
-  onSubmit = () => {},
+  onCancel,
+  onRemove,
+  onSubmit,
 }) => {
   const intl = useIntl();
   const builderContext = useContext(BuilderContext);

src/registry/select/select-validation.spec.tsx

@@ -4,32 +4,38 @@ import ComponentEditForm from '@/components/ComponentEditForm';
 import {contextRender, screen} from '@/test-utils';
 
 describe('Manual values: must have at least one non-empty value', () => {
-  const args = {
-    isNew: true,
-    component: {
-      id: 'wqimsadk',
-      type: 'select',
-      key: 'select',
-      label: 'A select field',
-      openForms: {
-        dataSrc: 'manual',
-        translations: {},
-      },
-      values: [{value: '', label: ''}],
-      defaultValue: '',
-    },
-    builderInfo: {
-      title: 'Select',
-      icon: 'th-list',
-      group: 'basic',
-      weight: 70,
-      schema: {},
+  const component = {
+    id: 'wqimsadk',
+    type: 'select',
+    key: 'select',
+    label: 'A select field',
+    openForms: {
+      dataSrc: 'manual',
+      translations: {},
     },
+    values: [{value: '', label: ''}],
+    defaultValue: '',
+  };
+  const builderInfo = {
+    title: 'Select',
+    icon: 'th-list',
+    group: 'basic',
+    weight: 70,
+    schema: {},
   };
-
-  contextRender(<ComponentEditForm {...args} />);
 
   test('Option values and labels are required fields', async () => {
+    contextRender(
+      <ComponentEditForm
+        isNew
+        component={component}
+        builderInfo={builderInfo}
+        onCancel={jest.fn()}
+        onRemove={jest.fn()}
+        onSubmit={jest.fn()}
+      />
+    );
+
     const labelInput = screen.getByLabelText('Option label');
     await userEvent.type(labelInput, 'Foo');
     await userEvent.clear(labelInput);

src/test-utils.tsx

@@ -207,7 +207,7 @@ const contextRender = (
   builderOptions: Partial<BuilderOptions> = {},
   renderOptions: RenderOptions = {}
 ): RenderResult => {
-  function Wrapper({children}: {children: React.ReactElement}) {
+  function Wrapper({children}: {children: React.ReactNode}) {
     return (
       <IntlProvider locale={locale}>
         {!enableContext ? (

tsconfig.json

@@ -20,7 +20,7 @@
     "noErrorTruncation": true,
     "paths": {
       "@/*": ["./*"],
-      "@/sb-decorators": ["../.storybook/decorators.tsx"],
+      "@/sb-decorators": ["../.storybook/decorators.tsx"]
     },
     "plugins": [
       {
@@ -31,8 +31,8 @@
         "ast": true
       }
     ],
-    "types": ["node", "jest", "@testing-library/jest-dom"],
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
   "include": ["src"],
-  "exclude": ["node_modules", "lib"],
+  "exclude": ["node_modules", "lib"]
 }