Skip to content

Commit

Permalink
chore: add processor testcase
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeevaRamu0104
JeevaRamu0104 committed Jan 17, 2024
1 parent dfb4ddb commit b6698fe
Show file tree
Hide file tree
Showing 5 changed files with 226 additions and 189 deletions.
20 changes: 20 additions & 0 deletions cypress/e2e/processors/processors-list.cy.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
describe.only("Processors Landing Module", () => {
beforeEach(() => {
cy.visit("http://localhost:9000/");
});
it("should successfully log in with valid credentials", () => {
cy.get("[data-testid=email]").type("[email protected]");
cy.get("[data-testid=password]").type("Jeeva12#");
cy.get('button[type="submit"]').click({ force: true });
cy.get("[data-testid=processors]").click({ force: true });
cy.url().should("eq", "http://localhost:9000/connectors");
cy.contains("Processors").should("be.visible");
cy.contains(
"Connect and manage payment processors to enable payment acceptance",
).should("be.visible");
cy.contains("Connect a new connector").should("be.visible");
cy.get("[data-testid=search-processor]")
.type("stripe", { force: true })
.should("have.value", "stripe");
});
});
226 changes: 115 additions & 111 deletions src/components/HeadlessUISelectBox.res
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,35 +35,119 @@ let make = (
}

<div className="text-left">
<Menu \"as"="div" className="relative inline-block text-left">
{menuProps =>
<div>
<Menu.Button className> {buttonProps => children} </Menu.Button>
<Transition
\"as"="span"
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
{if showBottomUp {
<BottomModal headerText="Select Action" onCloseClick=closeClick>
<AddDataAttributes attributes=[("data-testid", "profile")]>
<Menu \"as"="div" className="relative inline-block text-left">
{menuProps =>
<div>
<Menu.Button className> {buttonProps => children} </Menu.Button>
<Transition
\"as"="span"
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95">
{if showBottomUp {
<BottomModal headerText="Select Action" onCloseClick=closeClick>
<Menu.Items
className={`w-full p-1 origin-top-right bg-white dark:bg-jp-gray-950 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}>
{props =>
options
->Array.mapWithIndex((option, index) => {
let selected = switch value {
| String(v) => v === option.value
| Array(arr) => arr->Array.includes(option.value)
}
let disabledClass = option.isDisabled ? "disabled cursor-not-allowed" : ""

<Menu.Item key={index->Js.Int.toString}>
{props => {
let isCloseIcon = props["active"] && deSelectAllowed

<div
onClick={ev => {
if !closeListOnClick {
ev->ReactEvent.Mouse.stopPropagation
ev->ReactEvent.Mouse.preventDefault
}
setValue(option.value)
}}
className={`group flex flex-row items-center justify-between rounded-md w-full p-3 text-fs-14 font-normal cursor-pointer ${props["active"]
? "bg-gray-100 dark:bg-gray-700"
: ""} ${disabledClass}`}
disabled={option.isDisabled}>
<div className="flex flex-row items-center gap-2">
{switch option.leftIcon {
| FontAwesome(iconName) =>
<Icon
className={`align-middle ${option.customIconStyle->Belt.Option.getWithDefault(
"",
)}`}
size=14
name=iconName
/>
| CustomIcon(element) => element

| Euler(iconName) =>
<Icon className="align-middle" size=12 name=iconName />
| _ => React.null
}}
<AddDataAttributes attributes=[("data-options", option.label)]>
<div
className={option.customTextStyle->Belt.Option.getWithDefault(
"",
)}>
<span className={selected ? "text-blue-800 font-semibold" : ""}>
{React.string(option.label)}
</span>
</div>
</AddDataAttributes>
{switch option.rightIcon {
| FontAwesome(iconName) =>
<Icon
className={`align-middle ${option.customIconStyle->Belt.Option.getWithDefault(
"",
)}`}
size=12
name=iconName
/>
| CustomIcon(element) => element

| Euler(iconName) =>
<Icon className="align-middle" size=12 name=iconName />
| _ => React.null
}}
</div>
<UIUtils.RenderIf condition=selected>
{if isCloseIcon {
<Icon name="close" size=10 className="text-red-500 mr-1" />
} else {
<Tick isSelected=selected />
}}
</UIUtils.RenderIf>
</div>
}}
</Menu.Item>
})
->React.array}
</Menu.Items>
</BottomModal>
} else {
<Menu.Items
className={`w-full p-1 origin-top-right bg-white dark:bg-jp-gray-950 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}>
className={`absolute z-10 ${dropdownPositionClass} mt-2 p-1 origin-top-right bg-white dark:bg-jp-gray-950 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${dropDownClass}`}>
{props =>
options
->Array.mapWithIndex((option, index) => {
let selected = switch value {
| String(v) => v === option.value
| Array(arr) => arr->Array.includes(option.value)
}

let disabledClass = option.isDisabled ? "disabled cursor-not-allowed" : ""

<Menu.Item key={index->Js.Int.toString}>
{props => {
let isCloseIcon = props["active"] && deSelectAllowed

{props =>
<div
onClick={ev => {
if !closeListOnClick {
Expand All @@ -72,7 +156,7 @@ let make = (
}
setValue(option.value)
}}
className={`group flex flex-row items-center justify-between rounded-md w-full p-3 text-fs-14 font-normal cursor-pointer ${props["active"]
className={`group flex flex-row items-center justify-between rounded-md w-full p-2 ${textClass} cursor-pointer ${props["active"]
? "bg-gray-100 dark:bg-gray-700"
: ""} ${disabledClass}`}
disabled={option.isDisabled}>
Expand All @@ -83,7 +167,7 @@ let make = (
className={`align-middle ${option.customIconStyle->Belt.Option.getWithDefault(
"",
)}`}
size=14
size=12
name=iconName
/>
| CustomIcon(element) => element
Expand Down Expand Up @@ -118,100 +202,20 @@ let make = (
| _ => React.null
}}
</div>
<UIUtils.RenderIf condition=selected>
{if isCloseIcon {
<Icon name="close" size=10 className="text-red-500 mr-1" />
} else {
<Tick isSelected=selected />
}}
</UIUtils.RenderIf>
</div>
}}
{selected
? props["active"] && deSelectAllowed
? <Icon name="close" size=10 className="text-red-500 mr-1" />
: <Tick isSelected=selected />
: React.null}
</div>}
</Menu.Item>
})
->React.array}
</Menu.Items>
</BottomModal>
} else {
<Menu.Items
className={`absolute z-10 ${dropdownPositionClass} mt-2 p-1 origin-top-right bg-white dark:bg-jp-gray-950 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${dropDownClass}`}>
{props =>
options
->Array.mapWithIndex((option, index) => {
let selected = switch value {
| String(v) => v === option.value
| Array(arr) => arr->Array.includes(option.value)
}

let disabledClass = option.isDisabled ? "disabled cursor-not-allowed" : ""

<Menu.Item key={index->Js.Int.toString}>
{props =>
<div
onClick={ev => {
if !closeListOnClick {
ev->ReactEvent.Mouse.stopPropagation
ev->ReactEvent.Mouse.preventDefault
}
setValue(option.value)
}}
className={`group flex flex-row items-center justify-between rounded-md w-full p-2 ${textClass} cursor-pointer ${props["active"]
? "bg-gray-100 dark:bg-gray-700"
: ""} ${disabledClass}`}
disabled={option.isDisabled}>
<div className="flex flex-row items-center gap-2">
{switch option.leftIcon {
| FontAwesome(iconName) =>
<Icon
className={`align-middle ${option.customIconStyle->Belt.Option.getWithDefault(
"",
)}`}
size=12
name=iconName
/>
| CustomIcon(element) => element

| Euler(iconName) =>
<Icon className="align-middle" size=12 name=iconName />
| _ => React.null
}}
<AddDataAttributes attributes=[("data-options", option.label)]>
<div
className={option.customTextStyle->Belt.Option.getWithDefault("")}>
<span className={selected ? "text-blue-800 font-semibold" : ""}>
{React.string(option.label)}
</span>
</div>
</AddDataAttributes>
{switch option.rightIcon {
| FontAwesome(iconName) =>
<Icon
className={`align-middle ${option.customIconStyle->Belt.Option.getWithDefault(
"",
)}`}
size=12
name=iconName
/>
| CustomIcon(element) => element

| Euler(iconName) =>
<Icon className="align-middle" size=12 name=iconName />
| _ => React.null
}}
</div>
{selected
? props["active"] && deSelectAllowed
? <Icon name="close" size=10 className="text-red-500 mr-1" />
: <Tick isSelected=selected />
: React.null}
</div>}
</Menu.Item>
})
->React.array}
</Menu.Items>
}}
</Transition>
</div>}
</Menu>
}}
</Transition>
</div>}
</Menu>
</AddDataAttributes>
</div>
}
1 change: 1 addition & 0 deletions src/genericUtils/DOMUtils.res
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@ external event: string => event = "Event"
@send external remove: (Dom.element, unit) => unit = "remove"
@scope(("document", "body"))
external appendChild: Dom.element => unit = "appendChild"
external domProps: {..} => JsxDOM.domProps = "%identity"
23 changes: 15 additions & 8 deletions src/screens/HyperSwitch/Connectors/ConnectorList.res
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,18 @@ module NewProcessorCards = {
</h2>
<div className="flex w-full justify-between">
<UIUtils.RenderIf condition={showSearch}>
<input
ref={searchRef->ReactDOM.Ref.domRef}
type_="text"
value=searchedConnector
onChange=handleSearch
placeholder="Search a processor"
className={`rounded-md px-4 py-2 focus:outline-none w-1/3 border`}
/>
<AddDataAttributes attributes=[("data-testid", "search-connector")]>
<input
ref={searchRef->ReactDOM.Ref.domRef}
type_="text"
value=searchedConnector
onChange=handleSearch
placeholder="Search a processor"
className={`rounded-md px-4 py-2 focus:outline-none w-1/3 border`}
// dataTestid=dataTestId
id="search-connector"
/>
</AddDataAttributes>
</UIUtils.RenderIf>
<UIUtils.RenderIf condition={showRequestConnectorBtn}>
<div
Expand Down Expand Up @@ -138,6 +142,9 @@ module NewProcessorCards = {
<div className="flex w-full justify-between">
<UIUtils.RenderIf condition={showSearch}>
<input
{...DOMUtils.domProps({
"data-testid": "search-processor",
})}
ref={searchRef->ReactDOM.Ref.domRef}
type_="text"
value=searchedConnector
Expand Down
Loading

0 comments on commit b6698fe

Please sign in to comment.