Added more tests around the discover page

tests/cypress/integration/page-objects/discover/discover.page.ts

@@ -1,37 +1,80 @@
 import { BasePage } from "../base.page";
 
+class DiscoverCard {
+  private id: string;
+  private movie: boolean;
+  constructor(id: string, movie: boolean) {
+    this.id = id;
+    this.movie = movie;
+  }
+
+  get topLevelCard(): Cypress.Chainable<any> {
+      return cy.get(`#result${this.id}`);
+  }
+
+  get requestType(): Cypress.Chainable<any> {
+    return cy.get(`#type${this.id}`);
+  }
+
+  get statusClass(): Cypress.Chainable<any> {
+    return cy.get(`#status${this.id}`);
+  }
+
+  get availabilityText(): Cypress.Chainable<any> {
+    return cy.get(`#availabilityStatus${this.id}`);
+  }
+
+  get title(): Cypress.Chainable<any> {
+    return cy.get(`#title${this.id}`);
+  }
+
+  get overview(): Cypress.Chainable<any> {
+    return cy.get(`#overview${this.id}`);
+  }
+
+  get requestButton(): Cypress.Chainable<any> {
+    return cy.get(`button > [data-test=requestButton${this.id}${this.movie ? '1' : '0'}]`);
+  }
+
+  verifyTitle(expected: string): Cypress.Chainable<any> {
+      return this.title.should('have.text',expected);
+  }
+}
+
 class CarouselComponent {
-    private id: string;
+  private type: string;
 
+  get combinedButton(): Cypress.Chainable<any> {
+    return cy.get(`#${this.type}Combined-button`);
+  }
 
-    get combinedButton(): Cypress.Chainable<any> {
-        return cy.get(`#${this.id}Combined-button`);
-    }
+  get movieButton(): Cypress.Chainable<any> {
+    return cy.get(`#${this.type}Movie-button`);
+  }
 
-    get movieButton(): Cypress.Chainable<any> {
-        return cy.get(`#${this.id}Movie-button`);
-    }
+  get tvButton(): Cypress.Chainable<any> {
+    return cy.get(`#${this.type}Tv-button`);
+  }
 
-    get tvButton(): Cypress.Chainable<any> {
-        return cy.get(`#${this.id}Tv-button`);
-    }
+  getCard(id: string, movie: boolean): DiscoverCard {
+    return new DiscoverCard(id, movie);
+  }
 
-    constructor(id: string) {
-        this.id = id;
-    }
+  constructor(id: string) {
+    this.type = id;
+  }
 }
 
 class DiscoverPage extends BasePage {
+  popularCarousel = new CarouselComponent("popular");
 
-    popularCarousel = new CarouselComponent('popular');
+  constructor() {
+    super();
+  }
 
-    constructor() {
-        super();
-    }
-
-    visit(options?: Cypress.VisitOptions): Cypress.Chainable<Cypress.AUTWindow> {
-        return cy.visit(`/discover`, options);
-    }
+  visit(options?: Cypress.VisitOptions): Cypress.Chainable<Cypress.AUTWindow> {
+    return cy.visit(`/discover`, options);
+  }
 }
 
 export const discoverPage = new DiscoverPage();

tests/cypress/support/commands.ts

@@ -99,4 +99,23 @@ Cypress.Commands.add("getByData", (selector) => {
 
   Cypress.Commands.add("getByDataLike", (selector) => {
     return cy.get(`[data-test*=${selector}]`);
+  });
+
+  Cypress.Commands.add('triggerHover', function(elements) {
+
+      fireEvent(elements, 'mouseover');
+
+  
+    function fireEvent(element, event) {
+      if (element.fireEvent) {
+        element.fireEvent('on' + event);
+      } else {
+        var evObj = document.createEvent('Events');
+  
+        evObj.initEvent(event, true, false);
+  
+        element.dispatchEvent(evObj);
+      }
+    }
+  
   });

tests/cypress/support/index.ts

@@ -16,6 +16,7 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 import './request.commands';
+import "cypress-real-events/support";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

tests/cypress/tests/discover/discover-cards.spec.ts

@@ -1,4 +1,4 @@
-import { discoverPage as Page } from '@/integration/page-objects';
+import { discoverPage as Page } from "@/integration/page-objects";
 
 describe("Discover Cards Tests", () => {
   beforeEach(() => {
@@ -6,69 +6,200 @@ describe("Discover Cards Tests", () => {
   });
 
   it("Popular combined should load movies and TV", () => {
-
-    cy.intercept("GET","**/search/Movie/Popular/**").as('moviePopular');
-    cy.intercept("GET","**/search/Tv/popular/**").as('tvPopular');
+    cy.intercept("GET", "**/search/Movie/Popular/**").as("moviePopular");
+    cy.intercept("GET", "**/search/Tv/popular/**").as("tvPopular");
     Page.visit();
 
-
-    cy.wait('@moviePopular');
-    cy.wait('@tvPopular');
-
+    cy.wait("@moviePopular");
+    cy.wait("@tvPopular");
   });
 
   it("Popular Movie should load movies", () => {
-
-    cy.intercept("GET","**/search/Movie/Popular/**").as('moviePopular');
+    cy.intercept("GET", "**/search/Movie/Popular/**").as("moviePopular");
     Page.visit();
     Page.popularCarousel.movieButton.click();
 
-    cy.wait('@moviePopular');
-
+    cy.wait("@moviePopular");
   });
 
-  it.only("Popular TV should load TV", () => {
-
-    cy.intercept("GET","**/search/Tv/popular/**").as('tvPopular');
+  it("Popular TV should load TV", () => {
+    cy.intercept("GET", "**/search/Tv/popular/**").as("tvPopular");
     Page.visit();
     Page.popularCarousel.tvButton.click();
 
-    cy.wait('@tvPopular');
+    cy.wait("@tvPopular");
   });
 
   it("Popular Moives selected when set in localstorage", () => {
-
-    window.localStorage.setItem("DiscoverOptions2","2");
-    cy.intercept("GET","**/search/Movie/Popular/**").as('moviePopular');
+    window.localStorage.setItem("DiscoverOptions2", "2");
+    cy.intercept("GET", "**/search/Movie/Popular/**").as("moviePopular");
     Page.visit();
-    Page.popularCarousel.movieButton.parent().should('have.class','button-active');
-
-    cy.wait('@moviePopular');
+    Page.popularCarousel.movieButton
+      .parent()
+      .should("have.class", "button-active");
 
+    cy.wait("@moviePopular");
   });
 
   it("Popular Tv selected when set in localstorage", () => {
-
-    window.localStorage.setItem("DiscoverOptions2","3");
-    cy.intercept("GET","**/search/Tv/popular/**").as('tvPopular');
+    window.localStorage.setItem("DiscoverOptions2", "3");
+    cy.intercept("GET", "**/search/Tv/popular/**").as("tvPopular");
     Page.visit();
-    Page.popularCarousel.tvButton.parent().should('have.class','button-active');
-
-    cy.wait('@tvPopular');
+    Page.popularCarousel.tvButton
+      .parent()
+      .should("have.class", "button-active");
 
+    cy.wait("@tvPopular");
   });
 
   it("Popular Combined selected when set in localstorage", () => {
-
-    window.localStorage.setItem("DiscoverOptions2","1");
-    cy.intercept("GET","**/search/Movie/Popular/**").as('moviePopular');
-    cy.intercept("GET","**/search/Tv/popular/**").as('tvPopular');
+    window.localStorage.setItem("DiscoverOptions2", "1");
+    cy.intercept("GET", "**/search/Movie/Popular/**").as("moviePopular");
+    cy.intercept("GET", "**/search/Tv/popular/**").as("tvPopular");
     Page.visit();
-    Page.popularCarousel.combinedButton.parent().should('have.class','button-active');
-
-    cy.wait('@moviePopular');
-    cy.wait('@tvPopular');
+    Page.popularCarousel.combinedButton
+      .parent()
+      .should("have.class", "button-active");
 
+    cy.wait("@moviePopular");
+    cy.wait("@tvPopular");
   });
 
+  it.skip("Not requested movie allows us to request", () => {
+    window.localStorage.setItem("DiscoverOptions2", "2");
+    cy.intercept("GET", "**/search/Movie/Popular/**", (req) => {
+      req.reply((res) => {
+        const body = res.body;
+        const movie = body[0];
+        movie.available = false;
+        movie.approved = false;
+        movie.requested = false;
+
+        body[0] = movie;
+        res.send(body);
+      });
+    }).as("cardsResponse");
+
+    Page.visit();
+
+    cy.wait("@cardsResponse").then((res) => {
+      const body = JSON.parse(res.response.body);
+      var expectedId = body[0].id;
+      var title = body[0].title;
+
+      const card = Page.popularCarousel.getCard(expectedId, true);
+      card.verifyTitle(title);
+      card.requestButton.should("exist");
+      // Not visible until hover
+      card.requestButton.should("not.be.visible");
+      cy.wait(500)
+      card.topLevelCard.realHover();
+
+      card.requestButton.should("be.visible");
+      card.requestButton.click();
+
+      cy.verifyNotification("has been successfully added!");
+
+      card.requestButton.should("not.be.visible");
+      card.availabilityText.should('have.text','Pending');
+      card.statusClass.should('have.class','requested');
+    });
   });
+
+  it.skip("Available movie does not allow us to request", () => {
+    window.localStorage.setItem("DiscoverOptions2", "2");
+    cy.intercept("GET", "**/search/Movie/Popular/**", (req) => {
+      req.reply((res) => {
+        const body = res.body;
+        const movie = body[1];
+        movie.available = true;
+        movie.approved = false;
+        movie.requested = false;
+
+        body[1] = movie;
+        res.send(body);
+      });
+    }).as("cardsResponse");
+
+    Page.visit();
+
+    cy.wait("@cardsResponse").then((res) => {
+      const body = JSON.parse(res.response.body);
+      var expectedId = body[1].id;
+      var title = body[1].title;
+
+      const card = Page.popularCarousel.getCard(expectedId, true);
+      card.verifyTitle(title);
+      card.topLevelCard.realHover();
+
+      card.requestButton.should("not.be.visible");
+      card.availabilityText.should('have.text','Available');
+      card.statusClass.should('have.class','available');
+    });
+  });
+
+  it.skip("Requested movie does not allow us to request", () => {
+    window.localStorage.setItem("DiscoverOptions2", "2");
+    cy.intercept("GET", "**/search/Movie/Popular/**", (req) => {
+      req.reply((res) => {
+        const body = res.body;
+        const movie = body[1];
+        movie.available = false;
+        movie.approved = false;
+        movie.requested = true;
+
+        body[1] = movie;
+        res.send(body);
+      });
+    }).as("cardsResponse");
+
+    Page.visit();
+
+    cy.wait("@cardsResponse").then((res) => {
+      const body = JSON.parse(res.response.body);
+      var expectedId = body[1].id;
+      var title = body[1].title;
+
+      const card = Page.popularCarousel.getCard(expectedId, true);
+      card.verifyTitle(title);
+
+      card.topLevelCard.realHover();
+
+      card.requestButton.should("not.be.visible");
+      card.availabilityText.should('have.text','Pending');
+      card.statusClass.should('have.class','requested');
+    });
+
+    it.skip("Approved movie does not allow us to request", () => {
+      window.localStorage.setItem("DiscoverOptions2", "2");
+      cy.intercept("GET", "**/search/Movie/Popular/**", (req) => {
+        req.reply((res) => {
+          const body = res.body;
+          const movie = body[1];
+          movie.available = false;
+          movie.approved = true;
+          movie.requested = true;
+  
+          body[1] = movie;
+          res.send(body);
+        });
+      }).as("cardsResponse");
+  
+      Page.visit();
+  
+      cy.wait("@cardsResponse").then((res) => {
+        const body = JSON.parse(res.response.body);
+        var expectedId = body[1].id;
+        var title = body[1].title;
+  
+        const card = Page.popularCarousel.getCard(expectedId, true);
+        card.verifyTitle(title);
+        card.topLevelCard.realHover();
+  
+        card.requestButton.should("not.be.visible");
+        card.availabilityText.should('have.text','Approved');
+        card.statusClass.should('have.class','approved');
+      });
+    });
+  });
+});