Skip to content

Commit

Permalink
added data testid in Form client and designer table (#1811)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shuhaib-aot
shuhaib-aot authored Dec 18, 2023
1 parent 71e5084 commit eb3a5ac
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 57 deletions.
2 changes: 2 additions & 0 deletions forms-flow-web/src/components/Form/FileUpload/SelectFormForDownload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ const SelectFormForDownload = React.memo(({ form, type }) => {
>
<Form.Check.Input
className="select_input"
data-testid="download-all-form-checkbox"
aria-label="Check"
onChange={() => addAllFormCheckList(!isAllFormChecked)}
checked={isAllFormChecked}
Expand All @@ -89,6 +90,7 @@ const SelectFormForDownload = React.memo(({ form, type }) => {
<Form.Check.Input
style={{ width: "15px", height: "15px" }}
aria-label="option"
data-testid={`download-form-checkbox-${form._id}`}
checked={isFormChecked}
onChange={() => updateFormCheckList(!isFormChecked)}
title={t("Select for download")}
Expand Down
93 changes: 56 additions & 37 deletions forms-flow-web/src/components/Form/constants/ClientTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ function ClientTable() {
return (
<>
<LoadingOverlay active={searchFormLoading} spinner text={t("Loading...")}>
<div style={{ minHeight: "400px"}}>
<div style={{ minHeight: "400px" }}>
<table className="table custom-table table-responsive-sm">
<thead>
<tr>
Expand Down Expand Up @@ -188,19 +188,24 @@ function ClientTable() {
onKeyDown={(e) =>
e.keyCode === 13 ? handleSearch() : ""
}
data-testid="form-search-input-box"
placeholder={t("Search by form title")}
style={{ backgroundColor: "#ffff" }}
title={t("Search by form title")}
/>
{search && (
<InputGroup.Append onClick={handleClearSearch}>
<InputGroup.Append
onClick={handleClearSearch}
data-testid="form-search-cear-button"
>
<InputGroup.Text>
<i className="fa fa-times"></i>
</InputGroup.Text>
</InputGroup.Append>
)}
<InputGroup.Append
onClick={handleSearch}
data-testid="form-search-click-button"
disabled={!search?.trim()}
style={{ cursor: "pointer" }}
>
Expand All @@ -219,20 +224,31 @@ function ClientTable() {
<tr>
<td className="col-4">
{!isDesigner && (
<button title={t("Form Description")} className="btn btn-light btn-small mr-2" onClick={() => handleToggle(index) } disabled={!e.description}>
<i
className={`fa ${
openIndex === index
? "fa-chevron-up"
: "fa-chevron-down"
}`}

></i>
<button
data-testid={`form-description-expand-button-${e._id}`}
title={t("Form Description")}
className="btn btn-light btn-small mr-2"
onClick={() => handleToggle(index)}
disabled={!e.description}
>
<i
className={`fa ${
openIndex === index
? "fa-chevron-up"
: "fa-chevron-down"
}`}
></i>
</button>
)}
<span className="ml-2 mt-2">{e.title}</span>
<span
data-testid={`form-title-${e._id}`}
className="ml-2 mt-2"
>
{e.title}
</span>
</td>
<td
data-testid={`form-description${e._id}`}
className="text-truncate"
style={{
maxWidth: "350px",
Expand All @@ -243,6 +259,7 @@ function ClientTable() {

<td className="text-center">
<button
data-testid={`form-submit-button-${e._id}`}
className="btn btn-primary"
onClick={() => submitNewForm(e._id)}
>
Expand All @@ -251,30 +268,27 @@ function ClientTable() {
</td>
</tr>

{index === openIndex &&
<tr>
<td colSpan={10}>
<div className="bg-white p-3">
<h4>
<strong>{t("Form Description")}</strong>
</h4>
{index === openIndex && (
<tr>
<td colSpan={10}>
<div className="bg-white p-3">
<h4>
<strong>{t("Form Description")}</strong>
</h4>

<div
style={{ maxWidth: "68vw" }}
className="form-description-p-tag "
dangerouslySetInnerHTML={{
__html: sanitize(
e?.description,
{
ADD_ATTR: ["target"],
}
),
}}
/>
</div>
</td>
</tr>
}
<div
style={{ maxWidth: "68vw" }}
className="form-description-p-tag "
dangerouslySetInnerHTML={{
__html: sanitize(e?.description, {
ADD_ATTR: ["target"],
}),
}}
/>
</div>
</td>
</tr>
)}
</React.Fragment>
))}
</tbody>
Expand All @@ -291,8 +305,12 @@ function ClientTable() {
<div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
<div className="d-flex align-items-center">
<span className="mr-2"> {t("Rows per page")}</span>
<Dropdown>
<Dropdown.Toggle variant="light" id="dropdown-basic">
<Dropdown data-testid="page-limit-dropdown">
<Dropdown.Toggle
variant="light"
id="dropdown-basic"
data-testid="page-limit-dropdown-toggle"
>
{pageLimit}
</Dropdown.Toggle>

Expand All @@ -304,6 +322,7 @@ function ClientTable() {
onClick={() => {
onSizePerPageChange(option.value);
}}
data-testid={`page-limit-dropdown-item-${option.value}`}
>
{option.text}
</Dropdown.Item>
Expand Down
50 changes: 30 additions & 20 deletions forms-flow-web/src/components/Form/constants/FormTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,15 +118,7 @@ function FormTable() {
dispatch(setBPMFormLimit(limit));
dispatch(setBPMFormListPage(1));
};

const viewOrEdit = (formData) => (
<button
className="btn btn-link text-primary mt-2"
onClick={() => viewOrEditForm(formData._id)}
>
<Translation>{(t) => t("View Details")}</Translation>{" "}
</button>
);




Expand Down Expand Up @@ -245,17 +237,19 @@ function FormTable() {
onKeyDown={(e) => (e.keyCode == 13 ? handleSearch() : "")}
placeholder={t("Search by form title")}
title={t("Search by form title")}
data-testid="form-search-input-box"
style={{ backgroundColor: "#ffff" }}
/>
{search && (
<InputGroup.Append onClick={handleClearSearch}>
<InputGroup.Append onClick={handleClearSearch} data-testid="form-search-cear-button">
<InputGroup.Text>
<i className="fa fa-times"></i>
</InputGroup.Text>
</InputGroup.Append>
)}
<InputGroup.Append
onClick={handleSearch}
data-testid="form-search-click-button"
disabled={!search?.trim()}
style={{ cursor: "pointer" }}
>
Expand Down Expand Up @@ -289,21 +283,34 @@ function FormTable() {
<td>{_.capitalize(e.formType)}</td>
<td>{e.anonymous ? t("Public") : t("Private")}</td>
<td>
{" "}
<span
className={`badge rounded-pill px-3 py-2 ${e.status === 'active' ? 'published-forms-label' : 'unpublished-forms-label'}`}
<span
data-testid={`form-status-${e._id}`}
className={`badge rounded-pill px-3 py-2 ${
e.status === "active"
? "published-forms-label"
: "unpublished-forms-label"
}`}
>
{e.status === 'active' ? t("Published") : t("Unpublished")}
{e.status === "active"
? t("Published")
: t("Unpublished")}
</span>
</td>

<td>
<span> {viewOrEdit(e)}</span>
<button
data-testid={`form-view-or-edit-button-${e._id}`}
className="btn btn-link text-primary mt-2"
onClick={() => viewOrEditForm(e._id)}
>
<Translation>{(t) => t("View Details")}</Translation>{" "}
</button>
</td>
<td>
<Dropdown >
<Dropdown data-testid={`designer-form-option-${e._id}`}>
<Dropdown.Toggle
as={CustomToggle}
data-testid={`designer-form-option-toggle-${e._id}`}
as={CustomToggle}
id="dropdown-basic"
title={t("More options")}
aria-describedby="More-options"
Expand All @@ -317,12 +324,14 @@ function FormTable() {
onClick={() => {
submitNewForm(e?._id);
}}
data-testid={`designer-form-option-${e._id}-submit`}
>
<i className="fa fa-pencil mr-2 text-primary" />
{t("Submit New")}
</Dropdown.Item>
) : null}
<Dropdown.Item onClick={() => deleteForms(e)}>
<Dropdown.Item onClick={() => deleteForms(e)}
data-testid={`designer-form-option-${e._id}-delete`}>
<i className="fa fa-trash mr-2 text-danger" />
{t("Delete")}
</Dropdown.Item>
Expand All @@ -346,8 +355,8 @@ function FormTable() {
<div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
<div className="d-flex align-items-center">
<span className="mr-2"> {t("Rows per page")}</span>
<Dropdown>
<Dropdown.Toggle variant="light" id="dropdown-basic">
<Dropdown data-testid="page-limit-dropdown">
<Dropdown.Toggle variant="light" id="dropdown-basic" data-testid="page-limit-dropdown-toggle">
{pageLimit}
</Dropdown.Toggle>

Expand All @@ -356,6 +365,7 @@ function FormTable() {
<Dropdown.Item
key={index}
type="button"
data-testid={`page-limit-dropdown-item-${option.value}`}
onClick={() => {
onSizePerPageChange(option.value);
}}
Expand Down

0 comments on commit eb3a5ac

Please sign in to comment.