Change a couple of element ids to camelCase

This commit is contained in:
mikiher 2024-04-29 07:59:38 +03:00
parent 8dbe35e5aa
commit 6236f53b4f
4 changed files with 8 additions and 8 deletions

View File

@ -67,7 +67,7 @@ describe("LazySeriesCard", () => {
})
cy.get("#seriesLengthMarker").should("be.visible").and("have.text", propsData.seriesMount.books.length)
cy.get("#seriesProgressBar").should("not.exist")
cy.get("#HoveringDisplayTitle").should("be.hidden")
cy.get("#hoveringDisplayTitle").should("be.hidden")
cy.get("#rssFeedMarker").should("be.visible")
cy.get("#standardBottomDisplayTitle").should("not.exist")
cy.get("#detailBottomDisplayTitle").should("be.visible")
@ -79,7 +79,7 @@ describe("LazySeriesCard", () => {
cy.mount(LazySeriesCard, { propsData, stubs, mocks })
cy.get("#series-card-0").trigger("mouseover")
cy.get("#HoveringDisplayTitle").should("be.visible").should("have.text", "The Lord of the Rings")
cy.get("#hoveringDisplayTitle").should("be.visible").should("have.text", "The Lord of the Rings")
cy.get("#rssFeedMarker").should("not.exist")
})

View File

@ -9,7 +9,7 @@
<div id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
<div id="HoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
<div id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
<p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
</div>

View File

@ -42,7 +42,7 @@ describe('<NarratorCard />', () => {
let mountOptions = { propsData, mocks }
cy.mount(NarratorCard, mountOptions)
cy.get('#numbooks').should('have.text', '5 Books')
cy.get('#numBooks').should('have.text', '5 Books')
})
it('renders 1 book correctly', () => {
@ -50,7 +50,7 @@ describe('<NarratorCard />', () => {
let mountOptions = { propsData, mocks }
cy.mount(NarratorCard, mountOptions)
cy.get('#numbooks').should('have.text', '1 Book')
cy.get('#numBooks').should('have.text', '1 Book')
})
@ -59,7 +59,7 @@ describe('<NarratorCard />', () => {
let mountOptions = { propsData, mocks }
cy.mount(NarratorCard, mountOptions)
cy.get('#name').should('have.text', '')
cy.get('#numbooks').should('have.text', '0 Books')
cy.get('#numBooks').should('have.text', '0 Books')
})
it('has the correct width and height', () => {
@ -81,6 +81,6 @@ describe('<NarratorCard />', () => {
let mountOptions = { propsData, mocks }
cy.mount(NarratorCard, mountOptions)
cy.get('#name').should('have.css', 'font-size', '14.4px') // 0.75 * 1.2 * 16
cy.get('#numbooks').should('have.css', 'font-size', '12.48px') // 0.65 * 1.2 * 16
cy.get('#numBooks').should('have.css', 'font-size', '12.48px') // 0.65 * 1.2 * 16
})
})

View File

@ -8,7 +8,7 @@
<!-- Narrator name & num books overlay -->
<div class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
<p id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
<p id="numbooks" class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
<p id="numBooks" class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
</div>
</div>
</nuxt-link>