Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added data testid in Form client and designer table #1811

Merged
merged 1 commit into from
Dec 18, 2023
Merged

added data testid in Form client and designer table #1811

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions forms-flow-web/src/components/Form/FileUpload/SelectFormForDownload.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading