From 0a804c623316a765618ddc438d618852c257ccca Mon Sep 17 00:00:00 2001 From: tidusjar Date: Wed, 10 Mar 2021 22:25:35 +0000 Subject: [PATCH] Added more tests around the discover page --- .../card/discover-card.component.html | 18 +- .../carousel-list.component.html | 2 +- .../page-objects/discover/discover.page.ts | 85 ++++++-- tests/cypress/support/commands.ts | 19 ++ tests/cypress/support/index.ts | 1 + .../tests/discover/discover-cards.spec.ts | 195 +++++++++++++++--- tests/global.d.ts | 1 + tests/package.json | 3 + tests/tsconfig.json | 2 +- tests/yarn.lock | 5 + 10 files changed, 267 insertions(+), 64 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html index 35eae0e21..703c01652 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html @@ -1,12 +1,12 @@ - + -
+
-
+
{{RequestType[result.type] | humanize}}
-
- {{getAvailbilityStatus()}} +
+ {{getAvailbilityStatus()}}
-
{{result.title}}
-
{{result.overview}}
+
{{result.title}}
+
{{result.overview}}
-
+
- diff --git a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html index cfe8cc7d0..71fa3ea63 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html @@ -8,6 +8,6 @@ - + \ No newline at end of file diff --git a/tests/cypress/integration/page-objects/discover/discover.page.ts b/tests/cypress/integration/page-objects/discover/discover.page.ts index 269f891ec..7f05eaae2 100644 --- a/tests/cypress/integration/page-objects/discover/discover.page.ts +++ b/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 { + return cy.get(`#result${this.id}`); + } + + get requestType(): Cypress.Chainable { + return cy.get(`#type${this.id}`); + } + + get statusClass(): Cypress.Chainable { + return cy.get(`#status${this.id}`); + } + + get availabilityText(): Cypress.Chainable { + return cy.get(`#availabilityStatus${this.id}`); + } + + get title(): Cypress.Chainable { + return cy.get(`#title${this.id}`); + } + + get overview(): Cypress.Chainable { + return cy.get(`#overview${this.id}`); + } + + get requestButton(): Cypress.Chainable { + return cy.get(`button > [data-test=requestButton${this.id}${this.movie ? '1' : '0'}]`); + } + + verifyTitle(expected: string): Cypress.Chainable { + return this.title.should('have.text',expected); + } +} + class CarouselComponent { - private id: string; + private type: string; + get combinedButton(): Cypress.Chainable { + return cy.get(`#${this.type}Combined-button`); + } - get combinedButton(): Cypress.Chainable { - return cy.get(`#${this.id}Combined-button`); - } + get movieButton(): Cypress.Chainable { + return cy.get(`#${this.type}Movie-button`); + } - get movieButton(): Cypress.Chainable { - return cy.get(`#${this.id}Movie-button`); - } + get tvButton(): Cypress.Chainable { + return cy.get(`#${this.type}Tv-button`); + } - get tvButton(): Cypress.Chainable { - 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 { - return cy.visit(`/discover`, options); - } + visit(options?: Cypress.VisitOptions): Cypress.Chainable { + return cy.visit(`/discover`, options); + } } export const discoverPage = new DiscoverPage(); diff --git a/tests/cypress/support/commands.ts b/tests/cypress/support/commands.ts index 7b6151d6f..b0fab757c 100644 --- a/tests/cypress/support/commands.ts +++ b/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); + } + } + }); \ No newline at end of file diff --git a/tests/cypress/support/index.ts b/tests/cypress/support/index.ts index 9f14c128b..e7b106186 100644 --- a/tests/cypress/support/index.ts +++ b/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') diff --git a/tests/cypress/tests/discover/discover-cards.spec.ts b/tests/cypress/tests/discover/discover-cards.spec.ts index c0c6b962d..3ac556e46 100644 --- a/tests/cypress/tests/discover/discover-cards.spec.ts +++ b/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'); + }); + }); }); +}); diff --git a/tests/global.d.ts b/tests/global.d.ts index 70a3050e1..4545c29b2 100644 --- a/tests/global.d.ts +++ b/tests/global.d.ts @@ -14,6 +14,7 @@ declare namespace Cypress { getByData(selector: string, args: any[]): Chainable; getByData(selector: string): Chainable; getByDataLike(selector: string): Chainable; + triggerHover(): Chainable; requestGenericMovie(): Chainable; requestMovie(movieId: number): Chainable; diff --git a/tests/package.json b/tests/package.json index 078b12181..111521e19 100644 --- a/tests/package.json +++ b/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" } } diff --git a/tests/tsconfig.json b/tests/tsconfig.json index 90099e602..0c8f23ff6 100644 --- a/tests/tsconfig.json +++ b/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": { "@/*": ["./*"] diff --git a/tests/yarn.lock b/tests/yarn.lock index 3933df5cd..d0fb2726f 100644 --- a/tests/yarn.lock +++ b/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"