Dataview search e2e Tests

apps/web-mzima-client/src/app/feed/feed.component.html

@@ -212,7 +212,7 @@ <h3 class="menu-title">{{ 'app.mark_as' | translate }}</h3>
       [attr.data-qa]="'posts'"
     >
       <!-- No posts -->
-      <span *ngIf="!posts.length" class="posts-empty">
+      <span *ngIf="!posts.length" class="posts-empty" data-qa="posts-empty">
         <ng-container *ngIf="isDefaultFilters">
           <!-- No posts 1a: When there are no posts at all in the deployment or there no posts because none can be viewed by a user due to the permissions they have  -->
           <ng-container *ngIf="!userIsSearchingPostsByKeyword">

apps/web-mzima-client/src/app/shared/components/search-form/search-form.component.html

@@ -25,6 +25,7 @@
       class="search-form__form-control"
       [ngModelOptions]="{ standalone: true }"
       [placeholder]="'global_filter.search' | translate"
+      [data-qa]="'search-form-search-posts'"
     />
     <mzima-client-button
       matSuffix

apps/web-mzima-client/src/env.json

@@ -13,4 +13,4 @@
   "sentry_dsn": "",
   "sentry_environment": "",
   "sentry_debug_mode": false
-}
+}

e2e-testing/cypress.env.json

@@ -6,4 +6,4 @@
   "ush_user_email": "[email protected]",
   "ush_user_pwd": "1234567",
   "ush_user_name": "Automation User Member Role"
-}
+}

e2e-testing/cypress/e2e/12-data-view/data-view-search.cy.js

@@ -0,0 +1,18 @@
+import DataViewFunctions from '../../functions/DataViewFunctions/DataViewFunctions';
+const dataViewFunctions = new DataViewFunctions();
+
+describe('Search and Verify Posts', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('baseUrl'));
+  });
+
+  it('should display posts with the keyword in title or description', () => {
+    const searchKeyword = 'election';
+    dataViewFunctions.search_and_verify_results(searchKeyword);
+  });
+
+  it('should display an empty state when searching with special characters', () => {
+    const specialCharKeyword = '!@#$%^&*';
+    dataViewFunctions.search_and_verify_results_with_special_characters(specialCharKeyword);
+  });
+});

e2e-testing/cypress/functions/DataViewFunctions/DataViewFunctions.js

@@ -5,7 +5,7 @@ const loginFunctions = new LoginFunctions();
 
 class DataViewFunctions {
   click_data_view_btn() {
-    cy.get(DataViewLocators.dataViewBtn).click();
+    cy.get(DataViewLocators.dataViewBtn).should('be.visible').click({ force: true });
     cy.url().should('include', '/feed');
   }
 
@@ -25,6 +25,35 @@ class DataViewFunctions {
       .children(DataViewLocators.postItem)
       .contains('Automated Title Response');
   }
+  search_and_verify_results(keyword) {
+    this.click_data_view_btn();
+    cy.get(DataViewLocators.searchInput).clear({ force: true }).type(keyword, { force: true });
+
+    // Wait for the API request to fetch results
+    cy.intercept('GET', '**/api/v5/posts/stats*').as('searchResults');
+    cy.wait('@searchResults');
+
+    // Verify that results contain the keyword in the title or description
+    cy.get(DataViewLocators.postPreview).within(() => {
+      cy.get(DataViewLocators.postItem).each(($post) => {
+        cy.wrap($post)
+          .invoke('text')
+          .then((text) => {
+            expect(text.toLowerCase()).to.include(keyword.toLowerCase());
+          });
+      });
+    });
+  }
+  search_and_verify_results_with_special_characters(keyword) {
+    const specialCharacterRegex = /^[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]+$/;
+    if (!specialCharacterRegex.test(keyword)) {
+      throw new Error('Provided keyword does not contain only special characters');
+    }
+
+    this.click_data_view_btn();
+    cy.get(DataViewLocators.searchInput).clear({ force: true }).type(keyword, { force: true });
+    cy.get(DataViewLocators.postsEmptyMessage).should('be.visible');
+  }
 }
 
 export default DataViewFunctions;

e2e-testing/cypress/locators/DataViewLocators.js

@@ -18,7 +18,8 @@ const DataViewLocators = {
   publishPostBtn: '[data-qa="btn-publish-post"]',
 
   postDetails: '[data-qa="post-details"]',
-
+  searchInput: '[data-qa="search-form-search-posts"]',
+  postsEmptyMessage: '[data-qa="posts-empty"]',
 };
 
 export default DataViewLocators;