forked from advplyr/audiobookshelf
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add NarratorCard and AuthorCard component tests
- Loading branch information
Showing
4 changed files
with
300 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| // Import the necessary dependencies | ||
| import AuthorCard from './AuthorCard.vue' | ||
| import AuthorImage from '../covers/AuthorImage.vue' | ||
| import Tooltip from '../ui/Tooltip.vue' | ||
| import LoadingSpinner from '../widgets/LoadingSpinner.vue' | ||
|
|
||
| describe('AuthorCard', () => { | ||
| const author = { | ||
| id: 1, | ||
| name: 'John Doe', | ||
| numBooks: 5 | ||
| } | ||
|
|
||
| const propsData = { | ||
| author, | ||
| width: 192 * 0.8, | ||
| height: 192, | ||
| sizeMultiplier: 1, | ||
| nameBelow: false | ||
| } | ||
|
|
||
| const mocks = { | ||
| $strings: { | ||
| LabelBooks: 'Books', | ||
| ButtonQuickMatch: 'Quick Match' | ||
| }, | ||
| $store : { | ||
| getters: { | ||
| 'user/getUserCanUpdate': true, | ||
| 'libraries/getLibraryProvider': () => 'audible.us' | ||
| }, | ||
| state: { | ||
| libraries: { | ||
| currentLibraryId: 'library-123' | ||
| } | ||
| } | ||
| }, | ||
| $eventBus: { | ||
| $on: () => {}, | ||
| $off: () => {}, | ||
| }, | ||
| } | ||
|
|
||
| const stubs = { | ||
| 'covers-author-image': AuthorImage, | ||
| 'ui-tooltip': Tooltip, | ||
| 'widgets-loading-spinner': LoadingSpinner | ||
| } | ||
|
|
||
| const mountOptions = { propsData, mocks, stubs } | ||
|
|
||
| it('renders the component', () => { | ||
| cy.mount(AuthorCard, mountOptions) | ||
|
|
||
| cy.get('#textInline').should('be.visible') | ||
| cy.get('#match').should('be.hidden') | ||
| cy.get('#edit').should('be.hidden') | ||
| cy.get('#nameBelow').should('be.hidden') | ||
| 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) | ||
| }) | ||
| }) | ||
|
|
||
| it('renders the component with the author name below', () => { | ||
| const updatedPropsData = { ...propsData, nameBelow: true } | ||
| cy.mount(AuthorCard, { ...mountOptions, propsData: updatedPropsData } ) | ||
|
|
||
| cy.get('#textInline').should('be.hidden') | ||
| cy.get('#match').should('be.hidden') | ||
| cy.get('#edit').should('be.hidden') | ||
| let nameBelowHeight | ||
| cy.get('#nameBelow') | ||
| .should('be.visible') | ||
| .and('have.text', 'John Doe') | ||
| .and(($el) => { | ||
| const height = $el.height() | ||
| const width = $el.width() | ||
| const sizeMultiplier = propsData.sizeMultiplier | ||
| const defaultFontSize = 16 | ||
| const defaultLineHeight = 1.5 | ||
| const fontSizeMultiplier = 0.75 | ||
| const px2 = 16 | ||
| expect(height).to.be.closeTo(defaultFontSize * fontSizeMultiplier * sizeMultiplier * defaultLineHeight, 0.01) | ||
| nameBelowHeight = height | ||
| expect(width).to.be.closeTo(propsData.width - 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) | ||
| }) | ||
|
|
||
| }) | ||
|
|
||
| it('renders quick-match and edit buttons on mouse hover', () => { | ||
| cy.mount(AuthorCard, mountOptions ) | ||
|
|
||
| // before mouseover | ||
| cy.get('#match').should('be.hidden') | ||
| cy.get('#edit').should('be.hidden') | ||
| // after mouseover | ||
| cy.get('#card').trigger('mouseover') | ||
| cy.get('#match').should('be.visible') | ||
| cy.get('#edit').should('be.visible') | ||
| // after mouseleave | ||
| 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 } } | ||
| cy.mount(AuthorCard, { ...mountOptions, data } ) | ||
|
|
||
| cy.get('#textInline').should('be.hidden') | ||
| cy.get('#match').should('be.hidden') | ||
| cy.get('#edit').should('be.hidden') | ||
| cy.get('#spinner').should('be.visible') | ||
| }) | ||
|
|
||
| it ('toasts after quick match with no updates', () => { | ||
| const updatedMocks = { | ||
| ...mocks, | ||
| $axios: { | ||
| $post: cy.stub().resolves({ updated: false, author: { name: 'John Doe' } }) | ||
| }, | ||
| $toast: { | ||
| success: cy.spy().as('success'), | ||
| error: cy.spy().as('error'), | ||
| info: cy.spy().as('info') | ||
| } | ||
| } | ||
| cy.mount(AuthorCard, { ...mountOptions, mocks: updatedMocks } ) | ||
| cy.get('#card').trigger('mouseover') | ||
| cy.get('#match').click() | ||
|
|
||
| cy.get("#spinner").should('be.hidden') | ||
| cy.get('@success').should('not.have.been.called') | ||
| cy.get('@error').should('not.have.been.called') | ||
| cy.get('@info').should('have.been.called') | ||
| }) | ||
|
|
||
| it ('toasts after quick match with updates and no image', () => { | ||
| const updatedMocks = { | ||
| ...mocks, | ||
| $axios: { | ||
| $post: cy.stub().resolves({ updated: true, author: { name: 'John Doe' } }) | ||
| }, | ||
| $toast: { | ||
| success: cy.stub().withArgs('Author John Doe was updated (no image found)').as('success'), | ||
| error: cy.spy().as('error'), | ||
| info: cy.spy().as('info') | ||
| } | ||
| } | ||
| cy.mount(AuthorCard, { ...mountOptions, mocks: updatedMocks } ) | ||
| cy.get('#card').trigger('mouseover') | ||
| cy.get('#match').click() | ||
|
|
||
| cy.get("#spinner").should('be.hidden') | ||
| cy.get('@success').should('have.been.called') | ||
| cy.get('@error').should('not.have.been.called') | ||
| cy.get('@info').should('not.have.been.called') | ||
| }) | ||
|
|
||
| it ('toasts after quick match with updates including image', () => { | ||
| const updatedMocks = { | ||
| ...mocks, | ||
| $axios: { | ||
| $post: cy.stub().resolves({ updated: true, author: { name: 'John Doe', imagePath: "path/to/image" } }) | ||
| }, | ||
| $toast: { | ||
| success: cy.stub().withArgs('Author John Doe was updated').as('success'), | ||
| error: cy.spy().as('error'), | ||
| info: cy.spy().as('info') | ||
| } | ||
| } | ||
| cy.mount(AuthorCard, { ...mountOptions, mocks: updatedMocks } ) | ||
| cy.get('#card').trigger('mouseover') | ||
| cy.get('#match').click() | ||
|
|
||
| cy.get("#spinner").should('be.hidden') | ||
| cy.get('@success').should('have.been.called') | ||
| cy.get('@error').should('not.have.been.called') | ||
| cy.get('@info').should('not.have.been.called') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import NarratorCard from './NarratorCard.vue' | ||
|
|
||
| describe('<NarratorCard />', () => { | ||
| const narrator = { | ||
| name: 'John Doe', | ||
| numBooks: 5 | ||
| } | ||
| const propsData = { | ||
| narrator, | ||
| width: 200, | ||
| height: 150, | ||
| sizeMultiplier: 1.2 | ||
| } | ||
| const mocks = { | ||
| $store: { | ||
| getters: { | ||
| 'user/getUserCanUpdate': true | ||
| }, | ||
| state: { | ||
| libraries: { | ||
| currentLibraryId: 'library-123' | ||
| } | ||
| } | ||
| }, | ||
| $encode: (value) => value | ||
| } | ||
|
|
||
| it('renders the component', () => { | ||
| let mountOptions = { propsData, mocks } | ||
| // see: https://on.cypress.io/mounting-vue | ||
| cy.mount(NarratorCard, mountOptions) | ||
| }) | ||
|
|
||
| it('renders the narrator name correctly', () => { | ||
| let mountOptions = { propsData, mocks } | ||
| cy.mount(NarratorCard, mountOptions) | ||
|
|
||
| cy.get('#name').should('have.text', 'John Doe') | ||
| }) | ||
|
|
||
| it('renders the number of books correctly', () => { | ||
| let mountOptions = { propsData, mocks } | ||
| cy.mount(NarratorCard, mountOptions) | ||
|
|
||
| cy.get('#numbooks').should('have.text', '5 Books') | ||
| }) | ||
|
|
||
| it('renders 1 book correctly', () => { | ||
| let propsData = { narrator: { name: 'John Doe', numBooks: 1 }, width: 200, height: 150, sizeMultiplier: 1.2 } | ||
| let mountOptions = { propsData, mocks } | ||
| cy.mount(NarratorCard, mountOptions) | ||
|
|
||
| cy.get('#numbooks').should('have.text', '1 Book') | ||
|
|
||
| }) | ||
|
|
||
| it('renders the default name and num-books when narrator is not provided', () => { | ||
| let propsData = { width: 200, height: 150, sizeMultiplier: 1.2 } | ||
| let mountOptions = { propsData, mocks } | ||
| cy.mount(NarratorCard, mountOptions) | ||
| cy.get('#name').should('have.text', '') | ||
| cy.get('#numbooks').should('have.text', '0 Books') | ||
| }) | ||
|
|
||
| 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') | ||
| }) | ||
|
|
||
| it('has the correct width and height when not provided', () => { | ||
| let propsData = { narrator, sizeMultiplier: 1.2 } | ||
| let mountOptions = { propsData, mocks } | ||
| cy.mount(NarratorCard, mountOptions) | ||
| cy.get('#card').should('have.css', 'width', '150px') | ||
| cy.get('#card').should('have.css', 'height', '100px') | ||
| }) | ||
|
|
||
| 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 | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters