groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-08 02:11:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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.

Browse source
This commit is contained in:
tagmeh 2025-08-08 00:38:27 -05:00
parent 43ca263eac
commit 34c4e7b084
4 changed files with 298 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

39
client/components/modals/item/tabs/Cover.vue
View file

@ -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>