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/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')
+  })
+})