Adding E2E tests

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>

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>

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');
 

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);