From 46d56a8f74b3390854d80af99910ea5fc289589f Mon Sep 17 00:00:00 2001
From: tagmeh <tagmeh@gmail.com>
Date: Fri, 8 Aug 2025 01:43:21 -0500
Subject: [PATCH] Added test to validate square/rectangle sub-sorting
 (ascending)

---
 .../components/covers/SortedCovers.cy.js      | 62 +++++++++++++++----
 1 file changed, 51 insertions(+), 11 deletions(-)

diff --git a/client/cypress/tests/components/covers/SortedCovers.cy.js b/client/cypress/tests/components/covers/SortedCovers.cy.js
index 8aff308d0..58c3f8f05 100644
--- a/client/cypress/tests/components/covers/SortedCovers.cy.js
+++ b/client/cypress/tests/components/covers/SortedCovers.cy.js
@@ -3,10 +3,14 @@ import DisplayCover from '@/components/covers/DisplayCover.vue'
 
 describe('SortedCovers.vue', () => {
   const mockCovers = [
-    { url: 'cover1.jpg', width: 400, height: 400 }, // square
-    { url: 'cover2.jpg', width: 300, height: 450 }, // rectangle
-    { url: 'cover3.jpg', width: 200, height: 200 }, // square (smaller)
-    { url: 'cover4.jpg', width: 350, height: 500 } // rectangle
+    // 3 rectangles, 4 squares
+    { url: 'cover1.jpg', width: 400, height: 400 }, // middle square
+    { url: 'cover2.jpg', width: 300, height: 450 }, // smallest rectangle
+    { url: 'cover3.jpg', width: 200, height: 200 }, // smallest square
+    { url: 'cover4.jpg', width: 350, height: 500 }, // middle rectangle
+    { url: 'cover5.jpg', width: 500, height: 500 }, // largest square
+    { url: 'cover6.jpg', width: 600, height: 800 }, // largest rectangle
+    { url: 'cover7.jpg', width: 450, height: 450 } // middle2 square
   ]
 
   const stubs = {
@@ -23,6 +27,42 @@ describe('SortedCovers.vue', () => {
       stubs
     }
 
+    it('should correctly sort covers by size within their categories', () => {
+      cy.mount(SortedCovers, mountOptions)
+
+      // Check primary section (squares)
+      cy.get('[cy-id="primaryCoversSectionContainer"] img')
+        .eq(0) // First section
+        .should('have.attr', 'src')
+        .and('include', 'cover3.jpg') // Smallest square first
+      cy.get('[cy-id="primaryCoversSectionContainer"] img')
+        .eq(1) // First section
+        .should('have.attr', 'src')
+        .and('include', 'cover1.jpg') // Middle square second
+      cy.get('[cy-id="primaryCoversSectionContainer"] img')
+        .eq(2) // First section
+        .should('have.attr', 'src')
+        .and('include', 'cover7.jpg') // Middle2 square third
+      cy.get('[cy-id="primaryCoversSectionContainer"] img')
+        .eq(3) // First section
+        .should('have.attr', 'src')
+        .and('include', 'cover5.jpg') // Largest square last
+
+      // Check secondary section (rectangles)
+      cy.get('[cy-id="secondaryCoversSectionContainer"] img')
+        .eq(0) // Second section
+        .should('have.attr', 'src')
+        .and('include', 'cover2.jpg') // Smallest rectangle first
+      cy.get('[cy-id="secondaryCoversSectionContainer"] img')
+        .eq(1) // Second section
+        .should('have.attr', 'src')
+        .and('include', 'cover4.jpg') // Middle rectangle second
+      cy.get('[cy-id="secondaryCoversSectionContainer"] img')
+        .eq(2) // Second section
+        .should('have.attr', 'src')
+        .and('include', 'cover6.jpg') // Largest rectangle last
+    })
+
     it('should render square covers in primary section', () => {
       cy.mount(SortedCovers, mountOptions)
 
@@ -30,8 +70,8 @@ describe('SortedCovers.vue', () => {
       cy.get('.flex.items-center.flex-wrap.justify-center')
         .first()
         .within(() => {
-          // Should find 2 covers
-          cy.get('.cursor-pointer').should('have.length', 2)
+          // Should find 3 covers
+          cy.get('.cursor-pointer').should('have.length', 4)
         })
     })
 
@@ -42,15 +82,15 @@ describe('SortedCovers.vue', () => {
       cy.get('.flex.items-center.flex-wrap.justify-center')
         .eq(1)
         .within(() => {
-          // Should find 2 covers
-          cy.get('.cursor-pointer').should('have.length', 2)
+          // Should find 3 covers
+          cy.get('.cursor-pointer').should('have.length', 3)
         })
     })
 
     it('should show divider when both cover types exist', () => {
       cy.mount(SortedCovers, mountOptions)
       // Divider should be present
-      cy.get('.border-b.border-white\\/10').should('exist')
+      cy.get('&sortedCoversDivider').should('exist')
     })
   })
 
@@ -71,8 +111,8 @@ describe('SortedCovers.vue', () => {
       cy.get('.flex.items-center.flex-wrap.justify-center')
         .first()
         .within(() => {
-          // Should find 2 covers
-          cy.get('.cursor-pointer').should('have.length', 2)
+          // Should find 3 covers
+          cy.get('.cursor-pointer').should('have.length', 3)
         })
     })
   })