From 9d89ccb11c9ad932735420106c03a95dfc25c4f1 Mon Sep 17 00:00:00 2001 From: Phanindra-tw <126503818+Phanindra-tw@users.noreply.github.com> Date: Thu, 7 Sep 2023 22:54:06 +0530 Subject: [PATCH] Phani | A-1205421128183821 | Refactor SCSS classnames in Forms display control to avoid Conflicts (#695) * Refactor the Css class names to avoid conflicts * Fix test * Fix time format --- .../formDisplayControl/FormDisplayControl.jsx | 10 +++++----- .../formDisplayControl/FormDisplayControl.spec.jsx | 8 ++++---- .../__snapshots__/FormDisplayControl.spec.jsx.snap | 2 +- .../formDisplayControl/formDisplayControl.scss | 6 +++--- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.jsx b/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.jsx index f2fb927ca3..b083795d42 100644 --- a/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.jsx +++ b/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.jsx @@ -63,11 +63,11 @@ export function FormDisplayControl(props) { <>
-

+

{formsHeading}

{isLoading ?
{loadingMessage}
: ( -
{Object.entries(formList).length > 0 ? ( +
{Object.entries(formList).length > 0 ? ( Object.entries(formList).map(([key, value]) => { const moreThanOneEntry = value.length > 1; return ( @@ -77,7 +77,7 @@ export function FormDisplayControl(props) { value.map((entry) => { return (
- {moment(entry.encounterDate).format("DD/MM/YYYY HH:MM")}{showEdit(entry.encounterUuid) && } + {moment(entry.encounterDate).format("DD/MM/YYYY HH:mm")}{showEdit(entry.encounterUuid) && } {entry.providerName}
); @@ -85,9 +85,9 @@ export function FormDisplayControl(props) { } ) : -
+
{key} - {moment(value[0].encounterDate).format("DD/MM/YYYY HH:MM")}{showEdit(value[0].encounterUuid) && } + {moment(value[0].encounterDate).format("DD/MM/YYYY HH:mm")}{showEdit(value[0].encounterUuid) && } {value[0].providerName}
); diff --git a/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.spec.jsx b/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.spec.jsx index f33ab75140..7dd331e70c 100644 --- a/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.spec.jsx +++ b/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.spec.jsx @@ -32,7 +32,7 @@ describe('FormDisplayControl Component for empty mock data', () => { await waitFor(() => { expect(screen.getByText('No Form found for this patient....')).toBeTruthy(); - expect(container.querySelector(".placeholder-text").innerHTML).toEqual('No Form found for this patient....'); + expect(container.querySelector(".placeholder-text-forms-control").innerHTML).toEqual('No Form found for this patient....'); }); }); }); @@ -73,7 +73,7 @@ describe('FormDisplayControl Component with Accordion and Non-Accordion', () => await waitFor(() => { expect(container.querySelectorAll(".bx--accordion__title")).toHaveLength(1); expect(container.querySelector(".bx--accordion__title").innerHTML).toEqual('Pre Anaesthesia Assessment'); - expect(container.querySelector(".row-accordion > .form-name-text > .form-link").innerHTML).toEqual(moment(1693217959000).format("DD/MM/YYYY HH:MM")); + expect(container.querySelector(".row-accordion > .form-name-text > .form-link").innerHTML).toEqual(moment(1693217959000).format("DD/MM/YYYY HH:mm")); expect(container.querySelector(".row-accordion > .form-provider-text").innerHTML).toEqual('Doctor One'); }); @@ -85,10 +85,10 @@ describe('FormDisplayControl Component with Accordion and Non-Accordion', () => await waitFor(() => { expect(container.querySelectorAll(".form-non-accordion-text")).toHaveLength(6); expect(container.querySelectorAll(".form-non-accordion-text.form-heading")[0].innerHTML).toEqual('Orthopaedic Triage'); - expect(container.querySelectorAll(".form-non-accordion-text.form-date-align > a")[0].innerHTML).toEqual(moment(1693277657000).format("DD/MM/YYYY HH:MM")); + expect(container.querySelectorAll(".form-non-accordion-text.form-date-align > a")[0].innerHTML).toEqual(moment(1693277657000).format("DD/MM/YYYY HH:mm")); expect(container.querySelectorAll(".form-non-accordion-text")[2].innerHTML).toEqual('Doctor Two'); expect(container.querySelectorAll(".form-non-accordion-text.form-heading")[1].innerHTML).toEqual('Patient Progress Notes and Orders'); - expect(container.querySelectorAll(".form-non-accordion-text.form-date-align > a")[1].innerHTML).toEqual(moment(1693277657000).format("DD/MM/YYYY HH:MM")); + expect(container.querySelectorAll(".form-non-accordion-text.form-date-align > a")[1].innerHTML).toEqual(moment(1693277657000).format("DD/MM/YYYY HH:mm")); expect(container.querySelectorAll(".form-non-accordion-text")[5].innerHTML).toEqual('Doctor One'); }); diff --git a/micro-frontends/src/next-ui/Containers/formDisplayControl/__snapshots__/FormDisplayControl.spec.jsx.snap b/micro-frontends/src/next-ui/Containers/formDisplayControl/__snapshots__/FormDisplayControl.spec.jsx.snap index 22c990bcac..71a39cda8a 100644 --- a/micro-frontends/src/next-ui/Containers/formDisplayControl/__snapshots__/FormDisplayControl.spec.jsx.snap +++ b/micro-frontends/src/next-ui/Containers/formDisplayControl/__snapshots__/FormDisplayControl.spec.jsx.snap @@ -5,7 +5,7 @@ exports[`FormDisplayControl Component should render the component 1`] = `

Observation Forms

diff --git a/micro-frontends/src/next-ui/Containers/formDisplayControl/formDisplayControl.scss b/micro-frontends/src/next-ui/Containers/formDisplayControl/formDisplayControl.scss index 3de6a0ba63..451a6b488b 100644 --- a/micro-frontends/src/next-ui/Containers/formDisplayControl/formDisplayControl.scss +++ b/micro-frontends/src/next-ui/Containers/formDisplayControl/formDisplayControl.scss @@ -1,4 +1,4 @@ -.section-title{ +.forms-display-control-section-title{ font-family: OpenSans, Arial, sans-serif; padding: 10px; margin-top: 0; @@ -11,13 +11,13 @@ border-radius: 2px 2px 0 0; } -.placeholder-text{ +.placeholder-text-forms-control{ background: #fff; padding: 5px; color: #444 !important; } -.row{ +.form-display-control-row{ display: flex; justify-content: space-between; padding: 10px;