Added more tests around the discover page

src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html

@@ -1,12 +1,12 @@
-<p-skeleton  *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
+<p-skeleton id="cardLoading{{result.id}}"  *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
 
-<div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
+<div id="result{{result.id}}" *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
     <div class="card-top-info">
-        <div class="top-left">
+        <div class="top-left" id="type{{result.id}}">
             {{RequestType[result.type] | humanize}}
         </div>
-        <div class="{{getStatusClass()}} top-right">
-            <span class="indicator"></span><span class="indicator-text">{{getAvailbilityStatus()}}</span>
+        <div class="{{getStatusClass()}} top-right" id="status{{result.id}}">
+            <span class="indicator"></span><span class="indicator-text" id="availabilityStatus{{result.id}}">{{getAvailbilityStatus()}}</span>
         </div>
     </div>
         <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
@@ -14,14 +14,14 @@
         <div class="middle">
             <a class="poster-overlay" [routerLink]="generateDetailsLink()">
                 <div class="summary">
-                    <div class="title">{{result.title}}</div>
-                    <div class="small-text ellipsis">{{result.overview}}</div>
+                    <div class="title" id="title{{result.id}}">{{result.title}}</div>
+                    <div class="small-text ellipsis" id="overview{{result.id}}">{{result.overview}}</div>
                 </div>
             </a>
         </div>
-        <div class="row button-request-container" *ngIf="!result.available && !result.approved">
+        <div class="row button-request-container" *ngIf="!result.available && !result.approved && !result.requested">
             <div class="button-request poster-overlay">
-                <button mat-raised-button class="btn-green full-width poster-request-btn" (click)="request($event)">
+                <button attr.data-test="requestButton{{result.id}}{{result.type}}" mat-raised-button class="btn-green full-width poster-request-btn" (click)="request($event)">
                     <mat-icon *ngIf="!loading">cloud_download</mat-icon>
                     <i *ngIf="loading" class="fas fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
                 </button>

src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html

@@ -8,6 +8,6 @@
 
 <p-carousel #carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions" (onPage)="newPage()">
     <ng-template let-result pTemplate="item">
-        <discover-card id="result{{result.id}}" [result]="result"></discover-card>
+        <discover-card [result]="result"></discover-card>
     </ng-template>
 </p-carousel>

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");
+    Page.visit();
+    Page.popularCarousel.movieButton
+      .parent()
+      .should("have.class", "button-active");
+
+    cy.wait("@moviePopular");
+  });
 
-    window.localStorage.setItem("DiscoverOptions2","2");
-    cy.intercept("GET","**/search/Movie/Popular/**").as('moviePopular');
+  it("Popular Tv selected when set in localstorage", () => {
+    window.localStorage.setItem("DiscoverOptions2", "3");
+    cy.intercept("GET", "**/search/Tv/popular/**").as("tvPopular");
     Page.visit();
-    Page.popularCarousel.movieButton.parent().should('have.class','button-active');
+    Page.popularCarousel.tvButton
+      .parent()
+      .should("have.class", "button-active");
 
-    cy.wait('@moviePopular');
+    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");
+    Page.visit();
+    Page.popularCarousel.combinedButton
+      .parent()
+      .should("have.class", "button-active");
+
+    cy.wait("@moviePopular");
+    cy.wait("@tvPopular");
   });
 
-  it("Popular Tv selected when set in localstorage", () => {
+  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");
 
-    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');
+    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("Popular Combined selected when set in localstorage", () => {
+  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");
 
-    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');
+    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');
+      });
+    });
   });
+});

tests/global.d.ts

@@ -14,6 +14,7 @@ declare namespace Cypress {
         getByData(selector: string, args: any[]): Chainable<any>;
         getByData(selector: string): Chainable<any>;
         getByDataLike(selector: string): Chainable<any>;
+        triggerHover(): Chainable<any>;
 
         requestGenericMovie(): Chainable<any>;
         requestMovie(movieId: number): Chainable<any>;

tests/package.json

@@ -22,5 +22,8 @@
     "e2e": "cypress run",
     "regression": "cypress run --config-file cypress/config/regression.json",
     "demo:open": "cypress open --config-file cypress/config/demo.json"
+  },
+  "dependencies": {
+    "cypress-real-events": "^1.3.0"
   }
 }

tests/tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "target": "es5",
         "lib": ["es2018", "dom"],
-        "types": ["cypress", "cypress-wait-until", "cypress-image-snapshot"],
+        "types": ["cypress", "cypress-wait-until", "cypress-image-snapshot", "cypress-real-events"],
         "baseUrl": "./cypress",
         "paths": {
             "@/*": ["./*"]

tests/yarn.lock

@@ -364,6 +364,11 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+cypress-real-events@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.3.0.tgz#d737d68dd590b28c71756d63fbf36b863e936912"
+  integrity sha512-IYkhC1C9tGR7eN5d4VmT/28swyYeRmj+c+e0YcblnnbF68CVAtpc4D+v1JiENZA4il8W5XEcI/FjI64ss2lIag==
+
 cypress-wait-until@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/cypress-wait-until/-/cypress-wait-until-1.7.1.tgz#3789cd18affdbb848e3cfc1f918353c7ba1de6f8"