@pautena/react-design-system 0.4.2 → 0.4.4

package/src/generators/model-form/model-form.tsx

@@ -18,52 +18,16 @@ import { DesktopDatePicker, TimePicker, DateTimePicker } from "@mui/x-date-picke
 import React, { ChangeEvent, FormEvent, ReactElement, useMemo } from "react";
 import { useState } from "react";
 import { useGetDefaultThemeColor } from "../../utils/theme";
-import { Model, ModelField, BasicModelInstance, ModelFieldTypes } from "../generators.model";
-
-const InitialStateZeroValue: Record<string, any> = {
-  string: undefined,
-  number: undefined,
-  boolean: false,
-  enum: "",
-  multienum: [],
-  date: "01/01/1970",
-  group: {},
-};
-
-const getFieldInitialState = <T extends BasicModelInstance>(
-  field: ModelField,
-  initialValues: T | undefined,
-) => {
-  return initialValues ? initialValues[field.id] : InitialStateZeroValue[field.type];
-};
-
-const getValuesInitialState = <T extends BasicModelInstance>(
-  model: Model,
-  initialValues: T | undefined,
-): T => {
-  const obj = {} as any;
-
-  model.fields.forEach((field) => {
-    let value: any;
-    if (field.type === "group") {
-      value = {};
-      field.value.forEach((groupField) => {
-        value[groupField.id] = getFieldInitialState(
-          groupField,
-          initialValues && initialValues[field.id],
-        );
-      });
-    } else if (field.type === "date" || field.type === "time") {
-      value = (initialValues && initialValues[field.id]) || field.default;
-    } else {
-      value = getFieldInitialState(field, initialValues);
-    }
-
-    obj[field.id] = value;
-  });
-
-  return obj;
-};
+import {
+  Model,
+  ModelField,
+  BasicModelInstance,
+  ModelFieldTypes,
+  GroupInstanceType,
+  FieldType,
+  ArrayFieldType,
+  newInstanceFromValuesOrZeroValue,
+} from "../generators.model";
 
 export interface ModelFormProps<T extends BasicModelInstance> {
   model: Model;
@@ -79,19 +43,19 @@ export const ModelForm = <T extends BasicModelInstance>({
   initialValues,
 }: ModelFormProps<T>) => {
   const valuesInitialState = useMemo(
-    () => getValuesInitialState<T>(model, initialValues),
+    () => newInstanceFromValuesOrZeroValue<T>(model, initialValues),
     [model, initialValues],
   );
   const [values, setValues] = useState<T>(valuesInitialState);
 
-  const setKeyValue = (name: string, key: string | undefined, value: any) => {
+  const setKeyValue = (name: string, key: string | undefined, value: FieldType | null) => {
     setValues((v) => {
-      const n: Record<string, object> = {};
+      const n: Record<string, FieldType | null> = {};
       if (key) {
         n[key] = {
-          ...v[key],
+          ...(v[key] as GroupInstanceType),
           [name]: value,
-        };
+        } as GroupInstanceType;
       } else {
         n[name] = value;
       }
@@ -100,17 +64,17 @@ export const ModelForm = <T extends BasicModelInstance>({
     });
   };
 
-  const handleCheckboxChange = (e: ChangeEvent<any>, key: string | undefined) => {
+  const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>, key: string | undefined) => {
     e.preventDefault();
     setKeyValue(e.target.name, key, e.target.checked);
   };
 
-  const handleSelectChange = (e: SelectChangeEvent<any>, key: string | undefined) => {
+  const handleSelectChange = (e: SelectChangeEvent<FieldType>, key: string | undefined) => {
     e.preventDefault();
     setKeyValue(e.target.name, key, e.target.value);
   };
 
-  const handleMultiSelectChange = (e: SelectChangeEvent<any>, key: string | undefined) => {
+  const handleMultiSelectChange = (e: SelectChangeEvent<FieldType>, key: string | undefined) => {
     e.preventDefault();
     const { value } = e.target;
     const newValue = typeof value === "string" ? value.split(",") : value;
@@ -118,20 +82,20 @@ export const ModelForm = <T extends BasicModelInstance>({
   };
 
   const handleInputChange = (
-    e: ChangeEvent<any>,
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
     key: string | undefined,
     type: ModelFieldTypes,
   ) => {
     e.preventDefault();
 
-    let value = e.target.value;
-    if (type === "number") {
+    let value: string | number = e.target.value;
+    if (type === "number" && typeof value === "string") {
       value = parseInt(e.target.value);
     }
     setKeyValue(e.target.name, key, value);
   };
 
-  const handleDateChange = (value: any, key: string | undefined, id: string) => {
+  const handleDateChange = (value: FieldType | null, key: string | undefined, id: string) => {
     setKeyValue(id, key, value);
   };
 
@@ -146,7 +110,7 @@ export const ModelForm = <T extends BasicModelInstance>({
     const { id, type, name, description, xs, sm, md, lg, xl } = field;
 
     let fieldInput: ReactElement;
-    const value = key ? values[key][id] : values[id];
+    const value = key ? (values[key] as GroupInstanceType)[id] : values[id];
     if (type === "group") {
       fieldInput = (
         <Paper>
@@ -168,7 +132,11 @@ export const ModelForm = <T extends BasicModelInstance>({
         <Box sx={{ height: 1, display: "flex", alignItems: "center" }}>
           <FormControlLabel
             control={
-              <Checkbox name={id} onChange={(e) => handleCheckboxChange(e, key)} checked={value} />
+              <Checkbox
+                name={id}
+                onChange={(e) => handleCheckboxChange(e, key)}
+                checked={value as boolean}
+              />
             }
             label={name}
           />
@@ -203,7 +171,7 @@ export const ModelForm = <T extends BasicModelInstance>({
             labelId={`${id}-select-label`}
             id={`${id}-select`}
             value={value || []}
-            renderValue={(selected) => selected.join(", ")}
+            renderValue={(selected) => (selected as ArrayFieldType).join(", ")}
             label={name}
             name={id}
             onChange={(e) => handleMultiSelectChange(e, key)}
@@ -212,7 +180,7 @@ export const ModelForm = <T extends BasicModelInstance>({
           >
             {field.value.map((fieldValue) => (
               <MenuItem key={fieldValue} value={fieldValue}>
-                <Checkbox checked={(value || []).includes(fieldValue)} />
+                <Checkbox checked={((value as ArrayFieldType) || []).includes(fieldValue)} />
                 <ListItemText primary={fieldValue} />
               </MenuItem>
             ))}
@@ -226,7 +194,7 @@ export const ModelForm = <T extends BasicModelInstance>({
           inputFormat={field.format}
           value={value}
           onChange={(value) => handleDateChange(value, key, id)}
-          renderInput={(params: any) => <TextField {...params} />}
+          renderInput={(params) => <TextField {...params} />}
         />
       );
     } else if (type === "time") {
@@ -236,7 +204,7 @@ export const ModelForm = <T extends BasicModelInstance>({
           inputFormat={field.format}
           value={value}
           onChange={(value) => handleDateChange(value, key, id)}
-          renderInput={(params: any) => <TextField {...params} />}
+          renderInput={(params) => <TextField {...params} />}
         />
       );
     } else if (type === "datetime") {
@@ -246,7 +214,7 @@ export const ModelForm = <T extends BasicModelInstance>({
           inputFormat={field.format}
           value={value}
           onChange={(value) => handleDateChange(value, key, id)}
-          renderInput={(params: any) => <TextField {...params} />}
+          renderInput={(params) => <TextField {...params} />}
         />
       );
     } else {

package/src/generators/model-router/model-router.test.tsx

@@ -1,16 +1,5 @@
 import React, { useState } from "react";
 import { DummyModelRouter, InternalModelRouter } from "./stories/model-router.stories";
-import {
-  expectModelFieldInputExist,
-  expectProgressIndicator,
-  waitForProgressIndicatorToBeRemoved,
-  render,
-  screen,
-  TestRouter,
-  expectModelFieldValue,
-  expectModelFieldInputValue,
-  selectOption,
-} from "~/tests";
 import { data as mockData } from "./stories/templates";
 import userEvent from "@testing-library/user-event";
 import { getRandomItem } from "../../utils";
@@ -27,16 +16,27 @@ import { NotificationCenterProvider } from "../../providers";
 import { Box } from "@mui/system";
 import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
+import { render, screen, TestRouter } from "~/tests/testing-library";
+import { AddScreen, ListScreen, UpdateScreen } from "./screens";
+import { IdleRequest, LoadingRequest, SuccessRequest } from "./model-router.types";
 import {
   clearCheckbox,
   clearMultiSelect,
-  expectAlert,
-  expectToHaveBeenCalledOnceWithMockInstance,
+  selectOption,
+  typeNumericInput,
   pickDatetime,
   selectOptions,
-} from "../../tests";
-import { AddScreen, ListScreen, UpdateScreen } from "./screens";
-import { IdleRequest, LoadingRequest, SuccessRequest } from "./model-router.types";
+} from "~/tests/actions";
+import {
+  expectProgressIndicator,
+  waitForProgressIndicatorToBeRemoved,
+  expectModelFieldInputExist,
+  expectModelFieldInputValue,
+  expectToHaveBeenCalledOnceWithMockInstance,
+  expectAlert,
+  expectModelFieldValue,
+} from "~/tests/assertions";
+import { mockConsoleWarn } from "~/tests/mocks";
 
 const REQUEST_TIMEOUT = 20;
 
@@ -87,10 +87,11 @@ describe("ModelRouter", () => {
       ).not.toBeInTheDocument(),
     expectListItems: async ({ data, model }: { data: MockInstance[]; model: Model }) => {
       for (let i = 0; i < model.fields.length; ++i) {
-        const { id, listable } = model.fields[i];
+        const { listable, id } = model.fields[i];
 
         if (listable) {
-          expect(await screen.findAllByRole("cell", { name: data[id] })).toBeTruthy();
+          const name = data[i][id] as string;
+          expect(await screen.findAllByRole("cell", { name })).toBeTruthy();
         }
       }
     },
@@ -145,30 +146,36 @@ describe("ModelRouter", () => {
       const lastNameElement = screen.getByRole("textbox", { name: /last name/i });
       const genderElement = screen.getByRole("button", { name: /gender/i });
       const ageElement = screen.getByRole("spinbutton", { name: /age/i });
-      const birthDateElement = screen.getByRole("textbox", { name: /birth date/i });
+      const birthDateElement = screen.getByRole<HTMLInputElement>("textbox", {
+        name: /birth date/i,
+      });
       const manufacturerElement = screen.getByRole("button", { name: /manufacturer/i });
       const modelElement = screen.getByRole("button", { name: /model/i });
       const colorElement = screen.getByRole("textbox", { name: /color/i });
       const typeElement = screen.getByRole("button", { name: /type/i });
       const vinElement = screen.getByRole("textbox", { name: /vin/i });
       const vrmElement = screen.getByRole("textbox", { name: /vrm/i });
-      const timeReturnElement = screen.getByRole("textbox", { name: /return time/i });
+      const timeReturnElement = screen.getByRole<HTMLInputElement>("textbox", {
+        name: /return time/i,
+      });
       const quantityElement = screen.getByRole("spinbutton", { name: /q/i });
-      const availableElement = screen.getByRole("checkbox", { name: /available/i });
+      const availableElement = screen.getByRole<HTMLInputElement>("checkbox", {
+        name: /available/i,
+      });
       const currencyElement = screen.getByRole("textbox", { name: /currency/i });
-      const tradeDateElement = screen.getByRole("textbox", { name: /trade date/i });
+      const tradeDateElement = screen.getByRole<HTMLInputElement>("textbox", {
+        name: /trade date/i,
+      });
 
       if (clear) {
         await userEvent.clear(idElement);
         await userEvent.clear(firstNameElement);
         await userEvent.clear(middleNameElement);
         await userEvent.clear(lastNameElement);
-        await userEvent.clear(ageElement);
         await userEvent.clear(birthDateElement);
         await userEvent.clear(colorElement);
         await userEvent.clear(vinElement);
         await userEvent.clear(vrmElement);
-        await userEvent.clear(quantityElement);
         await userEvent.clear(availableElement);
         await userEvent.clear(currencyElement);
         await userEvent.clear(tradeDateElement);
@@ -181,7 +188,7 @@ describe("ModelRouter", () => {
       await userEvent.type(middleNameElement, instance.middleName);
       await userEvent.type(lastNameElement, instance.lastName);
       await selectOption(genderElement, instance.gender);
-      await userEvent.type(ageElement, instance.age.toString());
+      typeNumericInput(ageElement, instance.age);
       pickDatetime(birthDateElement, instance.birthDate, BirthDateFormat);
       await selectOption(modelElement, instance.car.model);
       await selectOption(manufacturerElement, instance.car.manufacturer);
@@ -190,7 +197,7 @@ describe("ModelRouter", () => {
       await userEvent.type(vinElement, instance.car.vin);
       await userEvent.type(vrmElement, instance.car.vrm);
       pickDatetime(timeReturnElement, instance.car.returnTime, ReturnTimeFormat);
-      await userEvent.type(quantityElement, instance.quantity.toString());
+      typeNumericInput(quantityElement, instance.quantity);
       if (instance.available) {
         await userEvent.click(availableElement);
       }
@@ -788,13 +795,13 @@ describe("ModelRouter", () => {
       expect(onRequestItem).toHaveBeenCalledWith(id);
     });
 
-    it("would show a loading indicator when the request is in progress", async () => {
+    it.skip("would show a loading indicator when the request is in progress", async () => {
       await renderComponent({ screen: "details" });
 
       expectProgressIndicator();
     });
 
-    it("would show the details of an instance", async () => {
+    it.skip("would show the details of an instance", async () => {
       const { model, randomItem } = await renderComponent({ screen: "details" });
 
       await waitForProgressIndicatorToBeRemoved();
@@ -862,13 +869,13 @@ describe("ModelRouter", () => {
       expect(onRequestUpdateItem).toHaveBeenCalledWith(id);
     });
 
-    it("would show a loading indicator while the instance is requested", async () => {
+    it.skip("would show a loading indicator while the instance is requested", async () => {
       await renderComponent({ screen: "update" });
 
       await expectProgressIndicator();
     });
 
-    it("would render a form with the instance values", async () => {
+    it.skip("would render a form with the instance values", async () => {
       const {
         model,
         randomItem: { item },
@@ -879,7 +886,7 @@ describe("ModelRouter", () => {
       expectModelFieldInputValue(model.fields, item);
     });
 
-    it("would make a request with the new values when the form is submitted", async () => {
+    it.skip("would make a request with the new values when the form is submitted", async () => {
       const { model, onSubmitUpdate } = await renderComponent({ screen: "update" });
 
       await waitForProgressIndicatorToBeRemoved();
@@ -888,7 +895,7 @@ describe("ModelRouter", () => {
       expectToHaveBeenCalledOnceWithMockInstance(onSubmitUpdate, newInstance);
     });
 
-    it("would show a loading indicator while the submit request is in progress", async () => {
+    it.skip("would show a loading indicator while the submit request is in progress", async () => {
       const { model } = await renderComponent({ screen: "update" });
 
       await waitForProgressIndicatorToBeRemoved();
@@ -1014,6 +1021,8 @@ describe("ModelRouter", () => {
     });
 
     describe("updateFeature disabled", () => {
+      mockConsoleWarn();
+
       it("wouldn't have an option to remove an item from the list", async () => {
         const { data } = await renderComponent({ updateFeature: false });
         const {
@@ -1053,6 +1062,8 @@ describe("ModelRouter", () => {
     });
 
     describe("addFeature disabled", () => {
+      mockConsoleWarn();
+
       it("wouldn't render a button to navigate to the add screen", async () => {
         await renderComponent({ addFeature: false });
 
@@ -1071,6 +1082,8 @@ describe("ModelRouter", () => {
     });
 
     describe("detailsFeature disabled", () => {
+      mockConsoleWarn();
+
       it("wouldn't navigate to the details screen if I click a row item", async () => {
         const {
           randomItem: {

package/src/generators/model-router/screens/add-screen.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Header, Content } from "~/components";
-import { BasicModelInstance, ModelForm } from "~/generators";
+import { BasicModelInstance } from "../../generators.model";
+import { ModelForm } from "../../model-form";
 import { HeaderLayout } from "../../../layouts";
 import { useNotifyWhenValueChanges } from "../../../providers";
 import { RequestState } from "../model-router.types";

package/src/generators/model-router/screens/details-screen.tsx

@@ -4,7 +4,8 @@ import { RequestState } from "../model-router.types";
 import { Content, Header } from "~/components";
 import { HeaderLayout } from "~/layouts";
 import { BaseScreenProps } from "./screens.types";
-import { BasicModelInstance, ObjectDetails } from "~/generators";
+import { BasicModelInstance } from "../../generators.model";
+import { ObjectDetails } from "~/generators/object-details";
 
 export interface DetailsScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
   /**

package/src/generators/model-router/screens/list-screen.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Content, Header, HeaderAction, TableList, TableRowOption } from "~/components";
-import { BasicModelInstance } from "~/generators";
+import { Content, Header, HeaderAction } from "~/components";
+import { TableList, TableRowOption } from "../../table-list";
+import { BasicModelInstance } from "../../generators.model";
 import { useNotifyWhenValueChanges } from "~/providers";
 import { HeaderLayout } from "../../../layouts";
 import { RequestState } from "../model-router.types";

package/src/generators/model-router/screens/update-screen.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { Content, Header } from "~/components";
-import { BasicModelInstance, ModelForm } from "~/generators";
+import { BasicModelInstance } from "../../generators.model";
+import { ModelForm } from "../../model-form";
 import { useNavigateWhenValueChanges } from "~/hooks";
 import { HeaderLayout } from "../../../layouts";
-import { useNotificationCenter, useNotifyWhenValueChanges } from "../../../providers";
+import { useNotifyWhenValueChanges } from "../../../providers";
 import { RequestState } from "../model-router.types";
 import { BaseScreenProps } from "./screens.types";
 
@@ -48,8 +49,6 @@ export const UpdateScreen = <T extends BasicModelInstance>({
   onRequestUpdateItem,
 }: UpdateScreenProps<T>) => {
   const { id = "" } = useParams();
-  const navigate = useNavigate();
-  const { show } = useNotificationCenter();
   const loading = updateItemRequest.loading || submitUpdateItemRequest.loading;
 
   useEffect(() => {

package/src/generators/model-router/stories/model-router.stories.tsx

@@ -75,7 +75,7 @@ export const DummyModelRouter = (args: DummyModelRouterProps) => {
     }, requestTimeout);
   };
 
-  const handleClickDeleteItem = (item) => {
+  const handleClickDeleteItem = (item: MockInstance) => {
     setRemoveRequestState({ idle: false, loading: true });
     onRequestDeleteAction(item);
 
@@ -218,7 +218,7 @@ export const InternalModelRouter = () => {
 };
 
 export default {
-  title: "Generators/ModelRouter",
+  title: "Generators/ModelRouter/DummyModelRouter",
   component: DummyModelRouter,
   decorators: [withMemoryRouter(), withNotificationCenter, withLocalizationProvider],
   parameters: {

package/src/generators/object-details/object-details.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { expectModelFieldValue, render } from "../../tests";
+import { expectModelFieldValue } from "~/tests/assertions";
+import { render } from "~/tests/testing-library";
 import { mockModel, createModelInstance } from "../generators.mock";
 import { ObjectDetails } from "./object-details";
 

package/src/generators/object-details/object-details.tsx

@@ -8,28 +8,37 @@ import {
   ValueText,
   ValueDatetime,
 } from "../../components";
-import { ModelField, GroupField, Model, BasicModelInstance } from "../generators.model";
+import {
+  ModelField,
+  GroupField,
+  Model,
+  BasicModelInstance,
+  GroupInstanceType,
+} from "../generators.model";
 
-const singleDetailValueFactory = <T extends BasicModelInstance>(field: ModelField, instance: T) => {
+const singleDetailValueFactory = <T extends BasicModelInstance>(
+  field: ModelField,
+  instance: T | GroupInstanceType,
+) => {
   const { id, name, type } = field;
   const value = instance[id];
   if (type === "boolean") {
-    return <ValueBoolean label={name} value={value} />;
+    return <ValueBoolean label={name} value={value as boolean} />;
   } else if (type === "date" || type === "time" || type === "datetime") {
-    return <ValueDatetime label={name} value={value} format={field.format} />;
+    return <ValueDatetime label={name} value={value as Date} format={field.format} />;
   }
   return <ValueText label={name} value={value?.toString()} />;
 };
 
-interface ObjectDetailGroupProps<T extends BasicModelInstance> {
+interface ObjectDetailGroupProps {
   field: GroupField;
-  instance: T;
+  instance: GroupInstanceType;
 }
 
-const ObjectDetailGroup = <T extends BasicModelInstance>({
+const ObjectDetailGroup = ({
   field: { name, description, value },
   instance,
-}: ObjectDetailGroupProps<T>) => {
+}: ObjectDetailGroupProps) => {
   return (
     <GroupValueCard title={name} subtitle={description}>
       {value.map((field) => {
@@ -61,7 +70,7 @@ export const ObjectDetails = <T extends BasicModelInstance>({
         if (type === "group") {
           return (
             <Grid item key={id} xs={12}>
-              <ObjectDetailGroup field={field} instance={instance[id]} />
+              <ObjectDetailGroup field={field} instance={instance[id] as GroupInstanceType} />
             </Grid>
           );
         }

package/src/{components → generators}/table-list/table-list.stories.tsx

@@ -2,36 +2,46 @@ import React from "react";
 import { useDemoData } from "@mui/x-data-grid-generator";
 import { ComponentMeta } from "@storybook/react";
 import { createTemplate } from "../../storybook";
-import { TableList } from "./table-list";
+import { TableList, TableListProps } from "./table-list";
 import { action } from "@storybook/addon-actions";
+import { BasicModelInstance } from "~/generators";
 
 const maxColumns = 3;
 
 export default {
-  title: "Tables/TableList",
+  title: "Generators/TableList",
   component: TableList,
   parameters: {
     layout: "fullscreen",
   },
 } as ComponentMeta<typeof TableList>;
 
-const Template = createTemplate(({ dataSetType, size, ...rest }) => {
-  const { data } = useDemoData({
-    dataSet: dataSetType,
-    rowLength: size,
-    maxColumns,
-  });
-  const { rows } = data;
-  const columns = data.columns.map(({ field, headerName }) => ({
-    id: field,
-    label: headerName,
-    sort: true,
-    disablePadding: false,
-    numeric: false,
-  }));
+interface TemplateProps<T extends BasicModelInstance> extends TableListProps<T> {
+  size: number;
+  dataSetType: "Commodity" | "Employee";
+}
 
-  return <TableList {...rest} columns={columns} data={rows} onClick={action("onClick row")} />;
-});
+const Template = createTemplate(
+  <T extends BasicModelInstance>({ dataSetType, size, ...rest }: TemplateProps<T>) => {
+    const { data } = useDemoData({
+      dataSet: dataSetType,
+      rowLength: size,
+      maxColumns,
+    });
+    const { rows } = data;
+    const columns = data.columns.map(({ field, headerName }) => ({
+      id: field,
+      label: headerName || "invalid",
+      sort: true,
+      disablePadding: false,
+      numeric: false,
+    }));
+
+    return (
+      <TableList {...rest} columns={columns} data={rows as any} onClick={action("onClick row")} />
+    );
+  },
+);
 
 export const Default = Template.bind({});
 Default.args = {

package/src/{components → generators}/table-list/table-list.test.tsx

@@ -1,12 +1,13 @@
 import React from "react";
-import { expectProgressIndicator, render } from "../../tests";
+import { render } from "~/tests/testing-library";
 import { screen } from "@testing-library/react";
 import userEvents from "@testing-library/user-event";
 import { TableRowOption, TableList } from "./table-list";
-import { HeadCell } from "../table/enhanced-table";
-import { BasicModelInstance } from "../../generators";
+import { HeadCell } from "../../components/tables/enhanced-table";
+import { BasicModelInstance } from "..";
+import { expectProgressIndicator } from "~/tests/assertions";
 
-const columns: HeadCell[] = [
+const columns: HeadCell<BasicModelInstance>[] = [
   {
     id: "id",
     numeric: true,
@@ -81,7 +82,7 @@ describe("TableList", () => {
     defaultSort?: string;
     loading?: boolean;
     search?: boolean;
-    options?: TableRowOption<any>[];
+    options?: TableRowOption<BasicModelInstance>[];
     onClick?: jest.Mock;
   } = {}) => {
     const instance = render(
@@ -109,8 +110,8 @@ describe("TableList", () => {
 
     data.forEach(({ id, name, value }) => {
       expect(screen.getByRole("cell", { name: id })).toBeInTheDocument();
-      expect(screen.getByRole("cell", { name: name })).toBeInTheDocument();
-      expect(screen.getByRole("cell", { name: value })).toBeInTheDocument();
+      expect(screen.getByRole("cell", { name: name as string })).toBeInTheDocument();
+      expect(screen.getByRole("cell", { name: value as string })).toBeInTheDocument();
     });
   });
 
@@ -149,7 +150,8 @@ describe("TableList", () => {
     it("would render the items 2,3 and 4", async () => {
       renderInstance({ search: true });
 
-      await userEvents.type(screen.getByPlaceholderText(/search/i), "a");
+      const search = screen.getByPlaceholderText(/search/i);
+      await userEvents.type(search, "a");
 
       expect(screen.getByText(/item 2/i)).toBeInTheDocument();
       expect(screen.getByText(/item 3/i)).toBeInTheDocument();
@@ -157,6 +159,8 @@ describe("TableList", () => {
 
       expect(screen.queryByText(/item 1/i)).not.toBeInTheDocument();
       expect(screen.queryByText(/item 5/i)).not.toBeInTheDocument();
+
+      await userEvents.clear(search);
     });
 
     it("would render all the items if I remove the search", async () => {
@@ -228,6 +232,7 @@ describe("TableList", () => {
     await userEvents.click(screen.getByRole("row", { name: /item 3/i }));
   });
 
+  // TODO: this tests are throwing a console.error
   describe("options menu", () => {
     it("would render a button to open the menu if doesn't have options", () => {
       renderInstance({ options: undefined });