Selenium: Payment Verification tests

src/frontend/src/components/grievances/PaymentGrievance/PaymentGrievanceDetails/PaymentGrievanceDetails.tsx

@@ -74,6 +74,7 @@ export function PaymentGrievanceDetails({
           {canApprovePaymentVerification &&
           ticket.status === GRIEVANCE_TICKET_STATES.FOR_APPROVAL ? (
             <Button
+              data-cy="grievance-approve"
               onClick={() =>
                 confirm({
                   title: t('Approve'),

src/frontend/src/components/grievances/PaymentGrievance/PaymentGrievanceDetails/__snapshots__/PaymentGrievanceDetails.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`components/grievances/PaymentGrievanceDetails should render with data 1
         </h6>
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-dl1jos-MuiButtonBase-root-MuiButton-root"
+          data-cy="grievance-approve"
           tabindex="0"
           type="button"
         >

src/frontend/src/components/grievances/PaymentGrievance/VerifyPaymentGrievance/VerifyPaymentGrievance.tsx

@@ -74,6 +74,7 @@ export function VerifyPaymentGrievance({
             <Button
               color="primary"
               variant="contained"
+              data-cy="grievance-verify"
               onClick={() => setVerifyManualDialogOpen(true)}
             >
               {t('Verify')}

src/frontend/src/components/grievances/PaymentGrievance/VerifyPaymentGrievance/__snapshots__/VerifyPaymentGrievance.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`components/grievances/VerifyPaymentGrievance should render with data 1`
     >
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-dl1jos-MuiButtonBase-root-MuiButton-root"
+        data-cy="grievance-verify"
         tabindex="0"
         type="button"
       >

src/frontend/src/components/payments/CreateVerificationPlan.tsx

@@ -297,8 +297,8 @@ export const CreateVerificationPlan = ({
                       variant="fullWidth"
                       aria-label="full width tabs example"
                     >
-                      <Tab label={t('FULL LIST')} />
-                      <Tab label={t('RANDOM SAMPLING')} />
+                      <Tab data-cy="tab-full-list" label={t('FULL LIST')} />
+                      <Tab data-cy="tab-random-sampling" label={t('RANDOM SAMPLING')} />
                     </StyledTabs>
                   </TabsContainer>
                   <TabPanel value={selectedTab} index={0}>
@@ -340,10 +340,11 @@ export const CreateVerificationPlan = ({
                           name="verificationChannel"
                           label={t('Verification Channel')}
                           style={{ flexDirection: 'row' }}
+                          data-cy="checkbox-verification-channel"
                           choices={[
-                            { value: 'RAPIDPRO', name: 'RAPIDPRO' },
-                            { value: 'XLSX', name: 'XLSX' },
-                            { value: 'MANUAL', name: 'MANUAL' },
+                            { value: 'RAPIDPRO', name: 'RAPIDPRO', dataCy: 'radio-rapidpro' },
+                            { value: 'XLSX', name: 'XLSX', dataCy: 'radio-xlsx' },
+                            { value: 'MANUAL', name: 'MANUAL', dataCy: 'radio-manual' },
                           ]}
                           component={FormikRadioGroup}
                           alignItems="center"
@@ -480,9 +481,9 @@ export const CreateVerificationPlan = ({
                         style={{ flexDirection: 'row' }}
                         alignItems="center"
                         choices={[
-                          { value: 'RAPIDPRO', name: 'RAPIDPRO' },
-                          { value: 'XLSX', name: 'XLSX' },
-                          { value: 'MANUAL', name: 'MANUAL' },
+                            { value: 'RAPIDPRO', name: 'RAPIDPRO', dataCy: 'radio-rapidpro' },
+                            { value: 'XLSX', name: 'XLSX', dataCy: 'radio-xlsx' },
+                            { value: 'MANUAL', name: 'MANUAL', dataCy: 'radio-manual' },
                         ]}
                         component={FormikRadioGroup}
                       />
@@ -508,7 +509,7 @@ export const CreateVerificationPlan = ({
               </DialogContent>
               <DialogFooter>
                 <DialogActions>
-                  <Button onClick={() => setOpen(false)}>CANCEL</Button>
+                  <Button data-cy="button-cancel" onClick={() => setOpen(false)}>CANCEL</Button>
                   <LoadingButton
                     loading={loading}
                     type="submit"

src/frontend/src/components/payments/EditVerificationPlan.tsx

@@ -309,8 +309,8 @@ export const EditVerificationPlan = ({
                       variant="fullWidth"
                       aria-label="full width tabs example"
                     >
-                      <Tab label={t('FULL LIST')} />
-                      <Tab label={t('RANDOM SAMPLING')} />
+                      <Tab  data-cy="tab-full-list" label={t('FULL LIST')} />
+                      <Tab data-cy="tab-random-sampling" label={t('RANDOM SAMPLING')} />
                     </StyledTabs>
                   </TabsContainer>
                   <TabPanel value={selectedTab} index={0}>
@@ -351,9 +351,9 @@ export const EditVerificationPlan = ({
                           label={t('Verification Channel')}
                           style={{ flexDirection: 'row', alignItems: 'center' }}
                           choices={[
-                            { value: 'RAPIDPRO', name: 'RAPIDPRO' },
-                            { value: 'XLSX', name: 'XLSX' },
-                            { value: 'MANUAL', name: 'MANUAL' },
+                            { value: 'RAPIDPRO', name: 'RAPIDPRO', dataCy: 'radio-rapidpro' },
+                            { value: 'XLSX', name: 'XLSX', dataCy: 'radio-xlsx' },
+                            { value: 'MANUAL', name: 'MANUAL', dataCy: 'radio-manual' },
                           ]}
                           component={FormikRadioGroup}
                           alignItems="center"
@@ -500,9 +500,9 @@ export const EditVerificationPlan = ({
                         }}
                         alignItems="center"
                         choices={[
-                          { value: 'RAPIDPRO', name: 'RAPIDPRO' },
-                          { value: 'XLSX', name: 'XLSX' },
-                          { value: 'MANUAL', name: 'MANUAL' },
+                            { value: 'RAPIDPRO', name: 'RAPIDPRO', dataCy: 'radio-rapidpro' },
+                            { value: 'XLSX', name: 'XLSX', dataCy: 'radio-xlsx' },
+                            { value: 'MANUAL', name: 'MANUAL', dataCy: 'radio-manual' },
                         ]}
                         component={FormikRadioGroup}
                       />

src/frontend/src/components/payments/VerificationPlanActions.tsx

@@ -138,6 +138,7 @@ export function VerificationPlanActions({
                       color="primary"
                       variant="outlined"
                       startIcon={<GetApp />}
+                      data-cy="export-xlsx"
                       onClick={async () => {
                         try {
                           await mutateExport({
@@ -171,6 +172,7 @@ export function VerificationPlanActions({
                       <Button
                         color="primary"
                         variant="outlined"
+                        data-cy="download-xlsx"
                         startIcon={<GetApp />}
                       >
                         {t('Download Xlsx')}
@@ -180,7 +182,7 @@ export function VerificationPlanActions({
                 )}
 
                 {canImport && (
-                  <Box p={2}>
+                  <Box p={2} data-cy="import-xlsx">
                     <ImportXlsx
                       paymentVerificationPlanId={verificationPlan.id}
                       cashOrPaymentPlanId={planNode.id}
@@ -204,6 +206,7 @@ export function VerificationPlanActions({
                       loading={loadingInvalid}
                       color="primary"
                       variant="outlined"
+                      data-cy="button-mark-as-invalid"
                       onClick={async () => {
                         try {
                           await mutateInvalid({

src/frontend/src/components/payments/VerificationPlanDetails.tsx

@@ -49,7 +49,7 @@ export function VerificationPlanDetails({
     <Container>
       <Box display="flex" alignItems="center" justifyContent="space-between">
         <Title>
-          <Typography variant="h6">
+          <Typography data-cy={`verification-plan-${verificationPlan.unicefId}`} variant="h6">
             {t('Verification Plan')} #{verificationPlan.unicefId}
             <AdminButton adminUrl={verificationPlan.adminUrl} sx={{ ml: 2 }} />
           </Typography>

src/frontend/src/components/payments/VerifyManual.tsx

@@ -100,8 +100,8 @@ export function VerifyManual({
                       label="Status"
                       style={{ flexDirection: 'row' }}
                       choices={[
-                        { value: 'RECEIVED', name: t('Received') },
-                        { value: 'NOT_RECEIVED', name: t('Not Received') },
+                        { value: 'RECEIVED', name: t('Received'), dataCy: 'choice-received' },
+                        { value: 'NOT_RECEIVED', name: t('Not Received'), dataCy: 'choice-not-received' },
                       ]}
                       component={FormikRadioGroup}
                     />

src/frontend/src/shared/Formik/FormikRadioGroup/FormikRadioGroup.tsx

@@ -48,13 +48,15 @@ export function FormikRadioGroup({
             value: string;
             optionLabel?: string | ReactElement;
             name: string;
+            dataCy?: string;
           }) => (
             <Box p={2} mb={2} key={each.value}>
               <Box display="flex" alignItems={alignItems}>
                 <Radio
                   color="primary"
                   value={each.value}
                   checked={field.value === each.value}
+                  data-cy={each?.dataCy}
                 />
                 {withGreyBox ? (
                   <GreyBox p={2}>

tests/selenium/filters/test_filters.py

@@ -546,3 +546,11 @@ def test_grievance_tickets_filters_of_households_and_individuals(
         pageGrievanceTickets.getNavGrievance().click()
         assert "Grievance Tickets" in pageGrievanceTickets.getGrievanceTitle().text
         pageGrievanceTickets.getButtonNewTicket().click()
+
+    @pytest.mark.skip("ToDo")
+    def test_payment_verification_details_filters(
+        self,
+        pageGrievanceTickets: GrievanceTickets,
+        filters: Filters,
+    ) -> None:
+        pageGrievanceTickets.getNavPaymentVerification().click()

tests/selenium/helpers/helper.py

@@ -4,6 +4,7 @@
 from typing import Literal, Union
 
 from selenium.common import NoSuchElementException
+from selenium.common.exceptions import TimeoutException
 from selenium.webdriver import Chrome, Keys
 from selenium.webdriver.common.action_chains import ActionChains
 from selenium.webdriver.common.by import By
@@ -42,8 +43,6 @@ def get_elements(self, locator: str, element_type: str = By.CSS_SELECTOR, attemp
             raise Exception("No elements found")
 
     def wait_for(self, locator: str, element_type: str = By.CSS_SELECTOR, timeout: int = DEFAULT_TIMEOUT) -> WebElement:
-        from selenium.common.exceptions import TimeoutException
-
         try:
             return self._wait(timeout).until(EC.visibility_of_element_located((element_type, locator)))
         except TimeoutException:
@@ -63,7 +62,14 @@ def wait_for_text_disappear(
     def wait_for_text(
         self, text: str, locator: str, element_type: str = By.CSS_SELECTOR, timeout: int = DEFAULT_TIMEOUT
     ) -> Union[Literal[False, True], bool]:
-        return self._wait(timeout).until(EC.text_to_be_present_in_element((element_type, locator), text))
+        try:
+            return self._wait(timeout).until(EC.text_to_be_present_in_element((element_type, locator), text))
+        except TimeoutException:
+            pass
+        raise NoSuchElementException(
+            f"Element: {text} not found in {locator}. Displayed text:"
+            f" {self.driver.find_element(element_type, locator).text}"
+        )
 
     def wait_for_new_url(self, old_url: str, retry: int = 5) -> str:
         for _ in range(retry):
@@ -171,6 +177,16 @@ def screenshot(
         sleep(delay_sec)
         self.driver.get_screenshot_as_file(os.path.join(f"{file_path}", f"{file_name}.{file_type}"))
 
+    def scroll(self, scroll_by: int = 600, wait_after_start_scrolling: int = 2, execute: int = 1) -> None:
+        for _ in range(execute):
+            self.driver.execute_script(  # type: ignore
+                f"""
+                container = document.querySelector("div[data-cy='main-content']")
+                container.scrollBy(0,{scroll_by})
+                """
+            )
+            sleep(wait_after_start_scrolling)
+
     def get_value_of_attributes(self, attribute: str = "data-cy") -> None:
         sleep(1)
         ids = self.driver.find_elements(By.XPATH, f"//*[@{attribute}]")

tests/selenium/page_object/base_components.py

@@ -2,6 +2,7 @@
 
 from selenium.webdriver.remote.webelement import WebElement
 
+from hct_mis_api.apps.core.utils import encode_id_base64
 from tests.selenium.helpers.helper import Common
 
 
@@ -56,6 +57,13 @@ class BaseComponents(Common):
     # Text
     globalProgramFilterText = "All Programmes"
 
+    def navigate_to_page(self, business_area_slug: str, program_id: str) -> None:
+        self.driver.get(self.get_page_url(business_area_slug, program_id))
+
+    def get_page_url(self, business_area_slug: str, program_id: str) -> str:
+        encoded_program_id = encode_id_base64(program_id, "Program")
+        return f"{self.driver.live_server.url}/{business_area_slug}/programs/{encoded_program_id}"
+
     def getMainContent(self) -> WebElement:
         return self.wait_for(self.mainContent)
 
@@ -190,6 +198,7 @@ def getBreadcrumbsChevronIcon(self) -> WebElement:
         return self.wait_for(self.breadcrumbsChevronIcon)
 
     def getArrowBack(self) -> WebElement:
+        self.scroll(scroll_by=-600)
         return self.wait_for(self.arrowBack)
 
     def getNavProgramLog(self) -> WebElement:

tests/selenium/page_object/grievance/details_grievance_page.py

@@ -153,6 +153,10 @@ class GrievanceDetailsPage(BaseComponents):
     logRow = 'div[data-cy="log-row"]'
     paymentRecord = 'span[data-cy="payment-record"]'
     labelGender = 'div[data-cy="label-GENDER"]'
+    grievanceVerify = '[data-cy="grievance-verify"]'
+    inputNewReceivedAmount = '[data-cy="input-newReceivedAmount"]'
+    buttonSubmit = 'button[data-cy="button-submit"]'
+    grievanceApprove = '[data-cy="grievance-approve"]'
 
     # Texts
     textTitle = "Ticket ID: "
@@ -676,6 +680,18 @@ def getButtonRotateImage(self) -> WebElement:
     def getLinkShowPhoto(self) -> WebElement:
         return self.wait_for(self.linkShowPhoto)
 
+    def getGrievanceVerify(self) -> WebElement:
+        return self.wait_for(self.grievanceVerify)
+
+    def getInputNewReceivedAmount(self) -> WebElement:
+        return self.wait_for(self.inputNewReceivedAmount)
+
+    def getButtonSubmit(self) -> WebElement:
+        return self.wait_for(self.buttonSubmit)
+
+    def getGrievanceApprove(self) -> WebElement:
+        return self.wait_for(self.grievanceApprove)
+
     def getLabelStatus(self) -> WebElement:
         return self.wait_for(self.labelStatus)
 

tests/selenium/page_object/payment_module/payment_module.py

@@ -147,9 +147,11 @@ def getTablePagination(self) -> WebElement:
         return self.wait_for(self.tablePagination)
 
     def getRows(self) -> [WebElement]:
+        self.wait_for(self.rows)
         return self.get_elements(self.rows)
 
     def getRow(self, number: int) -> WebElement:
+        self.wait_for(self.rows)
         try:
             sleep(0.5)
             return self.get_elements(self.rows)[number]

tests/selenium/page_object/payment_verification/payment_record.py

@@ -29,6 +29,7 @@ class PaymentRecord(BaseComponents):
     labelFsp = 'div[data-cy="label-FSP"]'
     buttonSubmit = 'button[data-cy="button-submit"]'
     inputReceivedamount = 'input[data-cy="input-receivedAmount"]'
+    choiceNotReceived = '[data-cy="choice-not-received"]'
 
     def getInputReceivedamount(self) -> WebElement:
         return self.wait_for(self.inputReceivedamount)
@@ -52,9 +53,16 @@ def getButtonEdPlan(self) -> WebElement:
     def getLabelStatus(self) -> [WebElement]:
         return self.get_elements(self.labelStatus)
 
+    def getStatus(self) -> [WebElement]:
+        self.wait_for(self.statusContainer)
+        return self.get_elements(self.statusContainer)
+
     def getStatusContainer(self) -> WebElement:
         return self.wait_for(self.statusContainer)
 
+    def waitForStatusContainer(self, status: str) -> []:
+        return self.wait_for_text(status, self.statusContainer)
+
     def getLabelHousehold(self) -> WebElement:
         return self.wait_for(self.labelHousehold)
 
@@ -111,3 +119,6 @@ def getLabelFsp(self) -> WebElement:
 
     def getButtonSubmit(self) -> WebElement:
         return self.wait_for(self.buttonSubmit)
+
+    def getChoiceNotReceived(self) -> WebElement:
+        return self.wait_for(self.choiceNotReceived)