Skip to content

Commit

Permalink
data-testid added for form-preview pages (#1835)
Browse files Browse the repository at this point in the history 
* data-testid added for form-preview pages

* data-testid added for formhistory modal

* fixed badge alignement issue
  • Loading branch information
@fahad-aot
fahad-aot authored Jan 11, 2024
1 parent 9485619 commit 9762d6a
Show file tree
Hide file tree
Showing 8 changed files with 70 additions and 15 deletions.
5 changes: 3 additions & 2 deletions forms-flow-web/src/components/Form/Item/CreateTemplateConfirmModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const CreateTemplateConfirmModal = ({modalOpen,handleModalChange,onConfirm}) =>
handleModalChange();
}}
aria-label="Close"
data-testid="form-duplicate-modal-close-button"
>
</button>
</div>
Expand All @@ -43,8 +44,8 @@ const CreateTemplateConfirmModal = ({modalOpen,handleModalChange,onConfirm}) =>
</Modal.Body>
<Modal.Footer>
<div className='d-flex justify-content-end'>
<button className='btn btn-danger me-2' onClick={()=>{handleModalChange();}}>{t("No")}</button>
<button className='btn btn-primary' onClick={()=>{onConfirm();}}>{t("Yes")}</button>
<button data-testid="form-duplicate-no-button" className='btn btn-danger me-2' onClick={()=>{handleModalChange();}}>{t("No")}</button>
<button data-testid="form-duplicate-yes-button" className='btn btn-primary' onClick={()=>{onConfirm();}}>{t("Yes")}</button>
</div>
</Modal.Footer>
</Modal>
Expand Down
6 changes: 5 additions & 1 deletion forms-flow-web/src/components/Form/Item/FormHistoryModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ const FormHistoryModal = ({ historyModal, handleModalChange, gotoEdit }) => {

return (
<>
<Modal
<Modal
data-testid="form-history-modal"
show={historyModal}
size="lg"
aria-labelledby="example-custom-modal-styling-title"
Expand All @@ -64,6 +65,7 @@ const FormHistoryModal = ({ historyModal, handleModalChange, gotoEdit }) => {
handleModalChange();
}}
aria-label="Close"
data-testid="form-history-modal-close-button"
>
</button>
</div>
Expand Down Expand Up @@ -122,6 +124,7 @@ const FormHistoryModal = ({ historyModal, handleModalChange, gotoEdit }) => {
onClick={() =>
selectHistory(history.changeLog.cloned_form_id)
}
data-testid={`form-version-${index}-revert-button`}
>
<i className="fa fa-pencil" aria-hidden="true" />
&nbsp;&nbsp; {t("Revert")}
Expand All @@ -138,6 +141,7 @@ const FormHistoryModal = ({ historyModal, handleModalChange, gotoEdit }) => {
onClick={() => {
handleShowMore();
}}
data-testid="form-history-show-more-button"
>
{t("Show more")}
<i
Expand Down
6 changes: 5 additions & 1 deletion forms-flow-web/src/components/Form/Item/Preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,8 @@ const Preview = ({handleNext, hideComponents, activeStep}) => {
className="btn btn-primary"
onClick={() => {
gotoEdit();
}}
}}
data-testid="form-edit-button"
>
<i className="fa fa-pencil" aria-hidden="true" />
&nbsp;&nbsp;<Translation>{(t) => t("Edit Form")}</Translation>
Expand All @@ -175,6 +176,7 @@ const Preview = ({handleNext, hideComponents, activeStep}) => {
onClick={() => {
handleModalChange();
}}
data-testid="form-version-history-button"
>
<i className="fa fa-rotate-left " aria-hidden="true" />
&nbsp;&nbsp;<Translation>{(t) => t("Form History")}</Translation>
Expand All @@ -185,6 +187,7 @@ const Preview = ({handleNext, hideComponents, activeStep}) => {
onClick={() => {
publishConfirmModalChange();
}}
data-testid="form-duplicate-button"
>
<i className="fa fa-clone" aria-hidden="true"></i>
&nbsp;&nbsp;
Expand All @@ -193,6 +196,7 @@ const Preview = ({handleNext, hideComponents, activeStep}) => {
<button
onClick={handleNext}
className="ms-md-2 my-md-0 my-2 btn btn-primary"
data-testid="form-next-button"
>
{
(activeStep === 1,
Expand Down
41 changes: 32 additions & 9 deletions forms-flow-web/src/components/Form/Steps/PreviewStepper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
})
}
name="Check box to associate form with a workflow"
data-testid="form-publish-switch"
></input>
</div>

Expand All @@ -333,6 +334,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
onChange={(e) =>
setDesignerSelectedOption(e.target.value)
}
data-testid="form-design-permission-all-designers"
/>
{t("All Designers")}
</label>
Expand All @@ -345,6 +347,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
onChange={(e) =>
setDesignerSelectedOption(e.target.value)
}
data-testid="form-design-permission-private"
/>
{t("Private(only you)")}
</label>
Expand All @@ -359,16 +362,19 @@ if (reviewerSelectedOption === "Specific Reviewers") {
onChange={(e) => {
setDesignerSelectedOption(e.target.value);
}}
data-testid="form-design-permission-specific-designers"
/>
{t("Specific Designer Group")}
</label>
</div>
{designerSelectedOption === "Specific Designers" ? (
<div className="d-flex align-items-center flex-wrap">
{designerGroups?.map((e) => (
<Badge key={e} pill variant="outlined" className="d-flex align-items-center badge me-2">
<Badge key={e} pill variant="outlined" className="d-flex align-items-center badge me-2 mt-2">
{e}
<div className="badge-deleteIcon ms-2"
<div
data-testid={`form-designer-delete-icon-${e}`}
className="badge-deleteIcon ms-2"
onClick={() => { removeDesignerUserGroup(e); }}>
&times;
</div>
Expand All @@ -388,6 +394,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
key={key}
as="button"
onClick={() => addDesignerGroups(item)}
data-testid={`form-specific-designer-option-${key}`}
>
{item.name}
</ListGroup.Item>
Expand All @@ -403,7 +410,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
</Popover>
)}
>
<Button id="addDesigner" className="btn btn-primary btn-small mt-2">
<Button id="addDesigner" className="btn btn-primary btn-small mt-2" data-testid="form-designer-group-add-button">
<i className="fa-solid fa-plus me-2"></i>
<Translation>{(t) => t("Add")}</Translation>
</Button>
Expand Down Expand Up @@ -435,6 +442,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
onChange={(e) =>
setClientSelectedOption(e.target.value)
}
data-testid="form-create-submission-permission-all-users"
/>
{t("All Users")}
</label>
Expand All @@ -447,6 +455,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
onChange={(e) => {
setClientSelectedOption(e.target.value);
}}
data-testid="form-create-submission-permission-specific-users"
/>
{t("Specific User Group")}
</label>
Expand All @@ -455,9 +464,11 @@ if (reviewerSelectedOption === "Specific Reviewers") {
<div className="d-flex align-items-center flex-wrap">
{clientGroups?.map((e) => {
return (
<Badge key={e} pill variant="outlined" className="d-flex align-items-center badge me-2">
<Badge key={e} pill variant="outlined" className="d-flex align-items-center badge me-2 mt-2">
{e}
<div className="badge-deleteIcon ms-2"
<div
data-testid={`form-user-delete-icon-${e}`}
className="badge-deleteIcon ms-2"
onClick={() => { removeClientUserGroup(e); }}>
&times;
</div>
Expand All @@ -477,6 +488,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
key={key}
as="button"
onClick={() => addClientGroups(item)}
data-testid={`specific-user-option-${key}`}
>
{item.name}
</ListGroup.Item>
Expand All @@ -492,7 +504,10 @@ if (reviewerSelectedOption === "Specific Reviewers") {
</Popover>
)}
>
<Button id="addClient" className="btn btn-primary btn-small mt-2">
<Button
data-testid="form-user-group-add-button"
id="addClient"
className="btn btn-primary btn-small mt-2">
<i className="fa-solid fa-plus me-2"></i>
<Translation>{(t) => t("Add")}</Translation>
</Button>
Expand Down Expand Up @@ -525,6 +540,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
onChange={(e) =>
setReviewerSelectedOption(e.target.value)
}
data-testid="form-view-submission-permission-all-reviewers"
/>
{t("All Reviewers")}
</label>
Expand All @@ -539,6 +555,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
onChange={(e) => {
setReviewerSelectedOption(e.target.value);
}}
data-testid="form-view-submission-permission-specific-reviewers"
/>
{t("Specific Reviewers")}
</label>
Expand All @@ -547,9 +564,11 @@ if (reviewerSelectedOption === "Specific Reviewers") {
<div className="d-flex align-items-center flex-wrap">
{reviewerGroups?.map((e) => {
return (
<Badge key={e} pill variant="outlined" className="d-flex align-items-center badge me-2">
<Badge key={e} pill variant="outlined" className="d-flex align-items-center badge me-2 mt-2">
{e}
<div className="badge-deleteIcon ms-2"
<div
data-testid={`form-reviewer-delete-icon-${e}`}
className="badge-deleteIcon ms-2"
onClick={() => { removeReviewerUserGroup(e); }}>
&times;
</div>
Expand All @@ -570,6 +589,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
key={key}
as="button"
onClick={() => addReviewerGroups(item)}
data-testid={`form-specific-reviewer-option-${key}`}
>
{item.name}
</ListGroup.Item>
Expand All @@ -585,7 +605,9 @@ if (reviewerSelectedOption === "Specific Reviewers") {
</Popover>
)}
>
<Button id="addReviewer" className="btn btn-primary btn-small mt-2">
<Button data-testid="form-reviewer-group-add-button"
id="addReviewer"
className="btn btn-primary btn-small mt-2">
<i className="fa-solid fa-plus me-2"></i>
<Translation>{(t) => t("Add")}</Translation>
</Button>
Expand All @@ -612,6 +634,7 @@ if (reviewerSelectedOption === "Specific Reviewers") {
comments: e.target.value,
})
}
data-testid="form-comments"
/>

</Card.Body>
Expand Down
8 changes: 7 additions & 1 deletion forms-flow-web/src/components/Form/Steps/SaveNext.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,16 @@ const SaveNext = React.memo(
variant="outline-secondary"
disabled={activeStep === 0}
onClick={handleBack}
data-testid="form-back-button"
>
{t("Back")}
</Buttons>
<Buttons variant="primary" onClick={handleChanges} disabled={isDisabled}>
<Buttons
variant="primary"
onClick={handleChanges}
disabled={isDisabled}
data-testid="form-save-next-button"
>
{isLastStep ? t("Save") : t("Next")}
</Buttons>
<Modal show={show} onHide={handleClose}>
Expand Down
6 changes: 6 additions & 0 deletions forms-flow-web/src/components/Form/Steps/TaskvariableCreate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
formatOptionLabel={fomatOptionLabel}
placeholder={t("Select form field")}
inputId="selectTaskVariable"
getOptionLabel={(option) => (
<span data-testid={`task-variable-option-${option.value}`}>{option.label}</span>
)}
/>
</Col>
<Col xs={12} md={3}>
Expand All @@ -63,6 +66,7 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
}}
className="form-control"
placeholder={t("Enter Label")}
data-testid="task-variable-label-input"
/>
</Col>
<Col xs={12} md={3}>
Expand All @@ -76,6 +80,7 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
onChange={() => {
setShowInList(!showInList);
}}
data-testid="form-task-variable-showinlist-checkbox"
/>
</div>
</Form.Group>
Expand All @@ -88,6 +93,7 @@ const TaskvariableCreate = ({ options, addTaskVariable }) => {
onClick={() => {
addTask();
}}
data-testid="form-task-variable-add-button"
>
<i className="fa fa-check me-2"></i> {t("Add")}
</Button>
Expand Down
5 changes: 5 additions & 0 deletions forms-flow-web/src/components/Form/Steps/ViewAndEditTaskvariable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const ViewAndEditTaskvariable = ({
}}
className="form-control"
aria-label="Task Label"
data-testid="form-task-variable-edit-input"
/>
</td>
<td className="p-3">
Expand All @@ -59,6 +60,7 @@ const ViewAndEditTaskvariable = ({
setShowInList(!showInList);
}}
type="checkbox"
data-testid="form-task-variable-showinlist-edit-checkbox"
/>
</td>
<td className="text-right p-3" >
Expand All @@ -70,6 +72,7 @@ const ViewAndEditTaskvariable = ({
saveData(item);
}}
aria-label="Save"
data-testid="form-task-variable-edit-save-button"
>
<i className="fa fa-check"></i> Save
</Button>
Expand All @@ -82,6 +85,7 @@ const ViewAndEditTaskvariable = ({
}}
aria-label="Delete"
className="me-3 btn btn-danger btn fa fa-times"
data-testid="form-task-variable-delete-button"
></i>

<i
Expand All @@ -91,6 +95,7 @@ const ViewAndEditTaskvariable = ({
}}
aria-label="Edit"
className="btn btn-primary fa fa-edit"
data-testid="form-task-variable-edit-button"
></i>
</div>
)}
Expand Down
8 changes: 7 additions & 1 deletion forms-flow-web/src/components/Form/Steps/WorkFlow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ const WorkFlow = React.memo(
<>
<div className="mt-3">
<div className="d-flex align-items-center justify-content-between">
<Button variant="primary" onClick={handleEditAssociation}>
<Button data-testid="form-workflow-edit-button" variant="primary" onClick={handleEditAssociation}>
{t("Edit")}
</Button>
<div>
Expand All @@ -168,6 +168,7 @@ const WorkFlow = React.memo(
className={`nav-link ${tabValue === 0 ? "active workflow-taskVariable" : ""}`}
onClick={() => handleChange(0)}
href="#"
data-testid="form-workflow-tab"
>
{t("Associate Workflow")}
</a>
Expand All @@ -177,6 +178,7 @@ const WorkFlow = React.memo(
className={`nav-link ${tabValue === 1 ? "active workflow-taskVariable" : ""}`}
onClick={() => handleChange(1)}
href="#"
data-testid="form-task-variables-tab"
>
{t("Task Variables")}
</a>
Expand Down Expand Up @@ -206,6 +208,9 @@ const WorkFlow = React.memo(
}
isDisabled={disableWorkflowAssociation}
inputId="select-workflow"
getOptionLabel={(option) => (
<span data-testid={`form-workflow-option-${option.value}`}>{option.label}</span>
)}
/>
{processList.length && workflow?.value ? (
<div className="mt-3">
Expand Down Expand Up @@ -272,6 +277,7 @@ const WorkFlow = React.memo(
setShowTaskVaribleCrete(!showTaskVaribleCrete)
}
variant={showTaskVaribleCrete ? "secondary" : "primary"}
data-testid="form-task-variables-add-cancel-button"
>
{showTaskVaribleCrete ? t("Cancel") : t("Add")}
</Button>
Expand Down

0 comments on commit 9762d6a

Please sign in to comment.