Added cy-ids to divs for testing purposes. Added a basic test for Cover.vue, and actual logic tests for SortedCovers.vue. All tests are passing.

client/components/covers/SortedCovers.vue

@@ -5,7 +5,7 @@
 <template>
   <div class="flex flex-col items-center sm:max-h-80 sm:overflow-y-scroll max-w-full">
     <!-- Primary Covers Section (based on preferred aspect ratio) -->
-    <div v-if="primaryCovers.length" class="flex items-center flex-wrap justify-center">
+    <div cy-id="primaryCoversSectionContainer" v-if="primaryCovers.length" class="flex items-center flex-wrap justify-center">
       <template v-for="cover in primaryCovers">
         <div :key="cover.url" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.url === selectedCover ? 'border-yellow-300' : ''" @click="$emit('select-cover', cover.url)">
           <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">
@@ -16,10 +16,10 @@
     </div>
 
     <!-- Divider only shows when there are covers in both sections -->
-    <div v-if="hasBothCoverTypes" class="w-full border-b border-white/10 my-4"></div>
+    <div cy-id="sortedCoversDivider" v-if="hasBothCoverTypes" class="w-full border-b border-white/10 my-4"></div>
 
     <!-- Secondary Covers Section (opposite aspect ratio) -->
-    <div v-if="secondaryCovers.length" class="flex items-center flex-wrap justify-center">
+    <div cy-id="secondaryCoversSectionContainer" v-if="secondaryCovers.length" class="flex items-center flex-wrap justify-center">
       <template v-for="cover in secondaryCovers">
         <div :key="cover.url" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.url === selectedCover ? 'border-yellow-300' : ''" @click="$emit('select-cover', cover.url)">
           <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">

client/components/modals/item/tabs/Cover.vue

@@ -2,7 +2,7 @@
   <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
     <div class="flex flex-col sm:flex-row mb-4">
       <!-- Current book cover -->
-      <div class="relative self-center md:self-start">
+      <div cy-id="currentBookCover" class="relative self-center md:self-start">
         <covers-preview-cover :src="coverUrl" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
         <!-- book cover overlay -->
         <div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
@@ -16,10 +16,10 @@
       </div>
 
       <!-- Contains Upload new cover and local covers -->
-      <div class="grow sm:pl-2 md:pl-6 sm:pr-2 mt-6 md:mt-0">
+      <div cy-id="uploadCoverAndLocalImages" class="grow sm:pl-2 md:pl-6 sm:pr-2 mt-6 md:mt-0">
         <!-- Upload new cover -->
-        <div class="flex items-center">
-          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
+        <div cy-id="uploadCoverForm" class="flex items-center">
+          <div cy-id="uploadCoverBtn" v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
             <ui-file-input ref="fileInput" @change="fileUploadSelected">
               <span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span>
               <span class="material-symbols text-2xl inline-block md:hidden!">upload</span>
@@ -33,16 +33,16 @@
         </div>
 
         <!-- Locaal covers -->
-        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-white/10">
-          <div class="flex items-center justify-center py-2">
+        <div cy-id="localImagesContainer" v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-white/10">
+          <div cy-id="localImagesCountString" class="flex items-center justify-center py-2">
             <p>{{ localCovers.length }} local image{{ localCovers.length !== 1 ? 's' : '' }}</p>
             <div class="grow" />
             <ui-btn small @click="showLocalCovers = !showLocalCovers">{{ showLocalCovers ? $strings.ButtonHide : $strings.ButtonShow }}</ui-btn>
           </div>
 
-          <div v-if="showLocalCovers" class="flex items-center justify-center flex-wrap pb-2">
+          <div cy-id="showLocalCovers" v-if="showLocalCovers" class="flex items-center justify-center flex-wrap pb-2">
             <template v-for="localCoverFile in localCovers">
-              <div :key="localCoverFile.ino" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="localCoverFile.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(localCoverFile)">
+              <div cy-id="selectedLocalCover" :key="localCoverFile.ino" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="localCoverFile.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(localCoverFile)">
                 <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">
                   <covers-preview-cover :src="localCoverFile.localPath" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
                 </div>
@@ -55,35 +55,36 @@
 
     <!-- Search Cover Form -->
     <form @submit.prevent="submitSearchForm">
-      <div class="flex flex-wrap sm:flex-nowrap items-center justify-start -mx-1">
-        <div class="w-48 grow p-1">
+      <div cy-id="bookCoverSearchForm" class="flex flex-wrap sm:flex-nowrap items-center justify-start -mx-1">
+        <div cy-id="providerDropDown" class="w-48 grow p-1">
           <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
         </div>
-        <div class="w-72 grow p-1">
+        <div cy-id="searchTitleTextInput" class="w-72 grow p-1">
           <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
         </div>
-        <div v-show="provider != 'itunes' && provider != 'audiobookcovers'" class="w-72 grow p-1">
+        <div cy-id="searchAuthorTextInput" v-show="provider != 'itunes' && provider != 'audiobookcovers'" class="w-72 grow p-1">
           <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
         </div>
-        <ui-btn class="mt-5 ml-1 md:min-w-24" :padding-x="4" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
+        <ui-btn cy-id="bookCoverSearchBtn" class="mt-5 ml-1 md:min-w-24" :padding-x="4" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
       </div>
     </form>
 
     <!-- Cover Search Results -->
-    <div v-if="hasSearched" class="mt-2">
+    <div cy-id="coverSearchResultsContainer" v-if="hasSearched" class="mt-2">
       <p v-if="!coversFound.length" class="text-center">{{ $strings.MessageNoCoversFound }}</p>
       <covers-sorted-covers v-else :covers="sortedCovers" :book-cover-aspect-ratio="bookCoverAspectRatio" :selected-cover="coverPath" @select-cover="updateCover" />
     </div>
 
-    <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
+    <!-- Local Image Upload Preview -->
+    <div cy-id="uploadPreviewImage" v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
       <p class="text-lg">{{ $strings.HeaderPreviewCover }}</p>
       <span class="absolute top-4 right-4 material-symbols text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
-      <div class="flex justify-center py-4">
+      <div cy-id="uploadPreviewImagePreview" class="flex justify-center py-4">
         <covers-preview-cover :src="previewUpload" :width="240" :book-cover-aspect-ratio="bookCoverAspectRatio" />
       </div>
-      <div class="absolute bottom-0 right-0 flex py-4 px-5">
-        <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">{{ $strings.ButtonReset }}</ui-btn>
-        <ui-btn :loading="processingUpload" color="bg-success" @click="submitCoverUpload">{{ $strings.ButtonUpload }}</ui-btn>
+      <div cy-id="uploadPreviewBtns" class="absolute bottom-0 right-0 flex py-4 px-5">
+        <ui-btn cy-id="uploadPreviewResetBtn" :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">{{ $strings.ButtonReset }}</ui-btn>
+        <ui-btn cy-id="uploadPreviewUploadBtn" :loading="processingUpload" color="bg-success" @click="submitCoverUpload">{{ $strings.ButtonUpload }}</ui-btn>
       </div>
     </div>
   </div>

client/cypress/tests/components/covers/SortedCovers.cy.js

@@ -0,0 +1,144 @@
+import SortedCovers from '@/components/covers/SortedCovers.vue'
+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
+  ]
+
+  const stubs = {
+    'covers-display-cover': DisplayCover
+  }
+
+  describe('with bookCoverAspectRatio = 1 (square preferred)', () => {
+    const mountOptions = {
+      propsData: {
+        covers: mockCovers,
+        bookCoverAspectRatio: 1,
+        selectedCover: ''
+      },
+      stubs
+    }
+
+    it('should render square covers in primary section', () => {
+      cy.mount(SortedCovers, mountOptions)
+
+      // The first section should contain the square covers
+      cy.get('.flex.items-center.flex-wrap.justify-center')
+        .first()
+        .within(() => {
+          // Should find 2 covers
+          cy.get('.cursor-pointer').should('have.length', 2)
+        })
+    })
+
+    it('should render rectangular covers in secondary section', () => {
+      cy.mount(SortedCovers, mountOptions)
+
+      // The second section should contain the rectangular covers
+      cy.get('.flex.items-center.flex-wrap.justify-center')
+        .eq(1)
+        .within(() => {
+          // Should find 2 covers
+          cy.get('.cursor-pointer').should('have.length', 2)
+        })
+    })
+
+    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')
+    })
+  })
+
+  describe('with bookCoverAspectRatio = 0.6666 (rectangle preferred)', () => {
+    const mountOptions = {
+      propsData: {
+        covers: mockCovers,
+        bookCoverAspectRatio: 0.6666,
+        selectedCover: ''
+      },
+      stubs
+    }
+
+    it('should render rectangular covers in primary section', () => {
+      cy.mount(SortedCovers, mountOptions)
+
+      // The first section should contain the rectangular covers
+      cy.get('.flex.items-center.flex-wrap.justify-center')
+        .first()
+        .within(() => {
+          // Should find 2 covers
+          cy.get('.cursor-pointer').should('have.length', 2)
+        })
+    })
+  })
+
+  describe('cover type variations', () => {
+    it('should not show divider with only square covers', () => {
+      const onlySquareCovers = [
+        { url: 'cover1.jpg', width: 400, height: 400 },
+        { url: 'cover3.jpg', width: 200, height: 200 }
+      ]
+      cy.mount(SortedCovers, {
+        propsData: {
+          covers: onlySquareCovers,
+          bookCoverAspectRatio: 1,
+          selectedCover: ''
+        },
+        stubs
+      })
+      // Divider should not be present
+      cy.get('&sortedCoversDivider').should('not.exist')
+    })
+
+    it('should not show divider with only rectangular covers', () => {
+      const onlyRectCovers = [
+        { url: 'cover2.jpg', width: 300, height: 450 },
+        { url: 'cover4.jpg', width: 350, height: 500 }
+      ]
+      cy.mount(SortedCovers, {
+        propsData: {
+          covers: onlyRectCovers,
+          bookCoverAspectRatio: 1,
+          selectedCover: ''
+        },
+        stubs
+      })
+      // Divider should not be present
+      cy.get('&sortedCoversDivider').should('not.exist')
+    })
+  })
+
+  it('should emit select-cover event when cover is clicked', () => {
+    cy.mount(SortedCovers, {
+      propsData: {
+        covers: mockCovers,
+        bookCoverAspectRatio: 1, // square covers preferred and sorted first.
+        selectedCover: ''
+      },
+      stubs
+    })
+
+    // Spy on the emit event
+    const spy = cy.spy()
+    cy.mount(SortedCovers, {
+      propsData: { covers: mockCovers, bookCoverAspectRatio: 1 },
+      stubs,
+      listeners: {
+        'select-cover': spy
+      }
+    })
+
+    // Click the first cover and verify the event
+    cy.get('.cursor-pointer')
+      .first()
+      .click()
+      .then(() => {
+        expect(spy).to.be.calledWith(mockCovers[2].url) // Currently the third cover is the smallest square cover and would be first in the list given the aspect ratio
+      })
+  })
+})

client/cypress/tests/components/modals/item/tab/Cover.cy.js

@@ -0,0 +1,131 @@
+import Cover from '@/components/modals/item/tabs/Cover.vue'
+import PreviewCover from '@/components/covers/PreviewCover.vue'
+import SortedCovers from '@/components/covers/SortedCovers.vue'
+import Btn from '@/components/ui/Btn.vue'
+import FileInput from '@/components/ui/FileInput.vue'
+import TextareaInput from '@/components/ui/TextareaInput.vue'
+import Tooltip from '@/components/ui/Tooltip.vue'
+import Dropdown from '@/components/ui/Dropdown.vue'
+import TextInputWithLabel from '@/components/ui/TextInputWithLabel.vue'
+
+const sinon = Cypress.sinon
+
+describe('Cover.vue', () => {
+  const propsData = {
+    processing: false,
+    libraryItem: {
+      id: 'item-1',
+      media: {
+        coverPath: 'client\\cypress\\fixtures\\images\\cover1.jpg',
+        metadata: { title: 'Test Book', authorName: 'Test Author' }
+      },
+      mediaType: 'book',
+      libraryFiles: [
+        {
+          ino: '649644248522215267',
+          metadata: {
+            filename: 'cover1.jpg',
+            ext: '.jpg',
+            path: 'client\\cypress\\fixtures\\images\\cover1.jpg',
+            relPath: 'cover1.jpg',
+            size: 325531,
+            mtimeMs: 1638754803540,
+            ctimeMs: 1645978261003,
+            birthtimeMs: 0
+          },
+          addedAt: 1650621052495,
+          updatedAt: 1650621052495,
+          fileType: 'image'
+        }
+      ]
+    },
+    coversFound: [],
+    coverPath: 'client\\cypress\\fixtures\\images\\cover1.jpg'
+  }
+
+  const mocks = {
+    $strings: {
+      ButtonSearch: 'Search',
+      MessageNoCoversFound: 'No covers found',
+      HeaderPreviewCover: 'Preview Cover',
+      ButtonReset: 'Reset',
+      ButtonUpload: 'Upload',
+      ToastInvalidUrl: 'Invalid URL',
+      ToastCoverUpdateFailed: 'Cover update failed',
+      LabelSearchTitle: 'Title',
+      LabelSearchTerm: 'Search term',
+      LabelSearchTitleOrASIN: 'Title or ASIN'
+    },
+    $store: {
+      getters: {
+        'globals/getPlaceholderCoverSrc': 'placeholder.jpg',
+        'globals/getLibraryItemCoverSrcById': () => 'cover.jpg',
+        'libraries/getBookCoverAspectRatio': 1,
+        'user/getUserCanUpload': true,
+        'user/getUserCanDelete': true,
+        'user/getUserToken': 'token',
+        'scanners/providers': ['google'],
+        'scanners/coverOnlyProviders': [],
+        'scanners/podcastProviders': []
+      },
+      state: {
+        libraries: {
+          currentLibraryId: 'library-123'
+        },
+        scanners: {
+          providers: ['google'],
+          coverOnlyProviders: [],
+          podcastProviders: []
+        }
+      }
+    },
+    $eventBus: {
+      $on: () => {},
+      $off: () => {}
+    }
+  }
+
+  const stubs = {
+    'covers-preview-cover': PreviewCover,
+    'covers-sorted-covers': SortedCovers,
+    'ui-btn': Btn,
+    'ui-file-input': FileInput,
+    'ui-text-input': TextareaInput,
+    'ui-tooltip': Tooltip,
+    'ui-dropdown': Dropdown,
+    'ui-text-input-with-label': TextInputWithLabel
+  }
+
+  const mountOptions = {
+    propsData,
+    mocks,
+    stubs
+  }
+
+  it('should render the default component', () => {
+    // Pre-searched state
+
+    cy.mount(Cover, mountOptions)
+
+    cy.get('&currentBookCover').should('exist')
+
+    cy.get('&uploadCoverAndLocalImages').should('exist')
+    cy.get('&uploadCoverForm').should('exist')
+    cy.get('&uploadCoverBtn').should('exist')
+
+    cy.get('&localImagesContainer').should('exist')
+    cy.get('&localImagesCountString').should('exist')
+
+    // Click the button to show local covers
+    cy.get('&localImagesCountString').find('button').click()
+    cy.get('&showLocalCovers').should('exist')
+    // Assert the local cover image is displayed
+    cy.get('&showLocalCovers').find('img').should('have.attr', 'src').and('include', '/api/items/item-1/file/649644248522215267')
+
+    cy.get('&bookCoverSearchForm').should('exist')
+    cy.get('&providerDropDown').should('exist')
+    cy.get('&searchTitleTextInput').should('exist')
+    cy.get('&searchAuthorTextInput').should('exist')
+    cy.get('&bookCoverSearchBtn').should('exist')
+  })
+})