starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[PR #2853] [MERGED] Add client component testing framework and tests #3816

New Issue
Closed
opened 2026-04-25 00:17:10 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:17:10 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/2853
Author: @mikiher
Created: 4/16/2024
Status: ✅ Merged
Merged: 5/1/2024
Merged by: @advplyr

Base: master ← Head: nuxt-unit-tests

📝 Commits (10+)

  • 303ef6b Add Cypress to dev dependencies
  • f597798 Add Cypress config and support files
  • d638a32 Add cypress npm scripts
  • 9e1c907 Add NarratorCard and AuthorCard component tests
  • a49c5af Fix a couple of stub assertions in AuthorCard.cy.js
  • 9b332f0 make $constants, $strings, and utility functions avaiable to Cypress mounted componenets
  • e5babab Add tests for LazySeriesCard.vue
  • 129da51 Add tailwind.compiled.css to .gitignore
  • 0498d8c Get book placeholder image from fixture rather than from server
  • 8dbe35e Use absolute positioning for the card element

📊 Changes

15 files changed (+1702 additions, -34 deletions)

View changed files

📝 .gitignore (+1 -0)
📝 client/components/cards/AuthorCard.vue (+10 -10)
📝 client/components/cards/LazySeriesCard.vue (+10 -10)
📝 client/components/cards/NarratorCard.vue (+12 -6)
➕ client/cypress.config.js (+11 -0)
➕ client/cypress/fixtures/images/book_placeholder.jpg (+0 -0)
➕ client/cypress/support/commands.js (+31 -0)
➕ client/cypress/support/component-index.html (+13 -0)
➕ client/cypress/support/component.js (+38 -0)
➕ client/cypress/tests/components/cards/AuthorCard.cy.js (+191 -0)
➕ client/cypress/tests/components/cards/LazySeriesCard.cy.js (+216 -0)
➕ client/cypress/tests/components/cards/NarratorCard.cy.js (+85 -0)
📝 client/nuxt.config.js (+2 -0)
📝 client/package-lock.json (+1077 -7)
📝 client/package.json (+5 -1)

📄 Description

I took a stab at adding client component testing.

My goals were, roughly:

  1. to be able to write single component tests easily (like unit tests on the server)
  2. to be able to run the tests easily and quickly (like unit tests on the server)
  3. to not have to work hard at setting up the test environment

I tried a few options. I must say that in most options I tried, it has been quite difficult to even reach something that actually works in our current Nuxt2+Vue2 environment.

I eventually settled on Cypress (which was already tried in #2240), but taking a very different approach from that PR, which tried to introduce complex e2e test scenarios. The reasons for picking Cypress, in a nutshell, were:

  • Cypress supports Nuxt2+Vue2 component testing out-of-the-box (though support is claimed to be alpha, it works quite well). It's really the only framework that does that.
  • It is based on mocha, chai, and sinon, like our server unit tests.
  • It provides easy, useful, and readable API for testing, which
    • lets you mount a component in isolation
    • allows for querying and taking actions on the mounted component DOM structure
    • has all the richness of chai, chai-sinon, and chai-jquery assertions
  • As opposed to most other testing frameworks, it runs tests inside a browser (other framworks run tests on a browser-less DOM, like jsdom).
    • This allows testing for things like layout, which aren't supported in jsdom.
    • It also allows for visual testing (actually seeing the components and how various properties and actions modify them), which is a really nice feature.

Obviously, there are also some caveats:

  • Nuxt2 support is still in alpha, although it seems already quite stable
  • Support for Nuxt-specific behaviours is still quite minimal. For example:
    • It doesn't recognize Nuxt-specific components like nuxt-link
    • It doesn't support Nuxt's auto-import feature for components, so you need to work-around this
    • It doesn't automatically load Nuxt plugins (and so you need to stub things like $store, $toast, $axios, etc, but these are things that probably makes sense to mock in component tests anyway)

But, all-in-all, I think it's a quite reasonable testing framework for component-testing (and, as I mentioned above, really the only working one).

In this PR:

  • I added Cypress to the dev dependencies in the client package.json
  • I added the required Cypress configuration and support files
  • I wrote tests for a couple of components:
    • NarratorCard.vue
    • AuthorCard.vue
  • I added some npm scripts on the client:
    • npm test - runs the tests (command-line, suitable for Github Actions)
    • npm run test-visually - opens and runs the tests on Chrome (very nice! try it out)

Please let me know what you think.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/2853 **Author:** [@mikiher](https://github.com/mikiher) **Created:** 4/16/2024 **Status:** ✅ Merged **Merged:** 5/1/2024 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `nuxt-unit-tests` --- ### 📝 Commits (10+) - [`303ef6b`](https://github.com/advplyr/audiobookshelf/commit/303ef6b7c52302ffeffcfa4642f2329862c46edd) Add Cypress to dev dependencies - [`f597798`](https://github.com/advplyr/audiobookshelf/commit/f5977988398dacdd021cbd8c549ccdc781aa24c3) Add Cypress config and support files - [`d638a32`](https://github.com/advplyr/audiobookshelf/commit/d638a328d8e5ef0d0576582cd96a8da2917b7c63) Add cypress npm scripts - [`9e1c907`](https://github.com/advplyr/audiobookshelf/commit/9e1c907591d9c7292b8f6208351275541fc0e49f) Add NarratorCard and AuthorCard component tests - [`a49c5af`](https://github.com/advplyr/audiobookshelf/commit/a49c5afa46505a16a41c61e2a57ff5192600259c) Fix a couple of stub assertions in AuthorCard.cy.js - [`9b332f0`](https://github.com/advplyr/audiobookshelf/commit/9b332f0e6644f65679fa74c745155df4fcc3448d) make $constants, $strings, and utility functions avaiable to Cypress mounted componenets - [`e5babab`](https://github.com/advplyr/audiobookshelf/commit/e5bababeaebdf347a85fc8a8c0f0282c18ae82a4) Add tests for LazySeriesCard.vue - [`129da51`](https://github.com/advplyr/audiobookshelf/commit/129da51f762b4bcb0b219d59dbb2e2170894eaaa) Add tailwind.compiled.css to .gitignore - [`0498d8c`](https://github.com/advplyr/audiobookshelf/commit/0498d8cb832e9abcff09655cac016c40a547cd58) Get book placeholder image from fixture rather than from server - [`8dbe35e`](https://github.com/advplyr/audiobookshelf/commit/8dbe35e5aa58edda941b8c7135feae811fe92e98) Use absolute positioning for the card element ### 📊 Changes **15 files changed** (+1702 additions, -34 deletions) <details> <summary>View changed files</summary> 📝 `.gitignore` (+1 -0) 📝 `client/components/cards/AuthorCard.vue` (+10 -10) 📝 `client/components/cards/LazySeriesCard.vue` (+10 -10) 📝 `client/components/cards/NarratorCard.vue` (+12 -6) ➕ `client/cypress.config.js` (+11 -0) ➕ `client/cypress/fixtures/images/book_placeholder.jpg` (+0 -0) ➕ `client/cypress/support/commands.js` (+31 -0) ➕ `client/cypress/support/component-index.html` (+13 -0) ➕ `client/cypress/support/component.js` (+38 -0) ➕ `client/cypress/tests/components/cards/AuthorCard.cy.js` (+191 -0) ➕ `client/cypress/tests/components/cards/LazySeriesCard.cy.js` (+216 -0) ➕ `client/cypress/tests/components/cards/NarratorCard.cy.js` (+85 -0) 📝 `client/nuxt.config.js` (+2 -0) 📝 `client/package-lock.json` (+1077 -7) 📝 `client/package.json` (+5 -1) </details> ### 📄 Description I took a stab at adding client component testing. My goals were, roughly: 1. to be able to write single component tests easily (like unit tests on the server) 2. to be able to run the tests easily and quickly (like unit tests on the server) 3. to not have to work hard at setting up the test environment I tried a few options. I must say that in most options I tried, it has been quite difficult to even reach something that actually works in our current Nuxt2+Vue2 environment. I eventually settled on Cypress (which was already tried in #2240), but taking a very different approach from that PR, which tried to introduce complex e2e test scenarios. The reasons for picking Cypress, in a nutshell, were: - Cypress supports Nuxt2+Vue2 component testing out-of-the-box (though support is claimed to be alpha, it works quite well). It's really the _only_ framework that does that. - It is based on mocha, chai, and sinon, like our server unit tests. - It provides easy, useful, and readable API for testing, which - lets you mount a component in isolation - allows for querying and taking actions on the mounted component DOM structure - has all the richness of chai, chai-sinon, and chai-jquery assertions - As opposed to most other testing frameworks, it runs tests _inside a browser_ (other framworks run tests on a browser-less DOM, like jsdom). - This allows testing for things like layout, which aren't supported in jsdom. - It also allows for visual testing (actually seeing the components and how various properties and actions modify them), which is a _really_ nice feature. Obviously, there are also some caveats: - Nuxt2 support is still in alpha, although it seems already quite stable - Support for Nuxt-specific behaviours is still quite minimal. For example: - It doesn't recognize Nuxt-specific components like nuxt-link - It doesn't support Nuxt's auto-import feature for components, so you need to work-around this - It doesn't automatically load Nuxt plugins (and so you need to stub things like $store, $toast, $axios, etc, but these are things that probably makes sense to mock in component tests anyway) But, all-in-all, I think it's a quite reasonable testing framework for component-testing (and, as I mentioned above, really the only working one). In this PR: - I added Cypress to the dev dependencies in the client package.json - I added the required Cypress configuration and support files - I wrote tests for a couple of components: - NarratorCard.vue - AuthorCard.vue - I added some npm scripts on the client: - _npm test_ - runs the tests (command-line, suitable for Github Actions) - _npm run test-visually_ - opens and runs the tests on Chrome (very nice! try it out) Please let me know what you think. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:17:10 +02:00
adam closed this issue 2026-04-25 00:17:10 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#3816
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?