mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-08-04 02:05:06 +02:00
Major bookshelf refactor
This commit is contained in:
mikiher
parent
941f3248d8
commit
2186603039
22 changed files with 965 additions and 595 deletions
|
|
@ -13,9 +13,6 @@ describe('AuthorCard', () => {
|
|||
|
||||
const propsData = {
|
||||
author,
|
||||
width: 192 * 0.8,
|
||||
height: 192,
|
||||
sizeMultiplier: 1,
|
||||
nameBelow: false
|
||||
}
|
||||
|
||||
|
|
@ -27,7 +24,8 @@ describe('AuthorCard', () => {
|
|||
$store: {
|
||||
getters: {
|
||||
'user/getUserCanUpdate': true,
|
||||
'libraries/getLibraryProvider': () => 'audible.us'
|
||||
'libraries/getLibraryProvider': () => 'audible.us',
|
||||
'user/getSizeMultiplier': 1
|
||||
},
|
||||
state: {
|
||||
libraries: {
|
||||
|
|
@ -36,9 +34,9 @@ describe('AuthorCard', () => {
|
|||
}
|
||||
},
|
||||
$eventBus: {
|
||||
$on: () => { },
|
||||
$off: () => { },
|
||||
},
|
||||
$on: () => {},
|
||||
$off: () => {}
|
||||
}
|
||||
}
|
||||
|
||||
const stubs = {
|
||||
|
|
@ -59,8 +57,10 @@ describe('AuthorCard', () => {
|
|||
cy.get('&card').should(($el) => {
|
||||
const width = $el.width()
|
||||
const height = $el.height()
|
||||
expect(width).to.be.closeTo(propsData.width, 0.01)
|
||||
expect(height).to.be.closeTo(propsData.height, 0.01)
|
||||
const defaultHeight = 192
|
||||
const defaultWidth = defaultHeight * 0.8
|
||||
expect(width).to.be.closeTo(defaultWidth, 0.01)
|
||||
expect(height).to.be.closeTo(defaultHeight, 0.01)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -78,21 +78,25 @@ describe('AuthorCard', () => {
|
|||
.and(($el) => {
|
||||
const height = $el.height()
|
||||
const width = $el.width()
|
||||
const sizeMultiplier = propsData.sizeMultiplier
|
||||
const sizeMultiplier = 1
|
||||
const defaultFontSize = 16
|
||||
const defaultLineHeight = 1.5
|
||||
const fontSizeMultiplier = 0.75
|
||||
const px2 = 16
|
||||
const defaultHeight = 192
|
||||
const defaultWidth = defaultHeight * 0.8
|
||||
expect(height).to.be.closeTo(defaultFontSize * fontSizeMultiplier * sizeMultiplier * defaultLineHeight, 0.01)
|
||||
nameBelowHeight = height
|
||||
expect(width).to.be.closeTo(propsData.width - px2, 0.01)
|
||||
expect(width).to.be.closeTo(defaultWidth - px2, 0.01)
|
||||
})
|
||||
cy.get('&card').should(($el) => {
|
||||
const width = $el.width()
|
||||
const height = $el.height()
|
||||
const py1 = 8
|
||||
expect(width).to.be.closeTo(propsData.width, 0.01)
|
||||
expect(height).to.be.closeTo(propsData.height + nameBelowHeight + py1, 0.01)
|
||||
const defaultHeight = 192
|
||||
const defaultWidth = defaultHeight * 0.8
|
||||
expect(width).to.be.closeTo(defaultWidth, 0.01)
|
||||
expect(height).to.be.closeTo(defaultHeight + nameBelowHeight + py1, 0.01)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -110,11 +114,12 @@ describe('AuthorCard', () => {
|
|||
cy.get('&card').trigger('mouseleave')
|
||||
cy.get('&match').should('be.hidden')
|
||||
cy.get('&edit').should('be.hidden')
|
||||
|
||||
})
|
||||
|
||||
it('renders the component with spinner while searching', () => {
|
||||
const data = () => { return { searching: true, isHovering: false } }
|
||||
const data = () => {
|
||||
return { searching: true, isHovering: false }
|
||||
}
|
||||
cy.mount(AuthorCard, { ...mountOptions, data })
|
||||
|
||||
cy.get('&textInline').should('be.hidden')
|
||||
|
|
@ -171,7 +176,7 @@ describe('AuthorCard', () => {
|
|||
const updatedMocks = {
|
||||
...mocks,
|
||||
$axios: {
|
||||
$post: cy.stub().resolves({ updated: true, author: { name: 'John Doe', imagePath: "path/to/image" } })
|
||||
$post: cy.stub().resolves({ updated: true, author: { name: 'John Doe', imagePath: 'path/to/image' } })
|
||||
},
|
||||
$toast: {
|
||||
success: cy.stub().as('success'),
|
||||
|
|
@ -188,4 +193,4 @@ describe('AuthorCard', () => {
|
|||
cy.get('@error').should('not.have.been.called')
|
||||
cy.get('@info').should('not.have.been.called')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
85
client/cypress/tests/components/cards/ItemSlider.cy.js
Normal file
85
client/cypress/tests/components/cards/ItemSlider.cy.js
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import ItemSlider from '@/components/widgets/ItemSlider.vue'
|
||||
import NarratorCard from '@/components/cards/NarratorCard.vue'
|
||||
import AuthorCard from '@/components/cards/AuthorCard.vue'
|
||||
|
||||
function createMountOptions(shelftype) {
|
||||
const items = {
|
||||
narrators: [
|
||||
{ name: 'John Doe', numBooks: 5 },
|
||||
{ name: 'Jane Doe', numBooks: 3 },
|
||||
{ name: 'Jack Doe', numBooks: 1 },
|
||||
{ name: 'Jill Doe', numBooks: 7 }
|
||||
],
|
||||
authors: [
|
||||
{ id: 1, name: 'John Doe', numBooks: 5 },
|
||||
{ id: 2, name: 'Jane Doe', numBooks: 3 },
|
||||
{ id: 3, name: 'Jack Doe', numBooks: 1 },
|
||||
{ id: 4, name: 'Jill Doe', numBooks: 7 }
|
||||
]
|
||||
}
|
||||
const propsData = {
|
||||
items: items[shelftype],
|
||||
shelfId: 'shelf-123',
|
||||
type: shelftype
|
||||
}
|
||||
const stubs = {
|
||||
'cards-narrator-card': NarratorCard,
|
||||
'cards-author-card': AuthorCard
|
||||
}
|
||||
const mocks = {
|
||||
$store: {
|
||||
getters: {
|
||||
'user/getUserCanUpdate': true,
|
||||
'user/getSizeMultiplier': 1,
|
||||
'globals/getIsBatchSelectingMediaItems': false
|
||||
},
|
||||
state: {
|
||||
libraries: {
|
||||
currentLibraryId: 'library-123'
|
||||
}
|
||||
}
|
||||
},
|
||||
$eventBus: {
|
||||
$on: () => {},
|
||||
$off: () => {}
|
||||
}
|
||||
}
|
||||
const slots = {
|
||||
default: `<p class="font-semibold text-gray-100">${shelftype}</p>`
|
||||
}
|
||||
|
||||
return { propsData, stubs, mocks, slots }
|
||||
}
|
||||
|
||||
describe('ItemSlider', () => {
|
||||
let mountOptions = null
|
||||
|
||||
beforeEach(() => {})
|
||||
|
||||
it('renders a narrators slider', () => {
|
||||
mountOptions = createMountOptions('narrators')
|
||||
cy.mount(ItemSlider, mountOptions)
|
||||
|
||||
cy.get('&item').should('have.length', 4)
|
||||
cy.get('&leftScrollButton').should('be.visible').and('not.have.class', 'text-gray-300')
|
||||
cy.get('&rightScrollButton').should('be.visible').and('have.class', 'text-gray-300')
|
||||
})
|
||||
|
||||
it('renders an authors slider', () => {
|
||||
mountOptions = createMountOptions('authors')
|
||||
cy.mount(ItemSlider, mountOptions)
|
||||
|
||||
cy.get('&item').should('have.length', 4)
|
||||
cy.get('&leftScrollButton').should('be.visible').and('not.have.class', 'text-gray-300')
|
||||
cy.get('&rightScrollButton').should('be.visible').and('have.class', 'text-gray-300')
|
||||
})
|
||||
|
||||
it('hides the scroll button when all items are visible', () => {
|
||||
mountOptions = createMountOptions('narrators')
|
||||
mountOptions.propsData.items = mountOptions.propsData.items.slice(0, 2)
|
||||
cy.mount(ItemSlider, mountOptions)
|
||||
|
||||
cy.get('&leftScrollButton').should('not.exist')
|
||||
cy.get('&rightScrollButton').should('not.exist')
|
||||
})
|
||||
})
|
||||
|
|
@ -7,61 +7,21 @@ import { Constants } from '@/plugins/constants'
|
|||
function createMountOptions() {
|
||||
const book = {
|
||||
id: '1',
|
||||
ino: '281474976785140',
|
||||
libraryId: 'library-123',
|
||||
folderId: 'folder-123',
|
||||
path: '/path/to/book',
|
||||
relPath: 'book',
|
||||
isFile: false,
|
||||
mtimeMs: 1689017292016,
|
||||
ctimeMs: 1689017292016,
|
||||
birthtimeMs: 1689017281555,
|
||||
addedAt: 1700154928492,
|
||||
updatedAt: 1713300533345,
|
||||
isMissing: false,
|
||||
isInvalid: false,
|
||||
mediaType: 'book',
|
||||
media: {
|
||||
id: 'book1',
|
||||
metadata: {
|
||||
title: 'The Fellowship of the Ring',
|
||||
titleIgnorePrefix: 'Fellowship of the Ring',
|
||||
subtitle: 'LOTR, Book 1',
|
||||
authorName: 'J. R. R. Tolkien',
|
||||
authorNameLF: 'Tolkien, J. R. R.',
|
||||
narratorName: 'Andy Sirkis',
|
||||
genres: ['Science Fiction & Fantasy'],
|
||||
publishedYear: '2017',
|
||||
publishedDate: null,
|
||||
publisher: 'Book Publisher',
|
||||
description: 'Book Description',
|
||||
isbn: null,
|
||||
asin: 'B075LXMLNV',
|
||||
language: 'English',
|
||||
explicit: false,
|
||||
abridged: false
|
||||
},
|
||||
coverPath: null,
|
||||
tags: ['Fantasy', 'Adventure'],
|
||||
numTracks: 1,
|
||||
numAudioFiles: 1,
|
||||
numChapters: 31,
|
||||
duration: 64410,
|
||||
size: 511206878
|
||||
},
|
||||
numFiles: 4,
|
||||
size: 511279587
|
||||
metadata: { title: 'The Fellowship of the Ring', titleIgnorePrefix: 'Fellowship of the Ring', authorName: 'J. R. R. Tolkien' },
|
||||
numTracks: 1
|
||||
}
|
||||
}
|
||||
|
||||
const propsData = {
|
||||
index: 0,
|
||||
bookMount: book,
|
||||
bookCoverAspectRatio: 1,
|
||||
bookshelfView: Constants.BookshelfView.DETAIL,
|
||||
continueListeningShelf: false,
|
||||
filterBy: null,
|
||||
width: 192,
|
||||
height: 192,
|
||||
sortingIgnorePrefix: false,
|
||||
orderBy: null
|
||||
}
|
||||
|
|
@ -84,7 +44,9 @@ function createMountOptions() {
|
|||
'user/getUserCanDownload': true,
|
||||
'user/getIsAdminOrUp': true,
|
||||
'user/getUserMediaProgress': (id) => null,
|
||||
'user/getSizeMultiplier': 1,
|
||||
'libraries/getLibraryProvider': () => 'audible.us',
|
||||
'libraries/getBookCoverAspectRatio': 1,
|
||||
'globals/getLibraryItemCoverSrc': () => 'https://my.server.com/book_placeholder.jpg',
|
||||
getLibraryItemsStreaming: () => null,
|
||||
getIsMediaQueued: () => false,
|
||||
|
|
@ -109,16 +71,6 @@ describe('LazyBookCard', () => {
|
|||
let mountOptions = null
|
||||
beforeEach(() => {
|
||||
mountOptions = createMountOptions()
|
||||
// cy.intercept(
|
||||
// 'https://my.server.com/**/*',
|
||||
// { middleware: true },
|
||||
// (req) => {
|
||||
// req.on('before:response', (res) => {
|
||||
// // force all API responses to not be cached
|
||||
// res.headers['cache-control'] = 'no-store'
|
||||
// })
|
||||
// }
|
||||
// )
|
||||
})
|
||||
|
||||
before(() => {
|
||||
|
|
@ -174,11 +126,14 @@ describe('LazyBookCard', () => {
|
|||
// the detailBottom element, currently rendered outside the card's area,
|
||||
// and requires complex layout calculations outside of the component.
|
||||
// todo: fix the component to render the detailBottom element inside the card's area
|
||||
cy.get('#book-card-0').should(($el) => {
|
||||
cy.get('#cover-area-0').should(($el) => {
|
||||
const width = $el.width()
|
||||
const height = $el.height()
|
||||
expect(width).to.be.closeTo(mountOptions.propsData.width, 0.01)
|
||||
expect(height).to.be.closeTo(mountOptions.propsData.height, 0.01)
|
||||
const defaultHeight = 192
|
||||
const defaultWidth = defaultHeight
|
||||
|
||||
expect(width).to.be.closeTo(defaultWidth, 0.01)
|
||||
expect(height).to.be.closeTo(defaultHeight, 0.01)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -201,6 +156,7 @@ describe('LazyBookCard', () => {
|
|||
cy.mount(LazyBookCard, mountOptions)
|
||||
cy.get('#book-card-0').click()
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('@routerPush').should('have.been.calledOnceWithExactly', '/item/1')
|
||||
})
|
||||
|
||||
|
|
@ -215,6 +171,7 @@ describe('LazyBookCard', () => {
|
|||
mountOptions.mocks.$store.getters['globals/getLibraryItemCoverSrc'] = () => 'https://my.server.com/cover1.jpg'
|
||||
cy.mount(LazyBookCard, mountOptions)
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&coverBg').should('be.visible')
|
||||
cy.get('&coverImage').should('have.class', 'object-contain')
|
||||
})
|
||||
|
|
@ -223,6 +180,7 @@ describe('LazyBookCard', () => {
|
|||
mountOptions.mocks.$store.getters['globals/getLibraryItemCoverSrc'] = () => 'https://my.server.com/cover2.jpg'
|
||||
cy.mount(LazyBookCard, mountOptions)
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&coverBg').should('be.hidden')
|
||||
cy.get('&coverImage').should('have.class', 'object-fill')
|
||||
})
|
||||
|
|
@ -235,6 +193,7 @@ describe('LazyBookCard', () => {
|
|||
mountOptions.propsData.bookMount.media.coverPath = 'cover1.jpg'
|
||||
cy.mount(LazyBookCard, mountOptions)
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&placeholderTitle').should('not.exist')
|
||||
cy.get('&placeholderAuthor').should('not.exist')
|
||||
})
|
||||
|
|
@ -243,6 +202,7 @@ describe('LazyBookCard', () => {
|
|||
mountOptions.propsData.bookshelfView = Constants.BookshelfView.STANDARD
|
||||
cy.mount(LazyBookCard, mountOptions)
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&detailBottom').should('not.exist')
|
||||
})
|
||||
|
||||
|
|
@ -250,6 +210,7 @@ describe('LazyBookCard', () => {
|
|||
mountOptions.propsData.bookMount.media.metadata.explicit = true
|
||||
cy.mount(LazyBookCard, mountOptions)
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&explicitIndicator').should('be.visible')
|
||||
})
|
||||
|
||||
|
|
@ -267,6 +228,7 @@ describe('LazyBookCard', () => {
|
|||
it('shows the collpased series', () => {
|
||||
cy.mount(LazyBookCard, mountOptions)
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&seriesSequenceList').should('not.exist')
|
||||
cy.get('&booksInSeries').should('be.visible').and('have.text', '3')
|
||||
cy.get('&title').should('be.visible').and('have.text', 'The Lord of the Rings')
|
||||
|
|
@ -283,6 +245,7 @@ describe('LazyBookCard', () => {
|
|||
cy.mount(LazyBookCard, mountOptions)
|
||||
cy.get('#book-card-0').trigger('mouseover')
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&seriesNameOverlay').should('be.visible').and('have.text', 'Middle Earth Chronicles')
|
||||
})
|
||||
|
||||
|
|
@ -290,6 +253,7 @@ describe('LazyBookCard', () => {
|
|||
mountOptions.propsData.bookMount.collapsedSeries.seriesSequenceList = '1-3'
|
||||
cy.mount(LazyBookCard, mountOptions)
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&seriesSequenceList').should('be.visible').and('have.text', '#1-3')
|
||||
cy.get('&booksInSeries').should('not.exist')
|
||||
})
|
||||
|
|
@ -299,6 +263,7 @@ describe('LazyBookCard', () => {
|
|||
cy.mount(LazyBookCard, mountOptions)
|
||||
cy.get('#book-card-0').click()
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('@routerPush').should('have.been.calledOnceWithExactly', '/library/library-123/series/series-123')
|
||||
})
|
||||
|
||||
|
|
@ -315,12 +280,15 @@ describe('LazyBookCard', () => {
|
|||
}
|
||||
cy.mount(LazyBookCard, mountOptions)
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&progressBar')
|
||||
.should('be.visible')
|
||||
.and('have.class', 'bg-yellow-400')
|
||||
.and(($el) => {
|
||||
const width = $el.width()
|
||||
expect(width).to.be.closeTo(((1 + 0.5) / 3) * mountOptions.propsData.width, 0.01)
|
||||
const defaultHeight = 192
|
||||
const defaultWidth = defaultHeight
|
||||
expect(width).to.be.closeTo(((1 + 0.5) / 3) * defaultWidth, 0.01)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -330,12 +298,15 @@ describe('LazyBookCard', () => {
|
|||
}
|
||||
cy.mount(LazyBookCard, mountOptions)
|
||||
|
||||
cy.get('&titleImageNotReady').should('be.hidden')
|
||||
cy.get('&progressBar')
|
||||
.should('be.visible')
|
||||
.and('have.class', 'bg-success')
|
||||
.and(($el) => {
|
||||
const width = $el.width()
|
||||
expect(width).to.be.equal(mountOptions.propsData.width)
|
||||
const defaultHeight = 192
|
||||
const defaultWidth = defaultHeight
|
||||
expect(width).to.be.equal(defaultWidth)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -18,10 +18,6 @@ describe('LazySeriesCard', () => {
|
|||
|
||||
const propsData = {
|
||||
index: 0,
|
||||
width: 192 * 2,
|
||||
height: 192,
|
||||
sizeMultiplier: 1,
|
||||
bookCoverAspectRatio: 1,
|
||||
bookshelfView: 1,
|
||||
isCategorized: false,
|
||||
seriesMount: series,
|
||||
|
|
@ -38,6 +34,8 @@ describe('LazySeriesCard', () => {
|
|||
getters: {
|
||||
'user/getUserCanUpdate': true,
|
||||
'user/getUserMediaProgress': (id) => null,
|
||||
'user/getSizeMultiplier': 1,
|
||||
'libraries/getBookCoverAspectRatio': 1,
|
||||
'libraries/getLibraryProvider': () => 'audible.us',
|
||||
'globals/getLibraryItemCoverSrc': () => 'https://my.server.com/book_placeholder.jpg'
|
||||
},
|
||||
|
|
@ -62,11 +60,13 @@ describe('LazySeriesCard', () => {
|
|||
it('renders the component', () => {
|
||||
cy.mount(LazySeriesCard, { propsData, stubs, mocks })
|
||||
|
||||
cy.get('&card').should(($el) => {
|
||||
cy.get('&covers-area').should(($el) => {
|
||||
const width = $el.width()
|
||||
const height = $el.height()
|
||||
expect(width).to.be.closeTo(propsData.width, 0.01)
|
||||
expect(height).to.be.closeTo(propsData.height, 0.01)
|
||||
const defailtHeight = 192
|
||||
const defaultWidth = defailtHeight * 2
|
||||
expect(width).to.be.closeTo(defaultWidth, 0.01)
|
||||
expect(height).to.be.closeTo(defailtHeight, 0.01)
|
||||
})
|
||||
cy.get('&seriesLengthMarker').should('be.visible').and('have.text', propsData.seriesMount.books.length)
|
||||
cy.get('&seriesProgressBar').should('not.exist')
|
||||
|
|
@ -126,7 +126,9 @@ describe('LazySeriesCard', () => {
|
|||
.and('have.class', 'bg-yellow-400')
|
||||
.and(($el) => {
|
||||
const width = $el.width()
|
||||
expect(width).to.be.closeTo(((1 + 0.5) / 3) * propsData.width, 0.01)
|
||||
const defailtHeight = 192
|
||||
const defaultWidth = defailtHeight * 2
|
||||
expect(width).to.be.closeTo(((1 + 0.5) / 3) * defaultWidth, 0.01)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -150,7 +152,9 @@ describe('LazySeriesCard', () => {
|
|||
.and('have.class', 'bg-success')
|
||||
.and(($el) => {
|
||||
const width = $el.width()
|
||||
expect(width).to.equal(propsData.width)
|
||||
const defailtHeight = 192
|
||||
const defaultWidth = defailtHeight * 2
|
||||
expect(width).to.equal(defaultWidth)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -6,15 +6,13 @@ describe('<NarratorCard />', () => {
|
|||
numBooks: 5
|
||||
}
|
||||
const propsData = {
|
||||
narrator,
|
||||
width: 200,
|
||||
height: 150,
|
||||
sizeMultiplier: 1.2
|
||||
narrator
|
||||
}
|
||||
const mocks = {
|
||||
$store: {
|
||||
getters: {
|
||||
'user/getUserCanUpdate': true
|
||||
'user/getUserCanUpdate': true,
|
||||
'user/getSizeMultiplier': 1
|
||||
},
|
||||
state: {
|
||||
libraries: {
|
||||
|
|
@ -46,7 +44,7 @@ describe('<NarratorCard />', () => {
|
|||
})
|
||||
|
||||
it('renders 1 book correctly', () => {
|
||||
let propsData = { narrator: { name: 'John Doe', numBooks: 1 }, width: 200, height: 150, sizeMultiplier: 1.2 }
|
||||
let propsData = { narrator: { name: 'John Doe', numBooks: 1 }, width: 200, height: 150 }
|
||||
let mountOptions = { propsData, mocks }
|
||||
cy.mount(NarratorCard, mountOptions)
|
||||
|
||||
|
|
@ -54,7 +52,7 @@ describe('<NarratorCard />', () => {
|
|||
})
|
||||
|
||||
it('renders the default name and num-books when narrator is not provided', () => {
|
||||
let propsData = { width: 200, height: 150, sizeMultiplier: 1.2 }
|
||||
let propsData = { width: 200, height: 150 }
|
||||
let mountOptions = { propsData, mocks }
|
||||
cy.mount(NarratorCard, mountOptions)
|
||||
cy.get('&name').should('have.text', '')
|
||||
|
|
@ -64,12 +62,12 @@ describe('<NarratorCard />', () => {
|
|||
it('has the correct width and height', () => {
|
||||
let mountOptions = { propsData, mocks }
|
||||
cy.mount(NarratorCard, mountOptions)
|
||||
cy.get('&card').should('have.css', 'width', '200px')
|
||||
cy.get('&card').should('have.css', 'height', '150px')
|
||||
cy.get('&card').should('have.css', 'width', '150px')
|
||||
cy.get('&card').should('have.css', 'height', '100px')
|
||||
})
|
||||
|
||||
it('has the correct width and height when not provided', () => {
|
||||
let propsData = { narrator, sizeMultiplier: 1.2 }
|
||||
let propsData = { narrator }
|
||||
let mountOptions = { propsData, mocks }
|
||||
cy.mount(NarratorCard, mountOptions)
|
||||
cy.get('&card').should('have.css', 'width', '150px')
|
||||
|
|
@ -79,7 +77,8 @@ describe('<NarratorCard />', () => {
|
|||
it('has the correct font sizes', () => {
|
||||
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
|
||||
const defaultFontSize = 16
|
||||
cy.get('&name').should('have.css', 'font-size', `${0.75 * defaultFontSize}px`)
|
||||
cy.get('&numBooks').should('have.css', 'font-size', `${0.65 * defaultFontSize}px`)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue