E2e tests for adding a post to a collection

apps/web-mzima-client/src/app/post/post-head/post-head.component.html

@@ -31,7 +31,7 @@
     class="post-head__control post-head__control--dots"
     [matMenuTriggerFor]="actions"
   >
-    <mat-icon icon svgIcon="dots"></mat-icon>
+    <mat-icon icon svgIcon="dots" [data-qa]="'more-post-actions'"></mat-icon>
   </mzima-client-button>
 
   <mat-menu #actions="matMenu" xPosition="before">
@@ -42,6 +42,7 @@
       "
       mat-menu-item
       (click)="addToCollection()"
+      [data-qa]="'add-collection-to-post'"
     >
       <mat-icon svgIcon="collections"></mat-icon>
       {{ 'set.add_to_collection' | translate }}

apps/web-mzima-client/src/app/shared/components/collection-item/collection-item.component.html

@@ -3,9 +3,14 @@
   class="collection-item"
   (click)="selectable && changeChecked($event)"
   [ngClass]="{ 'collection-item--has-checkbox': selectable }"
-  [attr.data-qa]="'collection-item'"
+  [attr.data-qa]="'collection-item' + collection.id"
 >
-  <div *ngIf="selectable" class="collection-item__checkbox" (click)="$event.preventDefault()">
+  <div
+    *ngIf="selectable"
+    class="collection-item__checkbox"
+    (click)="$event.preventDefault()"
+    [attr.data-qa]="'collection-item-checkbox'"
+  >
     <mat-checkbox [checked]="checked"> </mat-checkbox>
   </div>
   <div class="collection-item__actions" *ngIf="actions && !selectable">

e2e-testing/cypress/e2e/7-collections/collections.cy.js

@@ -14,7 +14,7 @@ describe("Automated Tests for Collections", () => {
     collectionFunctions.create_collection();
   });
 
-  it.skip("Add post to collection", ()=>{
+  it("Add post to collection", ()=>{
     collectionFunctions.add_post_to_collection();
   })
 });

e2e-testing/cypress/functions/CollectionFunctions.js

@@ -20,6 +20,7 @@ class CollectionFunctions {
 
   save_collection() {
     cy.get(CollectionLocators.saveCollectionBtn).click();
+    cy.get(CollectionLocators.successBtn).click();
   }
 
   open_collections() {
@@ -49,12 +50,18 @@ class CollectionFunctions {
     cy.get(CollectionLocators.postCheckBox).click({ force: true });
     this.save_post();
     cy.get(CollectionLocators.successBtn).click();
-  }
-
-  verify_post_added_to_collection() {
-    this.open_collections();
-    this.select_collections();
-    cy.contains('Post Title').should('exist');
+    cy.get(CollectionLocators.postItem).eq(0).find(CollectionLocators.morePostActionsBtn).click();
+    cy.get(CollectionLocators.addCollectionToPostCheckbox).click();
+    cy.get(CollectionLocators.selectCollection)
+      .children(CollectionLocators.collectionCheckbox)
+      .click();
+    cy.get(CollectionLocators.closeCollectionModalBtn).click();
+    cy.get(CollectionLocators.collectionBtn).click();
+    cy.get(CollectionLocators.collectionItem).click({ force: true });
+    cy.get(CollectionLocators.dataViewBtn).click({ force: true });
+    cy.get(CollectionLocators.postPreview)
+      .children(CollectionLocators.postItem)
+      .contains('Post Title');
   }
 
   create_collection() {
@@ -67,8 +74,8 @@ class CollectionFunctions {
   }
 
   add_post_to_collection() {
+    this.create_collection();
     this.post_to_collection();
-    this.verify_post_added_to_collection();
   }
 }
 

e2e-testing/cypress/locators/CollectionLocators.js

@@ -5,7 +5,8 @@ const CollectionLocators = {
   collectionDescField: '[data-qa="description"]',
   onlyMeRadio: '[data-qa="only-me"]',
   saveCollectionBtn: '[data-qa="save-collection-btn"]',
-  selectCollection: '[data-qa="collection-item"]',
+  selectCollection: '[data-qa="collection-item270"]',
+  collectionCheckbox: '[data-qa="collection-item-checkbox"]',
   surveyItem: '[data-qa="add-post-modal-surveys-item2"]',
   submitPostButton: '[data-qa="submit-post-button"]',
   surveySelectionList: '[data-qa="survey-selection-list"]',
@@ -19,8 +20,15 @@ const CollectionLocators = {
   surveySelectItem: '[data-qa="survey-select-item2"]',
   addPostButton: '[data-qa="submit-post-button"]',
   saveCollectionButton: '[data-qa="save-collection-btn"]',
-  collectionItem: '[data-qa="collection-item"]',
+  collectionItem: '[data-qa="collection-item270"]',
   visibilityOption: '[data-qa="option"]',
+  postItem: '[data-qa="post-item"]',
+  morePostActionsBtn: '[data-qa="more-post-actions"]',
+  addCollectionToPostCheckbox: '[data-qa="add-collection-to-post"]',
+  closeCollectionModalBtn: '[data-qa="btn-close"]',
+  dataViewBtn: '[data-qa="btn-data"]',
+  postPreview: '[data-qa="post-preview"]',
+  postItem: '[data-qa="post-item"]',
 };
 
 export default CollectionLocators;