diff --git a/src/__tests__/_/api-handlers/form-actions.ts b/src/__tests__/_/api-handlers/form-actions.ts index 44112ca8e..6d7024035 100644 --- a/src/__tests__/_/api-handlers/form-actions.ts +++ b/src/__tests__/_/api-handlers/form-actions.ts @@ -43,10 +43,10 @@ export const formActionsApiHandlers = [ }), rest.post(BASE_TEST_URL("/api/form-actions"), async (req, res, ctx) => { const newFormAction = await req.json(); - FORM_ACTIONS.push(newFormAction); + FORM_ACTIONS.push({ id: "id", ...newFormAction }); if ( JSON.stringify(newFormAction) === - '{"configuration":{"channel":"{ CONSTANTS.SLACK_CHANNEL }}","message":"Hello how are youHello how are you","shouldNotify":true},"entity":"test-entity","trigger":"create","integration":"slack","action":"SEND_MESSAGE"}' + '{"configuration":{"channel":"{ CONSTANTS.SLACK_CHANNEL }}","message":"Hello how are you","shouldNotify":true},"entity":"test-entity","trigger":"create","integration":"slack","action":"SEND_MESSAGE"}' ) { return res(ctx.status(204)); } diff --git a/src/__tests__/_/api-handlers/integrations-list.ts b/src/__tests__/_/api-handlers/integrations-list.ts index 5fd86f9cf..e1fbb0b87 100644 --- a/src/__tests__/_/api-handlers/integrations-list.ts +++ b/src/__tests__/_/api-handlers/integrations-list.ts @@ -73,12 +73,13 @@ export const integrationsListApiHandlers = [ ), rest.get( BASE_TEST_URL("/api/integrations/actions/:integration/implementations"), - async (_, res, ctx) => { + async (req, res, ctx) => { + const requestedIntegration = req.params.integration as string; return res( ctx.json([ { key: "SEND_MESSAGE", - label: "Send Message", + label: `Send Message - ${requestedIntegration}`, configurationSchema: { channel: { type: "text", @@ -104,7 +105,7 @@ export const integrationsListApiHandlers = [ }, { key: "SEND_MAIL", - label: "Send Mail", + label: `Send Mail - ${requestedIntegration}`, configurationSchema: { from: { type: "text", diff --git a/src/__tests__/_/utils/closeAllToasts.ts b/src/__tests__/_/utils/closeAllToasts.ts new file mode 100644 index 000000000..aaab9a844 --- /dev/null +++ b/src/__tests__/_/utils/closeAllToasts.ts @@ -0,0 +1,17 @@ +import { waitFor, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; + +export const closeAllToasts = async () => { + const toast = screen.getByRole("button", { + name: "Close Toast", + }); + + await userEvent.click(toast); + + await waitFor( + () => { + expect(toast).not.toBeInTheDocument(); + }, + { timeout: 20000 } + ); +}; diff --git a/src/__tests__/_/utiis/getTableRows.ts b/src/__tests__/_/utils/getTableRows.ts similarity index 100% rename from src/__tests__/_/utiis/getTableRows.ts rename to src/__tests__/_/utils/getTableRows.ts diff --git a/src/__tests__/account/password.spec.tsx b/src/__tests__/account/password.spec.tsx index c841d7250..0e511d336 100644 --- a/src/__tests__/account/password.spec.tsx +++ b/src/__tests__/account/password.spec.tsx @@ -5,6 +5,7 @@ import userEvent from "@testing-library/user-event"; import AccountPassword from "pages/account/password"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; +import { closeAllToasts } from "__tests__/_/utils/closeAllToasts"; setupApiHandlers(); @@ -45,6 +46,8 @@ describe("pages/account/password", () => { expect(await screen.findByRole("status")).toHaveTextContent( "Password Updated Successfully" ); + + await closeAllToasts(); }); it("should show different error message on demo", async () => { @@ -56,8 +59,6 @@ describe("pages/account/password", () => { ); - await userEvent.click(screen.getByRole("button", { name: "Close Toast" })); - await userEvent.type( await screen.findByLabelText("Old Password"), "Old Password" diff --git a/src/__tests__/admin/[entity]/config/actions.spec.tsx b/src/__tests__/admin/[entity]/config/actions.spec.tsx index 60940b4b3..3acaca7bc 100644 --- a/src/__tests__/admin/[entity]/config/actions.spec.tsx +++ b/src/__tests__/admin/[entity]/config/actions.spec.tsx @@ -1,5 +1,3 @@ -/* eslint-disable testing-library/no-node-access */ -/* eslint-disable testing-library/no-container */ import React from "react"; import { render, screen, within } from "@testing-library/react"; import { ApplicationRoot } from "frontend/components/ApplicationRoot"; @@ -7,7 +5,8 @@ import userEvent from "@testing-library/user-event"; import EntityFormActionsSettings from "pages/admin/[entity]/config/actions"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; -import { getTableRows } from "__tests__/_/utiis/getTableRows"; +import { getTableRows } from "__tests__/_/utils/getTableRows"; +import { closeAllToasts } from "__tests__/_/utils/closeAllToasts"; setupApiHandlers(); @@ -23,7 +22,7 @@ describe("pages/admin/[entity]/config/actions", () => { })); }); - it.skip("should list entity form actions", async () => { + it("should list entity form actions", async () => { render( x @@ -89,11 +88,6 @@ describe("pages/admin/[entity]/config/actions", () => { "Hello how are you" ); - await userEvent.type( - within(dialog).getByLabelText("Slack: Message"), - "Hello how are you" - ); - await userEvent.click(screen.getByLabelText("Slack: Should Notify")); await userEvent.click( @@ -124,100 +118,185 @@ describe("pages/admin/[entity]/config/actions", () => { "SlackCreateSend Message", ] `); + + await closeAllToasts(); }); - it("should delete form action successfully", async () => { + it("should show the correct form values", async () => { render( ); - await userEvent.click(screen.getByRole("button", { name: "Close Toast" })); - expect(await screen.findByRole("table")).toBeInTheDocument(); const tableRows = await screen.findAllByRole("row"); - expect(tableRows).toHaveLength(5); + await userEvent.click( + within(tableRows[4]).getByRole("button", { + name: "Edit Form Action", + }) + ); + + const dialog = screen.getByRole("dialog"); + // + expect( + within(dialog).getByTestId("react-select__trigger") + ).toHaveTextContent("On Create"); + + expect( + within(dialog).getByRole("option", { selected: true }) + ).toHaveTextContent("Slack"); + + expect( + within(dialog).getByTestId("react-select__action") + ).toHaveTextContent("Send Message - slack"); + + expect(await within(dialog).findByLabelText("Slack: Channel")).toHaveValue( + "{ CONSTANTS.SLACK_CHANNEL }}" + ); + expect(within(dialog).getByLabelText("Slack: Message")).toHaveValue( + "Hello how are you" + ); + expect(within(dialog).getByLabelText("Slack: Should Notify")).toBeChecked(); + }); + + it("should update the actions form", async () => { + render( + + + + ); + + expect(await screen.findByRole("table")).toBeInTheDocument(); + + const tableRows = await screen.findAllByRole("row"); await userEvent.click( - within(tableRows[1]).getByRole("button", { - name: "Delete Form Action", + within(tableRows[4]).getByRole("button", { + name: "Edit Form Action", }) ); - const confirmBox = await screen.findByRole("alertdialog", { - name: "Confirm Delete", - }); + const dialog = screen.getByRole("dialog"); + + await userEvent.type(within(dialog).getByLabelText("Trigger"), "On Delete"); + await userEvent.keyboard("{Enter}"); + + await userEvent.click(within(dialog).getByRole("option", { name: "SMTP" })); + + await userEvent.type(within(dialog).getByLabelText("Action"), "Send Mail"); + await userEvent.keyboard("{Enter}"); + + await userEvent.type( + await within(dialog).findByLabelText("SMTP: From"), + "{{ CONSTANTS.MAIL_FROM }}" + ); + + await userEvent.type( + within(dialog).getByLabelText("SMTP: To"), + "to@gmail.com" + ); await userEvent.click( - await within(confirmBox).findByRole("button", { name: "Confirm" }) + within(dialog).getByRole("button", { name: "Update Form Action" }) ); expect(await screen.findByRole("status")).toHaveTextContent( - "Form Action Deleted Successfully" + "Form Action Updated Successfully" ); - expect(await screen.findAllByRole("row")).toHaveLength(4); + await closeAllToasts(); + + expect(await getTableRows(screen.getByRole("table"))) + .toMatchInlineSnapshot(` + [ + "Integration + + Trigger + + Action + + Action", + "HttpCreatePost", + "SmtpUpdateSend Mail", + "SlackDeleteSend Message", + "SmtpDeleteSend Mail", + ] + `); }); - it.skip("should show the correct value on the update form", async () => { - const { container } = render( + it("should show the correct form values", async () => { + render( ); - await userEvent.click(screen.getByRole("button", { name: "Close Toast" })); - expect(await screen.findByRole("table")).toBeInTheDocument(); const tableRows = await screen.findAllByRole("row"); await userEvent.click( - within(tableRows[1]).getByRole("button", { + within(tableRows[4]).getByRole("button", { name: "Edit Form Action", }) ); + const dialog = screen.getByRole("dialog"); // + expect( + within(dialog).getByTestId("react-select__trigger") + ).toHaveTextContent("On Delete"); - const dialog = screen.getByRole("dialog"); + expect( + within(dialog).getByRole("option", { selected: true }) + ).toHaveTextContent("SMTP"); + + expect( + within(dialog).getByTestId("react-select__action") + ).toHaveTextContent("Send Mail - smtp"); expect(await within(dialog).findByLabelText("SMTP: From")).toHaveValue( - "from@gmail.com" + "{ CONSTANTS.MAIL_FROM }}" ); expect(within(dialog).getByLabelText("SMTP: To")).toHaveValue( "to@gmail.com" ); + }); - expect(container.querySelector(`input[name="trigger"]`)).toHaveValue( - "update" + it("should delete form action successfully", async () => { + render( + + + ); - expect( - within(dialog).getByRole("option", { selected: true }) - ).toHaveTextContent("SMTP"); + expect(await screen.findByRole("table")).toBeInTheDocument(); - expect( - within(dialog).getByRole("option", { selected: true }) - ).toHaveTextContent("Send Mail"); - }); + const tableRows = await screen.findAllByRole("row"); + + expect(tableRows).toHaveLength(5); + + await userEvent.click( + within(tableRows[1]).getByRole("button", { + name: "Delete Form Action", + }) + ); + + const confirmBox = await screen.findByRole("alertdialog", { + name: "Confirm Delete", + }); - // it("should display updated diction values", async () => { - // render( - // - // - // - // ); - // await waitFor(() => { - // expect(screen.getByLabelText("Plural")).toHaveValue( - // "Plural entity-1Updated" - // ); - // }); - // expect(screen.getByLabelText("Singular")).toHaveValue( - // "Singular entity-1Updated" - // ); - // }); + await userEvent.click( + await within(confirmBox).findByRole("button", { name: "Confirm" }) + ); + + expect(await screen.findByRole("status")).toHaveTextContent( + "Form Action Deleted Successfully" + ); + + expect(await screen.findAllByRole("row")).toHaveLength(4); + }); }); diff --git a/src/__tests__/admin/[entity]/config/form.spec.tsx b/src/__tests__/admin/[entity]/config/form.spec.tsx index b57b0a040..dec3a19c4 100644 --- a/src/__tests__/admin/[entity]/config/form.spec.tsx +++ b/src/__tests__/admin/[entity]/config/form.spec.tsx @@ -6,6 +6,7 @@ import userEvent from "@testing-library/user-event"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; import EntityFormExtensionSettings from "pages/admin/[entity]/config/form"; +import { closeAllToasts } from "__tests__/_/utils/closeAllToasts"; setupApiHandlers(); @@ -73,6 +74,8 @@ describe("pages/admin/[entity]/config/form", () => { expect(await screen.findByRole("status")).toHaveTextContent( "Form Scripts Saved Successfully" ); + + await closeAllToasts(); }); it("should display updated value", async () => { @@ -107,10 +110,6 @@ describe("pages/admin/[entity]/config/form", () => { "Updated" ); - await userEvent.click( - screen.getByRole("button", { name: "Close Toast" }) - ); - await userEvent.click( within(currentTab).getByRole("button", { name: "Save Form Scripts" }) ); @@ -118,6 +117,8 @@ describe("pages/admin/[entity]/config/form", () => { expect(await screen.findByRole("status")).toHaveTextContent( "Expression: •JS-Error: SyntaxError: Unexpected identifier" ); + + await closeAllToasts(); }); it("should display previous section value", async () => { @@ -149,10 +150,6 @@ describe("pages/admin/[entity]/config/form", () => { await userEvent.clear(within(currentTab).getByLabelText("Script")); - await userEvent.click( - screen.getByRole("button", { name: "Close Toast" }) - ); - await userEvent.click( within(currentTab).getByRole("button", { name: "Save Form Scripts" }) ); diff --git a/src/__tests__/admin/[entity]/config/presentation.spec.tsx b/src/__tests__/admin/[entity]/config/presentation.spec.tsx index 7e7354085..9dc82ee99 100644 --- a/src/__tests__/admin/[entity]/config/presentation.spec.tsx +++ b/src/__tests__/admin/[entity]/config/presentation.spec.tsx @@ -6,6 +6,7 @@ import userEvent from "@testing-library/user-event"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; import EntityPresentationScriptSettings from "pages/admin/[entity]/config/presentation"; +import { closeAllToasts } from "__tests__/_/utils/closeAllToasts"; setupApiHandlers(); @@ -53,6 +54,8 @@ describe("pages/admin/[entity]/config/presentation", () => { expect(await screen.findByRole("status")).toHaveTextContent( "Presentation Scripts Saved Successfully" ); + + await closeAllToasts(); }); it("should display updated value", async () => { @@ -76,8 +79,6 @@ describe("pages/admin/[entity]/config/presentation", () => { ); - await userEvent.click(screen.getByRole("button", { name: "Close Toast" })); - await userEvent.type(screen.getByLabelText("Script"), "invalid"); await userEvent.click( @@ -88,6 +89,8 @@ describe("pages/admin/[entity]/config/presentation", () => { expect(await screen.findByRole("status")).toHaveTextContent( "Expression: •JS-Error: SyntaxError: Unexpected identifier" ); + + await closeAllToasts(); }); it("should display previous section value", async () => { @@ -111,8 +114,6 @@ describe("pages/admin/[entity]/config/presentation", () => { ); - await userEvent.click(screen.getByRole("button", { name: "Close Toast" })); - await userEvent.clear(screen.getByLabelText("Script")); await userEvent.click( diff --git a/src/__tests__/admin/[entity]/index.spec.tsx b/src/__tests__/admin/[entity]/index.spec.tsx index b093ec863..a7a31ab01 100644 --- a/src/__tests__/admin/[entity]/index.spec.tsx +++ b/src/__tests__/admin/[entity]/index.spec.tsx @@ -4,7 +4,7 @@ import { ApplicationRoot } from "frontend/components/ApplicationRoot"; import EntityTable from "pages/admin/[entity]/index"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; -import { getTableRows } from "__tests__/_/utiis/getTableRows"; +import { getTableRows } from "__tests__/_/utils/getTableRows"; setupApiHandlers(); diff --git a/src/__tests__/admin/index.spec.tsx b/src/__tests__/admin/index.spec.tsx index f8ba43618..b64b2ba1c 100644 --- a/src/__tests__/admin/index.spec.tsx +++ b/src/__tests__/admin/index.spec.tsx @@ -6,7 +6,7 @@ import Dashboard from "pages"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; import userEvent from "@testing-library/user-event"; -import { getTableRows } from "__tests__/_/utiis/getTableRows"; +import { getTableRows } from "__tests__/_/utils/getTableRows"; setupApiHandlers(); diff --git a/src/__tests__/admin/settings/data.spec.tsx b/src/__tests__/admin/settings/data.spec.tsx index 192be8bfb..a78ece15a 100644 --- a/src/__tests__/admin/settings/data.spec.tsx +++ b/src/__tests__/admin/settings/data.spec.tsx @@ -5,6 +5,7 @@ import userEvent from "@testing-library/user-event"; import GeneralDataSettings from "pages/admin/settings/data"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; +import { closeAllToasts } from "__tests__/_/utils/closeAllToasts"; setupApiHandlers(); @@ -47,6 +48,8 @@ describe("pages/admin/settings/data", () => { expect(await screen.findByRole("status")).toHaveTextContent( "Metadata Columns Saved Successfully" ); + + await closeAllToasts(); }); it("should display updated date values", async () => { @@ -89,10 +92,6 @@ describe("pages/admin/settings/data", () => { await userEvent.type(screen.getByLabelText("Format"), "yyyy MMM do"); - await userEvent.click( - screen.getByRole("button", { name: "Close Toast" }) - ); - await userEvent.click( screen.getByRole("button", { name: "Save Date Format" }) ); diff --git a/src/__tests__/admin/settings/theme.spec.tsx b/src/__tests__/admin/settings/theme.spec.tsx index a164304f9..26c309074 100644 --- a/src/__tests__/admin/settings/theme.spec.tsx +++ b/src/__tests__/admin/settings/theme.spec.tsx @@ -91,24 +91,9 @@ describe("pages/admin/settings/theme", () => { target: { value: "#654321" }, }); - await userEvent.click( - screen.getAllByRole("button", { name: "Close Toast" })[0] - ); - await userEvent.click( - screen.getAllByRole("button", { name: "Close Toast" })[1] - ); - await userEvent.click( screen.getByRole("button", { name: "Save Theme Settings" }) ); - - expect((await screen.findAllByRole("status"))[0]).toHaveTextContent( - "Theme Settings Saved Successfully" - ); - - expect((await screen.findAllByRole("status"))[1]).toHaveTextContent( - "Theme Preference Saved Successfully" - ); }); it("should display updated theme values", async () => { diff --git a/src/__tests__/dashboard/[dashboardId]/widget/[widgetId]/index.spec.tsx b/src/__tests__/dashboard/[dashboardId]/widget/[widgetId]/index.spec.tsx index 80e0cd7c1..4921f7874 100644 --- a/src/__tests__/dashboard/[dashboardId]/widget/[widgetId]/index.spec.tsx +++ b/src/__tests__/dashboard/[dashboardId]/widget/[widgetId]/index.spec.tsx @@ -6,6 +6,7 @@ import UpdateDashboardWidget from "pages/dashboard/[dashboardId]/widget/[widgetI import { setupApiHandlers } from "__tests__/_/setupApihandlers"; import userEvent from "@testing-library/user-event"; +import { closeAllToasts } from "__tests__/_/utils/closeAllToasts"; setupApiHandlers(); @@ -65,6 +66,8 @@ describe("pages/dashboard/[dashboardId]/widget/[widgetId]/index", () => { expect(await screen.findByRole("status")).toHaveTextContent( "Dashboard Widget Updated Successfully" ); + + await closeAllToasts(); }); it("should update table widget", async () => { @@ -112,8 +115,6 @@ describe("pages/dashboard/[dashboardId]/widget/[widgetId]/index", () => { screen.getByRole("button", { name: "Update Dashboard Widget" }) ); - await userEvent.click(screen.getByRole("button", { name: "Close Toast" })); - expect(await screen.findByRole("status")).toHaveTextContent( "Dashboard Widget Updated Successfully" ); diff --git a/src/__tests__/dashboard/[dashboardId]/widget/create.spec.tsx b/src/__tests__/dashboard/[dashboardId]/widget/create.spec.tsx index 26c13dec6..d5fe3f4b8 100644 --- a/src/__tests__/dashboard/[dashboardId]/widget/create.spec.tsx +++ b/src/__tests__/dashboard/[dashboardId]/widget/create.spec.tsx @@ -6,6 +6,7 @@ import CreateDashboardWidget from "pages/dashboard/[dashboardId]/widget/create"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; import userEvent from "@testing-library/user-event"; +import { closeAllToasts } from "__tests__/_/utils/closeAllToasts"; setupApiHandlers(); @@ -75,6 +76,8 @@ describe("pages/dashboard/[dashboardId]/widget/create", () => { expect(await screen.findByRole("status")).toHaveTextContent( "Dashboard Widget Created Successfully" ); + + await closeAllToasts(); }); it("should create table widget", async () => { @@ -111,8 +114,6 @@ describe("pages/dashboard/[dashboardId]/widget/create", () => { expect(screen.queryByLabelText("Color")).not.toBeInTheDocument(); expect(screen.queryByLabelText("Icon")).not.toBeInTheDocument(); - await userEvent.click(screen.getByRole("button", { name: "Close Toast" })); - await userEvent.click( screen.getByRole("button", { name: "Create Dashboard Widget" }) ); diff --git a/src/__tests__/integrations/variables__constants.spec.tsx b/src/__tests__/integrations/variables__constants.spec.tsx index 45c2c2955..916d7e3fd 100644 --- a/src/__tests__/integrations/variables__constants.spec.tsx +++ b/src/__tests__/integrations/variables__constants.spec.tsx @@ -6,6 +6,7 @@ import ManageVariables from "pages/integrations/variables"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; import userEvent from "@testing-library/user-event"; +import { closeAllToasts } from "__tests__/_/utils/closeAllToasts"; setupApiHandlers(); @@ -133,6 +134,8 @@ describe("pages/integrations/variables => constants", () => { expect(await screen.findByRole("status")).toHaveTextContent( "Constant Saved Successfully" ); + + await closeAllToasts(); }); it("should show updated constant", async () => { @@ -166,10 +169,6 @@ describe("pages/integrations/variables => constants", () => { expect(tableRows).toHaveLength(5); - await userEvent.click( - screen.getByRole("button", { name: "Close Toast" }) - ); - await userEvent.click( within(tableRows[2]).getByRole("button", { name: "Delete Constant", diff --git a/src/__tests__/roles/[roleId]/index.spec.tsx b/src/__tests__/roles/[roleId]/index.spec.tsx index c566fed83..e47629f5b 100644 --- a/src/__tests__/roles/[roleId]/index.spec.tsx +++ b/src/__tests__/roles/[roleId]/index.spec.tsx @@ -6,24 +6,10 @@ import userEvent from "@testing-library/user-event"; import RolePermissions from "pages/roles/[roleId]/index"; import { setupApiHandlers } from "__tests__/_/setupApihandlers"; +import { closeAllToasts } from "__tests__/_/utils/closeAllToasts"; setupApiHandlers(); -const closeAllToasts = async () => { - const toast = screen.getByRole("button", { - name: "Close Toast", - }); - - await userEvent.click(toast); - - await waitFor( - () => { - expect(toast).not.toBeInTheDocument(); - }, - { timeout: 20000 } - ); -}; - describe("pages/roles/[roleId]/index", () => { const useRouter = jest.spyOn(require("next/router"), "useRouter"); useRouter.mockImplementation(() => ({ diff --git a/src/__tests__/users/database-link.spec.tsx b/src/__tests__/users/database-link.spec.tsx index 1286ad540..b5ad99cea 100644 --- a/src/__tests__/users/database-link.spec.tsx +++ b/src/__tests__/users/database-link.spec.tsx @@ -54,9 +54,9 @@ describe("pages/users/database-link", () => { ); - expect( - container.querySelector(`input[name="children[0].children[0].id"]`) - ).toHaveValue("entity-2"); + expect(container.querySelector(`input[name="table"]`)).toHaveValue( + "entity-2" + ); expect(container.querySelector(`input[name="field"]`)).toHaveValue( "entity-2-string-field" diff --git a/src/frontend/design-system/components/Form/FormCheckBox/index.tsx b/src/frontend/design-system/components/Form/FormCheckBox/index.tsx index 16123edbe..4b974fc8b 100644 --- a/src/frontend/design-system/components/Form/FormCheckBox/index.tsx +++ b/src/frontend/design-system/components/Form/FormCheckBox/index.tsx @@ -4,7 +4,7 @@ import { USE_ROOT_COLOR } from "frontend/design-system/theme/root"; import { Typo } from "frontend/design-system/primitives/Typo"; import { Stack } from "frontend/design-system/primitives/Stack"; import { ISharedFormInput } from "../_types"; -import { FormFeedback, FormGroup } from "../Styles"; +import { FormFeedback } from "../Styles"; import { isFormMetaWithError } from "../_wrapForm"; const CheckBoxInput = styled.input` @@ -35,7 +35,7 @@ export function FormCheckBox({ disabled, }: ISharedFormInput) { return ( - + <> - + ); } diff --git a/src/frontend/design-system/components/Form/FormSelect/index.tsx b/src/frontend/design-system/components/Form/FormSelect/index.tsx index 07687855c..a94f3d974 100644 --- a/src/frontend/design-system/components/Form/FormSelect/index.tsx +++ b/src/frontend/design-system/components/Form/FormSelect/index.tsx @@ -69,33 +69,35 @@ export const FormSelect: React.FC = (props) => { ...selectData, ] as ISelectData[]; return wrapLabelAndError( - value === input.value) || { - value: "", - label: "", - } - } - placeholder={placeholder} - inputId={input.name} - onChange={({ value }: any) => { - input.onChange(nullable && !value ? null : value); - }} - className={generateClassNames(meta)} - isDisabled={disabled} - options={selectDataWithDefault} - isOptionDisabled={(option: unknown) => { - if (!disabledOptions) { - return false; +
+ value === input.value) || { + value: "", + label: "", + } } - return disabledOptions.includes( - (option as ISelectData).value as string - ); - }} - />, + placeholder={placeholder} + inputId={input.name} + onChange={({ value }: any) => { + input.onChange(nullable && !value ? null : value); + }} + className={generateClassNames(meta)} + isDisabled={disabled} + options={selectDataWithDefault} + isOptionDisabled={(option: unknown) => { + if (!disabledOptions) { + return false; + } + return disabledOptions.includes( + (option as ISelectData).value as string + ); + }} + /> +
, props ); }; diff --git a/src/frontend/design-system/components/Form/Styles.ts b/src/frontend/design-system/components/Form/Styles.ts index 818d71fe2..540826c33 100644 --- a/src/frontend/design-system/components/Form/Styles.ts +++ b/src/frontend/design-system/components/Form/Styles.ts @@ -77,11 +77,6 @@ export const Input = styled.input` ${InputStyles} `; -export const FormGroup = styled.div` - margin-bottom: 0px; - margin-top: 0px; -`; - export const FormLabel = styled.label<{ sm?: true }>` padding-bottom: 1px; margin-bottom: 0; diff --git a/src/frontend/design-system/components/Form/_wrapForm.tsx b/src/frontend/design-system/components/Form/_wrapForm.tsx index cd1eb74b4..476ad1e13 100644 --- a/src/frontend/design-system/components/Form/_wrapForm.tsx +++ b/src/frontend/design-system/components/Form/_wrapForm.tsx @@ -5,7 +5,7 @@ import { Stack } from "frontend/design-system/primitives/Stack"; import { SystemIcon } from "frontend/design-system/Icons/System"; import { ISharedFormInput } from "./_types"; import { Tooltip } from "../Tooltip"; -import { FormGroup, FormLabel, FormFeedback, RequiredAsterick } from "./Styles"; +import { FormLabel, FormFeedback, RequiredAsterick } from "./Styles"; import { SoftButton } from "../Button/SoftButton"; export const isFormMetaWithError = (meta: FieldMetaState) => @@ -26,24 +26,24 @@ export const wrapLabelAndError = ( rightActions = [], }: ISharedFormInput ) => ( - - <> - -
- {label && ( - <> - - {label} - - {required ? * : null} - - )} - {description ? ( - - - - ) : null} -
+ <> + +
+ {label && ( + <> + + {label} + + {required ? * : null} + + )} + {description ? ( + + + + ) : null} +
+ {rightActions.length > 0 && ( {rightActions.map((rightAction) => ( ))} - - {formComponent} - - {isFormMetaWithError(meta)} -   - - - + )} + + {formComponent} + + {isFormMetaWithError(meta)} +   + + ); export const generateClassNames = (meta: FieldMetaState): string => diff --git a/src/frontend/design-system/components/OffCanvas/OffCanvas.spec.tsx b/src/frontend/design-system/components/OffCanvas/OffCanvas.spec.tsx deleted file mode 100644 index 9c9dee719..000000000 --- a/src/frontend/design-system/components/OffCanvas/OffCanvas.spec.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useState } from "react"; -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; -import { OffCanvas } from "."; - -function Template() { - const [open, setOpen] = useState(false); - return ( - <> - - setOpen(false)} - > -

Some awesome content

- - - ); -} - -describe.skip("OffCanvas", () => { - it("should open and close modal", async () => { - render(