From 21e4b51336b129fbc9c6d63e85e2f164513ea5c5 Mon Sep 17 00:00:00 2001
From: Jason <jh5975@gmail.com>
Date: Tue, 1 Jun 2021 10:33:00 +0900
Subject: [PATCH] Adding E2E tests

---
 .../main/resources/templates/libraries.html   |  4 ++--
 .../main/resources/templates/recommended.html |  5 +++--
 .../libraries/searchOwnedMovies.spec.js       | 18 +++++++++++++++
 .../searchRecommendedMovies.spec.js           | 22 ++++++++++++++++++-
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/GapsWeb/src/main/resources/templates/libraries.html b/GapsWeb/src/main/resources/templates/libraries.html
index b06aa39..d7dd0fd 100755
--- a/GapsWeb/src/main/resources/templates/libraries.html
+++ b/GapsWeb/src/main/resources/templates/libraries.html
@@ -114,7 +114,7 @@
     <div class="card">
         <div class="row no-gutters">
             <div class="col-12 col-md-auto">
-                <img loading="lazy" data-cy="{{imdbId}}" style="height: auto; width: 225px; display: block;"
+                <img loading="lazy" style="height: auto; width: 225px; display: block;"
                      src="http://{{address}}:{{port}}{{posterUrl}}/?X-Plex-Token={{plexToken}}"
                      class="card-img" alt="Plex Poster">
             </div>
@@ -123,7 +123,7 @@
                     <h5 class="card-title">{{name}} ({{year}})</h5>
                     <p class="card-text text-muted">{{overview}}</p>
                     {{#each genres}}
-                    <div class="card-text">{{this}}</div>
+                    <div data-cy="{{this.tmdbId}}{{this}}" class="card-text">{{this}}</div>
                     {{/each}}
                 </div>
             </div>
diff --git a/GapsWeb/src/main/resources/templates/recommended.html b/GapsWeb/src/main/resources/templates/recommended.html
index 6860180..8e88e04 100755
--- a/GapsWeb/src/main/resources/templates/recommended.html
+++ b/GapsWeb/src/main/resources/templates/recommended.html
@@ -123,12 +123,13 @@
 <script id="movieCard" type="text/x-handlebars-template">
     <div class="card">
         <img loading="lazy" style="height: 450px;width: auto;display: block;filter: brightness(0.20);"
+             data-cy="backdropPath-{{imdbId}}"
              src="{{backdropPathUrl}}" class="card-img" alt="Backdrop Poster">
         <div class="card-img-overlay">
             <div class="row no-gutters">
                 <div class="col-12 col-md-auto">
                     <img loading="lazy" style="height: auto; width: 225px; display: block;"
-                         data-cy="{{imdbId}}"
+                         data-cy="posterUrl-{{imdbId}}"
                          src="{{posterUrl}}"
                          class="card-img" alt="Plex Poster">
                 </div>
@@ -139,7 +140,7 @@
                         <p class="card-text">{{overview}}</p>
                         <div>
                             {{#each genres}}
-                            <div class="card-text">{{this}}</div>
+                            <div data-cy="{{this.tmdbId}}{{this}}" class="card-text">{{this}}</div>
                             {{/each}}
                         </div>
                     </div>
diff --git a/cypress/integration/libraries/searchOwnedMovies.spec.js b/cypress/integration/libraries/searchOwnedMovies.spec.js
index 61269fe..042097c 100755
--- a/cypress/integration/libraries/searchOwnedMovies.spec.js
+++ b/cypress/integration/libraries/searchOwnedMovies.spec.js
@@ -35,6 +35,12 @@ describe('Find owned movies', () => {
       .clear()
       .type('Saw');
 
+    cy.get('[data-cy=Horror]')
+      .should('have.text', 'Horror');
+
+    cy.get('[data-cy=Crime]')
+      .should('have.text', 'Crime');
+
     cy.get('#movies_info')
       .should('have.text', 'Showing 1 to 1 of 1 entries');
   });
@@ -58,6 +64,12 @@ describe('Find owned movies', () => {
       .clear()
       .type('Saw');
 
+    cy.get('[data-cy=Horror]')
+      .should('have.text', 'Horror');
+
+    cy.get('[data-cy=Crime]')
+      .should('have.text', 'Crime');
+
     cy.get('#movies_info')
       .should('have.text', 'Showing 1 to 1 of 1 entries');
 
@@ -82,6 +94,12 @@ describe('Find owned movies', () => {
       .clear()
       .type('Saw');
 
+    cy.get('[data-cy=Horror]')
+      .should('have.text', 'Horror');
+
+    cy.get('[data-cy=Crime]')
+      .should('have.text', 'Crime');
+
     cy.get('#movies_info')
       .should('have.text', 'Showing 1 to 1 of 1 entries');
 
diff --git a/cypress/integration/recommended/searchRecommendedMovies.spec.js b/cypress/integration/recommended/searchRecommendedMovies.spec.js
index cdb9d0b..9e3ea10 100755
--- a/cypress/integration/recommended/searchRecommendedMovies.spec.js
+++ b/cypress/integration/recommended/searchRecommendedMovies.spec.js
@@ -8,7 +8,7 @@
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-/* global cy, describe, it, beforeEach */
+/* global cy, describe, expect, it, beforeEach */
 /* eslint no-undef: "error" */
 
 import {
@@ -31,6 +31,12 @@ function searchSawLibrary(cy) {
     .clear()
     .type('Saw');
 
+  cy.get('[data-cy=Horror]')
+    .should('have.text', 'Horror');
+
+  cy.get('[data-cy=Crime]')
+    .should('have.text', 'Crime');
+
   cy.get('#movies_info')
     .should('have.text', 'Showing 1 to 1 of 1 entries');
 
@@ -70,6 +76,20 @@ describe('Search for Recommended', () => {
 
     cy.get('[data-cy=searchForMovies]')
       .click();
+    
+    cy.get('[data-cy="backdropPath-tt0432348"]')
+      .should('be.visible')
+      .and(($img) => {
+        // "naturalWidth" and "naturalHeight" are set when the image loads
+        expect($img[0].naturalWidth).to.be.greaterThan(0);
+      });
+
+    cy.get('[data-cy=posterUrl-tt0432348]')
+      .should('be.visible')
+      .and(($img) => {
+        // "naturalWidth" and "naturalHeight" are set when the image loads
+        expect($img[0].naturalWidth).to.be.greaterThan(0);
+      });
 
     cy.scrollTo(0, 1000);