diff --git a/app/client/src/widgets/BaseInputWidget/component/index.test.tsx b/app/client/src/widgets/BaseInputWidget/component/index.test.tsx new file mode 100644 index 000000000000..cde15763baea --- /dev/null +++ b/app/client/src/widgets/BaseInputWidget/component/index.test.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import "@testing-library/jest-dom/extend-expect"; +import BaseInputComponent, { type BaseInputComponentProps } from "./index"; +import { ThemeProvider } from "styled-components"; +import { lightTheme } from "selectors/themeSelectors"; + +const renderBaseInputComponent = ( + props: Partial = {}, +) => { + const defaultProps: BaseInputComponentProps = { + value: "", + inputType: "TEXT", + inputHTMLType: "TEXT", + disabled: false, + isLoading: false, + compactMode: false, + isInvalid: false, + label: "Salary", + showError: false, + onValueChange: jest.fn(), + onFocusChange: jest.fn(), + widgetId: "test-widget", + rtl: true, + }; + + return render( + + + , + ); +}; + +describe("BaseInputComponent TestCases", () => { + test("1. Icon should be visible and aligned to the right when the input type is a number", () => { + const { container } = renderBaseInputComponent({ + inputType: "NUMBER", + inputHTMLType: "NUMBER", + value: "123", + onStep: jest.fn(), + rtl: false, + shouldUseLocale: true, + iconName: "add", + iconAlign: "right", + }); + + const numericInputIcon = container.getElementsByClassName( + "bp3-icon bp3-icon-add", + )[0]; + + expect(numericInputIcon).toBeInTheDocument(); + }); +}); diff --git a/app/client/src/widgets/BaseInputWidget/component/index.tsx b/app/client/src/widgets/BaseInputWidget/component/index.tsx index 8847bd2e59b6..95f4c2e14255 100644 --- a/app/client/src/widgets/BaseInputWidget/component/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/component/index.tsx @@ -558,6 +558,7 @@ class BaseInputComponent extends React.Component< onKeyUp={this.onKeyUp} onValueChange={this.onNumberChange} placeholder={this.props.placeholder} + rightElement={this.getRightIcon()} stepSize={this.props.stepSize} value={this.props.value} {...conditionalProps}